refactor(ui): Extract device UI path generation to standalone function (#203)

ui/src/hooks/useAppNavigation.ts

@@ -2,6 +2,31 @@ import { useNavigate, useParams, NavigateOptions } from "react-router-dom";
 import { isOnDevice } from "../main";
 import { useCallback, useMemo } from "react";
 
+/**
+ * Generates the correct path based on whether the app is running on device or in cloud mode
+ *
+ */
+export function getDeviceUiPath(path: string, deviceId?: string): string {
+  // Check if it's a relative path (starts with . or ..)
+  const isRelativePath = path.startsWith(".") || path === "";
+
+  // If it's a relative path, don't modify it
+  if (isRelativePath) return path;
+
+  // Ensure absolute path starts with a slash
+  const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+
+  if (isOnDevice) {
+    return normalizedPath;
+  } else {
+    if (!deviceId) {
+      console.error("No device ID provided when generating path in cloud mode");
+      throw new Error("Device ID is required for cloud mode path generation");
+    }
+    return `/devices/${deviceId}${normalizedPath}`;
+  }
+}
+
 /**
  * Hook that provides context-aware navigation and path generation
  * that works in both cloud and device modes.
@@ -18,27 +43,10 @@ export function useDeviceUiNavigation() {
   // Get the device ID from params
   const deviceId = useMemo(() => params.id, [params.id]);
 
-  // Function to generate the correct path
+  // Use the standalone getPath function with the current deviceId
   const getPath = useCallback(
     (path: string): string => {
-      // Check if it's a relative path (starts with . or ..)
+      return getDeviceUiPath(path, deviceId);
-      const isRelativePath = path.startsWith(".") || path === "";
-
-      // If it's a relative path, don't modify it
-      if (isRelativePath) return path;
-
-      // Ensure absolute path starts with a slash
-      const normalizedPath = path.startsWith("/") ? path : `/${path}`;
-
-      if (isOnDevice) {
-        return normalizedPath;
-      } else {
-        if (!deviceId) {
-          console.error("No device ID found in params when generating path");
-          throw new Error("No device ID found in params when generating path");
-        }
-        return `/devices/${deviceId}${normalizedPath}`;
-      }
     },
     [deviceId],
   );

ui/src/routes/devices.$id.settings._index.tsx

@@ -1,5 +1,6 @@
-import { redirect } from "react-router-dom";
+import { LoaderFunctionArgs, redirect } from "react-router-dom";
+import { getDeviceUiPath } from "../hooks/useAppNavigation";
 
-export function loader() {
+export function loader({ params }: LoaderFunctionArgs) {
-  return redirect("/settings/general");
+  return redirect(getDeviceUiPath("/settings/general", params.id));
 }