move to react router

fix formatting
webxdc · Oct 26, 2023 · 2b93322 · 2b93322
1 parent 0d88499
commit 2b93322
Show file tree

Hide file tree

Showing 28 changed files with 297 additions and 266 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.0",
+    "react-router-dom": "^6.17.0",
     "vite-plugin-zip-pack": "^1.0.5",
     "webxdc-types": "^1.0.1",
     "zustand": "^4.3.3"

diff --git a/public/DependencyLicenses.txt b/public/DependencyLicenses.txt
@@ -210,6 +210,9 @@
 │  │  └─ URL: https://github.com/nodelib/nodelib/tree/master/packages/fs/fs.stat
 │  ├─ @nodelib/[email protected]
 │  │  └─ URL: https://github.com/nodelib/nodelib/tree/master/packages/fs/fs.walk
+│  ├─ @remix-run/[email protected]
+│  │  ├─ URL: https://github.com/remix-run/react-router
+│  │  └─ VendorName: Remix Software
 │  ├─ @tailwindcss/[email protected]
 │  │  └─ URL: https://github.com/tailwindlabs/tailwindcss-forms
 │  ├─ @tanstack/[email protected]
@@ -796,6 +799,12 @@
 │  ├─ [email protected]
 │  │  ├─ URL: https://github.com/react-hook-form/react-hook-form
 │  │  └─ VendorUrl: https://www.react-hook-form.com/
