added icons on nav bar

Author: Leonardpepa

controlers/page.js

@@ -1,21 +1,23 @@
 const { findUserById, getAllUsers } = require("../db/user");
 const { getFriendshipByUsersId } = require("../db/friendship");
 const { getPostByUserId } = require("../db/post");
+const { getUnSeenNotificationbyUserId } = require("../db/notification");
 const pageController = {
   home: async (req, res) => {
     if (req.isAuthenticated()) {
       const user = await findUserById(req.user._id);
+      
       let posts = [];
+      
+      const notifications = await getUnSeenNotificationbyUserId(user._id);
 
       posts = [...user.posts];
-      
-      for(let i=0; i<user.friends.length; i++){
-        posts = [...posts ,...await getPostByUserId(user.friends[i])]
-      }
 
-      console.log(posts);
+      for (let i = 0; i < user.friends.length; i++) {
+        posts = [...posts, ...(await getPostByUserId(user.friends[i]))];
+      }
 
-      return  res.render("home", { user: user, posts });
+      return res.render("home", { user: user, posts, notifications });
     } else {
       return res.redirect("/login");
     }
@@ -30,6 +32,8 @@ const pageController = {
     const id = req.params.userid;
     const user = await findUserById(req.user._id);
     const profileUser = await findUserById(id);
+    
+    const notifications = await getUnSeenNotificationbyUserId(user._id);
 
     let requestFriendship = await getFriendshipByUsersId(user._id, id);
     let requestedFriendship = await getFriendshipByUsersId(id, user._id);
@@ -39,11 +43,13 @@ const pageController = {
       user,
       requestFriendship,
       requestedFriendship,
+      notifications
     });
   },
   all: async (req, res) => {
     const users = await getAllUsers(req.user._id);
-    res.render("all", { user: req.user, allUsers: users });
+    const notifications = await getUnSeenNotificationbyUserId(req.user._id);
+    res.render("all", { user: req.user, allUsers: users, notifications });
   },
 };
 

db/notification.js

@@ -1,7 +1,6 @@
 const User = require("../models/user");
 const Notification = require("../models/notification");
 
-
 const createNotification = async (author, receiverId, postId, type) => {
   switch (type) {
     case "friend-request":
@@ -18,19 +17,26 @@ const createNotification = async (author, receiverId, postId, type) => {
         receiver: receiverId,
         type,
       }).save();
-      
+
       if (!notification) {
         return null;
       }
-  
+
       const { createFriendship } = require("./friendship");
-      const friendship = await createFriendship(author, receiverId, "pending", notification._id);
-      
-      if(!friendship){
+      const friendship = await createFriendship(
+        author,
+        receiverId,
+        "pending",
+        notification._id
+      );
+
+      if (!friendship) {
         return null;
       }
 
-      await Notification.findByIdAndUpdate(notification._id, {friendship: friendship._id });
+      await Notification.findByIdAndUpdate(notification._id, {
+        friendship: friendship._id,
+      });
 
       await User.findOneAndUpdate(
         { _id: receiverId },
@@ -57,7 +63,21 @@ const deleteNotification = async (id) => {
     { _id: notification.receiver },
     { $pull: { notifications: notification._id } }
   );
-  
 };
 
-module.exports = { createNotification, deleteNotification };
+const getUnSeenNotificationbyUserId = async (id) => {
+  const notifications = await Notification.find({
+    receiver: id,
+    seen: false,
+  }).populate({ path: "author", select: ["name", "profileUrl"] });
+  if (!notifications) {
+    return [];
+  }
+  return notifications;
+};
+
+module.exports = {
+  createNotification,
+  deleteNotification,
+  getUnSeenNotificationbyUserId,
+};

views/partials/nav.ejs

@@ -19,7 +19,7 @@
             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
               <% if (user) { %>
                 <li class="nav-item">
-                  <a class="nav-link active" aria-current="page" href="/">Home</a>
+                  <a class="nav-link active" aria-current="page" href="/"><i class="fas fa-home"></i> Home</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="/profile/<%= user._id %>"
@@ -40,26 +40,33 @@
                     role="button"
                     data-bs-toggle="dropdown"
                     aria-expanded="false"
-                  >
-                    Νotifications <!-- <span class="badge bg-danger">4</span>-->
+                  ><i class="fas fa-bell"></i>
+                    Νotifications <% if (notifications.length !== 0) { %>
+                        <span class="badge bg-danger"><%= notifications.length %></span>
+                      <% } %>
                   </a>
                   <ul class="dropdown-menu p-1" aria-labelledby="navbarDropdown">
-                    <% user.notifications.forEach(notification => { %>
-                      <% if (notification && !notification.seen) { %>
+                    <% if (notifications.length === 0) { %>
+                      <li class="dropdown-item disabled">You have 0 notifications</li>
+                    <% } else {%>
+                      <% notifications.forEach(notification => { %>
                         <% if (notification.author && notification.type === "friend-request") { %>
-                          <div class="d-flex justify-content-start align-items-center">
-                            <li><a class="dropdown-item" href="/profile/<%= notification.author._id %>"><%= notification.author.name %> wants to be your friend</a></li>
-                            <button type="button" onclick="acceptFriendRequest('<%= notification.friendship %>')" class = "btn btn-outline-primary btn-sm m-1 ">  Accept</button>
-                          </div>
-                        <% } %>
-                      <% } %>
-                    <% }) %>
-                  </ul>
+                            <div class="d-flex justify-content-start align-items-center">
+                              <a href="/profile/<%= notification.author._id %>">
+                                <img style="width: 100%; height: auto; max-width: 30px; border-radius: 50%;" class="img-thumbnail img-fluid" src="<%= notification.author.profileUrl %>" alt="user profile">
+                              </a>
+                              <li><a class="dropdown-item" href="/profile/<%= notification.author._id %>"><%= notification.author.name %> wants to be your friend</a></li>
+                              <button type="button" onclick="acceptFriendRequest('<%= notification.friendship %>')" class = "btn btn-outline-primary btn-sm m-1 ">  Accept</button>
+                            </div>
+                          <% } %>
+                      <% }) %>
+                    <% } %>
+                    </ul>
                 </li>
-                <li class="nav-item"><a class="nav-link" href="/all">Members</a></li>
+                <li class="nav-item"><a class="nav-link" href="/all"><i class="fas fa-user-friends"></i> Members</a></li>
                 <li class="nav-item">
                   <a class="nav-link active" aria-current="page" href="/auth/logout"
-                    >Log out</a
+                    ><i class="fas fa-sign-out-alt"></i> Log out</a
                   >
                 </li>
                 <% } %>