From 7087a87ecede2ebb093516f2315d21f589aafaba Mon Sep 17 00:00:00 2001 From: Lucas Santana Date: Mon, 23 Dec 2024 18:21:32 -0300 Subject: [PATCH] =?UTF-8?q?refactor:=20atualiza=20interface=20de=20capa=20?= =?UTF-8?q?das=20hist=C3=B3rias?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Adiciona tipagem para cover na interface Story - Atualiza queries para usar story_pages como capa - Usa página 1 como capa padrão das histórias - Otimiza carregamento de imagens com parâmetros --- CHANGELOG.md | 5 + src/pages/student-dashboard/StoryPage.tsx | 9 +- .../StudentDashboardPage.tsx | 4 +- .../student-dashboard/StudentStoriesPage.tsx | 45 +++-- src/routes/index_old.tsx | 158 ------------------ src/types/database.ts | 1 + 6 files changed, 42 insertions(+), 180 deletions(-) delete mode 100644 src/routes/index_old.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 09f26cb..bd8165c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -43,6 +43,11 @@ e este projeto adere ao [Semantic Versioning](https://semver.org/lang/pt-BR/). - Uso da primeira página como capa - Tamanho reduzido para thumbnails - Carregamento lazy para melhor performance +- Refatoração da interface de capa + - Tipagem específica para cover na interface Story + - Padronização do uso da primeira página como capa + - Otimização de queries para busca de capas + - Parâmetros de transformação para thumbnails - Padronização da interface de histórias - Consistência visual entre dashboard e lista diff --git a/src/pages/student-dashboard/StoryPage.tsx b/src/pages/student-dashboard/StoryPage.tsx index a6e86ab..704bddf 100644 --- a/src/pages/student-dashboard/StoryPage.tsx +++ b/src/pages/student-dashboard/StoryPage.tsx @@ -194,11 +194,11 @@ export function StoryPage() { if (storyError) throw storyError; // Ordenar páginas por número - const orderedPages = storyData.story_pages.sort((a, b) => a.page_number - b.page_number); + const orderedPages = storyData.story_pages.sort((a: { page_number: number }, b: { page_number: number }) => a.page_number - b.page_number); setStory({ ...storyData, content: { - pages: orderedPages.map(page => ({ + pages: orderedPages.map((page: { text: string; image_url: string }) => ({ text: page.text, image: page.image_url })) @@ -301,9 +301,10 @@ export function StoryPage() { // Pré-carregar próxima imagem useEffect(() => { - if (story?.content?.pages?.[currentPage + 1]?.image) { + const nextImageUrl = story?.content?.pages?.[currentPage + 1]?.image; + if (nextImageUrl) { const nextImage = new Image(); - nextImage.src = story.content.pages[currentPage + 1].image; + nextImage.src = nextImageUrl; } }, [currentPage, story]); diff --git a/src/pages/student-dashboard/StudentDashboardPage.tsx b/src/pages/student-dashboard/StudentDashboardPage.tsx index 105b6f2..c7fc7ec 100644 --- a/src/pages/student-dashboard/StudentDashboardPage.tsx +++ b/src/pages/student-dashboard/StudentDashboardPage.tsx @@ -65,7 +65,7 @@ export function StudentDashboardPage() { currentLevel: 3 // Exemplo }); - // Buscar histórias recentes + // Buscar histórias recentes com a primeira página como capa const { data, error } = await supabase .from('stories') .select(` @@ -75,7 +75,7 @@ export function StudentDashboardPage() { ) `) .eq('student_id', session.user.id) - .eq('story_pages.page_number', 1) + .eq('story_pages.page_number', 1) // Garante que pegamos a primeira página .order('created_at', { ascending: false }) .limit(3); diff --git a/src/pages/student-dashboard/StudentStoriesPage.tsx b/src/pages/student-dashboard/StudentStoriesPage.tsx index 3974066..24cc1f3 100644 --- a/src/pages/student-dashboard/StudentStoriesPage.tsx +++ b/src/pages/student-dashboard/StudentStoriesPage.tsx @@ -23,22 +23,35 @@ export function StudentStoriesPage() { const { data: { session } } = await supabase.auth.getSession(); if (!session?.user?.id) return; - const { data, error } = await supabase + const query = supabase .from('stories') - .select(` - *, - cover:story_pages!inner( - image_url - ) - `) - .eq('student_id', session.user.id) - .eq('story_pages.page_number', 1) - .order('created_at', { ascending: false }); + .select('*') + .eq('student_id', session.user.id); + if (statusFilter !== 'all') { + query.eq('status', statusFilter); + } + + let { data, error } = await query; if (error) throw error; - setStories(data || []); + + // 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); + case 'performance': + return (b.performance_score || 0) - (a.performance_score || 0); + default: // recent + return new Date(b.created_at).getTime() - new Date(a.created_at).getTime(); + } + }); + + setStories(sortedData); } catch (err) { - console.error('Erro ao carregar histórias:', err); + console.error('Erro ao buscar histórias:', err); setError('Não foi possível carregar suas histórias'); } finally { setLoading(false); @@ -46,7 +59,7 @@ export function StudentStoriesPage() { }; fetchStories(); - }, []); + }, [statusFilter, sortBy]); const filteredStories = stories.filter(story => story.title.toLowerCase().includes(searchTerm.toLowerCase()) @@ -184,10 +197,10 @@ export function StudentStoriesPage() { className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden cursor-pointer hover:shadow-md transition" onClick={() => navigate(`/aluno/historias/${story.id}`)} > - {story.cover && ( -
+ {story.content?.pages?.[0]?.image && ( +
{story.title}, - children: [ - { - index: true, - element: , - }, - { - path: 'demo', - element: - }, - { - path: 'login', - children: [ - { - path: 'school', - element: , - }, - { - path: 'teacher', - element: , - }, - { - path: 'student', - element: , - } - ] - }, - { - path: 'register', - children: [ - { - path: 'school', - element: , - }, - { - path: 'teacher', - element: { - console.log(userData); - }} - />, - } - ] - }, - { - path: 'dashboard', - element: , - children: [ - { - index: true, - element: , - }, - { - path: 'turmas', - children: [ - { - index: true, - element: , - }, - { - path: 'nova', - element: , - } - ] - }, - { - path: 'professores', - children: [ - { - index: true, - element: , - }, - { - path: 'convidar', - element: , - } - ] - }, - { - path: 'alunos', - children: [ - { - index: true, - element: , - }, - { - path: 'novo', - element: , - } - ] - } - ] - }, - { - path: 'auth/callback', - element: - }, - { - path: 'story/:storyId', - element: - }, - { - path: 'aluno', - element: , - children: [ - { - index: true, - element: , - }, - { - path: 'configuracoes', - element: , - }, - { - path: 'conquistas', - element: , - }, - { - path: 'historias/:id', - element: , - }, - { - path: 'turmas/:classId', - element: , - } - ] - } - ], - } -]); \ No newline at end of file diff --git a/src/types/database.ts b/src/types/database.ts index 6461234..96f7646 100644 --- a/src/types/database.ts +++ b/src/types/database.ts @@ -105,6 +105,7 @@ export interface StoryPage { } export interface Story { + cover: any; id: string; student_id: string; class_id: string;