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,9 +112,29 @@ const MarkdownPage = ({ md }) => {
                     .then(res => setPost(res))
                     .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));
             });
+    });
 
+    if (pageNotFound) {
+        return (
+            <Markdown>
+                {errorPageContent}
+            </Markdown>
+        );
+    }
+    else {
         return (
             <Markdown
                 options={{
@@ -149,5 +173,6 @@ const MarkdownPage = ({ md }) => {
             </Markdown>
         )
     }
+}
 
 export default MarkdownPage;