quantified.uncertainty/metaforecast
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: Layout component cleanups

Browse Source
This commit is contained in:
Vyacheslav Matyukhin 2022-04-24 00:42:30 +04:00
parent 6720a39a95
commit 10945a6dd5
No known key found for this signature in database
GPG Key ID: 3D2A774C5489F96C
1 changed files with 63 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/web/display/Layout.tsx
View File

@ -4,15 +4,32 @@ import React, { ErrorInfo } from "react";
import { Logo2 } from "../icons/index"; import { Logo2 } from "../icons/index";
/* Utilities */ interface MenuItem {
const classNameSelected = (isSelected: boolean) => page: string;
`no-underline py-4 px-2 ml-4 text-md font-medium cursor-pointer border-b-2 border-transparent ${ link: string;
isSelected title: string;
? "text-blue-700 border-blue-700" }
: "text-gray-400 hover:text-blue-500 hover:border-blue-500"
}`;
let calculateLastUpdate = () => { const menu: MenuItem[] = [
{
page: "search",
link: "/",
title: "Search",
},
{
page: "tools",
link: "/tools",
title: "Tools",
},
{
page: "about",
link: "/about",
title: "About",
},
];
/* Utilities */
const calculateLastUpdate = () => {
let today = new Date().toISOString(); let today = new Date().toISOString();
let yesterdayObj = new Date(); let yesterdayObj = new Date();
yesterdayObj.setDate(yesterdayObj.getDate() - 1); yesterdayObj.setDate(yesterdayObj.getDate() - 1);
@ -66,26 +83,16 @@ class ErrorBoundary extends React.Component<
} }
} }
interface Props {
page: string; // id used for menu
}
/* Main */ /* Main */
export const Layout = ({ page, children }) => { export const Layout: React.FC<Props> = ({ page, children }) => {
let lastUpdated = calculateLastUpdate(); let lastUpdated = calculateLastUpdate();
// The correct way to do this would be by passing a prop to Layout, // The correct way to do this would be by passing a prop to Layout,
// and to get the last updating using server side props. // and to get the last updating using server side props.
const refreshPage = () => {
// window.location.reload(true);
// window.location.replace(window.location.pathname);
// window.location.reload();
// https://developer.mozilla.org/en-US/docs/Web/API/Location/reload
// https://developer.mozilla.org/en-US/docs/Web/API/Location/replace
// https://developer.mozilla.org/en-US/docs/Web/API/Location/assign
// window.location.hostname
if (typeof window !== "undefined") {
if ((window.location as any) != window.location.pathname) {
window.location.assign(window.location.pathname);
}
}
};
return ( return (
<div> <div>
<Head> <Head>
@ -95,23 +102,20 @@ export const Layout = ({ page, children }) => {
<div> <div>
<nav className="bg-white shadow"> <nav className="bg-white shadow">
<div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="items-center justify-between flex"> <div className="flex items-center justify-between">
<div className="flex sm:flex-row"> <div className="flex">
<button onClick={refreshPage}> <Link href="/" passHref>
<a className="no-underline font-md justify-center items-center flex"> <a className="no-underline font-md justify-center items-center flex">
<span className="mr-2 sm:text-lg text-blue-800"> <span className="mr-2">
<Logo2 className="mt-1 mr-1 h-8 w-8" /> <Logo2 className="mt-1 mr-1 h-8 w-8" />
</span> </span>
<span className="text-sm sm:text-2xl text-gray-700"> <span className="text-sm sm:text-2xl text-gray-700">
Metaforecast Metaforecast
</span> </span>
</a> </a>
</button> </Link>
<div {lastUpdated ? (
className={`flex py-4 px-2 sm:ml-4 text-base text-gray-400 ${ <div className="flex py-4 px-2 sm:ml-4">
lastUpdated || "hidden"
}`}
>
<div className="hidden sm:inline-flex items-center text-gray-700"> <div className="hidden sm:inline-flex items-center text-gray-700">
<svg className="ml-4 mr-1 mt-1" height="10" width="16"> <svg className="ml-4 mr-1 mt-1" height="10" width="16">
<circle cx="4" cy="4" r="4" fill="rgb(29, 78, 216)" /> <circle cx="4" cy="4" r="4" fill="rgb(29, 78, 216)" />
@ -124,25 +128,30 @@ export const Layout = ({ page, children }) => {
}`}</span> }`}</span>
</div> </div>
</div> </div>
) : null}
</div> </div>
<div className="flex flex-row-reverse items-start space-x-4 text-sm sm:text-lg md:text-lg lg:text-lg"> <div className="flex space-x-4">
<Link href={`/about`} passHref> {menu.map((item) => (
<a className={classNameSelected(page === "about")}>About</a> <Link href={item.link} passHref key={item.page}>
</Link> <a
<Link href={`/tools`} passHref> className={`no-underline py-4 px-2 text-sm sm:text-lg font-medium cursor-pointer border-b-2 border-transparent ${
<a className={classNameSelected(page === "tools")}>Tools</a> page === item.page
</Link> ? "text-blue-700 border-blue-700"
<Link href={`/`} passHref> : "text-gray-400 hover:text-blue-500 hover:border-blue-500"
<a className={classNameSelected(page === "search")}>Search</a> }`}
>
{item.title}
</a>
</Link> </Link>
))}
</div> </div>
</div> </div>
</div> </div>
</nav> </nav>
<main> <main>
<ErrorBoundary> <ErrorBoundary>
<div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-left pt-5"> <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-5">
{children} {children}
</div> </div>
</ErrorBoundary> </ErrorBoundary>