Custom 404/Error page (#133)

* feat(frontend): custom 404 + error page with intl formatting

* style(frontend): add styling for error message

src/i18n/locale/en.json

@@ -31,5 +31,24 @@
   "components.PendingRequest.pendingdescription": "This title was requested by {username} ({email}) on {date}",
   "components.PendingRequest.pendingtitle": "Pending Request",
   "components.RequestModal.cancelrequest": "This will remove your request. Are you sure you want to continue?",
-  "components.RequestModal.requestadmin": "Your request will be immediately approved. Do you wish to continue?"
+  "components.RequestModal.requestadmin": "Your request will be immediately approved.",
+  "components.TvDetails.available": "Available",
+  "components.TvDetails.cancelrequest": "Cancel Request",
+  "components.TvDetails.cast": "Cast",
+  "components.TvDetails.originallanguage": "Original Language",
+  "components.TvDetails.overview": "Overview",
+  "components.TvDetails.overviewunavailable": "Overview unavailable",
+  "components.TvDetails.pending": "Pending",
+  "components.TvDetails.recommendations": "Recommendations",
+  "components.TvDetails.request": "Request",
+  "components.TvDetails.similar": "Similar Series",
+  "components.TvDetails.status": "Status",
+  "components.TvDetails.unavailable": "Unavailable",
+  "components.TvDetails.userrating": "User Rating",
+  "pages.internalServerError": "{statusCode} - Internal Server Error",
+  "pages.oops": "Oops",
+  "pages.pageNotFound": "404 - Page Not Found",
+  "pages.returnHome": "Return Home",
+  "pages.serviceUnavailable": "{statusCode} - Service Unavailable",
+  "pages.somethingWentWrong": "{statusCode} - Something went wrong"
 }

src/i18n/locale/ja.json

@@ -31,5 +31,24 @@
   "components.PendingRequest.pendingdescription": "",
   "components.PendingRequest.pendingtitle": "",
   "components.RequestModal.cancelrequest": "このリクエストをキャンセルしてよろしいですか？",
-  "components.RequestModal.requestadmin": "このリクエストが今すぐ承認致します。よろしいですか？"
+  "components.RequestModal.requestadmin": "このリクエストが今すぐ承認致します。よろしいですか？",
+  "components.TvDetails.available": "",
+  "components.TvDetails.cancelrequest": "",
+  "components.TvDetails.cast": "",
+  "components.TvDetails.originallanguage": "",
+  "components.TvDetails.overview": "",
+  "components.TvDetails.overviewunavailable": "",
+  "components.TvDetails.pending": "",
+  "components.TvDetails.recommendations": "",
+  "components.TvDetails.request": "",
+  "components.TvDetails.similar": "",
+  "components.TvDetails.status": "",
+  "components.TvDetails.unavailable": "",
+  "components.TvDetails.userrating": "",
+  "pages.internalServerError": "",
+  "pages.oops": "ああ",
+  "pages.pageNotFound": "",
+  "pages.returnHome": "ホームへ戻る",
+  "pages.serviceUnavailable": "",
+  "pages.somethingWentWrong": ""
 }

src/pages/404.tsx

@@ -0,0 +1,39 @@
+import Link from 'next/link';
+import React from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+const messages = defineMessages({
+  pageNotFound: '404 - Page Not Found',
+  returnHome: 'Return Home',
+});
+
+const Custom404: React.FC = () => {
+  return (
+    <div className="error-message">
+      <div className="text-4xl">
+        <FormattedMessage {...messages.pageNotFound} />
+      </div>
+      <Link href="/">
+        <a className="flex">
+          <FormattedMessage {...messages.returnHome} />
+          <svg
+            className="w-6 h-6 ml-2"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+        </a>
+      </Link>
+    </div>
+  );
+};
+
+export default Custom404;

src/pages/_error.tsx

@@ -1,31 +1,62 @@
 import React from 'react';
-import { NextPage } from 'next';
+import type { NextPage } from 'next';
 import Link from 'next/link';
-import { Undefinable } from '../utils/typeHelpers';
+import type { Undefinable } from '../utils/typeHelpers';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 interface ErrorProps {
   statusCode?: number;
 }
 
-const getErrorMessage = (statusCode?: number) => {
-  switch (statusCode) {
-    case 404:
-      return 'Page not found.';
-    default:
-      return 'Something went wrong.';
-  }
-};
+const messages = defineMessages({
+  internalServerError: '{statusCode} - Internal Server Error',
+  serviceUnavailable: '{statusCode} - Service Unavailable',
+  somethingWentWrong: '{statusCode} - Something went wrong',
+  oops: 'Oops',
+  returnHome: 'Return Home',
+});
 
 const Error: NextPage<ErrorProps> = ({ statusCode }) => {
+  const intl = useIntl();
+
+  const getErrorMessage = (statusCode?: number) => {
+    switch (statusCode) {
+      case 500:
+        return intl.formatMessage(messages.internalServerError, {
+          statusCode: 500,
+        });
+      case 503:
+        return intl.formatMessage(messages.serviceUnavailable, {
+          statusCode: 503,
+        });
+      default:
+        return intl.formatMessage(messages.somethingWentWrong, {
+          statusCode: statusCode ?? intl.formatMessage(messages.oops),
+        });
+    }
+  };
   return (
-    <div className="flex items-center justify-center relative top-0 left-0 bottom-0 right-0 h-screen flex-col">
-      <div className="text-4xl">{statusCode ? statusCode : 'Oops'}</div>
-      <p>
-        {getErrorMessage(statusCode)}{' '}
-        <Link href="/">
-          <a>Go home</a>
-        </Link>
-      </p>
+    <div className="error-message">
+      <div className="text-4xl">{getErrorMessage(statusCode)}</div>
+      <Link href="/">
+        <a className="flex">
+          <FormattedMessage {...messages.returnHome} />
+          <svg
+            className="w-6 h-6 ml-2"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+        </a>
+      </Link>
     </div>
   );
 };

src/styles/globals.css

@@ -32,3 +32,7 @@ body {
 .toast {
   width: 360px;
 }
+
+.error-message {
+  @apply flex items-center justify-center text-center text-gray-300 relative top-0 left-0 bottom-0 right-0 h-screen flex-col;
+}