feat: Implement friends module with request/accept functionality

Author: Ani Gasitashvili

.idea/dataSources.xml

@@ -2,6 +2,7 @@
   "name": "quiz-frontend",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://localhost:8081",
   "dependencies": {
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",

quiz-frontend/quiz-frontend/package.json

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+
+const AddFriend = () => {
+    const [friendUsername, setFriendUsername] = useState('');
+    const [message, setMessage] = useState('');
+    const [error, setError] = useState('');
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setMessage('');
+        setError('');
+
+        try {
+            const response = await axios.post('/api/friends/add', { username: friendUsername }, { withCredentials: true });
+            setMessage(response.data.message);
+            setFriendUsername(''); // Clear input after success
+        } catch (err) {
+            setError(err.response?.data?.error || 'Failed to add friend.');
+        }
+    };
+
+    return (
+        <div className="add-friend-container">
+            <h3>Add a Friend</h3>
+            <form onSubmit={handleSubmit}>
+                <input
+                    type="text"
+                    placeholder="Enter friend's username"
+                    value={friendUsername}
+                    onChange={(e) => setFriendUsername(e.target.value)}
+                    required
+                />
+                <button type="submit">Add Friend</button>
+            </form>
+            {message && <p className="success-message">{message}</p>}
+            {error && <p className="error-message">{error}</p>}
+        </div>
+    );
+};
+
+export default AddFriend; 

quiz-frontend/quiz-frontend/src/components/AddFriend.js

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const FriendList = () => {
+    const [friends, setFriends] = useState([]);
+    const [error, setError] = useState('');
+
+    const fetchFriends = async () => {
+        try {
+            const response = await axios.get('/api/friends/list', { withCredentials: true });
+            setFriends(response.data);
+        } catch (err) {
+            setError('Could not fetch friends.');
+        }
+    };
+
+    useEffect(() => {
+        fetchFriends();
+    }, []);
+
+    return (
+        <div className="friend-list-container">
+            <h3>Your Friends</h3>
+            {error && <p className="error-message">{error}</p>}
+            {friends.length > 0 ? (
+                <ul className="friends-list">
+                    {friends.map((friend, index) => (
+                        <li key={index} className="friend-item">
+                            <span>{friend}</span>
+                        </li>
+                    ))}
+                </ul>
+            ) : (
+                <p>You haven't added any friends yet.</p>
+            )}
+        </div>
+    );
+};
+
+export default FriendList; 

quiz-frontend/quiz-frontend/src/components/FriendList.js

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const FriendRequests = ({ onRequestsCountChange }) => {
+    const [requests, setRequests] = useState([]);
+    const [message, setMessage] = useState('');
+
+    const fetchRequests = async () => {
+        try {
+            const response = await axios.get('/api/friends/requests', { withCredentials: true });
+            setRequests(response.data);
+            onRequestsCountChange(response.data.length);
+        } catch (err) {
+            setMessage('Could not fetch friend requests.');
+        }
+    };
+
+    useEffect(() => {
+        fetchRequests();
+    }, []);
+
+    const handleAccept = async (requestId) => {
+        try {
+            await axios.post(`/api/friends/accept/${requestId}`, {}, { withCredentials: true });
+            fetchRequests(); // Re-fetch to update the list
+        } catch (err) {
+            setMessage('Failed to accept request.');
+        }
+    };
+
+    return (
+        <div className="friend-requests-container">
+            {message && <p>{message}</p>}
+            {requests.length > 0 ? (
+                <ul className="friend-requests-list">
+                    {requests.map((request) => (
+                        <li key={request.id} className="request-item">
+                            <span>{request.requesterUsername}</span>
+                            <button onClick={() => handleAccept(request.id)} className="accept-request-button">
+                                Accept
+                            </button>
+                        </li>
+                    ))}
+                </ul>
+            ) : (
+                <p>No new friend requests.</p>
+            )}
+        </div>
+    );
+};
+
+export default FriendRequests; 

quiz-frontend/quiz-frontend/src/components/FriendRequests.js

