WIP: can deploy?

2026-07-29 00:30:37 -04:00
parent 8f5c499ee2
commit 4a6732798a
31 changed files with 803 additions and 739 deletions
@@ -0,0 +1,24 @@
+import { RouterProvider } from "@tanstack/react-router";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { Provider } from "react-redux";
+import { PersistGate } from "redux-persist/integration/react";
+import { getRouter } from "#/router";
+import { persistor, store } from "#/store/store";
+import "./styles.css";
+
+const router = getRouter();
+
+const rootElement = document.getElementById("app");
+if (!rootElement)
+	throw new Error("Could not find #app element to mount the app");
+
+createRoot(rootElement).render(
+	<StrictMode>
+		<Provider store={store}>
+			<PersistGate loading={null} persistor={persistor}>
+				<RouterProvider router={router} />
+			</PersistGate>
+		</Provider>
+	</StrictMode>,
+);
@@ -1,5 +1,11 @@
 import { DateTime } from "luxon";
-import { type FC, useEffect, useState } from "react";
+import {
+	type EventHandler,
+	type FC,
+	type MouseEventHandler,
+	useEffect,
+	useState,
+} from "react";
 import { useAppDispatch, useAppSelector } from "../store/hooks";
 import { clearStartTime, setStartTime } from "../store/slices/timeSlice";
 import { ROUND_LENGTH_SECONDS } from "../utils/constants";
@@ -22,6 +28,14 @@ const Welcome: FC = () => {
 	const isRunning = startTime !== null;
 	const isOvertime = elapsedSeconds > 60;

+	const nextRoundClick: MouseEventHandler<HTMLButtonElement> = (_e) => {
+		dispatch(clearStartTime());
+	};
+
+	const startRoundClick: MouseEventHandler<HTMLButtonElement> = (_e) => {
+		dispatch(setStartTime(DateTime.now().toISO() ?? ""));
+	};
+
 	return (
 		<div className="flex min-h-screen flex-col items-center justify-center gap-8 p-8">
 			<h1 className="text-4xl font-bold">By Other Means Control Timer</h1>
@@ -35,7 +49,7 @@ const Welcome: FC = () => {
 			{isRunning ? (
 				<button
 					type="button"
-					onClick={() => dispatch(clearStartTime())}
+					onClick={nextRoundClick}
 					className="rounded-lg bg-slate-700 px-6 py-3 text-lg font-semibold hover:bg-slate-600"
 				>
 					Prepare Next Round
@@ -43,7 +57,7 @@ const Welcome: FC = () => {
 			) : (
 				<button
 					type="button"
-					onClick={() => dispatch(setStartTime(DateTime.now().toISO() ?? ""))}
+					onClick={startRoundClick}
 					className="rounded-lg bg-emerald-600 px-6 py-3 text-lg font-semibold hover:bg-emerald-500"
 				>
 					Start Round
@@ -57,12 +57,3 @@ const rootRouteChildren: RootRouteChildren = {
 export const routeTree = rootRouteImport
  ._addFileChildren(rootRouteChildren)
  ._addFileTypes<FileRouteTypes>()
-
-import type { getRouter } from './router.tsx'
-import type { createStart } from '@tanstack/react-start'
-declare module '@tanstack/react-start' {
-  interface Register {
-    ssr: true
-    router: Awaited<ReturnType<typeof getRouter>>
-  }
-}
@@ -1,63 +1,28 @@
 import { TanStackDevtools } from "@tanstack/react-devtools";
-import { createRootRoute, HeadContent, Scripts } from "@tanstack/react-router";
+import { createRootRoute, Outlet } from "@tanstack/react-router";
 import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
-import { Provider } from "react-redux";
-import { PersistGate } from "redux-persist/integration/react";
-
-import { persistor, store } from "#/store/store";
-import appCss from "../styles.css?url";

 export const Route = createRootRoute({
-	head: () => ({
-		meta: [
-			{
-				charSet: "utf-8",
-			},
-			{
-				name: "viewport",
-				content: "width=device-width, initial-scale=1",
-			},
-			{
-				title: "By Other Means Control Timer",
-			},
-		],
-		links: [
-			{
-				rel: "stylesheet",
-				href: appCss,
-			},
-		],
-	}),
-	shellComponent: RootDocument,
+	component: RootComponent,
 });

-function RootDocument({ children }: { children: React.ReactNode }) {
+function RootComponent() {
 	return (
-		<html lang="en">
-			<head>
-				<HeadContent />
-			</head>
-			<body className="bg-slate-900 text-slate-100">
-				<Provider store={store}>
-					<PersistGate loading={null} persistor={persistor}>
-						{children}
-					</PersistGate>
-				</Provider>
-				{import.meta.env.VITE_TANSTACK_DEVTOOLS === "true" && (
-					<TanStackDevtools
-						config={{
-							position: "bottom-right",
-						}}
-						plugins={[
-							{
-								name: "Tanstack Router",
-								render: <TanStackRouterDevtoolsPanel />,
-							},
-						]}
-					/>
-				)}
-				<Scripts />
-			</body>
-		</html>
+		<>
+			<Outlet />
+			{import.meta.env.VITE_TANSTACK_DEVTOOLS === "true" && (
+				<TanStackDevtools
+					config={{
+						position: "bottom-right",
+					}}
+					plugins={[
+						{
+							name: "Tanstack Router",
+							render: <TanStackRouterDevtoolsPanel />,
+						},
+					]}
+				/>
+			)}
+		</>
 	);
 }
@@ -14,9 +14,9 @@ const noopStorage = {
 	},
 };

-// redux-persist's bundled storage needs `localStorage`, which isn't available
-// during server-side rendering (and can throw in locked-down browsers), so
-// this is a minimal storage engine that never touches `redux-persist/lib/storage`.
+// redux-persist's bundled storage engine can throw or come back malformed in
+// some browsers (private mode, locked-down storage), so this is a minimal
+// storage engine that never touches `redux-persist/lib/storage`.
 function createLocalStorageEngine() {
 	if (typeof window === "undefined") return noopStorage;
 	try {