friend request being sent properly

abbastoof · Jul 25, 2024 · c82f92c · c82f92c
1 parent 95ee5a3
commit c82f92c
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 26 deletions.
diff --git a/Frontend/src/js/modals/friends.js b/Frontend/src/js/modals/friends.js
@@ -1,7 +1,7 @@
 import '../../scss/styles.scss';
 
 document.addEventListener('DOMContentLoaded', function () {
-    updateFriendsList();
+	updateFriendsList();
 });
 
 export function updateFriendsList() {
@@ -17,36 +17,74 @@ export function updateFriendsList() {
 			'Authorization': `Bearer ${userData.token}`
 		}
 	})
-	.then(response => {
-		if (!response.ok) {
-			throw new Error('Network response was not ok');
-		}
-		return response.json();
-	})
-	.then(data => {
-		const friendsContainer = document.getElementById('friendsList');
-		if (!friendsContainer) {
-			console.error('Friends container not found');
-			return;
-		}
-		let htmlContent = '<div class="container mt-4"><h2>Friends</h2>';
-		data.forEach(friend => {
-			htmlContent += `
+		.then(response => {
+			if (!response.ok) {
+				throw new Error('Network response was not ok');
+			}
+			return response.json();
+		})
+		.then(data => {
+			const friendsContainer = document.getElementById('friendsList');
+			if (!friendsContainer) {
+				console.error('Friends container not found');
+				return;
+			}
+			let htmlContent = `
+			<div class="container mt-4"><h2>Friends</h2>
+			<form id="friendForm" class="text-center">
+                <div class="form-group">
+                    <label class="labelFont" for="friendID">friend ID</label>
+                    <input type="text" class="form-control" id="friendID" placeholder="Enter friend ID" required>
+                </div>
+                <button type="submit" class="submit">Send request</button>
+            </form>
+			</div>`;
+			data.forEach(friend => {
+				htmlContent += `
 			<div class="friend-record mb-3">
 				<h3>${friend.name}</h3>
 				<p>Status: ${friend.isOnline ? 'Online' : 'Offline'}</p>
 				<button onclick="sendMessage('${friend.id}')">Send Message</button>
 			</div>
 			`;
+			});
+			htmlContent += '</div>';
+			friendsContainer.innerHTML = htmlContent;
+		})
+		.then(() => {
+			const form = document.getElementById('friendForm');
+			form.addEventListener('submit', function (event) {
+				event.preventDefault(); // Prevent form submission
+				sendFriendRequest(userData);
+			});
+		})
+		.catch(error => {
+			console.error('Error fetching friends:', error);
 		});
-		htmlContent += '</div>';
-		friendsContainer.innerHTML = htmlContent;
-	})
-	.catch(error => {
-		console.error('Error fetching friends:', error);
-	});
 };
 
+function sendFriendRequest(userData) {
+    const friendID = document.getElementById('friendID').value;
+    // Ensure friendID is validated and sanitized here
+
+    fetch(`/user/${userData.id}/request/${friendID}`, {
+        method: 'POST',
+        headers: {
+            'Authorization': `Bearer ${userData.token}`
+        }
+    })
+    .then(response => {
+        if (response.ok) {
+            alert('Friend request sent!');
+        } else {
+            alert('Failed to send friend request.');
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+    });
+}
+
 function sendMessage(friendId) {
 	const message = prompt("Enter your message:");
 	if (message) {

diff --git a/Frontend/src/js/modals/login.js b/Frontend/src/js/modals/login.js
@@ -1,7 +1,6 @@
 // Import our custom CSS
 import '../../scss/styles.scss';
 
-import { updateFriendsList } from './friends.js';
 import { updateUserProfile } from './profile.js';
 
 // Import all of Bootstrap's JS
@@ -73,9 +72,6 @@ import * as bootstrap from 'bootstrap'
                     isLoggedIn = true; // Update login state
                     updateAuthButton();
                     addProfileButton(); // Add profile button on login
-                    updateFriendsList();
-                })
-                .then(data => {
                     updateUserProfile();
                 })
                 .catch(error => {

diff --git a/Frontend/src/js/modals/profile.js b/Frontend/src/js/modals/profile.js
@@ -3,6 +3,7 @@ import '../../scss/styles.scss';
 
 // Import all of Bootstrap's JS
 import * as bootstrap from 'bootstrap'
+import { updateFriendsList } from './friends';
 
 document.addEventListener('DOMContentLoaded', function () {
     updateUserProfile();
@@ -56,6 +57,7 @@ export function updateUserProfile() {
             `;
             userProfileContainer.innerHTML = htmlContent;
 
+            updateFriendsList();
             const form = document.getElementById('imageUploadForm');
             form.addEventListener('submit', (event) => {
                 event.preventDefault();