Handled 404 pages

silversonicaxel · Sep 10, 2024 · c134ad1 · c134ad1
1 parent 9b80972
commit c134ad1
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 2 deletions.
diff --git a/locales/en/common.json b/locales/en/common.json
@@ -70,5 +70,8 @@
         "label": "reload the {{page}} page"
       }
     }
+  },
+  "notfound": {
+    "description": "the page is not found, visit the home page to solve the problem."
   }
 }
diff --git a/locales/it/common.json b/locales/it/common.json
@@ -70,5 +70,8 @@
         "label": "ricarica la pagina {{page}}"
       }
     }
+  },
+  "notfound": {
+    "description": "la pagina non è stata trovata, visita la pagina home per risolvere il problema."
   }
 }
diff --git a/src/app/[locale]/not-found.tsx b/src/app/[locale]/not-found.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { useParams } from 'next/navigation'
+import type { Metadata } from 'next/types'
+import { useCallback } from 'react'
+
+import { ErrorContent } from 'src/components/error-content'
+import { useTranslationClient } from 'src/helpers/hooks/useTranslationClient'
+import { ComponentErrorParams } from 'src/types/component'
+
+
+type HomeNotFoundProps = ComponentErrorParams
+
+export const metadata: Metadata = {
+  title: 'unknown art',
+}
+
+export default function HomeNotFound({ reset }: HomeNotFoundProps) {
+  const params = useParams()
+  const locale = params.locale as string
+
+  const { t } = useTranslationClient({ locale, namespace: 'common' })
+  const tPage = t('menu.home')
+
+  const onReset = useCallback(() => {
+    reset()
+  }, [reset])
+
+  return (<ErrorContent page={tPage} onReset={onReset} isNotFound />)
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,37 @@
+import 'src/styles/globals.css'
+import 'src/styles/reset.css'
+import type { ReactNode } from 'react'
+
+import { Analytics } from 'src/components/analytics'
+import { Header } from 'src/components/header'
+import { font } from 'src/helpers/config/font'
+import { DialogProvider } from 'src/helpers/providers/dialog'
+import { isEnvironmentProduction } from 'src/helpers/utils/isEnvironment'
+import type { ComponentParams } from 'src/types/component'
+
+
+type AppLayoutProps = {
+  children: ReactNode
+} & ComponentParams
+
+export default function AppLayout({ children }: AppLayoutProps) {
+  const environment = process.env.NEXT_PUBLIC_NODE_ENV || 'development'
+
+  return (
+    <html>
+      <head />
+
+      {isEnvironmentProduction(environment) && (<Analytics />)}
+
+      <body className={font.className}>
+        <DialogProvider />
+
+        <main>
+          <Header />
+
+          {children}
+        </main>
+      </body>
+    </html>
+  )
+}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { useParams } from 'next/navigation'
+import type { Metadata } from 'next/types'
+import { useCallback } from 'react'
+
+import { ErrorContent } from 'src/components/error-content'
+import { useTranslationClient } from 'src/helpers/hooks/useTranslationClient'
+import { ComponentErrorParams } from 'src/types/component'
+
+
+type AppNotFoundProps = ComponentErrorParams
+
+export const metadata: Metadata = {
+  title: 'unknown art',
+}
+
+export default function AppNotFound({ reset }: AppNotFoundProps) {
+  const params = useParams()
+  const locale = params.locale as string
+
+  const { t } = useTranslationClient({ locale, namespace: 'common' })
+  const tPage = t('menu.home')
+
+  const onReset = useCallback(() => {
+    reset()
+  }, [reset])
+
+  return (<ErrorContent page={tPage} onReset={onReset} isNotFound />)
+}
diff --git a/src/components/error-content/error-content.tsx b/src/components/error-content/error-content.tsx
@@ -11,19 +11,22 @@ import { ComponentErrorParams } from 'src/types/component'
 type ErrorContentProps = {
   page: string
   onReset: ComponentErrorParams['reset']
+  isNotFound?: boolean
 }
 
-export const ErrorContent: FC<ErrorContentProps> = memo(({ page, onReset }) => {
+export const ErrorContent: FC<ErrorContentProps> = memo(({ page, onReset, isNotFound }) => {
   const params = useParams()
   const locale = params.locale as string
 
   const { t } = useTranslationClient({ locale, namespace: 'common' })
 
+  const description = isNotFound ? t('notfound.description') : t('error.description', { page })
+
   return (
     <>
       <h1>{t('title')}</h1>
 
-      <p>{t('error.description', { page })}</p>
+      <p>{description}</p>
 
       <a
         role="button"