Friending

client/agora/public/css/topic.css

@@ -586,7 +586,7 @@
 
   .profile-status {
     margin-top: 36px;
-    margin-left: 230px;
+    margin-left: 225px;
     font-weight: 500px;
   }
 
@@ -619,16 +619,22 @@
     width: 100%;
   }
 
+  .profile-status-container {
+    display: flex;
+    align-items: center;
+}
+
   .arrow {
     cursor: pointer;
     border: solid black;
     border-width: 0 3px 3px 0;
     display: inline-block;
-    padding: 3px;
-    height: 15px;
-    width: 15px;
+    padding: 1px;
+    height: 10px;
+    width: 10px;
     background-color: transparent;
-    margin-right: 20px;
+    margin-top: 36px;
+    margin-left: 20px;
   }
 
   .arrow:focus {

client/agora/public/js/dashboard.js

@@ -1187,6 +1187,50 @@
     };
 }
 
+const friendsContainer = document.querySelectorAll( '#friend-card' );
+
+function filterFriends( searchTerm ){
+
+    for ( const friend of friendsContainer ){
+
+        const friendCard = friend.outerText.toLowerCase();
+
+        if ( friendCard.includes( searchTerm.toLowerCase() ) ){
+            friend.style.display = 'block';
+        } else {
+            friend.style.display = 'none';
+        }
+    }
+}
+
+function deleteFriend( friendshipId ) {
+    if (confirm( "Are you sure you want to remove this friend?") == true){
+        fetch( "/api/v1/auth/friends/deleteFriend", {
+            method: "DELETE",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify( {
+                "friendshipId": friendshipId,
+            })
+        })
+        .then( (response) => {
+            if ( response.status == 200 ) {
+                const message = 'Friend deleted successfully';
+                console.log( message );
+                alert( message );
+                location.reload();
+            }
+            else{
+                const errorMessage = 'Failed to delete friend.';
+                console.error( errorMessage );
+                alert( errorMessage );
+            }
+        })
+        .catch( ( error ) => {
+            console.error( 'Error deleting friend:', error);
+            alert( 'Error deleting friend: ' + error );
+        });
+    }
+};
 
 // manage highlighting of control bar buttons
 if( document.getElementById( "controlbar-buttons-group-1" ) ) {

client/agora/public/js/friends.js

@@ -0,0 +1,116 @@
+// Takes you to the adding friends page
+const addFriendPage = () => {
+    window.location.href = "/friends/add-friends";
+};
+
+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 = [ ];
+
+// gets the authenticated user, their friends and sent friend requests
+window.onload = getResources = () => {
+
+    fetch( "/api/v1/auth/friends/getResources", {
+        method: "GET",
+        headers: { "Content-Type": "application/json" },
+    } )
+        .then( ( response ) => response.json() )
+        .then( ( response ) => {
+            authUser.push( response[0]);
+            friends.push( response[1] );
+            requests.push( response[2] );
+            let requestCount = response[3][0].count;
+            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, {
+        method: "GET",
+        headers: { "Content-Type": "application/json" },
+    } )
+        .then( ( response ) =>  response.json() )
+        .then( ( response ) => {
+
+            for ( i = 0; i < response.length; i++ ) {
+                var data = response[i];
+                var isFriend = false;
+                var isSentRequest = false;
+                for( j = 0; j < friends[0].length; j++ ){
+                    if ( ( data.username == friends[0][j].friend_username ) ){
+                        isFriend = true;
+                    }
+                }
+                for( k = 0; k < requests[0].length; k++ ){
+                    if( ( data.userId == requests[0][k].initiatedby_id ) ||
+                        ( data.userId == requests[0][k].recipient_id ) ){
+                        isSentRequest =  true;
+                    }
+                }
+                if ( !( displayedUsers.has( data.username ) ) && 
+                !( data.username == authUser[0].username ) && !( isFriend ) && !( isSentRequest ) ) {
+                    createUserCard( data );
+                    displayedUsers.add( data.username );
+                }
+            }
+        } );
+} );
+
+// creates a user card for each user
+function createUserCard( userData ){
+    var rowDiv = document.createElement( "div" );
+    rowDiv.className = "row row-cols-1 row-cols-md-3 g-4";
+    var columnDiv = document.createElement( "div" );
+    columnDiv.className = "col mb-3 gallery-col align-items-stretch gallery-col";
+    var cardDiv = document.createElement( "div" );
+    cardDiv.className = "card h-100";
+    var cardBodyDiv = document.createElement( "div" );
+    cardBodyDiv.className = "card-body d-flex flex-column";
+    var username = document.createElement( "h5" );
+    username.id = userData.userId;
+    username.innerText = userData.username;
+    var userProfile = document.createElement( "img" );
+    userProfile.width = 225;
+    userProfile.src = "/assets/uploads/profile/" + userData.profileFilename;
+    userProfile.alt = "user's profile";
+    var userContainer = document.createElement( "div" );
+    userContainer.id = "user-container-" + userData.userId;
+    userContainer.style.display = "flex";
+    userContainer.style.marginRight = "5px";
+
+    cardBodyDiv.appendChild( username );
+    cardBodyDiv.appendChild( userProfile );
+    cardDiv.appendChild( cardBodyDiv );
+    columnDiv.appendChild( cardDiv );
+    rowDiv.append( columnDiv );
+    userContainer.appendChild( rowDiv );
+    friendsDashboard.appendChild( userContainer );
+
+
+    userContainer.addEventListener( 'click', sendFriendRequest = () => {
+        if( confirm("Are you sure you want to send a friend request to " + userData.username + "?") == true){
+            userContainer.style.display = "none";
+            fetch( "/api/v1/auth/friends/sendFriendRequest", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify ( {
+                    "username": userData.username,
+                    "userId": userData.userId
+                } )
+            } ); 
+        }
+    } );
+
+}

