From 35ea4caa397fed8a48b569f0ba92ec6046f1c8f5 Mon Sep 17 00:00:00 2001 From: Guillermo Arrieta Medina Date: Wed, 28 Jan 2026 12:56:08 -0600 Subject: [PATCH] Fallback elegante de vista no encontrada MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit close #44: Se creó la NotFoundPage y se utiliza en __root con el notFoundComponent. Se agregó la lógica del loader tanto de plan de estudios como de asignaturas. Se agregó el NotFoundComponent para el detalle de plan de estudios y el de asignaturas --- .../planes/wizard/WizardControls.tsx | 26 +++++------ src/components/ui/NotFoundPage.tsx | 44 +++++++++++++++++++ src/data/api/plans.api.ts | 4 +- src/data/hooks/usePlans.ts | 5 ++- src/routeTree.gen.ts | 4 ++ src/routes/__root.tsx | 4 ++ src/routes/planes/$planId/_detalle/datos.tsx | 4 +- .../planes/$planId/_detalle/materias.tsx | 12 ++--- src/routes/planes/$planId/_detalle/route.tsx | 35 +++++++++++++-- .../planes/$planId/asignaturas/route.tsx | 27 +++++++++++- 10 files changed, 136 insertions(+), 29 deletions(-) create mode 100644 src/components/ui/NotFoundPage.tsx diff --git a/src/components/planes/wizard/WizardControls.tsx b/src/components/planes/wizard/WizardControls.tsx index e40492b..f70cf35 100644 --- a/src/components/planes/wizard/WizardControls.tsx +++ b/src/components/planes/wizard/WizardControls.tsx @@ -118,7 +118,10 @@ export function WizardControls({ } return ( -
+
+
{errorMessage && ( @@ -126,20 +129,15 @@ export function WizardControls({ )}
-
- - {isLastStep ? ( - - ) : ( - - )} -
+ ) : ( + + )}
) } diff --git a/src/components/ui/NotFoundPage.tsx b/src/components/ui/NotFoundPage.tsx new file mode 100644 index 0000000..0980008 --- /dev/null +++ b/src/components/ui/NotFoundPage.tsx @@ -0,0 +1,44 @@ +import { Link, useRouter } from '@tanstack/react-router' +import { FileQuestion, Home, ArrowLeft } from 'lucide-react' + +import { Button } from './button' + +interface NotFoundPageProps { + title?: string + message?: string + children?: React.ReactNode +} + +export function NotFoundPage({ + title = 'Página no encontrada', + message = 'Lo sentimos, no pudimos encontrar lo que buscabas. Es posible que la página haya sido movida o eliminada.', + children, +}: NotFoundPageProps) { + const router = useRouter() + + return ( +
+
+ +
+ +

{title}

+

{message}

+ +
+ + + + {children} +
+
+ ) +} diff --git a/src/data/api/plans.api.ts b/src/data/api/plans.api.ts index ff97ea2..8a47440 100644 --- a/src/data/api/plans.api.ts +++ b/src/data/api/plans.api.ts @@ -123,6 +123,8 @@ export async function plans_list( } export async function plans_get(planId: UUID): Promise { + console.log('plans_get') + const supabase = supabaseBrowser() const { data, error } = await supabase @@ -350,7 +352,7 @@ export async function plans_update_fields( patch: PlansUpdateFieldsPatch, ): Promise { const supabase = supabaseBrowser() - + const { data, error } = await supabase .from('planes_estudio') .update(patch) diff --git a/src/data/hooks/usePlans.ts b/src/data/hooks/usePlans.ts index 7e9dae0..1625ed6 100644 --- a/src/data/hooks/usePlans.ts +++ b/src/data/hooks/usePlans.ts @@ -53,7 +53,10 @@ export function usePlanes(filters: PlanListFilters) { export function usePlan(planId: UUID | null | undefined) { return useQuery({ queryKey: planId ? qk.plan(planId) : ['planes', 'detail', null], - queryFn: () => plans_get(planId as UUID), + queryFn: () => { + console.log('usePlan') + return plans_get(planId as UUID) + }, enabled: Boolean(planId), }) } diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts index 71e646a..c532d45 100644 --- a/src/routeTree.gen.ts +++ b/src/routeTree.gen.ts @@ -321,6 +321,7 @@ declare module '@tanstack/react-router' { '/planes/$planId/': { id: '/planes/$planId/' path: '/planes/$planId' +<<<<<<< HEAD <<<<<<< HEAD fullPath: '/planes/$planId/' ======= @@ -334,6 +335,9 @@ declare module '@tanstack/react-router' { fullPath: '/planes/$planId/' >>>>>>> cbe4e54 (Se cierran incidencias #10, #21, #24, #25; se añade generación manual de planes) >>>>>>> 9584cd0c048cf1f4477a4db80947de38e6c75632 +======= + fullPath: '/planes/$planId/' +>>>>>>> 9d72010 (Fallback elegante de vista no encontrada) preLoaderRoute: typeof PlanesPlanIdIndexRouteImport parentRoute: typeof rootRouteImport } diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx index df2ae01..5ee62f5 100644 --- a/src/routes/__root.tsx +++ b/src/routes/__root.tsx @@ -7,6 +7,8 @@ import TanStackQueryDevtools from '../integrations/tanstack-query/devtools' import type { QueryClient } from '@tanstack/react-query' +import { NotFoundPage } from '@/components/ui/NotFoundPage' + interface MyRouterContext { queryClient: QueryClient } @@ -31,6 +33,8 @@ export const Route = createRootRouteWithContext()({ ), + notFoundComponent: () => , + errorComponent: ({ error, reset }) => { return (
diff --git a/src/routes/planes/$planId/_detalle/datos.tsx b/src/routes/planes/$planId/_detalle/datos.tsx index 4fdb2a7..357baad 100644 --- a/src/routes/planes/$planId/_detalle/datos.tsx +++ b/src/routes/planes/$planId/_detalle/datos.tsx @@ -204,7 +204,7 @@ function DatosGeneralesPage() {