From fcbc5cfa6ff139ea7ed88b6ce4be1339dd59a8a4 Mon Sep 17 00:00:00 2001
From: Konrad Ryczko <konradryczko1@gmail.com>
Date: Sun, 23 Jul 2023 16:54:37 +0200
Subject: [PATCH] Fix/404 page (#199)

---
 locales/en/404.json                        |  7 +++---
 src/pages/404.tsx                          | 24 ++++++++++++-------
 src/shared/hooks/useRedirectWithTimeout.ts | 28 ----------------------
 3 files changed, 19 insertions(+), 40 deletions(-)
 delete mode 100644 src/shared/hooks/useRedirectWithTimeout.ts

diff --git a/locales/en/404.json b/locales/en/404.json
index 39eca9ad..79a8a7c8 100644
--- a/locales/en/404.json
+++ b/locales/en/404.json
@@ -1,8 +1,7 @@
 {
   "title": "Page Not Found",
   "content": "FormsLab (404) - This page cannot be found.",
-  "Heading": "This page cannot be found.",
-  "Description": "Redirecting to Homepage in",
-  "RedirectSecond": "second",
-  "RedirectSeconds": "seconds"
+  "header": "This page cannot be found.",
+  "description": "Redirecting to Homepage in",
+  "backToHome": "Back to home page"
 }
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 236c3597..3a99ca0a 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,9 +1,9 @@
 import Head from 'next/head';
-import useRedirectWithTimeout from 'shared/hooks/useRedirectWithTimeout';
 import useTranslation from 'next-translate/useTranslation';
+import ButtonLink from 'shared/components/ButtonLink/ButtonLink';
+import { ButtonVariant } from 'shared/components/Button/Button';
 
 export default function FourOhFour() {
-  const { secondsRemaining } = useRedirectWithTimeout('/', 5);
   const { t } = useTranslation('404');
   return (
     <>
@@ -11,12 +11,20 @@ export default function FourOhFour() {
         <title>{t('title')}</title>
         <meta name="description" content={t('content')} />
       </Head>
-      <h1 className="text-center text-2xl font-bold">{t('Heading')}</h1>
-      <h2 className="mt-4 text-center text-xl">
-        {t('Description')}
-        &nbsp;{secondsRemaining}&nbsp;
-        {secondsRemaining > 1 ? t('RedirectSeconds') : t('RedirectSecond')}.
-      </h2>
+      <section className="absolute left-1/2 top-1/3 w-full -translate-x-1/2 -translate-y-1/2">
+        <div className="px-4 py-8 lg:px-6 lg:py-16">
+          <h1 className="text-primary-300 mb-2 text-7xl font-extrabold tracking-tight text-indigo-300 lg:text-8xl">
+            404
+          </h1>
+
+          <p className="mb-7 text-lg font-light text-gray-500 dark:text-gray-400">
+            {t('header')}
+          </p>
+          <ButtonLink href="/" variant={ButtonVariant.PRIMARY}>
+            {t('backToHome')}
+          </ButtonLink>
+        </div>
+      </section>
     </>
   );
 }
diff --git a/src/shared/hooks/useRedirectWithTimeout.ts b/src/shared/hooks/useRedirectWithTimeout.ts
deleted file mode 100644
index 605df3d3..00000000
--- a/src/shared/hooks/useRedirectWithTimeout.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-
-export default function useRedirectWithTimeout(
-  redirectTo: string,
-  seconds: number
-) {
-  const [secondsRemaining, setSecondsRemaining] = useState(seconds);
-  const router = useRouter();
-
-  useEffect(() => {
-    if (secondsRemaining === 0) router.push('/', undefined, { scroll: false });
-
-    const timer = setTimeout(() => {
-      setSecondsRemaining((prevSecondsRemaining) => prevSecondsRemaining - 1);
-      if (secondsRemaining === 1)
-        router.push(redirectTo, undefined, { scroll: false });
-    }, 1000);
-
-    return () => {
-      clearInterval(timer);
-    };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [secondsRemaining, redirectTo]);
-
-  return { secondsRemaining };
-}