ThaMunsta/whats-the-point
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove friend button
All checks were successful
Build Images and Deploy / Update-PROD-Stack (push) Successful in 33s
Details

Browse Source
This commit is contained in:
Mike Johnston
2026-01-30 17:06:38 -05:00
parent d8e7de4107
commit 790357c56a
1 changed files with 40 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/pages/Friends.jsx
View File

@@ -14,6 +14,7 @@ export default function Friends() {
const [searchTimeout, setSearchTimeout] = useState(null); const [searchTimeout, setSearchTimeout] = useState(null);
const [responding, setResponding] = useState(null); const [responding, setResponding] = useState(null);
const [sending, setSending] = useState(null); const [sending, setSending] = useState(null);
const [removing, setRemoving] = useState(null);
const { socket } = useSocket(); const { socket } = useSocket();
const searchRef = useRef(null); const searchRef = useRef(null);
@@ -119,6 +120,23 @@ export default function Friends() {
} }
}; };
const handleRemoveFriend = async (friendId, friendName) => {
if (!confirm(`Are you sure you want to remove ${friendName} from your friends?`)) {
return;
}
setRemoving(friendId);
try {
await api.removeFriend(friendId);
toast.success('Friend removed');
await loadData();
} catch (err) {
toast.error('Failed to remove friend: ' + err.message);
} finally {
setRemoving(null);
}
};
if (loading) { if (loading) {
return <div className="loading">Loading...</div>; return <div className="loading">Loading...</div>;
} }
@@ -221,12 +239,21 @@ export default function Friends() {
) : ( ) : (
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
{friends.map(friend => ( {friends.map(friend => (
<div key={friend.id} style={{ display: 'flex', justifyContent: 'space-between' }}> <div key={friend.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div> <div>
<div style={{ fontWeight: 500 }}>{friend.username}</div> <div style={{ fontWeight: 500 }}>{friend.username}</div>
<div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{friend.email}</div> <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{friend.email}</div>
</div> </div>
<div style={{ color: 'var(--primary)' }}>{friend.total_points} points</div> <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
<div style={{ color: 'var(--primary)' }}>{friend.total_points} points</div>
<button
className="btn btn-danger btn-sm"
onClick={() => handleRemoveFriend(friend.id, friend.username)}
disabled={removing === friend.id}
>
{removing === friend.id ? 'Removing...' : 'Remove'}
</button>
</div>
</div> </div>
))} ))}
{challengeFriends.length > 0 && ( {challengeFriends.length > 0 && (
@@ -237,12 +264,21 @@ export default function Friends() {
</div> </div>
</div> </div>
{challengeFriends.map(friend => ( {challengeFriends.map(friend => (
<div key={friend.id} style={{ display: 'flex', justifyContent: 'space-between' }}> <div key={friend.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div> <div>
<div style={{ fontWeight: 500 }}>{friend.username}</div> <div style={{ fontWeight: 500 }}>{friend.username}</div>
<div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{friend.email}</div> <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{friend.email}</div>
</div> </div>
<div style={{ color: 'var(--primary)' }}>{friend.total_points} points</div> <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
<div style={{ color: 'var(--primary)' }}>{friend.total_points} points</div>
<button
className="btn btn-danger btn-sm"
onClick={() => handleRemoveFriend(friend.id, friend.username)}
disabled={removing === friend.id}
>
{removing === friend.id ? 'Removing...' : 'Remove'}
</button>
</div>
</div> </div>
))} ))}
</> </>