mirror of
https://github.com/lucasrcsantana/story-generator.git
synced 2025-12-16 21:37:51 +00:00
1c6aa56b32
- Alinha estilo com StudentStoriesPage - Adiciona busca e filtros avançados - Melhora feedback visual e estados interativos - Implementa loading states animados
286 lines
10 KiB
TypeScript
286 lines
10 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { supabase } from '@/lib/supabase';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Plus, Search, Filter, PenTool } from 'lucide-react';
|
|
import { useSession } from '@/hooks/useSession';
|
|
import { useUppercasePreference } from '@/hooks/useUppercasePreference';
|
|
import { AdaptiveText } from '@/components/ui/adaptive-text';
|
|
|
|
interface Essay {
|
|
id: string;
|
|
title: string;
|
|
type_id: string;
|
|
genre_id: string;
|
|
status: 'draft' | 'submitted' | 'analyzed';
|
|
created_at: string;
|
|
essay_type: {
|
|
title: string;
|
|
};
|
|
essay_genre: {
|
|
title: string;
|
|
};
|
|
}
|
|
|
|
type EssayStatus = 'all' | 'draft' | 'submitted' | 'analyzed';
|
|
type SortOption = 'recent' | 'oldest' | 'title';
|
|
|
|
export function EssaysPage() {
|
|
const navigate = useNavigate();
|
|
const [essays, setEssays] = useState<Essay[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [statusFilter, setStatusFilter] = useState<EssayStatus>('all');
|
|
const [sortBy, setSortBy] = useState<SortOption>('recent');
|
|
const [showFilters, setShowFilters] = useState(false);
|
|
const { session } = useSession();
|
|
const { isUpperCase } = useUppercasePreference(session?.user?.id);
|
|
|
|
useEffect(() => {
|
|
loadEssays();
|
|
}, [statusFilter, sortBy]);
|
|
|
|
async function loadEssays() {
|
|
try {
|
|
const { data: { session } } = await supabase.auth.getSession();
|
|
if (!session?.user?.id) return;
|
|
|
|
const query = supabase
|
|
.from('student_essays')
|
|
.select(`
|
|
*,
|
|
essay_type:essay_types(title),
|
|
essay_genre:essay_genres(title)
|
|
`)
|
|
.eq('student_id', session.user.id);
|
|
|
|
if (statusFilter !== 'all') {
|
|
query.eq('status', statusFilter);
|
|
}
|
|
|
|
const { data, error } = await query;
|
|
if (error) {
|
|
setError('Não foi possível carregar suas redações');
|
|
return;
|
|
}
|
|
|
|
// Aplicar ordenação
|
|
const sortedData = (data || []).sort((a, b) => {
|
|
switch (sortBy) {
|
|
case 'oldest':
|
|
return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
|
|
case 'title':
|
|
return a.title.localeCompare(b.title);
|
|
default: // recent
|
|
return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
|
|
}
|
|
});
|
|
|
|
setEssays(sortedData);
|
|
} catch (error) {
|
|
console.error('Erro ao carregar redações:', error);
|
|
setError('Não foi possível carregar suas redações');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
const filteredEssays = essays.filter(essay =>
|
|
essay.title.toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
|
|
function getStatusBadge(status: Essay['status']) {
|
|
const statusMap = {
|
|
draft: { label: 'Rascunho', variant: 'secondary' as const, classes: 'bg-yellow-100 text-yellow-800' },
|
|
submitted: { label: 'Enviada', variant: 'default' as const, classes: 'bg-blue-100 text-blue-800' },
|
|
analyzed: { label: 'Analisada', variant: 'success' as const, classes: 'bg-green-100 text-green-800' }
|
|
};
|
|
|
|
const { label, classes } = statusMap[status];
|
|
return (
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${classes}`}>
|
|
<AdaptiveText text={label} isUpperCase={isUpperCase} />
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="animate-pulse">
|
|
<div className="h-20 bg-gray-200 rounded-xl mb-6" />
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{[...Array(6)].map((_, i) => (
|
|
<div key={i} className="h-64 bg-gray-200 rounded-xl" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h1 className="text-2xl font-bold text-gray-900">
|
|
<AdaptiveText text="Minhas Redações" isUpperCase={isUpperCase} />
|
|
</h1>
|
|
<Button
|
|
onClick={() => navigate('/aluno/redacoes/nova')}
|
|
className="flex items-center gap-2"
|
|
trackingId="essay-new-create-button"
|
|
trackingProperties={{
|
|
action: 'create_new_essay',
|
|
page: 'essays_list'
|
|
}}
|
|
>
|
|
<Plus className="h-5 w-5" />
|
|
<AdaptiveText text="Nova Redação" isUpperCase={isUpperCase} />
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-6">
|
|
<div className="p-4 border-b border-gray-200">
|
|
<div className="flex flex-col md:flex-row gap-4">
|
|
{/* Busca */}
|
|
<div className="flex-1 relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Buscar redações..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Filtros e Ordenação */}
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => setShowFilters(!showFilters)}
|
|
className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"
|
|
>
|
|
<Filter className="h-5 w-5" />
|
|
<AdaptiveText text="Filtros" isUpperCase={isUpperCase} />
|
|
</button>
|
|
<select
|
|
value={sortBy}
|
|
onChange={(e) => setSortBy(e.target.value as SortOption)}
|
|
className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500"
|
|
>
|
|
<option value="recent">Mais recentes</option>
|
|
<option value="oldest">Mais antigas</option>
|
|
<option value="title">Por título</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Painel de Filtros */}
|
|
{showFilters && (
|
|
<div className="mt-4 pt-4 border-t border-gray-200">
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => setStatusFilter('all')}
|
|
className={`px-4 py-2 rounded-lg ${
|
|
statusFilter === 'all'
|
|
? 'bg-purple-100 text-purple-700'
|
|
: 'hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
<AdaptiveText text="Todas" isUpperCase={isUpperCase} />
|
|
</button>
|
|
<button
|
|
onClick={() => setStatusFilter('analyzed')}
|
|
className={`px-4 py-2 rounded-lg ${
|
|
statusFilter === 'analyzed'
|
|
? 'bg-purple-100 text-purple-700'
|
|
: 'hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
<AdaptiveText text="Analisadas" isUpperCase={isUpperCase} />
|
|
</button>
|
|
<button
|
|
onClick={() => setStatusFilter('submitted')}
|
|
className={`px-4 py-2 rounded-lg ${
|
|
statusFilter === 'submitted'
|
|
? 'bg-purple-100 text-purple-700'
|
|
: 'hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
<AdaptiveText text="Enviadas" isUpperCase={isUpperCase} />
|
|
</button>
|
|
<button
|
|
onClick={() => setStatusFilter('draft')}
|
|
className={`px-4 py-2 rounded-lg ${
|
|
statusFilter === 'draft'
|
|
? 'bg-purple-100 text-purple-700'
|
|
: 'hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
<AdaptiveText text="Rascunhos" isUpperCase={isUpperCase} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Lista de Redações */}
|
|
{filteredEssays.length === 0 ? (
|
|
<div className="p-12 text-center">
|
|
<PenTool className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
|
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
|
<AdaptiveText text="Nenhuma redação encontrada" isUpperCase={isUpperCase} />
|
|
</h3>
|
|
<p className="text-gray-500 mb-6">
|
|
<AdaptiveText
|
|
text={searchTerm
|
|
? 'Tente usar outros termos na busca'
|
|
: 'Comece criando sua primeira redação!'}
|
|
isUpperCase={isUpperCase}
|
|
/>
|
|
</p>
|
|
{!searchTerm && (
|
|
<Button
|
|
onClick={() => navigate('/aluno/redacoes/nova')}
|
|
className="inline-flex items-center gap-2"
|
|
trackingId="essay-empty-create-button"
|
|
trackingProperties={{
|
|
action: 'create_first_essay',
|
|
page: 'essays_list',
|
|
context: 'empty_state'
|
|
}}
|
|
>
|
|
<Plus className="h-5 w-5" />
|
|
<AdaptiveText text="Criar Redação" isUpperCase={isUpperCase} />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
|
|
{filteredEssays.map((essay) => (
|
|
<div
|
|
key={essay.id}
|
|
className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden cursor-pointer hover:shadow-md transition"
|
|
onClick={() => navigate(`/aluno/redacoes/${essay.id}`)}
|
|
>
|
|
<div className="p-6">
|
|
<h3 className="font-medium text-gray-900 mb-2">
|
|
<AdaptiveText text={essay.title} isUpperCase={isUpperCase} />
|
|
</h3>
|
|
<div className="flex items-center gap-2 text-sm text-gray-600 mb-4">
|
|
<AdaptiveText text={essay.essay_type?.title} isUpperCase={isUpperCase} />
|
|
<span>•</span>
|
|
<AdaptiveText text={essay.essay_genre?.title} isUpperCase={isUpperCase} />
|
|
</div>
|
|
<div className="flex items-center justify-between text-sm text-gray-500">
|
|
<span>{new Date(essay.created_at).toLocaleDateString('pt-BR')}</span>
|
|
{getStatusBadge(essay.status)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|