312 lines
12 KiB
JavaScript
312 lines
12 KiB
JavaScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import toast from 'react-hot-toast';
|
|
import api from '../api';
|
|
import { useClickOutside } from '../hooks/useClickOutside';
|
|
import { useSocket } from '../SocketContext';
|
|
|
|
export default function Friends() {
|
|
const [friends, setFriends] = useState([]);
|
|
const [challengeFriends, setChallengeFriends] = useState([]);
|
|
const [requests, setRequests] = useState([]);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [searchResults, setSearchResults] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchTimeout, setSearchTimeout] = useState(null);
|
|
const [responding, setResponding] = useState(null);
|
|
const [sending, setSending] = useState(null);
|
|
const [removing, setRemoving] = useState(null);
|
|
const { socket } = useSocket();
|
|
const searchRef = useRef(null);
|
|
|
|
useClickOutside(searchRef, () => setSearchResults([]));
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, []);
|
|
|
|
// Listen for real-time friend request events
|
|
useEffect(() => {
|
|
if (!socket) return;
|
|
|
|
const handleFriendRequest = (request) => {
|
|
toast.success(`👋 ${request.from_username} sent you a friend request`);
|
|
loadData(); // Refresh to show new request
|
|
};
|
|
|
|
const handleFriendResponse = (response) => {
|
|
if (response.status === 'accepted') {
|
|
toast.success(`🎉 ${response.friend_username} accepted your friend request!`);
|
|
loadData(); // Refresh friends list
|
|
} else {
|
|
toast(`${response.friend_username} declined your friend request`);
|
|
}
|
|
};
|
|
|
|
const handleFriendRemoved = (data) => {
|
|
toast(`${data.removed_by_username} removed you from their friends`);
|
|
loadData(); // Refresh friends list
|
|
};
|
|
|
|
socket.on('friend:request', handleFriendRequest);
|
|
socket.on('friend:response', handleFriendResponse);
|
|
socket.on('friend:removed', handleFriendRemoved);
|
|
|
|
return () => {
|
|
socket.off('friend:request', handleFriendRequest);
|
|
socket.off('friend:response', handleFriendResponse);
|
|
socket.off('friend:removed', handleFriendRemoved);
|
|
};
|
|
}, [socket]);
|
|
|
|
const loadData = async () => {
|
|
try {
|
|
const [friendsData, requestsData] = await Promise.all([
|
|
api.getFriends(),
|
|
api.getFriendRequests()
|
|
]);
|
|
setFriends(friendsData.friends);
|
|
setChallengeFriends(friendsData.challenge_friends || []);
|
|
setRequests(requestsData.requests);
|
|
} catch (err) {
|
|
console.error('Failed to load data:', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleSearch = (query) => {
|
|
setSearchQuery(query);
|
|
|
|
// Clear previous timeout
|
|
if (searchTimeout) {
|
|
clearTimeout(searchTimeout);
|
|
}
|
|
|
|
if (query.trim().length < 2) {
|
|
setSearchResults([]);
|
|
return;
|
|
}
|
|
|
|
// Debounce search by 0.5 second
|
|
const timeout = setTimeout(async () => {
|
|
try {
|
|
const data = await api.searchUsers(query);
|
|
setSearchResults(data.users);
|
|
} catch (err) {
|
|
console.error('Search failed:', err);
|
|
}
|
|
}, 500);
|
|
|
|
setSearchTimeout(timeout);
|
|
};
|
|
|
|
const handleSendRequest = async (userId) => {
|
|
setSending(userId);
|
|
try {
|
|
await api.sendFriendRequest(userId);
|
|
setSearchQuery('');
|
|
setSearchResults([]);
|
|
toast.success('Friend request sent!');
|
|
await loadData(); // Refresh the friends list to update friendship status
|
|
} catch (err) {
|
|
toast.error('Failed to send request: ' + err.message);
|
|
} finally {
|
|
setSending(null);
|
|
}
|
|
};
|
|
|
|
const handleRespond = async (requestId, status) => {
|
|
setResponding(requestId);
|
|
try {
|
|
await api.respondToFriendRequest(requestId, status);
|
|
toast.success(status === 'accepted' ? 'Friend request accepted!' : 'Friend request declined');
|
|
await loadData();
|
|
} catch (err) {
|
|
toast.error('Failed to respond: ' + err.message);
|
|
} finally {
|
|
setResponding(null);
|
|
}
|
|
};
|
|
|
|
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) {
|
|
return <div className="loading">Loading...</div>;
|
|
}
|
|
|
|
return (
|
|
<div style={{ padding: '2rem 0' }}>
|
|
<div className="container">
|
|
<h1 style={{ marginBottom: '2rem' }}>Friends</h1>
|
|
|
|
{/* Search */}
|
|
<div className="card" style={{ marginBottom: '2rem', position: 'relative' }} ref={searchRef}>
|
|
<h3 style={{ marginBottom: '1rem' }}>Add Friends</h3>
|
|
<input
|
|
type="text"
|
|
className="input"
|
|
placeholder="Search by username or email..."
|
|
value={searchQuery}
|
|
onChange={(e) => handleSearch(e.target.value)}
|
|
/>
|
|
{searchResults.length > 0 && (
|
|
<div style={{
|
|
position: 'absolute',
|
|
top: '100%',
|
|
left: 0,
|
|
right: 0,
|
|
background: 'var(--bg)',
|
|
border: '1px solid var(--border)',
|
|
borderRadius: '0.5rem',
|
|
marginTop: '0.5rem',
|
|
maxHeight: '300px',
|
|
overflowY: 'auto',
|
|
zIndex: 10
|
|
}}>
|
|
{searchResults.map(user => (
|
|
<div
|
|
key={user.id}
|
|
style={{
|
|
padding: '1rem',
|
|
borderBottom: '1px solid var(--border)',
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
gap: '1rem'
|
|
}}
|
|
>
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div style={{ fontWeight: 500 }}>{user.username}</div>
|
|
<div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{user.email}</div>
|
|
</div>
|
|
<button
|
|
className="btn btn-primary btn-sm"
|
|
onClick={() => handleSendRequest(user.id)}
|
|
disabled={sending === user.id}
|
|
style={{ flexShrink: 0, width: 'auto' }}
|
|
>
|
|
{sending === user.id ? 'Sending...' : 'Add Friend'}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Pending Requests */}
|
|
{requests.length > 0 && (
|
|
<div className="card" style={{ marginBottom: '2rem' }}>
|
|
<h3 style={{ marginBottom: '1rem' }}>Friend Requests</h3>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
|
{requests.map(req => (
|
|
<div key={req.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '1rem' }}>
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div style={{ fontWeight: 500 }}>{req.username}</div>
|
|
<div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{req.email}</div>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: '0.5rem', flexShrink: 0 }}>
|
|
<button
|
|
className="btn btn-success btn-sm"
|
|
onClick={() => handleRespond(req.id, 'accepted')}
|
|
disabled={responding === req.id}
|
|
>
|
|
{responding === req.id ? '...' : 'Accept'}
|
|
</button>
|
|
<button
|
|
className="btn btn-danger btn-sm"
|
|
onClick={() => handleRespond(req.id, 'rejected')}
|
|
disabled={responding === req.id}
|
|
>
|
|
{responding === req.id ? '...' : 'Reject'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Friends List */}
|
|
<div className="card">
|
|
<h3 style={{ marginBottom: '1rem' }}>Your Friends</h3>
|
|
{friends.length === 0 && challengeFriends.length === 0 ? (
|
|
<p style={{ color: 'var(--text-muted)' }}>No friends yet. Search above to add some!</p>
|
|
) : (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
|
{friends.map(friend => (
|
|
<div key={friend.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '1rem' }}>
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div style={{ fontWeight: 500 }}>{friend.username}</div>
|
|
<div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{friend.email}</div>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexShrink: 0 }}>
|
|
<button
|
|
className="btn btn-danger btn-sm"
|
|
onClick={() => handleRemoveFriend(friend.id, friend.username)}
|
|
disabled={removing === friend.id}
|
|
style={{ flexShrink: 0 }}
|
|
>
|
|
{removing === friend.id ? 'Removing...' : 'Remove'}
|
|
</button>
|
|
</div>
|
|
<div style={{ color: 'var(--primary)', whiteSpace: 'nowrap' }}>{friend.total_points} points</div>
|
|
</div>
|
|
))}
|
|
{challengeFriends.length > 0 && (
|
|
<>
|
|
{friends.length > 0 && (
|
|
<div style={{ borderTop: '1px solid var(--border)', paddingTop: '1rem', marginTop: '0.5rem' }}>
|
|
<div style={{ fontSize: '0.875rem', color: 'var(--text-muted)', marginBottom: '0.5rem' }}>
|
|
From Challenges
|
|
</div>
|
|
</div>
|
|
)}
|
|
{friends.length === 0 && (
|
|
<div style={{ fontSize: '0.875rem', color: 'var(--text-muted)', marginBottom: '0.5rem' }}>
|
|
From Challenges
|
|
</div>
|
|
)}
|
|
{challengeFriends.map(friend => (
|
|
<div key={friend.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '1rem' }}>
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div style={{ fontWeight: 500 }}>{friend.username}</div>
|
|
<div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{friend.email}</div>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexShrink: 0, flexWrap: 'nowrap' }}>
|
|
<button
|
|
className={`btn btn-sm ${friend.friendship_status === 'pending' ? 'btn-secondary' : 'btn-primary'}`}
|
|
onClick={() => handleSendRequest(friend.id)}
|
|
disabled={sending === friend.id || friend.friendship_status === 'pending'}
|
|
style={{ flexShrink: 0 }}
|
|
>
|
|
{sending === friend.id ? 'Sending...' : friend.friendship_status === 'pending' ? 'Pending' : 'Add Friend'}
|
|
</button>
|
|
</div>
|
|
<div style={{ color: 'var(--primary)', whiteSpace: 'nowrap' }}>{friend.total_points} points</div>
|
|
</div>
|
|
))}
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|