Add request marker

Added a red circle to profile picture on sidebar to show number of friend requests that user has.
agorafoundation · Nov 9, 2023 · 20cd8b1 · 20cd8b1
1 parent 5f1da50
commit 20cd8b1
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 20 deletions.
diff --git a/client/agora/public/css/notification.css b/client/agora/public/css/notification.css
diff --git a/client/agora/public/js/friends.js b/client/agora/public/js/friends.js
@@ -7,6 +7,7 @@ var displayedUsers = new Set();
 const userSearch = document.getElementById( 'user-search' );
 const searchButton = document.getElementById( 'btn-search' );
 const friendsDashboard = document.getElementById( 'friends-dashboard' );
+const redCircle = document.getElementById( 'requestCount' );
 var authUser = [ ];
 var friends = [ ];
 var requests = [ ];
@@ -24,8 +25,24 @@ window.onload = getResources = () => {
             friends.push( response[1] );
             requests.push( response[2] );
         } );
+        fetch( "api/v1/auth/friends/requestCount", {
+            method: "GET",
+            headers: { 'Content-Type': 'application/json' },
+        })
+            .then( ( response ) => response.json() )
+            .then( ( response ) => {
+                let requestCount = response[0].count;
+                console.log(requestCount);
+                if ( requestCount > 0){
+                    let span = document.createElement("span");
+                    span.textContent = requestCount;
+                    redCircle.appendChild(span);
+                    redCircle.style.display = "flex";
+                }
+            })
 };
 
+
 // queries the users by username
 searchButton.addEventListener( 'click', queryUsers = () => {
     fetch( "/api/v1/auth/user/username/" + userSearch.value, {

diff --git a/client/agora/views/dashboard/side-menu/side-menu.ejs b/client/agora/views/dashboard/side-menu/side-menu.ejs
@@ -59,7 +59,8 @@
             <% if(locals.authUser) { %>
                 <a href="/profile/manageProfile"
                     style="width:100%; position: absolute;bottom: 0; left: -15px;border-top:solid;border-radius:2px;">
-
+                    <div id="requestCount" style="position: absolute; top:0; left: 65px; padding: 5px; border-radius: 50%; background-color: red;
+                    color: white; font-weight: bold; font-size: 14px; display: none;"></div>
                     <% if( locals.authUser.profileFilename.toString().substring(0, 7)=="http://" ||
                         locals.authUser.profileFilename.toString().substring(0, 8)=="https://" ) { %>
                         <img src="<%- locals.authUser.profileFilename %>" alt="User Dashboard avatar"

diff --git a/client/agora/views/profile/manage.ejs b/client/agora/views/profile/manage.ejs
@@ -2,7 +2,6 @@
 <html lang="en">
     <head>
         <%- include('../partials/head'); %>
-        <link rel="stylesheet" href="/css/notification.css">
     </head>
     <body id="page-top">
         <!-- Navigation-->

diff --git a/server/service/friendService.js b/server/service/friendService.js
@@ -54,6 +54,24 @@ exports.getAllFriends = async ( userID ) => {
     }
 };
 
+exports.getUnreadFriendRequestCount = async ( userID ) => {
+    let text = `SELECT COUNT(*) FROM friendships WHERE recipient_id = $1 AND friendship_status = $2`;
+    let values = [ userID, 'pending'];
+
+    try{
+        let res = await db.query( text, values );
+        if ( res.rows.length > 0){
+            return res.rows;
+        }
+        else{
+            return false;
+        }
+    }
+    catch ( e ){
+        console.log( e.stack );
+    }
+};
+
 // Send a friend request
 exports.sendFriendRequest = async ( requesterID, recipientID ) => {