setup features
This commit is contained in:
@@ -0,0 +1,198 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import api from '../api';
|
||||
|
||||
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);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
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 = async (query) => {
|
||||
setSearchQuery(query);
|
||||
if (query.trim().length < 2) {
|
||||
setSearchResults([]);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const data = await api.searchUsers(query);
|
||||
setSearchResults(data.users);
|
||||
} catch (err) {
|
||||
console.error('Search failed:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSendRequest = async (userId) => {
|
||||
try {
|
||||
await api.sendFriendRequest(userId);
|
||||
setSearchQuery('');
|
||||
setSearchResults([]);
|
||||
alert('Friend request sent!');
|
||||
} catch (err) {
|
||||
alert('Failed to send request: ' + err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRespond = async (requestId, status) => {
|
||||
try {
|
||||
await api.respondToFriendRequest(requestId, status);
|
||||
await loadData();
|
||||
} catch (err) {
|
||||
alert('Failed to respond: ' + err.message);
|
||||
}
|
||||
};
|
||||
|
||||
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' }}>
|
||||
<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'
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<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)}
|
||||
>
|
||||
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' }}>
|
||||
<div>
|
||||
<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' }}>
|
||||
<button
|
||||
className="btn btn-success btn-sm"
|
||||
onClick={() => handleRespond(req.id, 'accepted')}
|
||||
>
|
||||
Accept
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-danger btn-sm"
|
||||
onClick={() => handleRespond(req.id, 'rejected')}
|
||||
>
|
||||
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' }}>
|
||||
<div>
|
||||
<div style={{ fontWeight: 500 }}>{friend.username}</div>
|
||||
<div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{friend.email}</div>
|
||||
</div>
|
||||
<div style={{ color: 'var(--primary)' }}>{friend.total_points} points</div>
|
||||
</div>
|
||||
))}
|
||||
{challengeFriends.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>
|
||||
{challengeFriends.map(friend => (
|
||||
<div key={friend.id} style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<div>
|
||||
<div style={{ fontWeight: 500 }}>{friend.username}</div>
|
||||
<div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{friend.email}</div>
|
||||
</div>
|
||||
<div style={{ color: 'var(--primary)' }}>{friend.total_points} points</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user