291 lines
10 KiB
JavaScript
291 lines
10 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { useParams, Link } from 'react-router-dom';
|
|
import { useAuth } from '../AuthContext';
|
|
import api from '../api';
|
|
|
|
export default function ChallengeDetail() {
|
|
const { id } = useParams();
|
|
const { user } = useAuth();
|
|
const [challenge, setChallenge] = useState(null);
|
|
const [predictions, setPredictions] = useState([]);
|
|
const [leaderboard, setLeaderboard] = useState([]);
|
|
const [newPrediction, setNewPrediction] = useState('');
|
|
const [inviteQuery, setInviteQuery] = useState('');
|
|
const [searchResults, setSearchResults] = useState([]);
|
|
const [showInvite, setShowInvite] = useState(false);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
loadChallenge();
|
|
loadPredictions();
|
|
loadLeaderboard();
|
|
}, [id]);
|
|
|
|
const loadChallenge = async () => {
|
|
try {
|
|
const data = await api.getChallenge(id);
|
|
setChallenge(data);
|
|
} catch (err) {
|
|
console.error('Failed to load challenge:', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const loadPredictions = async () => {
|
|
try {
|
|
const data = await api.getPredictions(id);
|
|
setPredictions(data.predictions);
|
|
} catch (err) {
|
|
console.error('Failed to load predictions:', err);
|
|
}
|
|
};
|
|
|
|
const loadLeaderboard = async () => {
|
|
try {
|
|
const data = await api.getChallengeLeaderboard(id);
|
|
setLeaderboard(data.leaderboard);
|
|
} catch (err) {
|
|
console.error('Failed to load leaderboard:', err);
|
|
}
|
|
};
|
|
|
|
const handleCreatePrediction = async (e) => {
|
|
e.preventDefault();
|
|
if (!newPrediction.trim()) return;
|
|
|
|
try {
|
|
await api.createPrediction({
|
|
challenge_id: id,
|
|
content: newPrediction
|
|
});
|
|
setNewPrediction('');
|
|
await loadPredictions();
|
|
} catch (err) {
|
|
alert('Failed to create prediction: ' + err.message);
|
|
}
|
|
};
|
|
|
|
const handleValidate = async (predictionId, status) => {
|
|
try {
|
|
await api.validatePrediction(predictionId, status);
|
|
await loadPredictions();
|
|
await loadLeaderboard();
|
|
} catch (err) {
|
|
alert('Failed to validate: ' + err.message);
|
|
}
|
|
};
|
|
|
|
const handleSearchUsers = async (query) => {
|
|
setInviteQuery(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 handleInvite = async (userId) => {
|
|
try {
|
|
await api.inviteToChallenge(id, { user_ids: [userId] });
|
|
setInviteQuery('');
|
|
setSearchResults([]);
|
|
alert('Invitation sent!');
|
|
} catch (err) {
|
|
alert('Failed to send invite: ' + err.message);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return <div className="loading">Loading challenge...</div>;
|
|
}
|
|
|
|
if (!challenge) {
|
|
return <div className="loading">Challenge not found</div>;
|
|
}
|
|
|
|
return (
|
|
<div style={{ padding: '2rem 0' }}>
|
|
<div className="container">
|
|
{/* Header */}
|
|
<div style={{ marginBottom: '2rem' }}>
|
|
<Link to="/challenges" style={{ color: 'var(--primary)', textDecoration: 'none' }}>← Back to Challenges</Link>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', gap: '2rem', marginBottom: '2rem', flexWrap: 'wrap' }}>
|
|
{challenge.challenge.cover_image_url && (
|
|
<img
|
|
src={challenge.challenge.cover_image_url}
|
|
alt={challenge.challenge.title}
|
|
style={{ width: '150px', height: '225px', objectFit: 'cover', borderRadius: '0.5rem' }}
|
|
/>
|
|
)}
|
|
<div style={{ flex: 1 }}>
|
|
<h1 style={{ marginBottom: '0.5rem' }}>{challenge.challenge.title}</h1>
|
|
<p style={{ color: 'var(--text-muted)', marginBottom: '1rem' }}>
|
|
Created by {challenge.challenge.creator_username}
|
|
</p>
|
|
<button
|
|
className="btn btn-secondary btn-sm"
|
|
onClick={() => setShowInvite(!showInvite)}
|
|
>
|
|
{showInvite ? 'Cancel' : 'Invite Friends'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Invite Section */}
|
|
{showInvite && (
|
|
<div className="card" style={{ marginBottom: '2rem', position: 'relative' }}>
|
|
<h3 style={{ marginBottom: '1rem' }}>Invite Someone</h3>
|
|
<input
|
|
type="text"
|
|
className="input"
|
|
placeholder="Search by username or email..."
|
|
value={inviteQuery}
|
|
onChange={(e) => handleSearchUsers(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}
|
|
onClick={() => handleInvite(user.id)}
|
|
style={{
|
|
padding: '1rem',
|
|
borderBottom: '1px solid var(--border)',
|
|
cursor: 'pointer'
|
|
}}
|
|
>
|
|
<div style={{ fontWeight: 500 }}>{user.username}</div>
|
|
<div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{user.email}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div style={{ display: 'grid', gap: '2rem', gridTemplateColumns: 'minmax(0, 1fr) 300px' }}>
|
|
{/* Main Content */}
|
|
<div>
|
|
{/* New Prediction */}
|
|
<div className="card" style={{ marginBottom: '2rem' }}>
|
|
<h3 style={{ marginBottom: '1rem' }}>Make a Prediction</h3>
|
|
<form onSubmit={handleCreatePrediction}>
|
|
<textarea
|
|
className="textarea"
|
|
placeholder="I predict that..."
|
|
value={newPrediction}
|
|
onChange={(e) => setNewPrediction(e.target.value)}
|
|
style={{ minHeight: '80px' }}
|
|
/>
|
|
<button type="submit" className="btn btn-primary" style={{ marginTop: '1rem' }}>
|
|
Submit Prediction
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Predictions Feed */}
|
|
<h3 style={{ marginBottom: '1rem' }}>Predictions</h3>
|
|
{predictions.length === 0 ? (
|
|
<div className="card" style={{ textAlign: 'center', padding: '2rem' }}>
|
|
<p style={{ color: 'var(--text-muted)' }}>No predictions yet. Be the first!</p>
|
|
</div>
|
|
) : (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
|
{predictions.map(pred => (
|
|
<div key={pred.id} className="card">
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
|
|
<strong>{pred.username}</strong>
|
|
<span style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>
|
|
{new Date(pred.created_at).toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
<p style={{ marginBottom: '1rem' }}>{pred.content}</p>
|
|
<div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap' }}>
|
|
{pred.status === 'pending' && pred.user_id !== user.id && (
|
|
<>
|
|
<button
|
|
className="btn btn-success btn-sm"
|
|
onClick={() => handleValidate(pred.id, 'validated')}
|
|
>
|
|
✓ Validate
|
|
</button>
|
|
<button
|
|
className="btn btn-danger btn-sm"
|
|
onClick={() => handleValidate(pred.id, 'invalidated')}
|
|
>
|
|
✗ Invalidate
|
|
</button>
|
|
</>
|
|
)}
|
|
{pred.status === 'validated' && (
|
|
<span style={{ color: 'var(--success)', fontSize: '0.875rem' }}>
|
|
✓ Validated by {pred.validated_by_username}
|
|
</span>
|
|
)}
|
|
{pred.status === 'invalidated' && (
|
|
<span style={{ color: 'var(--danger)', fontSize: '0.875rem' }}>
|
|
✗ Invalidated by {pred.validated_by_username}
|
|
</span>
|
|
)}
|
|
{pred.status === 'pending' && (
|
|
<span style={{ color: 'var(--warning)', fontSize: '0.875rem' }}>
|
|
⏳ Pending validation
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Sidebar - Leaderboard */}
|
|
<div>
|
|
<div className="card">
|
|
<h3 style={{ marginBottom: '1rem' }}>Leaderboard</h3>
|
|
{leaderboard.length === 0 ? (
|
|
<p style={{ color: 'var(--text-muted)', fontSize: '0.875rem' }}>No points yet</p>
|
|
) : (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
|
{leaderboard.map((entry, index) => (
|
|
<div key={entry.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<div>
|
|
<span style={{ marginRight: '0.5rem', color: 'var(--text-muted)' }}>{index + 1}.</span>
|
|
<strong>{entry.username}</strong>
|
|
</div>
|
|
<span style={{ color: 'var(--primary)', fontWeight: 600 }}>
|
|
{entry.validated_points} pts
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|