From 20cd8b11e57cc15c14c7510ac464cf561abd0446 Mon Sep 17 00:00:00 2001
From: MichaelLaffan1 <michaellaff10876@gmail.com>
Date: Wed, 8 Nov 2023 21:00:30 -0500
Subject: [PATCH] Add request marker

Added a red circle to profile picture on sidebar to show number of friend requests that user has.
---
 client/agora/public/css/notification.css       | 18 ------------------
 client/agora/public/js/friends.js              | 17 +++++++++++++++++
 .../views/dashboard/side-menu/side-menu.ejs    |  3 ++-
 client/agora/views/profile/manage.ejs          |  1 -
 server/service/friendService.js                | 18 ++++++++++++++++++
 5 files changed, 37 insertions(+), 20 deletions(-)
 delete mode 100644 client/agora/public/css/notification.css

diff --git a/client/agora/public/css/notification.css b/client/agora/public/css/notification.css
deleted file mode 100644
index 6a534602..00000000
--- a/client/agora/public/css/notification.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.notification-icon {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    padding: 5px 10px;
-    border-radius: 50%;
-    background-color: red;
-    color: white;
-    font-weight: bold;
-    font-size: 14px;
-    z-index: 10;
-}
-
-
-.profile-image-container {
-    position: relative;
-    display: inline-block;
-}
\ No newline at end of file
diff --git a/client/agora/public/js/friends.js b/client/agora/public/js/friends.js
index 6025246a..cf81bf43 100644
--- 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
index 534d1f57..c58ed5ce 100644
--- 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
index 211e9f62..46aefc33 100644
--- 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
index 2f3a6bc4..9074213d 100644
--- 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 ) => {