usePrompt.ts - remove listener after unmount | add custtom ErrorPage

pages/404.tsx

@@ -0,0 +1,7 @@
+import ErrorPage from 'features/ErrorPage/ErrorPage';
+
+const Custom404 = () => {
+  return <ErrorPage statusCode={404} />;
+};
+
+export default Custom404;

pages/500.tsx

@@ -0,0 +1,7 @@
+import ErrorPage from 'features/ErrorPage/ErrorPage';
+
+const Custom500 = () => {
+  return <ErrorPage statusCode={500} />;
+};
+
+export default Custom500;

pages/_error.tsx

@@ -0,0 +1 @@
+export { default } from 'features/ErrorPage/ErrorPage';

src/features/ErrorPage/ErrorPage.tsx

@@ -0,0 +1,45 @@
+import { NextPage } from 'next';
+import { ErrorProps } from 'next/error';
+
+import { Box, Typography } from '@material-ui/core';
+import Layout from 'common/Layout/Layout';
+import Section from 'common/Section/Section';
+import SEO from 'common/SEO/SEO';
+
+const getTitleForStatusCode = (statusCode: number): string => {
+  switch (statusCode) {
+    case 404:
+      return 'Nie znaleziono strony';
+    default:
+      return 'Wewnętrzny błąd serwera';
+  }
+};
+
+const ErrorPage: NextPage<ErrorProps> = ({ statusCode, title }: ErrorProps) => {
+  const _title = title ?? getTitleForStatusCode(statusCode);
+  return (
+    <Layout>
+      <SEO title={_title} />
+      <Box
+        minHeight="80vh"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        textAlign="center"
+      >
+        <Section>
+          <Typography variant="h1">
+            <strong>{statusCode}</strong>
+          </Typography>
+          <Typography variant="h2">{_title}</Typography>
+        </Section>
+      </Box>
+    </Layout>
+  );
+};
+
+ErrorPage.getInitialProps = ({ res, err }) => {
+  return { statusCode: (res ? res.statusCode : err?.statusCode) ?? 404 };
+};
+
+export default ErrorPage;

src/libs/hooks/usePrompt.ts

@@ -9,6 +9,9 @@ export const usePrompt = (when: boolean) => {
 
   useEffect(() => {
     window.addEventListener('beforeunload', handleUnload);
+    return () => {
+      window.removeEventListener('beforeunload', handleUnload);
+    };
   }, []);
 
   const handleUnload = useCallback((event: BeforeUnloadEvent) => {