+│  ├─ [email protected]
+│  │  ├─ URL: https://github.com/remix-run/react-router
+│  │  └─ VendorName: Remix Software
+│  ├─ [email protected]
+│  │  ├─ URL: https://github.com/remix-run/react-router
+│  │  └─ VendorName: Remix Software
 │  ├─ [email protected]
 │  │  ├─ URL: https://github.com/facebook/react.git
 │  │  └─ VendorUrl: https://reactjs.org/

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,9 @@
-import { createContext, useState } from "react";
+import {
+  Outlet,
+  useLocation,
+  useNavigate,
+  useNavigation,
+} from "react-router-dom";
 
 import "./App.css";
 import {
@@ -8,140 +13,62 @@ import {
   QueueListIcon,
   Squares2X2Icon,
 } from "@heroicons/react/24/outline";
-import { TrackPage } from "./pages/TrackPage";
-import { EntriesPage } from "./pages/EntriesPage";
-import { MorePage } from "./pages/MorePage";
 import { wrapPromise } from "./util";
-import { init, TaskEntry } from "./store";
-import { DebugPage } from "./pages/DebugPage";
-import { EntryPage } from "./pages/EntryPage";
-import { StatisticsPage } from "./pages/StatisticsPage";
-import { DaysInWeeksPage } from "./pages/stats/DaysInWeeksPage";
-import { DaysInMonthsPage } from "./pages/stats/DaysInMonthsPage";
-import { CreditsPage } from "./pages/more/CreditsPage";
-import { BackupPage } from "./pages/more/BackupPage";
-import { AboutPage } from "./pages/more/AboutPage";
-import { OptionsPage } from "./pages/more/OptionsPage";
+import { init } from "./store";
 
 const initializeStore = wrapPromise(init());
 
-type AppPageName =
-  | "track"
-  | "entries"
-  | "stats"
-  | "stats/weeks"
-  | "stats/months"
-  | "more"
-  | "more/about"
-  | "more/options"
-  | "more/backup"
-  | "more/credits"
-  | "debug";
-
-export const NavigationContext = createContext({
-  navigate: (destination: AppPageName) => {},
-});
-
 function App() {
   initializeStore.read();
-  const [activePage, changePage] = useState<AppPageName>("track");
-
   const devmode = localStorage.getItem("devmode") === "true" || false;
 
-  let Page;
-  const [selectedEntry, selectEntry] = useState<TaskEntry["id"] | null>(null);
+  const navigate = useNavigate();
+  let location = useLocation();
 
-  switch (activePage) {
-    case "track":
-      Page = TrackPage;
-      break;
-    case "entries":
-      if (selectedEntry) {
-        Page = () => <EntryPage id={selectedEntry} selectEntry={selectEntry} />;
-      } else {
-        Page = () => <EntriesPage selectEntry={selectEntry} />;
-      }
-      break;
-    case "stats":
-      Page = StatisticsPage;
-      break;
-    case "stats/weeks":
-      Page = DaysInWeeksPage;
-      break;
-    case "stats/months":
-      Page = DaysInMonthsPage;
-      break;
-    case "more":
-      Page = MorePage;
-      break;
-    case "more/about":
-      Page = AboutPage;
-      break;
-    case "more/options":
-      Page = OptionsPage;
-      break;
-    case "more/backup":
-      Page = BackupPage;
-      break;
-    case "more/credits":
-      Page = CreditsPage;
-      break;
-    case "debug":
-      Page = DebugPage;
-      break;
-    default:
-      Page = () => <>no page selected</>;
-      break;
-  }
+  const isActive = (page: string) => {
+    return location.pathname.startsWith("/" + page) ? "active" : undefined;
+  };
 
   return (
     <div className="flex h-full flex-col" style={{ maxHeight: "100vh" }}>
       <div
         className="relative flex-grow overflow-auto"
         style={{ maxHeight: "calc(100vh - 4rem)" }}
       >
-        <NavigationContext.Provider value={{ navigate: changePage }}>
-          <Page />
-        </NavigationContext.Provider>
+        <Outlet />
       </div>
       <div className="btm-nav" style={{ position: "relative" }}>
         <button
-          className={activePage === "track" ? "active" : ""}
-          onClick={() => changePage("track")}
+          className={location.pathname === "/" ? "active" : undefined}
+          onClick={() => navigate("/")}
         >
           <ClockIcon className="h-5 w-5" />
           <span className="btm-nav-label">Track</span>
         </button>
         <button
-          className={activePage === "entries" ? "active" : ""}
+          className={isActive("entries")}
           onClick={() => {
-            if (activePage === "entries") {
-              selectEntry(null);
-            }
-            changePage("entries");
+            navigate("/entries");
           }}
         >
           <QueueListIcon className="h-5 w-5" />
           <span className="btm-nav-label">Entries</span>
         </button>
         <button
-          className={activePage.startsWith("stats") ? "active" : ""}
-          onClick={() => changePage("stats")}
+          className={isActive("stats")}
+          onClick={() => navigate("/stats")}
         >
           <ChartPieIcon className="h-5 w-5" />
           <span className="btm-nav-label">Statistics</span>
         </button>
-        <button
-          className={activePage === "more" ? "active" : ""}
-          onClick={() => changePage("more")}
-        >
+        <button className={isActive("more")} onClick={() => navigate("/more")}>
           <Squares2X2Icon className="h-5 w-5" />
           <span className="btm-nav-label">More</span>
         </button>
         {devmode && (
           <button
-            className={activePage === "debug" ? "active" : ""}
-            onClick={() => changePage("debug")}
+            className={isActive("debug")}
+            onClick={() => navigate("/debug")}
           >
             <BugAntIcon className="h-5 w-5" />
             <span className="btm-nav-label">Debug</span>

diff --git a/src/components/StatsMonthViewDays.tsx b/src/components/StatsMonthViewDays.tsx
@@ -39,7 +39,7 @@ export function MonthView({ year, month }: { year: number; month: number }) {
     const entries_in_span = getEntriesTouchingTimeframe(
       entries,
       working_day.toMillis(),
-      end.toMillis()
+      end.toMillis(),
     );
 
     // remove all running entries because they would make the stats useless
@@ -52,7 +52,7 @@ export function MonthView({ year, month }: { year: number; month: number }) {
       const dayEntries = getEntriesInTimeframeCutToIt(
         entries_in_span_cleaned,
         startOfDay.toMillis(),
-        endOfDay.toMillis()
+        endOfDay.toMillis(),
       );
       const timeSpentThatDay = dayEntries
         .map((e) => e.duration || 0)
@@ -79,8 +79,8 @@ export function MonthView({ year, month }: { year: number; month: number }) {
     setTotal(
       Duration.fromObject({ minutes: total_minutes }).shiftTo(
         "hours",
-        "minutes"
-      )
+        "minutes",
+      ),
     );
   }, [`${entries.length}`, timeSpan[0], timeSpan[1]]);
 

diff --git a/src/components/StatsTaskDistribution.tsx b/src/components/StatsTaskDistribution.tsx
@@ -15,7 +15,7 @@ export function TaskDistributionPie({
 
   const time_spent_total = time_spent_by_label.reduce(
     (p, c) => p + c.timeSpend.toMillis(),
-    0
+    0,
   );
 
   const rawLabels: {

diff --git a/src/components/StatsWeekView.tsx b/src/components/StatsWeekView.tsx
@@ -45,7 +45,7 @@ export function WeekView({
     const entries_in_span = getEntriesTouchingTimeframe(
       entries,
       working_day.toMillis(),
-      end.toMillis()
+      end.toMillis(),
     );
 
     // remove all running entries because they would make the stats useless
@@ -58,7 +58,7 @@ export function WeekView({
       const dayEntries = getEntriesInTimeframeCutToIt(
         entries_in_span_cleaned,
         startOfDay.toMillis(),
-        endOfDay.toMillis()
+        endOfDay.toMillis(),
       );
       const timeSpentThatDay = dayEntries
         .map((e) => e.duration || 0)
@@ -83,8 +83,8 @@ export function WeekView({
     setTotal(
       Duration.fromObject({ minutes: total_minutes }).shiftTo(
         "hours",
-        "minutes"
-      )
+        "minutes",
+      ),
     );
   }, [`${entries.length}`, timeSpan[0], timeSpan[1]]);
 

diff --git a/src/components/TrackPageStats.tsx b/src/components/TrackPageStats.tsx
@@ -32,23 +32,23 @@ export function QuickStats() {
     const working_data = getEntriesTouchingTimeframe(
       entries,
       now.startOf("month").minus({ month: 1 }).toMillis(),
-      now.toMillis()
+      now.toMillis(),
     );
     const last_week = durationFromCappedEntries(
       getEntriesInTimeframeCutToIt(
         working_data,
         now.startOf("week").minus({ week: 1 }).toMillis(),
-        now.startOf("week").toMillis()
-      )
+        now.startOf("week").toMillis(),
+      ),
     ).shiftTo("hours", "minute");
 
     const start_of_last_month = now.startOf("month").minus({ month: 1 });
     const last_month = durationFromCappedEntries(
       getEntriesInTimeframeCutToIt(
         working_data,
         start_of_last_month.toMillis(),
-        start_of_last_month.endOf("month").toMillis()
-      )
+        start_of_last_month.endOf("month").toMillis(),
+      ),
     ).shiftTo("hours", "minute");
 
     const update = () => {
@@ -57,22 +57,22 @@ export function QuickStats() {
         getEntriesInTimeframeCutToIt(
           working_data,
           now.startOf("day").toMillis(),
-          now.toMillis()
-        )
+          now.toMillis(),
+        ),
       ).shiftTo("hours", "minute");
       const this_week = durationFromCappedEntries(
         getEntriesInTimeframeCutToIt(
           working_data,
           now.startOf("week").toMillis(),
-          now.toMillis()
-        )
+          now.toMillis(),
+        ),
       ).shiftTo("hours", "minute");
       const this_month = durationFromCappedEntries(
         getEntriesInTimeframeCutToIt(
           working_data,
           now.startOf("month").toMillis(),
-          now.toMillis()
-        )
+          now.toMillis(),
+        ),
       ).shiftTo("hours", "minute");
 
       setStats({

diff --git a/src/entryMaths.ts b/src/entryMaths.ts
@@ -8,7 +8,7 @@ function inRange(point: number, start: number, end: number) {
 export function isEntryTouchingTimeframe(
   entry: TaskEntry,
   start: number,
-  end: number
+  end: number,
 ) {
   // {} is timeframe, [] is entry
   // yes
@@ -36,7 +36,7 @@ export function isEntryTouchingTimeframe(
 export function getEntriesTouchingTimeframe(
   entries: TaskEntry[],
   start: number,
-  end: number
+  end: number,
 ) {
   return entries.filter((entry) => isEntryTouchingTimeframe(entry, start, end));
 }
@@ -48,7 +48,7 @@ export function getEntriesTouchingTimeframe(
 export function getEntriesInTimeframeCutToIt(
   entries: TaskEntry[],
   start: number,
-  end: number
+  end: number,
 ) {
   const inFrame = getEntriesTouchingTimeframe(entries, start, end);
   const inFrameCloned: TaskEntry[] = JSON.parse(JSON.stringify(inFrame));
@@ -79,7 +79,7 @@ export function getEntriesInTimeframeCutToIt(
 }
 
 export function getMonthsOfEntry(
-  entry: TaskEntry
+  entry: TaskEntry,
 ): { month: number; year: number }[] {
   const start = DateTime.fromMillis(entry.start);
   const startMonth: { month: number; year: number } = {
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,7 +15,7 @@ export function TaskDistributionPie({ @@
       const time_spent_total = time_spent_by_label.reduce(
         (p, c) => p + c.timeSpend.toMillis(),
+,
       );
       const rawLabels: {
@@ Expand Down @@