114 lines
3.5 KiB
TypeScript
114 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import Header from '../components/Header';
|
|
import Sidebar from '../components/Sidebar';
|
|
import RecordingList from '../components/RecordingList';
|
|
import type { User, Recording } from '@/types';
|
|
|
|
export default function RecordingsPage() {
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [recordings, setRecordings] = useState<Recording[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [sortBy, setSortBy] = useState<'date' | 'title'>('date');
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
// Fetch current user
|
|
fetch('/api/auth/me')
|
|
.then(res => {
|
|
if (!res.ok) {
|
|
router.push('/login');
|
|
return null;
|
|
}
|
|
return res.json();
|
|
})
|
|
.then(data => {
|
|
if (data) setUser(data);
|
|
})
|
|
.catch(() => router.push('/login'));
|
|
|
|
// Fetch recordings
|
|
fetch('/api/recordings')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.recordings) {
|
|
setRecordings(data.recordings);
|
|
}
|
|
})
|
|
.catch(console.error)
|
|
.finally(() => setIsLoading(false));
|
|
}, [router]);
|
|
|
|
const handleSelectRecording = (id: string) => {
|
|
router.push(`/recordings/${id}`);
|
|
};
|
|
|
|
const handleDeleteRecording = async (id: string) => {
|
|
try {
|
|
const response = await fetch(`/api/recordings/${id}`, {
|
|
method: 'DELETE',
|
|
});
|
|
|
|
if (response.ok) {
|
|
setRecordings(recordings.filter(r => r.id !== id));
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to delete recording:', error);
|
|
}
|
|
};
|
|
|
|
const filteredRecordings = recordings.filter(r =>
|
|
r.title.toLowerCase().includes(searchQuery.toLowerCase())
|
|
);
|
|
|
|
const sortedRecordings = [...filteredRecordings].sort((a, b) => {
|
|
if (sortBy === 'date') {
|
|
return new Date(b.createdAt ?? '').getTime() - new Date(a.createdAt ?? '').getTime();
|
|
} else {
|
|
return a.title.localeCompare(b.title);
|
|
}
|
|
});
|
|
|
|
return (
|
|
<div className="flex min-h-screen bg-gray-50">
|
|
<Sidebar activePath="/recordings" />
|
|
<div className="flex-1">
|
|
<Header user={user} />
|
|
<main className="p-6">
|
|
<div className="max-w-4xl mx-auto">
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-6">Recordings</h1>
|
|
|
|
<div className="bg-white border rounded-lg p-4 mb-6 flex gap-4">
|
|
<input
|
|
type="text"
|
|
placeholder="Search recordings..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
<select
|
|
value={sortBy}
|
|
onChange={(e) => setSortBy(e.target.value as 'date' | 'title')}
|
|
className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
>
|
|
<option value="date">Sort by Date</option>
|
|
<option value="title">Sort by Title</option>
|
|
</select>
|
|
</div>
|
|
|
|
<RecordingList
|
|
recordings={sortedRecordings}
|
|
isLoading={isLoading}
|
|
onSelectRecording={handleSelectRecording}
|
|
onDeleteRecording={handleDeleteRecording}
|
|
/>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|