refactor: remove remix-themes dependency and related theme handling

openSenseMap · Jan 6, 2025 · c4fed7e · c4fed7e
1 parent b17db53
commit c4fed7e
Show file tree

Hide file tree

Showing 20 changed files with 771 additions and 805 deletions.
diff --git a/app/components/device-detail/graph.tsx b/app/components/device-detail/graph.tsx
@@ -26,7 +26,6 @@ import {
 } from "../ui/dropdown-menu";
 import { datesHave48HourRange } from "~/lib/utils";
 import { isBrowser, isTablet } from "react-device-detect";
-import { useTheme } from "remix-themes";
 import { AggregationFilter } from "../aggregation-filter";
 import { DateRangeFilter } from "../daterange-filter";
 import Spinner from "../spinner";
@@ -120,7 +119,7 @@ export default function Graph({
   }, [chartRef, setHoveredPoint]);
 
   // get theme from tailwind
-  const [theme] = useTheme();
+  const [theme] = "light" //useTheme();
 
   const [lineData, setLineData] = useState(() => {
     const includeDeviceName =

diff --git a/app/components/header/notification/index.tsx b/app/components/header/notification/index.tsx
@@ -5,7 +5,6 @@ import {
 } from "@novu/notification-center";
 import type { IMessage } from "@novu/notification-center";
 import { useLoaderData } from "react-router";
-import { useTheme } from "remix-themes";
 import type { loader } from "~/root";
 
 function onNotificationClick(message: IMessage) {
@@ -18,7 +17,7 @@ function onNotificationClick(message: IMessage) {
 export default function Notification() {
   const data = useLoaderData<typeof loader>();
   // get theme from tailwind
-  const [theme] = useTheme();
+  const [theme] = "light" //useTheme();
   return (
     <div className="pointer-events-auto mr-4 box-border flex h-10 w-10 items-center justify-center rounded-full border border-gray-100 bg-white text-black hover:bg-gray-100">
       <NovuProvider

diff --git a/app/components/landing/header/header.tsx b/app/components/landing/header/header.tsx
@@ -1,6 +1,6 @@
 import { Link } from "react-router";
 import { useState } from "react";
-import { ModeToggle } from "../../mode-toggle";
+// import { ModeToggle } from "../../mode-toggle";
 import LanguageSelector from "./language-selector";
 
 const links = [
@@ -71,7 +71,7 @@ export default function Header() {
         <div>
           <div className="flex items-center justify-center md:order-2 gap-2">
             {/* Theme */}
-            <ModeToggle />
+            {/* <ModeToggle /> */}
             {/* Language */}
             <LanguageSelector />
             {/* Collapsible navigation bar */}

diff --git a/app/components/map/layers/cluster/donut-chart-cluster.tsx b/app/components/map/layers/cluster/donut-chart-cluster.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "remix-themes";
 import type { DeviceClusterProperties } from "~/routes/explore+/_explore";
 
 type DonutChartClusterType = {
@@ -18,7 +17,7 @@ export default function DonutChartCluster({
   cluster,
   clusterOnClick,
 }: DonutChartClusterType) {
-  const [theme] = useTheme();
+  const [theme] = "light" //useTheme();
   const { categories, point_count: pointCount } = cluster.properties;
   const { active = 0, inactive = 0, old = 0 } = categories;
   const counts: number[] = [active, inactive, old];

diff --git a/app/components/map/map.tsx b/app/components/map/map.tsx
@@ -1,7 +1,6 @@
 import type { MapProps, MapRef } from "react-map-gl";
 import { NavigationControl, Map as ReactMap } from "react-map-gl";
 import { forwardRef } from "react";
-import { useTheme } from "remix-themes";
 
 const Map = forwardRef<MapRef, MapProps>(
   (
@@ -10,7 +9,7 @@ const Map = forwardRef<MapRef, MapProps>(
     ref,
   ) => {
     // get theme from tailwind
-    const [theme] = useTheme();
+    const [theme] = "light" //useTheme();
     return (
       <ReactMap
         id="osem"

diff --git a/app/components/mode-toggle.tsx b/app/components/mode-toggle.tsx
@@ -1,23 +1,23 @@
-import { Moon, Sun } from "lucide-react";
-import { Theme, useTheme } from "remix-themes";
-import { Button } from "./ui/button";
+// import { Moon, Sun } from "lucide-react";
+// import { Theme, useTheme } from "remix-themes";
+// import { Button } from "./ui/button";
 
-export function ModeToggle() {
-  const [theme, setTheme] = useTheme();
-  if (!theme) return null; 
-  const isDark = theme === Theme.DARK;
+// export function ModeToggle() {
+//   const [theme, setTheme] = useTheme();
+//   if (!theme) return null; 
+//   const isDark = theme === Theme.DARK;
 
-  const toggleTheme = () => {
-    setTheme(theme === Theme.LIGHT ? Theme.DARK : Theme.LIGHT);
-  };
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={toggleTheme}
-      className="hover:bg-transparent dark:hover:text-white hover:text-black"
-    >
-      {isDark ? <Moon className="h-6 w-6" /> : <Sun className="h-6 w-6" />}
-    </Button>
-  );
-}
+//   const toggleTheme = () => {
+//     setTheme(theme === Theme.LIGHT ? Theme.DARK : Theme.LIGHT);
+//   };
+//   return (
+//     <Button
+//       variant="ghost"
+//       size="icon"
+//       onClick={toggleTheme}
+//       className="hover:bg-transparent dark:hover:text-white hover:text-black"
+//     >
+//       {isDark ? <Moon className="h-6 w-6" /> : <Sun className="h-6 w-6" />}
+//     </Button>
+//   );
+// }
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,8 +1,15 @@
 import type { LoaderFunctionArgs, MetaFunction } from "react-router";
-import { data } from "react-router";
-import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from "react-router";
+import {
+  data,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useLoaderData,
+} from "react-router";
 import { getEnv } from "./env.server";
-import { getUser, themeSessionResolver } from "./session.server";
+import { getUser } from "./session.server";
 import tailwindStylesheetUrl from "/app/tailwind.css?url";
 import appStylesheetUrl from "/app/app.css?url";
 import clsx from "clsx";
@@ -11,11 +18,6 @@ import { useTranslation } from "react-i18next";
 import { useChangeLanguage } from "remix-i18next/react";
 import { Toaster } from "./components/ui/toaster";
 import { i18nCookie } from "./cookies";
-import {
-  PreventFlashOnWrongTheme,
-  ThemeProvider,
-  useTheme,
-} from "remix-themes";
 
 export const links = () => {
   return [
@@ -63,13 +65,11 @@ export async function loader({ request }: LoaderFunctionArgs) {
   const locale = await i18next.getLocale(request);
   const user = await getUser(request);
   // const themeSession = await getThemeSession(request);
-  const { getTheme } = await themeSessionResolver(request);
   return data(
     {
       user: user,
       locale: locale,
       ENV: getEnv(),
-      theme: getTheme(),
     },
     {
       headers: { "Set-Cookie": await i18nCookie.serialize(locale) },
@@ -85,19 +85,8 @@ export let handle = {
   i18n: "common",
 };
 
-export default function AppWithProviders() {
-  const data = useLoaderData<typeof loader>();
-
-  return (
-    <ThemeProvider specifiedTheme={data.theme} themeAction="/action/set-theme">
-      <App />
-    </ThemeProvider>
-  );
-}
-
-export function App() {
+export default function App() {
   const data = useLoaderData<typeof loader>();
-  const [theme] = useTheme();
 
   let { i18n } = useTranslation();
 
@@ -108,10 +97,9 @@ export function App() {
   useChangeLanguage(data.locale);
 
   return (
-    <html lang={data.locale} dir={i18n.dir()} className={clsx(theme)}>
+    <html lang={data.locale} dir={i18n.dir()} className={clsx("light")}>
       <head>
         <Meta />
-        <PreventFlashOnWrongTheme ssrTheme={Boolean(data.theme)} />
         <Links />
       </head>
       <body className="flex h-full flex-col dark:bg-dark-background dark:text-dark-text">

diff --git a/app/routes/action+/set-theme.tsx b/app/routes/action+/set-theme.tsx
diff --git a/app/routes/device+/$deviceId+/edit+/general.tsx b/app/routes/device+/$deviceId+/edit+/general.tsx
@@ -1,9 +1,7 @@
 import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router";
-import { data, redirect } from "react-router";
-import { Form, useActionData, useLoaderData, useOutletContext } from "react-router";
+import { data, redirect , Form, useActionData, useLoaderData, useOutletContext } from "react-router";
 import { Save } from "lucide-react";
 import React, { useState } from "react";
-import { typedjson } from "remix-typedjson";
 import invariant from "tiny-invariant";
 import ErrorMessage from "~/components/error-message";
 import {
@@ -23,12 +21,12 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   const deviceID = params.deviceId;
 
   if (typeof deviceID !== "string") {
-    return "deviceID not found";
+    return { device: null}
   }
 
   const deviceData = await getDeviceWithoutSensors({ id: deviceID });
 
-  return typedjson(deviceData);
+  return {device: deviceData};
 }
 
 //*****************************************************
@@ -114,14 +112,14 @@ export async function action({ request, params }: ActionFunctionArgs) {
 
 //**********************************
 export default function () {
-  const deviceData = useLoaderData<typeof loader>();
+  const {device} = useLoaderData<typeof loader>();
   const actionData = useActionData<typeof action>();
   const [passwordDelVal, setPasswordVal] = useState(""); //* to enable delete account button
   //* focus when an error occured
   const nameRef = React.useRef<HTMLInputElement>(null);
   const passwordDelRef = React.useRef<HTMLInputElement>(null);
-  const [name, setName] = useState(deviceData?.name);
-  const [exposure, setExposure] = useState(deviceData?.exposure);
+  const [name, setName] = useState(device?.name);
+  const [exposure, setExposure] = useState(device?.exposure);
   //* to view toast on edit page
   const [setToastOpen] = useOutletContext<[(_open: boolean) => void]>();
 
@@ -163,8 +161,8 @@ export default function () {
                     name="intent"
                     value="save"
                     disabled={
-                      name === deviceData?.name &&
-                      exposure === deviceData?.exposure
+                      name === device?.name &&
+                      exposure === device?.exposure
                     }
                     className=" h-12 w-12 rounded-full border-[1.5px] border-[#9b9494] hover:bg-[#e7e6e6]"
                   >
@@ -195,7 +193,7 @@ export default function () {
                     autoFocus={true}
                     name="name"
                     type="text"
-                    defaultValue={deviceData?.name}
+                    defaultValue={device?.name}
                     onChange={(e) => setName(e.target.value)}
                     ref={nameRef}
                     aria-describedby="name-error"
@@ -217,8 +215,8 @@ export default function () {
                   <select
                     id="exposure"
                     name="exposure"
-                    defaultValue={deviceData?.exposure}
-                    onChange={(e) => setExposure(e.target.value)}
+                    defaultValue={device?.exposure || "unknown"}
+                    onChange={(e) => setExposure(e.target.value as "indoor" | "outdoor" | "mobile" | "unknown")}
                     className="appearance-auto w-full rounded border border-gray-200 px-2 py-1.5 text-base"
                   >
                     <option value="INDOOR">indoor</option>

diff --git a/app/routes/device+/$deviceId+/edit+/location.tsx b/app/routes/device+/$deviceId+/edit+/location.tsx
@@ -1,11 +1,18 @@
-import type { ActionFunctionArgs, LinksFunction, LoaderFunctionArgs } from "react-router";
-import { redirect } from "react-router";
-import { Form, useActionData, useLoaderData, useOutletContext } from "react-router";
+import type {
+  ActionFunctionArgs,
+  LinksFunction,
+  LoaderFunctionArgs,
+} from "react-router";
+import {
+  redirect,
+  Form,
+  useActionData,
+  useLoaderData,
+  useOutletContext,
+} from "react-router";
 import React, { useCallback, useState } from "react";
 import { getUserId } from "~/session.server";
 import { Save } from "lucide-react";
-
-import { typedjson } from "remix-typedjson";
 import invariant from "tiny-invariant";
 import {
   getDeviceWithoutSensors,
@@ -25,12 +32,12 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   const deviceID = params.deviceId;
 
   if (typeof deviceID !== "string") {
-    return "deviceID not found";
+    return { device: null };
   }
 
   const deviceData = await getDeviceWithoutSensors({ id: deviceID });
 
-  return typedjson(deviceData);
+  return { device: deviceData };
 }
 
 //*****************************************
@@ -63,12 +70,12 @@ export async function action({ request, params }: ActionFunctionArgs) {
 
 //**********************************
 export default function EditLocation() {
-  const data = useLoaderData<typeof loader>();
+  const { device } = useLoaderData<typeof loader>();
   const actionData = useActionData<typeof action>();
   //* map marker
   const [marker, setMarker] = useState({
-    latitude: data.latitude,
-    longitude: data.longitude,
+    latitude: device?.latitude,
+    longitude: device?.longitude,
   });
   //* on-marker-drag event
   const onMarkerDrag = useCallback((event: MarkerDragEvent) => {
@@ -136,13 +143,15 @@ export default function EditLocation() {
                     borderRadius: "6px",
                   }}
                 >
-                  <Marker
-                    longitude={marker.longitude}
-                    latitude={marker.latitude}
-                    anchor="bottom"
-                    draggable
-                    onDrag={onMarkerDrag}
-                  ></Marker>
+                  {marker.latitude && marker.longitude && (
+                    <Marker
+                      longitude={marker.longitude}
+                      latitude={marker.latitude}
+                      anchor="bottom"
+                      draggable
+                      onDrag={onMarkerDrag}
+                    ></Marker>
+                  )}
                   <NavigationControl position="top-left" showCompass={false} />
                 </Map>
               </MapProvider>
@@ -175,7 +184,7 @@ export default function EditLocation() {
                           Number(e.target.value) <= 85.06
                         ) {
                           setMarker({
-                            latitude: e.target.value,
+                            latitude: e.target.value as unknown as number,
                             longitude: marker.longitude,
                           });
                         }
@@ -216,7 +225,7 @@ export default function EditLocation() {
                         ) {
                           setMarker({
                             latitude: marker.latitude,
-                            longitude: e.target.value,
+                            longitude: e.target.value as unknown as number,
                           });
                         }
                       }}
@@ -235,8 +244,8 @@ export default function EditLocation() {
               <button
                 onClick={() => {
                   setMarker({
-                    latitude: data.latitude,
-                    longitude: data.longitude,
+                    latitude: device?.latitude,
+                    longitude: device?.longitude,
                   });
                 }}
                 className="mb-10 mt-4 font-semibold