init
This commit is contained in:
Logan Cusano
55
app/main/admin/page.tsx
Normal file
55
app/main/admin/page.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
const AdminPage = () => {
|
||||
const [message, setMessage] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const auth = useAuth();
|
||||
|
||||
const handleScan = async () => {
|
||||
setError('');
|
||||
setMessage('Scanning...');
|
||||
try {
|
||||
const data = await apiRequest('/videos/scan', { method: 'POST', token: auth.token });
|
||||
setMessage(data.message);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
// In a real app, you'd fetch users and votes here
|
||||
const users = [{email: 'admin@example.com', role: 'admin'}, {email: 'user@example.com', role: 'user'}];
|
||||
const votes = [{video_id: 'xyz', decision: 'approve', reason: 'Good clip'}];
|
||||
|
||||
if (auth.user?.role !== 'admin') {
|
||||
return <p>Access Denied. You must be an admin to view this page.</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Admin Actions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button onClick={handleScan}>Scan Videos Directory</Button>
|
||||
{message && <p className="mt-4 text-green-600">{message}</p>}
|
||||
{error && <p className="mt-4 text-red-600">{error}</p>}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Users</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
{/* User list would be rendered here */}
|
||||
<p>User list functionality would go here.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Votes</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
{/* Vote list would be rendered here */}
|
||||
<p>Vote list functionality would go here.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
27
app/main/layout.tsx
Normal file
27
app/main/layout.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
const MainLayout = ({ children }) => {
|
||||
const auth = useAuth();
|
||||
|
||||
if (!auth.isAuthenticated) {
|
||||
// This would be a redirect in a real Next.js app
|
||||
return <LoginPage />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<header className="bg-white shadow-sm">
|
||||
<nav className="container mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<h1 className="text-xl font-bold">Video Voter</h1>
|
||||
<div>
|
||||
{auth.user?.role === 'admin' && (
|
||||
<a href="#admin" className="text-gray-600 hover:text-gray-900 mr-4">Admin</a>
|
||||
)}
|
||||
<Button onClick={auth.logout}>Logout</Button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main className="container mx-auto p-4">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
87
app/main/page.tsx
Normal file
87
app/main/page.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
const VotingPage = () => {
|
||||
const [video, setVideo] = useState(null);
|
||||
const [reason, setReason] = useState('');
|
||||
const [message, setMessage] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const auth = useAuth();
|
||||
|
||||
const fetchNextVideo = async () => {
|
||||
setError('');
|
||||
setMessage('');
|
||||
setVideo(null);
|
||||
try {
|
||||
const data = await apiRequest('/videos/vote-next', { token: auth.token });
|
||||
setVideo(data);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const submitVote = async (decision) => {
|
||||
if (!video) return;
|
||||
setError('');
|
||||
setMessage('');
|
||||
try {
|
||||
const body = { decision, reason, recommended_game: '' }; // Add recommended_game if needed
|
||||
await apiRequest(`/videos/${video.id}/vote`, {
|
||||
method: 'POST',
|
||||
body,
|
||||
token: auth.token
|
||||
});
|
||||
setMessage(`Vote '${decision}' submitted successfully!`);
|
||||
setVideo(null);
|
||||
setReason('');
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Vote on a Video</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{!video && (
|
||||
<div className="text-center">
|
||||
<Button onClick={fetchNextVideo}>Get Next Video to Vote On</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && <p className="text-center text-red-500">{error}</p>}
|
||||
{message && <p className="text-center text-green-500">{message}</p>}
|
||||
|
||||
{video && (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<video
|
||||
key={video.id}
|
||||
className="w-full rounded-lg bg-black"
|
||||
controls
|
||||
src={`${API_URL}/videos/${video.id}/stream?token=${auth.token}`}
|
||||
// The token in query param is a simple way for this demo.
|
||||
// In a real app, you might handle auth differently for media.
|
||||
>
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
<p><strong>Person:</strong> {video.person}</p>
|
||||
<p><strong>Game:</strong> {video.game || 'N/A'}</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="reason">Reason (Optional)</label>
|
||||
<Textarea id="reason" value={reason} onChange={(e) => setReason(e.target.value)} />
|
||||
</div>
|
||||
<div className="flex space-x-4">
|
||||
<Button className="w-full bg-green-600 hover:bg-green-700" onClick={() => submitVote('approve')}>Approve</Button>
|
||||
<Button className="w-full bg-red-600 hover:bg-red-700" onClick={() => submitVote('reject')}>Reject</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user