Add no-modal views

Author: Axel

controllers/imageControllers.js

@@ -51,7 +51,7 @@ exports.recentImages = async (req, res) => {
 }
 
 exports.imageForm = (req, res) => {
-  res.json(req.user.slug)
 }
 
 exports.upload = multer({
@@ -151,19 +151,26 @@ exports.addLike = async (req, res, next) => {
 }
 
 exports.showLikes = async (req, res) => {
-  const img = await Image.findOne( { _id: req.params.id } ).populate('likes');
 
-  const like = img.likes.map(like => {
-    return {
+  img.likes.map(like => {
+    return likes.push({
       name: like.name,
       username: like.username,
       slug: like.slug,
       gravatar: like.gravatar,
       avatar: like.avatar
-    }
   })
 
-  res.json(like)
+    res.json(likes)
+    return;
+  }
+
+  res.render('list', { title: "Likes", list: likes })
 }
 
 exports.removeQuestion = async (req, res) => {

controllers/notificationControllers.js

@@ -40,15 +40,20 @@ exports.addNotification = async (req, res) => {
 }
 
 exports.showNotifications = async (req, res) => {
-  const user = await User.findOne({ slug: req.params.user })
   const notify = user.notifications.reverse();
 
-  res.json({notify, user: req.params.user})
+    res.json(notify)
+    return;
+  }
+
+  res.render('list', { title: "Notifications", list: notify })
 }
 
 exports.clearNotifications = async (req, res) => {
   const user = await User.findOneAndUpdate(
-    { slug: req.params.user },
     { notifications: [] }
   )
   res.redirect('back')

controllers/userControllers.js

@@ -45,7 +45,7 @@ exports.updateAccount = async (req, res) => {
 }
 
 exports.showLikedImages = async (req, res) => {
-  const user = await User.findOne({ slug: req.params.user }).populate('likes')
   const images = await Image.find({ _id: { $in: user.likes } }).populate('comments')
 
   if (!images.length) {
@@ -93,35 +93,49 @@ exports.follow = async (req, res, next) => {
 }
 
 exports.showFollowers = async (req, res) => {
+  const followers = []
+
   const user = await User.findOne({ slug: req.params.user }).populate('followers')
 
-  const follower = user.followers.map(profile => {
-    return {
       name: profile.name,
       username: profile.username,
       slug: profile.slug,
       gravatar: profile.gravatar,
       avatar: profile.avatar
-    }
   })
 
-  res.json(follower)
+    res.json(followers);
+    return;
+  }
+
+  res.render('list', { title: "Followers", list: followers })
 }
 
 exports.showFollowing = async (req, res) => {
+  const following = []
+
   const user = await User.findOne({ slug: req.params.user }).populate('following')
 
-  const following = user.following.map(profile => {
-    return {
       name: profile.name,
       username: profile.username,
       slug: profile.slug,
       gravatar: profile.gravatar,
       avatar: profile.avatar
-    }
   })
 
-  res.json(following)
+    res.json(following);
+    return;
+  }
+
+  res.render('list', { title: "Following", list: following })
 }
 
 exports.saveAvatar = async (req, res) => {

public/javascript/main.js

@@ -73,6 +73,6 @@ if (notification) add(notification, 'click', showNotifications)
 /*
   ==== Upload images ====
 */
-const upload = getAll('a.upload__image')
 import uploadImage from './modules/uploadImage';
-if (upload) addEach(upload, "click", uploadImage)

public/javascript/modules/handleFollow.js

@@ -9,7 +9,7 @@ function showFollowers(e) {
   const ul = get(".contact-list", modal);
 
   e.preventDefault()
-  axios.get(this.href)
     .then(res => {
       header.innerHTML = "Followers";
       ul.innerHTML = renderModal(res.data).join(" ")
@@ -24,7 +24,7 @@ function showFollowing(e) {
   const ul = get(".contact-list", modal);
 
   e.preventDefault()
-  axios.get(this.href)
     .then(res => {
       header.innerHTML = "Following";
       ul.innerHTML = renderModal(res.data).join(" ")

public/javascript/modules/handleLikes.js

@@ -23,14 +23,14 @@ function showLikes(e) {
   const modal = get(".modal");
   const header = get(".header", modal);
   const ul = get(".contact-list", modal);
-
-  axios.get(this.href)
     .then(res => {
       header.innerHTML = "Likes";
       ul.innerHTML = renderModal(res.data).join(" ")
       showModal()
     })
-    .catch(error => console.log(error));
 }
 
 export { addLike, showLikes }

public/javascript/modules/handleNotifications.js

@@ -7,29 +7,31 @@ import { showModal } from './modal';
 const renderModal = (res) => {
   return res.map(data => {
     // Check if the avatar is an original image, a facebook cover or a gravatar
-    const checkAvatar = !data.author.avatar ?  `${data.author.gravatar}&s=30` : (data.author.avatar.includes("http") ? data.author.avatar : `/uploads/avatar/${data.author.avatar}`);
+    const { url, name } = data.image
+    const checkAvatar = avatar.includes('http') ? avatar : `/uploads/avatar/${avatar}`
 
     const time = moment(data.created).fromNow()
 
     const img = `
       <div>
-        <a href="/p/${data.image.url}" class="profile-image">
-          <img src="/uploads/gallery/${data.image.name}" alt="${data.image.name}" class="thumb-img">
         </a>
       </div>
       `
 
     return `
-      <li class="row" data-user=${data.author.username}>
-        <a href="/${data.author.slug}" class="img">
-          <img src="${checkAvatar}" alt="${data.author.username}'s avatar">
         </a>
         <div class="user-name">
-          <a href="/${data.author.slug}">${data.author.username}</a>
           <span style="color: #262626"> ${data.notify} </span>
           <span style="display: block; font-size: 12px"> <time datetime="${data.created}"> ${time} </time> </span>
         </div>
-          ${data.image.name ? img : ''}
       </li>
     `;
   })
@@ -42,21 +44,21 @@ function showNotifications(e) {
   const header = get(".header", modal);
   const ul = get(".contact-list", modal);
 
-  axios.get(this.href)
     .then(res => {
-      const { notify, user } = res.data
 
       const n = notify.length
       const notification = n === 1 ? `${n} new notification` : `${n} new notifications`
 
       const headerContent = `
         ${notification}
-        <a href="/api/${user}/notifications/clear"> clear all </a>
       `
-      header.innerHTML = !notify.length ? 'No new notifications' : headerContent;
       ul.innerHTML = renderModal(notify).join(" ")
       showModal()
-    })
 }
 
 export default showNotifications;

public/javascript/modules/modalRemove.js

@@ -27,7 +27,7 @@ function removeImage(e){
   e.preventDefault()
   const parent = this.parentNode;
 
-  axios.get(this.href)
     .then(res => renderModal.call(this, parent, `/p/${res.data}/remove-confirm`))
 }
 
@@ -36,8 +36,6 @@ function removeAvatar(e) {
   e.preventDefault()
   const parent = this.parentNode;
 
-  console.log(parent.parentNode);
-
   renderModal.call(this, parent, `/api/remove-avatar-confirm`)
 }
 

public/javascript/modules/uploadImage.js

@@ -15,33 +15,29 @@ function preUpload(event) {
   reader.readAsDataURL(image);
 }
 
-
 function uploadImage(e) {
   e.preventDefault()
 
   const modal = get(".modal");
   const content = get(".modal__content", modal);
 
-  axios.get(this.href)
-    .then(res => {
-      content.innerHTML = `
-        <div class="upload form">
-          <p class="upload__message"> Share a new image! </p>
-          <form class="form__image col" action="/api/${res.data}/upload" method="POST" enctype="multipart/form-data">
-            <label for="photo" class="upload__label col">
-              <img class="thumb">
-              <div class="icon-modal__upload"> ⬆︎ </div>
-              <input type="file" name="photo" id="photo" accept="image/png, image/jpeg" required />
-            </label>
-            <textarea name="caption" placeholder="Write a caption..." maxlength="140"></textarea>
-            <input class="button" type="submit" value="Share"/>
-          </form>
-        </div>
-      `
-      showModal()
-      const input = get('input[type="file"]', modal)
-      input.onchange = () => preUpload(event);
-    })
 
 }
 

routes.js

@@ -41,54 +41,57 @@ router.get('/edit', auth.isLoggedIn, user.showUserData);
 router.post('/edit', catchErrors(user.updateAccount));
 
 router.get('/p/:image', catchErrors(img.showImage));
-router.get('/p/:image/remove', catchErrors(img.removeQuestion));
+router.post('/p/:image/remove', catchErrors(img.removeQuestion));
 router.get('/p/:image/remove-confirm', auth.isLoggedIn, catchErrors(img.removeImage));
 
-router.get('/:user/likes', auth.isLoggedIn, catchErrors(user.showLikedImages))
 
+router.get('/:user/followers', catchErrors(user.showFollowers))
+router.get('/:user/following', catchErrors(user.showFollowing))
 
-/* API */
-router.get('/api/:user/upload', auth.isLoggedIn, img.imageForm);
-router.post('/api/:user/upload',
+router.post('/upload',
+  auth.isLoggedIn,
   img.upload,
   catchErrors(img.resize),
   catchErrors(img.saveImage)
 );
 
+/* API */
 router.post('/api/comment/:id',
   catchErrors(comment.addComment),
   catchErrors(notify.addNotification)
 );
-
 router.get('/api/comment/:id/remove', auth.isLoggedIn, catchErrors(comment.removeComment));
-router.get('/api/remove-avatar-confirm', auth.isLoggedIn, catchErrors(user.removeAvatar))
 
 router.get('/api/:user/followers', catchErrors(user.showFollowers))
 router.get('/api/:user/following', catchErrors(user.showFollowing))
-
 router.post('/api/:user/follow',
   catchErrors(user.findProfile),
   catchErrors(user.follow),
   catchErrors(notify.addNotification)
 );
 
-router.get('/api/:user/notifications/', catchErrors(notify.showNotifications));
-router.get('/api/:user/notifications/clear', catchErrors(notify.clearNotifications));
 
 router.post('/api/like/:id',
   catchErrors(img.findImg),
   catchErrors(img.addLike),
   catchErrors(notify.addNotification)
 );
 
-router.get('/api/like/:id/show', catchErrors(img.showLikes))
 
 // change avatar
 router.post('/:user',
   img.upload,
   catchErrors(img.makeAvatar),
   catchErrors(user.saveAvatar)
 );
-
 
 module.exports = router;