Show a page not found in set language if a markdown content does not exist.

src/Pages/markdownPage.js

@@ -4,6 +4,7 @@ import SyntaxHighlighter from 'react-syntax-highlighter';
 // https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/HEAD/AVAILABLE_STYLES_HLJS.MD
 import { docco, dracula } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { useTheme } from '../ThemeContext';
+import { getLanguage } from '../Language/Language';
 
 const MySection = ({ children }) => {
     return (<section>{children}</section>);
@@ -98,6 +99,9 @@ const MyTable = ({ children }) => {
 
 const MarkdownPage = ({ md }) => {
     const [markdownContent, setPost] = useState('');
+    const [pageNotFound, setPageNotFound] = useState(false);
+    const [errorPageContent, setErrorPage] = useState('');
+    const language = getLanguage();
 
     // causes 3 calls somehow...
     useEffect(() => {
@@ -108,46 +112,67 @@ const MarkdownPage = ({ md }) => {
                     .then(res => setPost(res))
                     .catch(err => console.log(err));
             })
-            .catch(err => console.log(err));
+            .catch(err => {
+                console.log(err);
+                setPageNotFound(true);
+
+                import(`./Other/${language}/page-not-found.md`)
+                .then(res => {
+                    fetch(res.default)
+                        .then(res => res.text())
+                        .then(res => setErrorPage(res))
+                        .catch(err => console.log(err));
+                })
+                .catch(err => console.log(err));
+            });
     });
 
-    return (
+    if (pageNotFound) {
-        <Markdown
+        return (
-            options={{
+            <Markdown>
-                wrapper: MySection,
+                {errorPageContent}
-                overrides: {
+            </Markdown>
-                    h1: {
+        );
-                        component: MyParagraph,
+    }
-                        props: {
+    else {
-                            className: 'text-primary',
+        return (
+            <Markdown
+                options={{
+                    wrapper: MySection,
+                    overrides: {
+                        h1: {
+                            component: MyParagraph,
+                            props: {
+                                className: 'text-primary',
+                            },
                         },
+                        h4: {
+                            component: Myh4
+                        },
+                        h5: {
+                            component: Myh5
+                        },
+                        img: {
+                            component: MyImage
+                        },
+                        code: {
+                            component: MyCodeBlock
+                        },
+                        table: {
+                            component: MyTable
+                        },
+                        Jps: {
+                            component: Jps
+                        },
+                        Furigana: {
+                            component: Furigana
+                        }
                     },
-                    h4: {
+                }}>
-                        component: Myh4
+                {markdownContent}
-                    },
+            </Markdown>
-                    h5: {
+        )
-                        component: Myh5
+    }
-                    },
-                    img: {
-                        component: MyImage
-                    },
-                    code: {
-                        component: MyCodeBlock
-                    },
-                    table: {
-                        component: MyTable
-                    },
-                    Jps: {
-                        component: Jps
-                    },
-                    Furigana: {
-                        component: Furigana
-                    }
-                },
-            }}>
-            {markdownContent}
-        </Markdown>
-    )
 }
 
 export default MarkdownPage;