@@ -0,0 +1,121 @@
+/* Friends.css */
+
+.friends-icon-button {
+    position: fixed;
+    bottom: 90px; /* Moved up */
+    right: 20px;
+    background-color: #6a1b9a; /* A deep purple */
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    font-size: 28px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: transform 0.2s ease-in-out;
+    z-index: 1000;
+}
+
+.friends-icon-button:hover {
+    transform: scale(1.1);
+}
+
+.friends-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1050;
+}
+
+.friends-modal-content {
+    background: white;
+    padding: 25px;
+    border-radius: 12px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    width: 90%;
+    max-width: 500px;
+    max-height: 80vh;
+    overflow-y: auto;
+    position: relative;
+}
+
+.friends-modal-close-button {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: #888;
+}
+
+.friends-modal-tabs {
+    display: flex;
+    border-bottom: 2px solid #eee;
+    margin-bottom: 20px;
+}
+
+.friends-modal-tab {
+    padding: 10px 20px;
+    cursor: pointer;
+    border: none;
+    background: none;
+    font-size: 16px;
+    font-weight: 500;
+    color: #999;
+    position: relative;
+}
+
+.friends-modal-tab.active {
+    color: #6a1b9a;
+    border-bottom: 2px solid #6a1b9a;
+}
+
+.friends-list, .friend-requests-list, .user-search-results {
+    list-style: none;
+    padding: 0;
+}
+
+.friend-item, .request-item, .search-result-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 8px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.accept-request-button, .add-friend-button {
+    background-color: #4caf50; /* Green */
+    color: white;
+    border: none;
+    padding: 8px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.accept-request-button:hover, .add-friend-button:hover {
+    background-color: #45a049;
+}
+
+.notification-badge {
+    background-color: #f44336; /* Red */
+    color: white;
+    border-radius: 50%;
+    padding: 2px 6px;
+    font-size: 12px;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+} 

quiz-frontend/quiz-frontend/src/components/Friends.css

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import './Friends.css'; // Import our new styles
+import FriendList from './FriendList';
+import FriendRequests from './FriendRequests';
+import UserSearch from './UserSearch';
+
+const FriendsModal = ({ isOpen, onClose }) => {
+    const [activeTab, setActiveTab] = useState('list'); // 'list', 'requests', 'add'
+    const [requestsCount, setRequestsCount] = useState(0);
+
+    if (!isOpen) {
+        return null;
+    }
+
+    const handleRequestsCountChange = (count) => {
+        setRequestsCount(count);
+    };
+
+    return (
+        <div className="friends-modal-overlay">
+            <div className="friends-modal-content">
+                <button onClick={onClose} className="friends-modal-close-button">&times;</button>
+                <h2>Friends</h2>
+                <div className="friends-modal-tabs">
+                    <button
+                        className={`friends-modal-tab ${activeTab === 'list' ? 'active' : ''}`}
+                        onClick={() => setActiveTab('list')}
+                    >
+                        My Friends
+                    </button>
+                    <button
+                        className={`friends-modal-tab ${activeTab === 'requests' ? 'active' : ''}`}
+                        onClick={() => setActiveTab('requests')}
+                    >
+                        Requests
+                        {requestsCount > 0 && <span className="notification-badge">{requestsCount}</span>}
+                    </button>
+                    <button
+                        className={`friends-modal-tab ${activeTab === 'add' ? 'active' : ''}`}
+                        onClick={() => setActiveTab('add')}
+                    >
+                        Add Friend
+                    </button>
+                </div>
+                <div className="friends-modal-body">
+                    {activeTab === 'list' && <FriendList />}
+                    {activeTab === 'requests' && <FriendRequests onRequestsCountChange={handleRequestsCountChange} />}
+                    {activeTab === 'add' && <UserSearch />}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default FriendsModal; 

quiz-frontend/quiz-frontend/src/components/FriendsModal.js

@@ -1,10 +1,13 @@
 import React, { useEffect, useState } from 'react';
+import FriendsModal from './FriendsModal';
+import './Friends.css';
 
 const Home = () => {
     const [message, setMessage] = useState('');
     const [username, setUsername] = useState('');
     const [error, setError] = useState('');
     const [announcements, setAnnouncements] = useState([]);
+    const [isFriendsModalOpen, setFriendsModalOpen] = useState(false);
 
     useEffect(() => {
         document.title = "Home";
@@ -55,6 +58,17 @@ const Home = () => {
                     </ul>
                 )}
             </div>
+
+            {/* Floating Friends Icon Button */}
+            <button onClick={() => setFriendsModalOpen(true)} className="friends-icon-button">
+                👥
+            </button>
+
+            {/* Friends Modal */}
+            <FriendsModal
+                isOpen={isFriendsModalOpen}
+                onClose={() => setFriendsModalOpen(false)}
+            />
         </div>
     );
 };