From d49a567a387189b17e3a466a239f2e77ee91f7be Mon Sep 17 00:00:00 2001
From: Adam Shiervani <adam.shiervani@gmail.com>
Date: Thu, 27 Feb 2025 17:08:13 +0100
Subject: [PATCH] refactor(ui): Extract device UI path generation to standalone
 function (#203)

---
 ui/src/hooks/useAppNavigation.ts              | 46 +++++++++++--------
 ui/src/routes/devices.$id.settings._index.tsx |  7 +--
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/ui/src/hooks/useAppNavigation.ts b/ui/src/hooks/useAppNavigation.ts
index aca7f71..b6fbb49 100644
--- a/ui/src/hooks/useAppNavigation.ts
+++ b/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 ..)
-      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}`;
-      }
+      return getDeviceUiPath(path, deviceId);
     },
     [deviceId],
   );
diff --git a/ui/src/routes/devices.$id.settings._index.tsx b/ui/src/routes/devices.$id.settings._index.tsx
index 1c84992..54cee9a 100644
--- a/ui/src/routes/devices.$id.settings._index.tsx
+++ b/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() {
-  return redirect("/settings/general");
+export function loader({ params }: LoaderFunctionArgs) {
+  return redirect(getDeviceUiPath("/settings/general", params.id));
 }