Merge pull request #81 from datasektionen/fix-error-page

Fix error page
datasektionen · Jul 7, 2024 · ced003d · ced003d
2 parents 0f6fd73 + 5940ab8
commit ced003d
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 140 deletions.
diff --git a/src/components/Default/index.js b/src/components/Default/index.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, useEffect, useState } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import { Title } from 'react-head'
 
@@ -7,6 +7,7 @@ import ErrorPage from '../ErrorPage'
 import { Translate, English, Swedish } from '../Translate'
 import { comparePages } from '../../utility/compare'
 import { addLangToUrl } from '../../utility/lang'
+import { navigateBack } from '../../utility/nav'
 
 const getPageNav = (nav) => {
   const child = nav.find(item => item.nav);
@@ -55,12 +56,13 @@ const getActiveMainTabTitle = (nav) => {
   return null;
 };
 
+
 const PageHeader = ({ title, location }) => (
   <header key="header">
     <div className="header-inner">
       <div className="row">
         <div className="header-left col-md-2">
-          <Link to="/">
+          <Link onClick={navigateBack(false)}>
             {'« '}
             <Translate>
               <English>Back</English>
@@ -131,39 +133,56 @@ const RightSidebar = ({ sidebar, anchors }) => (
 );
 
 const taitanRenderer = (location, lang) =>
-  ({ title, body, sidebar, nav, anchors }, error) =>
-  (error ?
-    <ErrorPage error={error} /> :
-    <Fragment>
-      <Title>
-        {title + ' - Konglig Datasektionen'}
-      </Title>
-      <PageHeader title={title} location={location} />
-
-      <div id="content" key="content">
-        <div className="row">
-          <LeftSidebar nav={nav} lang={lang}/>
-
-          <div className="col-sm-8 col-md-9">
-            <div className="row">
-              <div
-                className="col-md-9"
-                dangerouslySetInnerHTML={{ __html: body }}
-              />
-              <RightSidebar sidebar={sidebar} anchors={anchors} />
-            </div>
+  ({ title, body, sidebar, nav, anchors, error }) => {
+
+    // This useEffect solution is a workaround to prevent hydration errors when loading the Error page.
+    // useEffect does not run when doing serverside rendering, so this prevents the error page from 
+    // rendering serverside. Rendering it serverside caused the page to crash when rendering clientside,
+    // since the client always tries to render the normal page first, and getting angry that it does not
+    // match what the server produced. (This is due to error being undefined first due to latecncy).
+    const [errorPage, setErrorPage] = useState(null);
+    useEffect(() => {
+      if (error) {
+        setErrorPage(error)
+      } else {
+        setErrorPage(null)
+      }
+    }, [location, error]);
+
+    return (errorPage ?
+      <ErrorPage error={errorPage} /> :
+      <>
+        <Title>
+          {title + ' - Konglig Datasektionen'}
+        </Title>
+        <PageHeader title={title} location={location} />
+
+        <div id="content" key="content">
+          <div className="row">
+            <LeftSidebar nav={nav} lang={lang} />
 
+            <div className="col-sm-8 col-md-9">
+              <div className="row">
+                <div
+                  className="col-md-9"
+                  dangerouslySetInnerHTML={{ __html: body }}
+                />
+                <RightSidebar sidebar={sidebar} anchors={anchors} />
+              </div>
+            </div>
           </div>
         </div>
-      </div>
-    </Fragment>
-  );
+      </>
+    );
+  }
 
 export const Default = ({ lang }) => {
   const location = useLocation();
+  const Page = taitanRenderer(location, lang);
+
   return (
     <Taitan pathname={location.pathname} lang={lang}>
-      {taitanRenderer(location, lang)}
+      {(props, err) => <Page {...props} error={err} />}
     </Taitan>
   )
 };

diff --git a/src/components/ErrorPage/index.js b/src/components/ErrorPage/index.js
@@ -2,6 +2,7 @@ import React, { Fragment } from 'react'
 import { Title } from 'react-head'
 import { Link } from 'react-router-dom'
 
+import { navigateBack } from '../../utility/nav'
 import { Translate, English, Swedish } from '../Translate'
 
 export const ErrorPage = ({ error }) => (
@@ -13,7 +14,7 @@ export const ErrorPage = ({ error }) => (
       <div className="header-inner">
         <div className="row">
           <div className="header-left col-md-2">
-            <Link to="/">
+            <Link onClick={navigateBack(true)}>
               {'« '}
               <Translate>
                 <English>Back</English>

diff --git a/src/components/EventCalendar/index.jsx b/src/components/EventCalendar/index.jsx
@@ -298,6 +298,7 @@ export default function EventCalendar({ events, location, lang, onUpdateTimeSpan
 
     setSelectedEventIndex(-1);
     if (events.length === 0) return;
+    if (!Array.isArray(events)) return;
     // Do not re-calculate the week if the user manually changes the viewed week.
     if (hasCalculatedWeek) return;