Merge pull request #28 from Vizzuality/AF-404-500-page

[FE](feat): 404 not found page
Vizzuality · Feb 26, 2024 · c811035 · c811035
2 parents 441b315 + a609420
commit c811035
Show file tree

Hide file tree

Showing 13 changed files with 63 additions and 25 deletions.
diff --git a/client/src/app/countries/[slug]/page.tsx → ...pp/(landing)/countries/[country]/page.tsx b/client/src/app/countries/[slug]/page.tsx → ...pp/(landing)/countries/[country]/page.tsx
diff --git a/client/src/app/countries/page.tsx → client/src/app/(landing)/countries/page.tsx b/client/src/app/countries/page.tsx → client/src/app/(landing)/countries/page.tsx
diff --git a/client/src/app/datasets/page.tsx → client/src/app/(landing)/datasets/page.tsx b/client/src/app/datasets/page.tsx → client/src/app/(landing)/datasets/page.tsx
diff --git a/client/src/app/layout-providers.tsx → ...nt/src/app/(landing)/layout-providers.tsx b/client/src/app/layout-providers.tsx → ...nt/src/app/(landing)/layout-providers.tsx
diff --git a/client/src/app/(landing)/layout.tsx b/client/src/app/(landing)/layout.tsx
@@ -0,0 +1,29 @@
+import '@/styles/globals.css';
+import '@/styles/mapbox.css';
+
+import dynamic from 'next/dynamic';
+
+import Providers from '@/app/(landing)/layout-providers';
+
+import Sidebar from '@/containers/sidebar';
+
+const Map = dynamic(() => import('@/containers/map'), {
+  ssr: false,
+});
+
+export const metadata = {
+  title: 'AFoCO',
+  description: '',
+};
+
+export default function LandingLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <Providers>
+      <div className="relative h-screen w-screen">
+        <Sidebar />
+        <Map />
+        {children}
+      </div>
+    </Providers>
+  );
+}
diff --git a/client/src/app/page.tsx → client/src/app/(landing)/page.tsx b/client/src/app/page.tsx → client/src/app/(landing)/page.tsx
@@ -1,6 +1,6 @@
 import Hydrate from '@/lib/react-query/hydrate';
 
-import { prefetchQueries } from './prefetch';
+import { prefetchQueries } from '../prefetch';
 
 export default async function HomePage() {
   const dehydratedState = await prefetchQueries();

diff --git a/client/src/app/projects/[slug]/page.tsx → ...rc/app/(landing)/projects/[slug]/page.tsx b/client/src/app/projects/[slug]/page.tsx → ...rc/app/(landing)/projects/[slug]/page.tsx
diff --git a/client/src/app/projects/page.tsx → client/src/app/(landing)/projects/page.tsx b/client/src/app/projects/page.tsx → client/src/app/(landing)/projects/page.tsx
diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
@@ -1,17 +1,8 @@
 import '@/styles/globals.css';
 import '@/styles/mapbox.css';
 
-import dynamic from 'next/dynamic';
 import localFont from 'next/font/local';
 
-import Providers from '@/app/layout-providers';
-
-import Sidebar from '@/containers/sidebar';
-
-const Map = dynamic(() => import('@/containers/map'), {
-  ssr: false,
-});
-
 const bricolage = localFont({
   src: [
     {
@@ -50,16 +41,10 @@ export const metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <Providers>
-      <html lang="en">
-        <body className={`${bricolage.variable} font-sans`}>
-          <div className="relative h-screen w-screen">
-            <Sidebar />
-            <Map />
-            {children}
-          </div>
-        </body>
-      </html>
-    </Providers>
+    <html lang="en">
+      <body className={`${bricolage.variable} font-sans`}>
+        <div className="relative h-screen w-screen">{children}</div>
+      </body>
+    </html>
   );
 }
diff --git a/client/src/app/not-found.tsx b/client/src/app/not-found.tsx
@@ -1,11 +1,20 @@
 import Link from 'next/link';
 
+import { Button } from '@/components/ui/button';
+
 export default function NotFound() {
   return (
     <div className="flex h-screen w-screen flex-col items-center justify-center">
-      <h2>Not Found</h2>
-      <p>Could not find requested resource</p>
-      <Link href="/projects">Return Home</Link>
+      <h2 className="mb-24 text-[200px] font-extrabold leading-10 text-green-400">404</h2>
+      <h3 className="mb-4 text-[52px]">Page not found</h3>
+      <p className="mb-6 text-base font-light">
+        It looks like the links is broken or the page has been removed.
+      </p>
+      <Link href="/projects">
+        <Button variant="primary" size="base">
+          Go to home page
+        </Button>
+      </Link>
     </div>
   );
 }
diff --git a/client/src/containers/countries/detail/panel.tsx b/client/src/containers/countries/detail/panel.tsx
@@ -1,12 +1,19 @@
 'use client';
 import Image from 'next/image';
 import Link from 'next/link';
+import { notFound, useParams } from 'next/navigation';
 
 import { ArrowLeft } from 'lucide-react';
 
 import { PANEL_OVERVIEW_ITEMS, RESUME_ITEMS } from '@/containers/countries/detail/constants';
 
 export default function CountryDetailPanel() {
+  const params = useParams<{ country: string }>();
+
+  // TODO: We will need to fetch data and check if slug exists
+  if (!params.country) {
+    return notFound();
+  }
   return (
     <div className="p-6">
       <Link

diff --git a/client/src/containers/projects/detail/panel.tsx b/client/src/containers/projects/detail/panel.tsx
@@ -2,6 +2,7 @@
 
 import Image from 'next/image';
 import Link from 'next/link';
+import { notFound, useParams } from 'next/navigation';
 
 import { ArrowLeft, ChevronRight } from 'lucide-react';
 
@@ -13,6 +14,13 @@ import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer';
 import ProjectDashboard from './dashboard';
 
 export default function ProjectDetailPanel() {
+  const params = useParams<{ slug: string }>();
+
+  // TODO: We will need to fetch data and check if slug exists
+  if (!params.slug) {
+    return notFound();
+  }
+
   return (
     <div className="no-scrollbar h-full overflow-x-hidden rounded-3xl bg-neutral-50 p-6 pb-40">
       <div className="absolute left-0 top-0 w-full">

diff --git a/client/tsconfig.json b/client/tsconfig.json
@@ -23,6 +23,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/not-found.js"],
   "exclude": ["node_modules"]
 }