translate NotFoundPage into Polish

src/common/Link/Link.tsx

@@ -1,12 +1,23 @@
-import React from 'react';
+import React, { forwardRef, RefObject } from 'react';
 import { Link as RRDLink, LinkProps as RRDLinkProps } from 'react-router-dom';
 import { Link as MUILink, LinkProps as MUILinkProps } from '@material-ui/core';
 
 export type Props = MUILinkProps & RRDLinkProps;
 
-const CustomizedRRDLink = ({ children, ...props }: Props) => {
-  return <RRDLink {...props}>{children}</RRDLink>;
-};
+const CustomizedRRDLink = forwardRef(
+  (
+    { children, ...props }: Props,
+    ref:
+      | ((instance: HTMLAnchorElement | null) => void)
+      | RefObject<HTMLAnchorElement>
+      | null
+      | undefined
+  ) => (
+    <RRDLink {...props} ref={ref}>
+      {children}
+    </RRDLink>
+  )
+);
 
 function Link({ children, ...props }: Props) {
   return (

src/config/namespaces.ts

@@ -1,2 +1,3 @@
 export const COMMON = 'common';
 export const INDEX_PAGE = 'index-page';
+export const NOT_FOUND_PAGE = 'not-found-page';

src/features/NotFoundPage/NotFoundPage.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
+import useTitle from '@libs/useTitle';
 import { INDEX_PAGE } from '@config/routes';
+import { NOT_FOUND_PAGE } from '@config/namespaces';
 
 import { makeStyles } from '@material-ui/core/styles';
 import { Container, Typography } from '@material-ui/core';
@@ -17,20 +20,21 @@ const useStyles = makeStyles(() => ({
 
 const NotFoundPage = () => {
   const classes = useStyles();
+  const { t } = useTranslation(NOT_FOUND_PAGE);
+  useTitle(t('title'));
 
   return (
     <main>
       <Container className={classes.container}>
         <Typography gutterBottom variant="h1">
-          Page Not Found
+          {t('title')}
         </Typography>
         <Typography gutterBottom variant="h4">
-          Looks like you've followed a broken link or entered a URL that doesn't
-          exist on this site.
+          {t('description')}
         </Typography>
         <Typography variant="h4">
           <Link color="secondary" to={INDEX_PAGE}>
-            Back to our site
+            {t('backToOurSite')}
           </Link>
         </Typography>
       </Container>

src/libs/i18n/en/index.ts

@@ -1,10 +1,12 @@
 import * as NAMESPACES from '@config/namespaces';
 import common from './common';
 import indexPage from './index-page';
+import notFoundPage from './not-found-page';
 
 const translations = {
   [NAMESPACES.COMMON]: common,
   [NAMESPACES.INDEX_PAGE]: indexPage,
+  [NAMESPACES.NOT_FOUND_PAGE]: notFoundPage,
 };
 
 export default translations;

src/libs/i18n/en/not-found-page.ts

@@ -0,0 +1,7 @@
+const translations = {
+  title: 'Page not found',
+  description: `Looks like you've followed a broken link or entered a URL that doesn't exist on this site.`,
+  backToOurSite: 'Back to our site',
+};
+
+export default translations;

src/libs/i18n/pl/index.ts

@@ -1,10 +1,12 @@
 import * as NAMESPACES from '@config/namespaces';
 import common from './common';
 import indexPage from './index-page';
+import notFoundPage from './not-found-page';
 
 const translations = {
   [NAMESPACES.COMMON]: common,
   [NAMESPACES.INDEX_PAGE]: indexPage,
+  [NAMESPACES.NOT_FOUND_PAGE]: notFoundPage,
 };
 
 export default translations;

src/libs/i18n/pl/not-found-page.ts

@@ -0,0 +1,7 @@
+const translations = {
+  title: 'Nie znaleziono strony',
+  description: `Wygląda na to, że kliknąłeś uszkodzony link lub wpisałeś adres URL, który nie istnieje.`,
+  backToOurSite: 'Wróć na stronę główną',
+};
+
+export default translations;