AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rewrite styles to scss and use i respective components

Browse Source
This commit is contained in:
Max Karkowski
2020-07-17 08:44:02 +02:00
committed by Bastian
parent be0241674c
commit 73865eb209
94 changed files with 969 additions and 974 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/Router.tsx
View File

@@ -1,14 +1,14 @@
import React, { useState, useEffect } from 'react';
import PageIndex from './PageIndex';
import PageOverview from './PageOverview';
import PageHelp from './PageHelp';
import PageQuadrant from './PageQuadrant';
import PageItem from './PageItem';
import PageItemMobile from './PageItemMobile';
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';
export default function Router({ pageName, items, releases }: {pageName: string, items: Item[], releases: string[]}) {
export default function Router({ pageName, items, releases }: { pageName: string; items: Item[]; releases: string[] }) {
enum page {
index,
overview,
@@ -35,26 +35,26 @@ export default function Router({ pageName, items, releases }: {pageName: string,
if (getItemPageNames(items).includes(pageName)) {
return isMobileViewport() ? page.itemMobile : page.item;
}
return page.notFound;
}
};
const [statePageName, setStatePageName] = useState(pageName);
const [leaving, setLeaving] = useState(false);
const [nextPageName, setNextPageName] = useState<string>("");
const [nextPageName, setNextPageName] = useState<string>('');
useEffect(() => {
const leaving = getPageByName(items, pageName) !== getPageByName(items, statePageName);
if (leaving) {
setLeaving(true)
setLeaving(true);
}
setNextPageName(pageName)
}, [pageName, items, statePageName])
setNextPageName(pageName);
}, [pageName, items, statePageName]);
const handlePageLeave = () => {
setLeaving(true)
setLeaving(true);
setStatePageName(nextPageName);
setNextPageName("")
setNextPageName('');
window.setTimeout(() => {
window.requestAnimationFrame(() => {
@@ -65,18 +65,18 @@ export default function Router({ pageName, items, releases }: {pageName: string,
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/>
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 />;
}
}