From f6289035779f767b04c00f143b16bfd0f0c28736 Mon Sep 17 00:00:00 2001 From: Alex Zoitos Date: Tue, 20 Oct 2020 21:23:19 -0400 Subject: [PATCH] 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 | 21 ++++++++++++- src/i18n/locale/ja.json | 21 ++++++++++++- src/pages/404.tsx | 39 ++++++++++++++++++++++++ src/pages/_error.tsx | 67 ++++++++++++++++++++++++++++++----------- src/styles/globals.css | 4 +++ 5 files changed, 132 insertions(+), 20 deletions(-) create mode 100644 src/pages/404.tsx diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json index 3f6608fd..7b1fd4f5 100644 --- a/src/i18n/locale/en.json +++ b/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" } diff --git a/src/i18n/locale/ja.json b/src/i18n/locale/ja.json index a3f9f706..45f5fa13 100644 --- a/src/i18n/locale/ja.json +++ b/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": "" } diff --git a/src/pages/404.tsx b/src/pages/404.tsx new file mode 100644 index 00000000..deabedb7 --- /dev/null +++ b/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 ( +
+
+ +
+ + + + + + + + +
+ ); +}; + +export default Custom404; diff --git a/src/pages/_error.tsx b/src/pages/_error.tsx index 5a9a183c..0920d773 100644 --- a/src/pages/_error.tsx +++ b/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 = ({ 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 ( -
-
{statusCode ? statusCode : 'Oops'}
-

- {getErrorMessage(statusCode)}{' '} - - Go home - -

+
+
{getErrorMessage(statusCode)}
+ + + + + + + +
); }; diff --git a/src/styles/globals.css b/src/styles/globals.css index e93708f7..939b18fc 100644 --- a/src/styles/globals.css +++ b/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; +}