cleanup and fix fading

src/components/Router.tsx

@@ -1,15 +1,20 @@
-import React, { useState, useEffect } from 'react';
+import React, {useState, useEffect} from 'react';
 import PageIndex from './PageIndex/PageIndex';
 import PageOverview from './PageOverview/PageOverview';
 import PageHelp from './PageHelp/PageHelp';
 import PageQuadrant from './PageQuadrant/PageQuadrant';
 import PageItem from './PageItem/PageItem';
 import PageItemMobile from './PageItemMobile/PageItemMobile';
-import { quadrants, getItemPageNames, isMobileViewport } from '../config';
-import { Item } from '../model';
+import {quadrants, getItemPageNames, isMobileViewport} from '../config';
+import {Item} from '../model';
 
-export default function Router({ pageName, items, releases }: { pageName: string; items: Item[]; releases: string[] }) {
-  enum page {
+type RouterProps = {
+    pageName: string
+    items: Item[]
+    releases: string[]
+}
+
+enum page {
     index,
     overview,
     help,
@@ -17,66 +22,69 @@ export default function Router({ pageName, items, releases }: { pageName: string
     itemMobile,
     item,
     notFound,
-  }
+}
 
-  const getPageByName = (items: Item[], pageName: string): page => {
+const getPageByName = (items: Item[], pageName: string): page => {
     if (pageName === 'index') {
-      return page.index;
+        return page.index;
     }
     if (pageName === 'overview') {
-      return page.overview;
+        return page.overview;
     }
     if (pageName === 'help-and-about-tech-radar') {
-      return page.help;
+        return page.help;
     }
     if (quadrants.includes(pageName)) {
-      return page.quadrant;
+        return page.quadrant;
     }
     if (getItemPageNames(items).includes(pageName)) {
-      return isMobileViewport() ? page.itemMobile : page.item;
+        return isMobileViewport() ? page.itemMobile : page.item;
     }
 
     return page.notFound;
-  };
+};
 
-  const [statePageName, setStatePageName] = useState(pageName);
-  const [leaving, setLeaving] = useState(false);
-  const [nextPageName, setNextPageName] = useState<string>('');
+export default function Router({pageName, items, releases}: RouterProps) {
+    const [statePageName, setStatePageName] = useState(pageName);
+    const [leaving, setLeaving] = useState(false);
+    const [nextPageName, setNextPageName] = useState<string>('');
 
-  useEffect(() => {
-    const leaving = getPageByName(items, pageName) !== getPageByName(items, statePageName);
-    if (leaving) {
-      setLeaving(true);
+    useEffect(() => {
+        const nowLeaving = getPageByName(items, pageName) !== getPageByName(items, statePageName);
+        if (nowLeaving) {
+            setLeaving(true);
+            setNextPageName(pageName);
+        } else {
+            setStatePageName(pageName);
+        }
+    }, [pageName, items, statePageName]);
+
+    const handlePageLeave = () => {
+        setLeaving(true);
+        setStatePageName(nextPageName);
+        setNextPageName('');
+
+        window.setTimeout(() => {
+            window.requestAnimationFrame(() => {
+                setLeaving(false);
+            });
+        }, 0);
+    };
+
+    switch (getPageByName(items, statePageName)) {
+        case page.index:
+            return <PageIndex leaving={leaving} items={items} onLeave={handlePageLeave} releases={releases}/>;
+        case page.overview:
+            return <PageOverview items={items} rings={[]} search={''} leaving={leaving} onLeave={handlePageLeave}/>;
+        case page.help:
+            return <PageHelp leaving={leaving} onLeave={handlePageLeave}/>;
+        case page.quadrant:
+            return <PageQuadrant leaving={leaving} onLeave={handlePageLeave} items={items} pageName={pageName}/>;
+        case page.itemMobile:
+            return <PageItemMobile items={items} pageName={pageName} leaving={leaving} onLeave={handlePageLeave}/>;
+        case page.item:
+            return <PageItem items={items} pageName={pageName} leaving={leaving} onLeave={handlePageLeave}/>;
+        default:
+            return <div/>;
     }
-    setNextPageName(pageName);
-  }, [pageName, items, statePageName]);
-
-  const handlePageLeave = () => {
-    setLeaving(true);
-    setStatePageName(nextPageName);
-    setNextPageName('');
-
-    window.setTimeout(() => {
-      window.requestAnimationFrame(() => {
-        setLeaving(false);
-      });
-    }, 0);
-  };
-
-  switch (getPageByName(items, pageName)) {
-    case page.index:
-      return <PageIndex leaving={leaving} items={items} onLeave={handlePageLeave} releases={releases} />;
-    case page.overview:
-      return <PageOverview items={items} rings={[]} search={''} leaving={leaving} onLeave={handlePageLeave} />;
-    case page.help:
-      return <PageHelp leaving={leaving} onLeave={handlePageLeave} />;
-    case page.quadrant:
-      return <PageQuadrant leaving={leaving} onLeave={handlePageLeave} items={items} pageName={pageName} />;
-    case page.itemMobile:
-      return <PageItemMobile items={items} pageName={pageName} leaving={leaving} onLeave={handlePageLeave} />;
-    case page.item:
-      return <PageItem items={items} pageName={pageName} leaving={leaving} onLeave={handlePageLeave} />;
-    default:
-      return <div />;
-  }
 }