Feat: react router

.gitignore

@@ -19,3 +19,5 @@ measurements.csv
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+.react-router/

app/components/aggregation-filter.tsx

@@ -1,7 +1,7 @@
 import { Filter } from "lucide-react";
 import { Separator } from "./ui/separator";
 import { Badge } from "./ui/badge";
-import { useSearchParams, useSubmit } from "@remix-run/react";
+import { useSearchParams, useSubmit } from "react-router";
 import * as SelectPrimitive from "@radix-ui/react-select";
 
 import { Select, SelectContent, SelectItem } from "./ui/select";

app/components/daterange-filter.tsx

@@ -13,7 +13,7 @@
 } from "./ui/command";
 import { useEffect, useState } from "react";
 import { Calendar } from "./ui/calendar";
-import { useLoaderData, useSearchParams, useSubmit } from "@remix-run/react";
+import { useLoaderData, useSearchParams, useSubmit } from "react-router";
 import type { loader } from "~/routes/explore+/$deviceId+/_$deviceId";
 import type { DateRange } from "react-day-picker";
 import { PopoverClose } from "@radix-ui/react-popover";
@@ -32,19 +32,19 @@
 
   // State for selected date range and aggregation
   const [date, setDate] = useState<DateRange | undefined>({
     from: loaderData.startDate ? new Date(loaderData.startDate) : undefined,
     to: loaderData.endDate ? new Date(loaderData.endDate) : undefined,
   });
 
   if (
     !date?.from &&
     !date?.to &&
     loaderData.sensors[0].data.length > 0
   ) {
     // on initial load, without a selected time range, check what time rage the last 20000 data points are in
     const firstDate = loaderData.sensors[0].data[0].time;
     const lastDate =
       loaderData.sensors[0].data[
         loaderData.sensors[0].data.length - 1
       ].time;
     setDate({

app/components/device-detail/device-detail-box.tsx

@@ -5,7 +5,7 @@ import {
   useNavigation,
   useParams,
   useSearchParams,
-} from "@remix-run/react";
+} from "react-router";
 import Spinner from "../spinner";
 import {
   Accordion,

app/components/device-detail/graph.tsx

@@ -1,4 +1,4 @@
-import { useNavigate, useNavigation, useSearchParams } from "@remix-run/react";
+import { useNavigate, useNavigation, useSearchParams } from "react-router";
 import {
   Chart as ChartJS,
   LineElement,
@@ -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 =

app/components/device/new/new-device-stepper.tsx

@@ -27,7 +27,7 @@ import {
   BreadcrumbSeparator,
 } from "~/components/ui/breadcrumb";
 import { AdvancedStep } from "./advanced-info";
-import { Form, useSubmit } from "@remix-run/react";
+import { Form, useSubmit } from "react-router";
 
 const generalInfoSchema = z.object({
   name: z

app/components/error-boundary.tsx

@@ -1,9 +1,5 @@
-import {
-  isRouteErrorResponse,
-  useParams,
-  useRouteError,
-} from "@remix-run/react";
-import { type ErrorResponse } from "@remix-run/router";
+import { isRouteErrorResponse, useParams, useRouteError } from "react-router";
+import { type ErrorResponse } from "react-router";
 import { getErrorMessage } from "~/utils/misc";
 
 type StatusHandler = (info: {

app/components/error-message.tsx

@@ -1,6 +1,6 @@
 import { X } from "lucide-react";
 import { Alert, AlertDescription } from "./ui/alert";
-import { useNavigate } from "@remix-run/react";
+import { useNavigate } from "react-router";
 
 export default function ErrorMessage() {
   let navigate = useNavigate();

app/components/header/home/index.tsx

@@ -1,4 +1,4 @@
-import { Link } from "@remix-run/react";
+import { Link } from "react-router";
 
 export default function Home() {
   return (

app/components/header/index.tsx

@@ -1,7 +1,6 @@
 import Home from "./home";
 import NavBar from "./nav-bar";
 import Menu from "./menu";
-// import { useLoaderData } from "@remix-run/react";
 // import Notification from "./notification";
 // import type { loader } from "~/routes/explore.$deviceId._index";
 

app/components/header/menu/index.tsx

@@ -1,10 +1,4 @@
-import {
-  Form,
-  Link,
-  useMatches,
-  useNavigation,
-  useSearchParams,
-} from "@remix-run/react";
+import { Form, Link, useMatches, useNavigation, useSearchParams } from "react-router";
 import {
   DropdownMenu,
   DropdownMenuContent,

app/components/header/nav-bar/filter-options/filter-options.tsx

@@ -1,4 +1,4 @@
-import { useSearchParams, useNavigation } from "@remix-run/react";
+import { useSearchParams, useNavigation } from "react-router";
 import { X } from "lucide-react";
 import { useContext, useEffect, useState } from "react";
 import { Button } from "~/components/ui/button";

app/components/header/nav-bar/filter-options/filter-tags.tsx

@@ -1,4 +1,4 @@
-import { useNavigation, useSearchParams } from "@remix-run/react";
+import { useNavigation, useSearchParams } from "react-router";
 import { Plus, X } from "lucide-react";
 import { useContext, useEffect, useState } from "react";
 import Spinner from "~/components/spinner";

app/components/header/nav-bar/phenomenon-select/phenomenon-select.tsx

@@ -1,9 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import {
-  useLoaderData,
-  useNavigation,
-  useSearchParams,
-} from "@remix-run/react";
+import { useLoaderData, useNavigation, useSearchParams } from "react-router";
 // import { useTranslation } from "react-i18next";
 import type { SensorWikiLabel } from "~/utils/sensor-wiki-helper";
 import { sensorWikiLabel } from "~/utils/sensor-wiki-helper";

app/components/header/nav-bar/sensor-filter.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { CloudSunRain, SunIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { Form } from "@remix-run/react";
+import { Form } from "react-router";
 import { useTranslation } from "react-i18next";
 import { cn } from "~/lib/utils";
 import { sensorWikiLabel } from "~/utils/sensor-wiki-helper";

app/components/header/nav-bar/time-filter/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import * as React from "react";
-// import { useSearchParams, useSubmit } from "@remix-run/react";
 import { format } from "date-fns";
 import { de, enGB } from "date-fns/locale";
 import { CalendarIcon } from "@heroicons/react/24/outline";
@@ -13,7 +12,7 @@ import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Form } from "@remix-run/react";
+import { Form } from "react-router";
 import { useToast } from "@/components/ui/use-toast";
 
 import { getUserLocale } from "get-user-locale";

app/components/header/nav-bar/time-filter/time-filter.tsx

@@ -1,15 +1,14 @@
 "use client";
 
 import * as React from "react";
-// import { useSearchParams, useSubmit } from "@remix-run/react";
 import { de, enGB } from "date-fns/locale";
 import { Clock, CalendarSearch, CalendarClock } from "lucide-react";
 import type { DateRange } from "react-day-picker";
 
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Form } from "@remix-run/react";
+import { Form } from "react-router";
 import { useToast } from "@/components/ui/use-toast";
 
 import { getUserLocale } from "get-user-locale";

app/components/header/notification/index.tsx

@@ -4,8 +4,7 @@ import {
   NotificationBell,
 } from "@novu/notification-center";
 import type { IMessage } from "@novu/notification-center";
-import { useLoaderData } from "@remix-run/react";
-import { useTheme } from "remix-themes";
+import { useLoaderData } from "react-router";
 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

app/components/landing/header/header.tsx

@@ -1,6 +1,6 @@
-import { Link } from "@remix-run/react";
+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 */}

app/components/landing/header/language-selector.tsx

@@ -1,4 +1,4 @@
-import { useFetcher, useLoaderData } from "@remix-run/react";
+import { useFetcher, useLoaderData } from "react-router";
 import { useState } from "react";
 import i18next from "i18next";
 import type { loader } from "~/root";

app/components/map/filter-visualization.tsx

@@ -1,5 +1,5 @@
 import { X } from "lucide-react";
-import { useLoaderData, useNavigate } from "@remix-run/react";
+import { useLoaderData, useNavigate } from "react-router";
 import type { loader } from "~/routes/explore+/_explore";
 import { Fragment, useEffect } from "react";
 import { DeviceExposureZodEnum, DeviceStatusZodEnum } from "~/schema/enum";

app/components/map/layers/cluster/box-marker.tsx

@@ -1,5 +1,5 @@
 import type { Device } from "~/schema";
-import { useMatches, useNavigate, useSearchParams } from "@remix-run/react";
+import { useMatches, useNavigate, useSearchParams } from "react-router";
 import { AnimatePresence, motion } from "framer-motion";
 import { Box, Rocket } from "lucide-react";
 import { useState } from "react";

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];

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"

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>
+//   );
+// }

app/components/mydevices/edit-device/edit-device-sidebar-nav.tsx

@@ -1,5 +1,4 @@
-import { useLocation } from "@remix-run/react";
-import { Link } from "react-router-dom";
+import { useLocation, Link} from "react-router";
 import { buttonVariants } from "~/components/ui/button";
 import { cn } from "~/lib/utils";
 

app/components/nav-bar.tsx

@@ -1,4 +1,4 @@
-import { Link, useLocation } from "@remix-run/react";
+import { Link, useLocation } from "react-router";
 import { Button } from "./ui/button";
 
 import { ChevronDownIcon, LogIn, Mailbox, Plus } from "lucide-react";

app/components/search/search-list.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useContext } from "react";
 import { useMap } from "react-map-gl";
-import { useMatches, useNavigate, useSearchParams } from "@remix-run/react";
+import { useMatches, useNavigate, useSearchParams } from "react-router";
 
 import SearchListItem from "./search-list-item";
 import { goTo } from "~/lib/search-map-helper";

app/components/sidebar-nav.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { NavLink } from "@remix-run/react";
+import { NavLink } from "react-router";
 import { cn } from "~/lib/utils";
 
 interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {

app/components/sidebar-settings-nav.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { NavLink } from "@remix-run/react";
+import { NavLink } from "react-router";
 import { cn } from "~/lib/utils";
 
 interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {

app/components/stepper/index.tsx

@@ -1,4 +1,4 @@
-import { Link } from "@remix-run/react";
+import { Link } from "react-router";
 import clsx from "clsx";
 
 interface Step {

app/cookies.ts

@@ -1,4 +1,4 @@
-import { createCookie } from "@remix-run/node";
+import { createCookie } from "react-router";
 
 const isProduction = process.env.NODE_ENV === "production";
 

app/entry.client.tsx

@@ -1,4 +1,4 @@
-import { RemixBrowser } from "@remix-run/react";
+import { HydratedRouter } from "react-router/dom";
 import i18next from "i18next";
 import I18nextBrowserLanguageDetector from "i18next-browser-languagedetector";
 import I18NextHttpBackend from "i18next-http-backend";
@@ -34,7 +34,7 @@ const hydrate = async () => {
       document,
       <I18nextProvider i18n={i18next}>
         <StrictMode>
-          <RemixBrowser />
+          <HydratedRouter />
         </StrictMode>
       </I18nextProvider>
     );