client/agora/public/js/scripts.js

@@ -18,39 +18,41 @@ let sideBarStatus = true;
 /**
  * Triggered when the page is loaded.
  */
-window.addEventListener( "load", () => {
+window.addEventListener("load", () => {
     // Determines whether the user is on a page that contains the sidebar
-    if ( document.querySelector( "#agoraSideBar" ) ) {
+    if (document.querySelector("#agoraSideBar")) {
         loadClientSettings();
 
         // Only add the hover events if the sidebar is not in the docked position
-        if ( !clientSettings.sideBarLocked ) {
+        if (!clientSettings.sideBarLocked) {
             // add events for toggle sidebar
-            if( document.getElementById( "agoraSideBar" ) ) {
+            if (document.getElementById("agoraSideBar")) {
                 toggleSidebar();
-                document.getElementById( "agoraSideBar" ).addEventListener( "mouseenter", toggleSidebar );
-                document.getElementById( "agoraSideBar" ).addEventListener( "mouseleave", toggleSidebar );
+                document.getElementById("agoraSideBar").addEventListener("mouseenter", toggleSidebar);
+                document.getElementById("agoraSideBar").addEventListener("mouseleave", toggleSidebar);
             }
         }
-        
-        if ( document.getElementById( "pin-menu" ) ) {
-            document.getElementById( "pin-menu" ).addEventListener( "click", lockSidebar );
+
+        if (document.getElementById("pin-menu")) {
+            document.getElementById("pin-menu").addEventListener("click", lockSidebar);
         }
     }
-} );
+});
 
 /**
  * Toggles the sidebar.
  */
 function toggleSidebar() {
-    if ( !sideBarStatus ) {
-        document.getElementById( "agoraSideBar" ).style.width = "250px";
-        document.querySelector( ".dashboard-content" ).style.marginLeft = "250px";
+    if (!sideBarStatus) {
+        document.getElementById("agoraSideBar").style.width = "250px";
+        document.querySelector(".dashboard-content").style.marginLeft = "250px";
+        // document.querySelector(".friends-content").style.marginLeft = "250px";
     }
     else {
-        document.getElementById( "agoraSideBar" ).style.width = "85px";
-        if( window.innerWidth > 992 ) {
-            document.querySelector( ".dashboard-content" ).style.marginLeft = "85px";
+        document.getElementById("agoraSideBar").style.width = "85px";
+        if (window.innerWidth > 992) {
+            document.querySelector(".dashboard-content").style.marginLeft = "85px";
+            // document.querySelector(".friends-content").style.marginLeft = "85px";
         }
     }
     sideBarStatus = !sideBarStatus;
@@ -60,23 +62,24 @@ function toggleSidebar() {
  * Locks the sidebar into position.
  */
 function lockSidebar() {
-    if ( !clientSettings.sideBarLocked ) {
-        document.querySelector( ".dashboard-content" ).style.marginLeft = "250px";
+    if (!clientSettings.sideBarLocked) {
+        document.querySelector(".dashboard-content").style.marginLeft = "250px";
+        // document.querySelector(".friends-content").style.marginLeft = "250px";
 
-        document.getElementById( "agoraSideBar" ).removeEventListener( "mouseenter", toggleSidebar );
-        document.getElementById( "agoraSideBar" ).removeEventListener( "mouseleave", toggleSidebar );
+        document.getElementById("agoraSideBar").removeEventListener("mouseenter", toggleSidebar);
+        document.getElementById("agoraSideBar").removeEventListener("mouseleave", toggleSidebar);
 
-        document.getElementById( "agoraSideBar" ).style.width = "250px";
+        document.getElementById("agoraSideBar").style.width = "250px";
 
-        document.getElementById( "tack-icon" ).style.rotate = "45deg";
+        document.getElementById("tack-icon").style.rotate = "45deg";
 
         sideBarStatus = true; // important to prevent glitching when enabling/disabling the menu
     }
     else {
-        document.getElementById( "tack-icon" ).style.rotate = "0deg";
+        document.getElementById("tack-icon").style.rotate = "0deg";
 
-        document.getElementById( "agoraSideBar" ).addEventListener( "mouseenter", toggleSidebar );
-        document.getElementById( "agoraSideBar" ).addEventListener( "mouseleave", toggleSidebar );
+        document.getElementById("agoraSideBar").addEventListener("mouseenter", toggleSidebar);
+        document.getElementById("agoraSideBar").addEventListener("mouseleave", toggleSidebar);
     }
 
     clientSettings.sideBarLocked = !clientSettings.sideBarLocked;
@@ -88,21 +91,22 @@ function lockSidebar() {
  * Loads the client settings from local storage and sets the properties associated with them.
  */
 function loadClientSettings() {
-    if ( !localStorage.getItem( 'client-settings' ) ) {
+    if (!localStorage.getItem('client-settings')) {
         saveClientSettings();
     }
     else {
-        clientSettings = JSON.parse( localStorage.getItem( 'client-settings' ) );
+        clientSettings = JSON.parse(localStorage.getItem('client-settings'));
 
-        if ( clientSettings.sideBarLocked ) {
-            document.querySelector( ".dashboard-content" ).style.marginLeft = "250px";
+        if (clientSettings.sideBarLocked) {
+            document.querySelector(".dashboard-content").style.marginLeft = "250px";
+            // document.querySelector(".friends-content").style.marginLeft = "250px";
 
-            document.getElementById( "agoraSideBar" ).removeEventListener( "mouseenter", toggleSidebar );
-            document.getElementById( "agoraSideBar" ).removeEventListener( "mouseleave", toggleSidebar );
+            document.getElementById("agoraSideBar").removeEventListener("mouseenter", toggleSidebar);
+            document.getElementById("agoraSideBar").removeEventListener("mouseleave", toggleSidebar);
 
-            document.getElementById( "agoraSideBar" ).style.width = "250px";
+            document.getElementById("agoraSideBar").style.width = "250px";
 
-            document.getElementById( "tack-icon" ).style.rotate = "45deg";
+            document.getElementById("tack-icon").style.rotate = "45deg";
 
             sideBarStatus = true; // important to prevent glitching when enabling/disabling the menu
         }
@@ -113,5 +117,5 @@ function loadClientSettings() {
  * Saves the client settings to local storage.
  */
 function saveClientSettings() {
-    localStorage.setItem( 'client-settings', JSON.stringify( clientSettings ) );
+    localStorage.setItem('client-settings', JSON.stringify(clientSettings));
 }

client/agora/public/js/topic-view.js

@@ -1179,13 +1179,13 @@ if ( openTopicBtn ) {
 const toggleProfileList = () => {
     let arrow = document.getElementById( "profiles-toggle" );
 
-    if ( arrow.classList.contains( "down-arrow" ) ) {
+    if ( arrow.classList.contains( "up-arrow" ) ) {
         document.getElementById( "permissions-box" ).style.display = "none";
-        arrow.setAttribute( 'class', 'arrow up-arrow' );
+        arrow.setAttribute( 'class', 'arrow down-arrow' );
     }
     else {
         document.getElementById( "permissions-box" ).style.display = "flex";
-        arrow.setAttribute( 'class', 'arrow down-arrow' );
+        arrow.setAttribute( 'class', 'arrow up-arrow' );
     }
 };
 
@@ -1315,6 +1315,43 @@ const idAndFetch = () => {
     }
 };
 
+const FetchShared = async () => {
+    console.log( "FetchShared() : Start" );
+    const [ isTopic, id ] = getPrefixAndId();
+    //console.log( isTopic, id );
+    if ( isTopic && id ) {
+        fetch( "api/v1/auth/topics/" + id, {
+            method: "GET",
+            headers: { "Content-Type": "application/json" },
+        } )
+            .then( ( response ) => response.json() )
+            .then( ( response ) => {
+                fillFields(
+                    response.results.topicName,
+                    response.results.topicDescription,
+                    response.results.topicImage
+                );
+            } );
+    }
+    else if ( id ) {
+        //console.log( "idAndFetch() : fetch workspace" );
+        await fetch( "api/v1/auth/workspaces/" + id, {
+            method: "GET",
+            headers: { "Content-Type": "application/json" },
+        } )
+            .then( ( response ) => response.json() )
+            .then( ( response ) => {
+                fillFields(
+                    response.results.workspaceName,
+                    response.results.workspaceDescription,
+                    response.results.workspaceImage
+                );
+                console.log( "FetchShared() : End - workspacePath" );
+            } );
+    }
+    console.log( "FetchShared() : End FINAL" );
+};
+
 const getTags = async () => {
     const [ isTopic, id ] = getPrefixAndId();
     if ( isTopic && id ) {