refactor(ui): Improve device access settings with conditional rendering and loader data handling (#204)

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

@@ -6,7 +6,6 @@ import { CLOUD_APP, DEVICE_API } from "../ui.config";
 import api from "../api";
 import { LocalDevice } from "./devices.$id";
 import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
-import { isOnDevice } from "../main";
 import { GridCard } from "../components/Card";
 import { ShieldCheckIcon } from "@heroicons/react/24/outline";
 import notifications from "../notifications";
@@ -15,16 +14,21 @@ import { useJsonRpc } from "../hooks/useJsonRpc";
 import { InputFieldWithLabel } from "../components/InputField";
 import { SelectMenuBasic } from "../components/SelectMenuBasic";
 import { SettingsSectionHeader } from "../components/SettingsSectionHeader";
+import { isOnDevice } from "../main";
 
 export const loader = async () => {
+  if (isOnDevice) {
     const status = await api
       .GET(`${DEVICE_API}/device`)
       .then(res => res.json() as Promise<LocalDevice>);
     return status;
+  }
+  return null;
 };
 
 export default function SettingsAccessIndexRoute() {
-  const { authMode } = useLoaderData() as LocalDevice;
+  const loaderData = useLoaderData() as LocalDevice | null;
+
   const { navigateTo } = useDeviceUiNavigation();
 
   const [send] = useJsonRpc();
@@ -137,8 +141,6 @@ export default function SettingsAccessIndexRoute() {
     syncCloudUrl();
   }, [cloudProviders, syncCloudUrl]);
 
-  console.log("is adopted:", isAdopted);
-
   return (
     <div className="space-y-4">
       <SettingsPageHeader
@@ -146,6 +148,8 @@ export default function SettingsAccessIndexRoute() {
         description="Manage the Access Control of the device"
       />
 
+      {loaderData?.authMode && (
+        <>
           <div className="space-y-4">
             <SettingsSectionHeader
               title="Local"
@@ -153,9 +157,9 @@ export default function SettingsAccessIndexRoute() {
             />
             <SettingsItem
               title="Authentication Mode"
-          description={`Current mode: ${authMode === "password" ? "Password protected" : "No password"}`}
+              description={`Current mode: ${loaderData.authMode === "password" ? "Password protected" : "No password"}`}
             >
-          {authMode === "password" ? (
+              {loaderData.authMode === "password" ? (
                 <Button
                   size="SM"
                   theme="light"
@@ -176,7 +180,7 @@ export default function SettingsAccessIndexRoute() {
               )}
             </SettingsItem>
 
-        {authMode === "password" && (
+            {loaderData.authMode === "password" && (
               <SettingsItem
                 title="Change Password"
                 description="Update your device access password"
@@ -193,14 +197,15 @@ export default function SettingsAccessIndexRoute() {
             )}
           </div>
           <div className="h-px w-full bg-slate-800/10 dark:bg-slate-300/20" />
+        </>
+      )}
+
       <div className="space-y-4">
         <SettingsSectionHeader
           title="Remote"
           description="Manage the mode of Remote access to the device"
         />
 
-        {isOnDevice && (
-          <>
         <div className="space-y-4">
           {!isAdopted && (
             <>
@@ -323,8 +328,6 @@ export default function SettingsAccessIndexRoute() {
             </div>
           )}
         </div>
-          </>
-        )}
       </div>
     </div>
   );