112 lines
2.6 KiB
TypeScript
112 lines
2.6 KiB
TypeScript
import React, { useState, useEffect, useContext } from "react";
|
|
import { LineChart, Line, CartesianGrid, XAxis, YAxis } from "recharts";
|
|
import { format, addDays } from "date-fns";
|
|
import { Dashboard } from "@/components/main/routes/Dashboard";
|
|
import {
|
|
loadStorageOrDefault,
|
|
persistStorage,
|
|
} from "@/components/main/lib/state";
|
|
import { mergeDeepRight } from "ramda";
|
|
import {
|
|
createBrowserRouter,
|
|
RouterProvider,
|
|
useNavigate,
|
|
useMatches,
|
|
} from "react-router-dom";
|
|
import * as reactRouter from "react-router-dom";
|
|
|
|
const STORAGE_KEY = "ecoplanet";
|
|
|
|
const routes = {
|
|
dashboard: {
|
|
id: "Dashboard",
|
|
path: "/",
|
|
},
|
|
options: {
|
|
id: "Options",
|
|
path: "/options",
|
|
},
|
|
};
|
|
|
|
const Navigation = function ({ router }) {
|
|
const navigate = useNavigate();
|
|
const matches = useMatches();
|
|
|
|
const onUpdateRoute = (routePath: string) => {
|
|
navigate(routePath);
|
|
};
|
|
|
|
const activeRouteId = matches[0]?.id;
|
|
|
|
return (
|
|
<nav>
|
|
<ul className="flex mb-4 space-x-3">
|
|
{/*
|
|
* Ideally we would not map over the routes object, as object items are sorted by the runtime,
|
|
* so they might not represent the data from the source code!
|
|
* But for this use-case this is enough.
|
|
*/}
|
|
{Object.entries(routes).map(([key, route]) => {
|
|
const id = route.id;
|
|
const className = id === activeRouteId ? "font-bold" : "";
|
|
return (
|
|
<li className={className} key={id}>
|
|
<button onClick={() => onUpdateRoute(route.path)}>{id}</button>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
const Base = function ({ children }) {
|
|
return (
|
|
<div className="flex flex-col grow items-center justify-center h-full w-full bg-muted">
|
|
<Navigation />
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const App: React.FC = () => {
|
|
const [state, setState] = useState(loadStorageOrDefault());
|
|
|
|
useEffect(() => {
|
|
persistStorage(state);
|
|
}, [state]);
|
|
|
|
const updateState = function (newState) {
|
|
setState(mergeDeepRight(state, newState));
|
|
};
|
|
|
|
const router = createBrowserRouter([
|
|
{
|
|
...routes.dashboard,
|
|
element: (
|
|
<Base id="Dashboard">
|
|
<Dashboard state={state} updateState={updateState} />
|
|
</Base>
|
|
),
|
|
},
|
|
{
|
|
...routes.options,
|
|
element: (
|
|
<Base id="Dashboard">
|
|
<div>Hello world!</div>,
|
|
</Base>
|
|
),
|
|
},
|
|
]);
|
|
|
|
return (
|
|
<div className="fixed top-0 right-0 bottom-0 left-0 flex">
|
|
<main className="flex grow flex-col">
|
|
<RouterProvider router={router} />
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App;
|