Skip to content

Commit f728c18

Browse files
Topla-hubTopla-hub
committed
needs to be fixed
1 parent d79d993 commit f728c18

23 files changed

+1288
-8
lines changed

‎quiz-frontend/quiz-frontend/gaso.txt

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Netscape HTTP Cookie File
2+
# https://curl.se/docs/http-cookies.html
3+
# This file was generated by libcurl! Edit at your own risk.
4+
5+
#HttpOnly_localhost FALSE / FALSE 0 JSESSIONID E3A35539A300895025D4058DC31DF331

‎quiz-frontend/quiz-frontend/lela.txt

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Netscape HTTP Cookie File
2+
# https://curl.se/docs/http-cookies.html
3+
# This file was generated by libcurl! Edit at your own risk.
4+
5+
#HttpOnly_localhost FALSE / FALSE 0 JSESSIONID DE99DEA15AA2A25C19DFE56CEC6B558C

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React, { useState } from 'react';
2+
import axios from 'axios';
3+
4+
const AddFriend = () => {
5+
const [friendUsername, setFriendUsername] = useState('');
6+
const [message, setMessage] = useState('');
7+
const [error, setError] = useState('');
8+
9+
const handleSubmit = async (e) => {
10+
e.preventDefault();
11+
setMessage('');
12+
setError('');
13+
14+
try {
15+
const response = await axios.post('/api/friends/add', { username: friendUsername }, { withCredentials: true });
16+
setMessage(response.data.message);
17+
setFriendUsername(''); // Clear input after success
18+
} catch (err) {
19+
setError(err.response?.data?.error || 'Failed to add friend.');
20+
}
21+
};
22+
23+
return (
24+
<div className="add-friend-container">
25+
<h3>Add a Friend</h3>
26+
<form onSubmit={handleSubmit}>
27+
<input
28+
type="text"
29+
placeholder="Enter friend's username"
30+
value={friendUsername}
31+
onChange={(e) => setFriendUsername(e.target.value)}
32+
required
33+
/>
34+
<button type="submit">Add Friend</button>
35+
</form>
36+
{message && <p className="success-message">{message}</p>}
37+
{error && <p className="error-message">{error}</p>}
38+
</div>
39+
);
40+
};
41+
42+
export default AddFriend;

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React, { useState, useEffect } from 'react';
2+
import axios from 'axios';
3+
4+
const FriendList = () => {
5+
const [friends, setFriends] = useState([]);
6+
const [error, setError] = useState('');
7+
8+
const fetchFriends = async () => {
9+
try {
10+
const response = await axios.get('/api/friends/list', { withCredentials: true });
11+
setFriends(response.data);
12+
} catch (err) {
13+
setError('Could not fetch friends.');
14+
}
15+
};
16+
17+
useEffect(() => {
18+
fetchFriends();
19+
}, []);
20+
21+
return (
22+
<div className="friend-list-container">
23+
<h3>Your Friends</h3>
24+
{error && <p className="error-message">{error}</p>}
25+
{friends.length > 0 ? (
26+
<ul className="friends-list">
27+
{friends.map((friend, index) => (
28+
<li key={index} className="friend-item">
29+
<span>{friend}</span>
30+
</li>
31+
))}
32+
</ul>
33+
) : (
34+
<p>You haven't added any friends yet.</p>
35+
)}
36+
</div>
37+
);
38+
};
39+
40+
export default FriendList;

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React, {useState, useEffect, useCallback} from 'react';
2+
import axios from 'axios';
3+
4+
const FriendRequests = ({ onRequestsCountChange }) => {
5+
const [requests, setRequests] = useState([]);
6+
const [message, setMessage] = useState('');
7+
8+
const fetchRequests = useCallback(async () => {
9+
try {
10+
const response = await axios.get('/api/friends/requests', { withCredentials: true });
11+
setRequests(response.data);
12+
onRequestsCountChange(response.data.length);
13+
} catch (err) {
14+
setMessage('Could not fetch friend requests.');
15+
}
16+
}, [onRequestsCountChange]);
17+
18+
useEffect(() => {
19+
fetchRequests();
20+
}, [fetchRequests]);
21+
22+
const handleAccept = async (requestId) => {
23+
try {
24+
await axios.post(`/api/friends/accept/${requestId}`, {}, { withCredentials: true });
25+
fetchRequests(); // Re-fetch to update the list
26+
} catch (err) {
27+
setMessage('Failed to accept request.');
28+
}
29+
};
30+
31+
const handleReject = async (requestId) => {
32+
setMessage('');
33+
try {
34+
await axios.post(`/api/friends/reject/${requestId}`, {}, { withCredentials: true });
35+
setMessage('Friend request rejected.');
36+
fetchRequests(); // Refresh list
37+
} catch (err) {
38+
setMessage('Failed to reject request.');
39+
}
40+
};
41+
42+
return (
43+
<div className="friend-requests-container">
44+
{message && <p>{message}</p>}
45+
{requests.length > 0 ? (
46+
<ul className="friend-requests-list">
47+
{requests.map((request) => (
48+
<li key={request.id} className="request-item">
49+
<span className="request-username">{request.requesterUsername}</span>
50+
<button onClick={() => handleAccept(request.id)} className="accept-request-button">
51+
Accept
52+
</button>
53+
<button onClick={() => handleReject(request.id)} className="accept-request-button" style={{backgroundColor: '#f44336', marginLeft: '8px'}}>
54+
Reject
55+
</button>
56+
</li>
57+
))}
58+
</ul>
59+
) : (
60+
<p>No new friend requests.</p>
61+
)}
62+
</div>
63+
);
64+
};
65+
66+
export default FriendRequests;

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

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
/* Friends.css */
2+
3+
.top-right-icons {
4+
position: fixed;
5+
top: 24px;
6+
right: 24px;
7+
display: flex;
8+
gap: 16px;
9+
z-index: 1100;
10+
}
11+
12+
.friends-icon-button, .messages-icon-button {
13+
background-color: #6a1b9a;
14+
color: white;
15+
border: none;
16+
border-radius: 50%;
17+
width: 56px;
18+
height: 56px;
19+
font-size: 26px;
20+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
21+
cursor: pointer;
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
transition: transform 0.2s ease-in-out, background 0.2s;
26+
outline: none;
27+
}
28+
29+
.friends-icon-button:hover, .messages-icon-button:hover {
30+
transform: scale(1.08);
31+
background-color: #512e7e;
32+
}
33+
34+
.friends-modal-overlay {
35+
position: fixed;
36+
top: 0;
37+
left: 0;
38+
right: 0;
39+
bottom: 0;
40+
background-color: rgba(0, 0, 0, 0.6);
41+
display: flex;
42+
justify-content: center;
43+
align-items: center;
44+
z-index: 1050;
45+
}
46+
47+
.friends-modal-content {
48+
background: white;
49+
padding: 25px;
50+
border-radius: 12px;
51+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
52+
width: 90%;
53+
max-width: 500px;
54+
max-height: 80vh;
55+
overflow-y: auto;
56+
position: relative;
57+
}
58+
59+
.friends-modal-close-button {
60+
position: absolute;
61+
top: 15px;
62+
right: 15px;
63+
background: none;
64+
border: none;
65+
font-size: 24px;
66+
cursor: pointer;
67+
color: #888;
68+
}
69+
70+
.friends-modal-tabs {
71+
display: flex;
72+
border-bottom: 2px solid #eee;
73+
margin-bottom: 20px;
74+
}
75+
76+
.friends-modal-tab {
77+
padding: 10px 20px;
78+
cursor: pointer;
79+
border: none;
80+
background: none;
81+
font-size: 16px;
82+
font-weight: 500;
83+
color: #999;
84+
position: relative;
85+
}
86+
87+
.friends-modal-tab.active {
88+
color: #6a1b9a;
89+
border-bottom: 2px solid #6a1b9a;
90+
}
91+
92+
.friends-list, .friend-requests-list, .user-search-results {
93+
list-style: none;
94+
padding: 0;
95+
}
96+
97+
.friend-item, .request-item, .search-result-item {
98+
display: flex;
99+
justify-content: space-between;
100+
align-items: center;
101+
padding: 12px 8px;
102+
border-bottom: 1px solid #f0f0f0;
103+
}
104+
105+
.accept-request-button, .add-friend-button {
106+
background-color: #4caf50; /* Green */
107+
color: white;
108+
border: none;
109+
padding: 8px 12px;
110+
border-radius: 6px;
111+
cursor: pointer;
112+
transition: background-color 0.2s;
113+
}
114+
115+
.accept-request-button:hover, .add-friend-button:hover {
116+
background-color: #45a049;
117+
}
118+
119+
.notification-badge {
120+
background-color: #f44336; /* Red */
121+
color: white;
122+
border-radius: 50%;
123+
padding: 2px 6px;
124+
font-size: 12px;
125+
position: absolute;
126+
top: 5px;
127+
right: 5px;
128+
}
129+
130+
.request-item {
131+
display: flex;
132+
align-items: center;
133+
justify-content: space-between;
134+
padding: 12px 8px;
135+
border-bottom: 1px solid #f0f0f0;
136+
}
137+
138+
.request-username {
139+
flex: 0 0 120px;
140+
overflow: hidden;
141+
text-overflow: ellipsis;
142+
white-space: nowrap;
143+
}
144+
145+
.top-left-signout {
146+
position: fixed;
147+
top: 24px;
148+
left: 24px;
149+
z-index: 1100;
150+
}
151+
152+
.signout-icon-button {
153+
background-color: #e11d48;
154+
color: white;
155+
border: none;
156+
border-radius: 50%;
157+
width: 48px;
158+
height: 48px;
159+
font-size: 22px;
160+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
161+
cursor: pointer;
162+
display: flex;
163+
justify-content: center;
164+
align-items: center;
165+
transition: transform 0.2s, background 0.2s;
166+
outline: none;
167+
}
168+
169+
.signout-icon-button:hover {
170+
background-color: #b91c1c;
171+
transform: scale(1.08);
172+
}
173+
174+
.signout-modal-overlay {
175+
position: fixed;
176+
top: 0; left: 0; right: 0; bottom: 0;
177+
background: rgba(0,0,0,0.4);
178+
display: flex;
179+
justify-content: center;
180+
align-items: center;
181+
z-index: 1200;
182+
}
183+
184+
.signout-modal-content {
185+
background: #fff;
186+
padding: 28px 32px 20px 32px;
187+
border-radius: 12px;
188+
box-shadow: 0 5px 18px rgba(0,0,0,0.22);
189+
min-width: 260px;
190+
text-align: center;
191+
}
192+
193+
.cancel-signout-button, .confirm-signout-button {
194+
padding: 8px 18px;
195+
border: none;
196+
border-radius: 6px;
197+
font-size: 1rem;
198+
font-weight: 500;
199+
cursor: pointer;
200+
transition: background 0.2s;
201+
}
202+
203+
.cancel-signout-button {
204+
background: #e5e7eb;
205+
color: #22223b;
206+
}
207+
208+
.cancel-signout-button:hover {
209+
background: #cbd5e1;
210+
}
211+
212+
.confirm-signout-button {
213+
background: #e11d48;
214+
color: #fff;
215+
}
216+
217+
.confirm-signout-button:hover {
218+
background: #b91c1c;
219+
}

0 commit comments

Comments
 (0)