Refactor server list to object instead of array

- Improve performance due to frequency of accessing the list

src/renderer/api/navidrome/navidrome-api.ts

@@ -192,8 +192,8 @@ axiosClient.interceptors.response.use(
         const serverId = currentServer.id;
         const token = currentServer.ndCredential;
         console.log(`token is expired: ${token}`);
-        useAuthStore.getState().actions.setCurrentServer(null);
         useAuthStore.getState().actions.updateServer(serverId, { ndCredential: undefined });
+        useAuthStore.getState().actions.setCurrentServer(null);
       }
     }
 

src/renderer/features/servers/components/edit-server-form.tsx

@@ -3,7 +3,6 @@ import { Checkbox, Stack, Group } from '@mantine/core';
 import { Button, PasswordInput, TextInput, toast } from '/@/renderer/components';
 import { useForm } from '@mantine/form';
 import { closeAllModals } from '@mantine/modals';
-import { nanoid } from 'nanoid/non-secure';
 import { RiInformationLine } from 'react-icons/ri';
 import { jellyfinApi } from '/@/renderer/api/jellyfin.api';
 import { navidromeApi } from '/@/renderer/api/navidrome.api';
@@ -25,7 +24,7 @@ const AUTH_FUNCTIONS = {
 };
 
 export const EditServerForm = ({ isUpdate, server, onCancel }: EditServerFormProps) => {
-  const { updateServer, setCurrentServer } = useAuthStoreActions();
+  const { updateServer } = useAuthStoreActions();
   const [isLoading, setIsLoading] = useState(false);
 
   const form = useForm({
@@ -61,7 +60,6 @@ export const EditServerForm = ({ isUpdate, server, onCancel }: EditServerFormPro
 
       const serverItem = {
         credential: data.credential,
-        id: nanoid(),
         name: values.name,
         ndCredential: data.ndCredential,
         type: values.type,
@@ -71,8 +69,6 @@ export const EditServerForm = ({ isUpdate, server, onCancel }: EditServerFormPro
       };
 
       updateServer(server.id, serverItem);
-      setCurrentServer(serverItem);
-
       toast.success({ message: 'Server has been updated' });
     } catch (err: any) {
       setIsLoading(false);

src/renderer/features/servers/components/server-list-item.tsx

@@ -61,7 +61,7 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
       <Divider my="sm" />
       <TimeoutButton
         leftIcon={<RiDeleteBin2Line />}
-        timeoutProps={{ callback: handleDeleteServer, duration: 1500 }}
+        timeoutProps={{ callback: handleDeleteServer, duration: 1000 }}
         variant="subtle"
       >
         Remove server

src/renderer/store/auth.store.ts

@@ -18,7 +18,7 @@ export interface AuthSlice extends AuthState {
   actions: {
     addServer: (args: ServerListItem) => void;
     deleteServer: (id: string) => void;
-    getServer: (id: string) => ServerListItem | undefined;
+    getServer: (id: string) => ServerListItem | null;
     setCurrentServer: (server: ServerListItem | null) => void;
     updateServer: (id: string, args: Partial<ServerListItem>) => void;
   };
@@ -44,7 +44,9 @@ export const useAuthStore = create<AuthSlice>()(
             });
           },
           getServer: (id) => {
-            return get().serverList[id];
+            const server = get().serverList[id];
+            if (server) return server;
+            return null;
           },
           setCurrentServer: (server) => {
             set((state) => {
@@ -62,11 +64,13 @@ export const useAuthStore = create<AuthSlice>()(
           },
           updateServer: (id: string, args: Partial<ServerListItem>) => {
             set((state) => {
-              state.serverList[id] = { ...state.serverList[id], ...args };
+              const updatedServer = {
+                ...state.serverList[id],
+                ...args,
+              };
 
-              if (state.currentServer?.id === id) {
-                state.currentServer = { ...state.serverList[id], ...args };
-              }
+              state.serverList[id] = updatedServer;
+              state.currentServer = updatedServer;
             });
           },
         },
@@ -79,7 +83,7 @@ export const useAuthStore = create<AuthSlice>()(
     {
       merge: (persistedState, currentState) => merge(currentState, persistedState),
       name: 'store_authentication',
-      version: 1,
+      version: 2,
     },
   ),
 );
@@ -91,3 +95,11 @@ export const useCurrentServer = () => useAuthStore((state) => state.currentServe
 export const useServerList = () => useAuthStore((state) => state.serverList);
 
 export const useAuthStoreActions = () => useAuthStore((state) => state.actions);
+
+export const getServerById = (id?: string) => {
+  if (!id) {
+    return null;
+  }
+
+  return useAuthStore.getState().actions.getServer(id);
+};