Update react-query implementation

src/renderer/features/albums/index.ts

@@ -1,3 +1,3 @@
-export * from './queries/use-album-detail';
+export * from './queries/get-album-detail';
-export * from './queries/use-album-list';
+export * from './queries/get-album-list';
 export * from './routes/album-list-route';

src/renderer/features/albums/queries/get-album-detail.ts

@@ -3,11 +3,10 @@ import { api } from '@/renderer/api';
 import { queryKeys } from '@/renderer/api/query-keys';
 import { QueryOptions } from '@/renderer/lib/react-query';
 import { useAuthStore } from '@/renderer/store';
-import { AlbumDetailResponse } from 'renderer/api/types';
 
 export const useAlbumDetail = (
   query: { albumId: string },
-  options: QueryOptions<AlbumDetailResponse>
+  options: QueryOptions
 ) => {
   const serverId = useAuthStore((state) => state.currentServer?.id) || '';
 

src/renderer/features/albums/queries/get-album-list.ts

@@ -2,20 +2,28 @@ import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { api } from '@/renderer/api';
 import { AlbumListParams } from '@/renderer/api/albums.api';
 import { queryKeys } from '@/renderer/api/query-keys';
+import { QueryOptions } from '@/renderer/lib/react-query';
 import { useAuthStore } from '@/renderer/store';
 import { AlbumListResponse } from 'renderer/api/types';
 
-export const useAlbumList = (params: AlbumListParams) => {
+export const useAlbumList = (
+  params: AlbumListParams,
+  options?: QueryOptions
+) => {
   const serverId = useAuthStore((state) => state.currentServer?.id) || '';
 
   return useQuery({
     enabled: !!serverId,
     queryFn: () => api.albums.getAlbumList({ serverId }, params),
     queryKey: queryKeys.albums.list(serverId, params),
+    ...options,
   });
 };
 
-export const useAlbumListInfinite = (params: AlbumListParams) => {
+export const useAlbumListInfinite = (
+  params: AlbumListParams,
+  options?: QueryOptions
+) => {
   const serverId = useAuthStore((state) => state.currentServer?.id) || '';
 
   return useInfiniteQuery({
@@ -29,5 +37,6 @@ export const useAlbumListInfinite = (params: AlbumListParams) => {
     queryFn: ({ pageParam }) =>
       api.albums.getAlbumList({ serverId }, { ...(pageParam || params) }),
     queryKey: queryKeys.albums.list(serverId, params),
+    ...options,
   });
 };

src/renderer/features/albums/routes/album-list-route.tsx

@@ -34,7 +34,7 @@ import {
   FilterGroupType,
   encodeAdvancedFiltersQuery,
 } from '@/renderer/features/albums/components/advanced-filters';
-import { useAlbumList } from '@/renderer/features/albums/queries/use-album-list';
+import { useAlbumList } from '@/renderer/features/albums/queries/get-album-list';
 import { useServerList } from '@/renderer/features/servers';
 import { AnimatedPage, useServerCredential } from '@/renderer/features/shared';
 import { AppRoute } from '@/renderer/router/routes';
@@ -80,7 +80,7 @@ export const AlbumListRoute = () => {
   const page = useAppStore((state) => state.albums);
   const setPage = useAppStore((state) => state.setPage);
   const serverId = useAuthStore((state) => state.currentServer?.id) || '';
-  const { data: servers } = useServerList({ enabled: true });
+  const serverListQuery = useServerList({ enabled: true });
   const [filters, setFilters] = useSetState({
     orderBy: SortOrder.ASC,
     serverFolderId: [] as string[],
@@ -107,11 +107,13 @@ export const AlbumListRoute = () => {
   };
 
   const serverFolders = useMemo(() => {
-    const server = servers?.data.find((server) => server.id === serverId);
+    const server = serverListQuery?.data?.data.find(
+      (server) => server.id === serverId
+    );
     return server?.serverFolders;
-  }, [serverId, servers]);
+  }, [serverId, serverListQuery?.data?.data]);
 
-  const { data: albums } = useAlbumList({
+  const albumListQuery = useAlbumList({
     advancedFilters,
     orderBy: filters.orderBy,
     serverFolderId: filters.serverFolderId,
@@ -454,7 +456,7 @@ export const AlbumListRoute = () => {
                 display={page.list?.display || CardDisplayType.CARD}
                 fetchFn={fetch}
                 height={height}
-                itemCount={albums?.pagination.totalEntries || 0}
+                itemCount={albumListQuery?.data?.pagination.totalEntries || 0}
                 itemGap={20}
                 itemSize={150 + page.list?.size}
                 itemType={LibraryItem.ALBUM}

src/renderer/features/genres/index.ts

@@ -1 +1 @@
-export * from './queries/genre-list';
+export * from './queries/get-genre-list';

src/renderer/features/genres/queries/get-genre-list.ts

@@ -1,20 +1,17 @@
 import { useQuery } from '@tanstack/react-query';
-import { AxiosError } from 'axios';
 import { api } from '@/renderer/api';
-import { GenreListResponse } from '@/renderer/api/genres.api';
 import { queryKeys } from '@/renderer/api/query-keys';
-import { ApiError } from '@/renderer/api/types';
 import { QueryOptions } from '@/renderer/lib/react-query';
 import { useAuthStore } from '@/renderer/store';
 
-export const useGenreList = (options?: QueryOptions<GenreListResponse>) => {
+export const useGenreList = (options?: QueryOptions) => {
   const serverId = useAuthStore((state) => state.currentServer?.id) || '';
 
-  const query = useQuery<GenreListResponse, AxiosError<ApiError>>({
+  const query = useQuery({
     enabled: !!serverId,
     queryFn: ({ signal }) => api.genres.getGenreList({ serverId }, signal),
     queryKey: queryKeys.genres.list(serverId),
-    staleTime: Infinity,
+    staleTime: 1000 * 60 * 60,
     ...options,
   });
 

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

@@ -9,7 +9,7 @@ import {
   TextInput,
   SegmentedControl,
 } from '@/renderer/components';
-import { useCreateServer } from '@/renderer/features/servers/mutations/use-create-server';
+import { useCreateServer } from '@/renderer/features/servers/mutations/create-server';
 
 const SERVER_TYPES = [
   { label: 'Jellyfin', value: ServerType.JELLYFIN },

src/renderer/features/servers/components/add-server-url-form.tsx

@@ -3,7 +3,7 @@ import { useForm, zodResolver } from '@mantine/form';
 import { useFocusTrap } from '@mantine/hooks';
 import { z } from 'zod';
 import { Button, TextInput } from '@/renderer/components';
-import { useCreateServerUrl } from '@/renderer/features/servers/mutations/use-create-server-url';
+import { useCreateServerUrl } from '@/renderer/features/servers/mutations/create-server-url';
 
 interface AddServerUrlFormProps {
   onCancel: () => void;

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

@@ -3,7 +3,7 @@ import { useForm } from '@mantine/form';
 import { RiInformationLine } from 'react-icons/ri';
 import { Server, ServerType } from '@/renderer/api/types';
 import { Button, PasswordInput, TextInput, toast } from '@/renderer/components';
-import { useUpdateServer } from '@/renderer/features/servers/mutations/use-update-server';
+import { useUpdateServer } from '@/renderer/features/servers/mutations/update-server';
 
 interface EditServerFormProps {
   onCancel: () => void;

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

@@ -22,18 +22,17 @@ import { AddServerCredentialForm } from '@/renderer/features/servers/components/
 import { AddServerUrlForm } from '@/renderer/features/servers/components/add-server-url-form';
 import { EditServerForm } from '@/renderer/features/servers/components/edit-server-form';
 import { ServerSection } from '@/renderer/features/servers/components/server-section';
-import { useDeleteServerUrl } from '@/renderer/features/servers/mutations/use-delete-server-url';
+import { useDeleteServerUrl } from '@/renderer/features/servers/mutations/delete-server-url';
-import { useDisableServerFolder } from '@/renderer/features/servers/mutations/use-disable-server-folder';
+import { useDisableServerFolder } from '@/renderer/features/servers/mutations/disable-server-folder';
-import { useDisableServerUrl } from '@/renderer/features/servers/mutations/use-disable-server-url';
+import { useDisableServerUrl } from '@/renderer/features/servers/mutations/disable-server-url';
-import { useEnableServerFolder } from '@/renderer/features/servers/mutations/use-enable-server-folder';
+import { useEnableServerFolder } from '@/renderer/features/servers/mutations/enable-server-folder';
-import { useEnableServerUrl } from '@/renderer/features/servers/mutations/use-enable-server-url';
+import { useEnableServerUrl } from '@/renderer/features/servers/mutations/enable-server-url';
-import { useFullScan } from '@/renderer/features/servers/mutations/use-full-scan';
+import { useFullScan } from '@/renderer/features/servers/mutations/start-full-scan';
-import { useQuickScan } from '@/renderer/features/servers/mutations/use-quick-scan';
+import { useQuickScan } from '@/renderer/features/servers/mutations/start-quick-scan';
-import { useUpdateServer } from '@/renderer/features/servers/mutations/use-update-server';
+import { useUpdateServer } from '@/renderer/features/servers/mutations/update-server';
 import { ServerPermission, usePermissions } from '@/renderer/features/shared';
 import { useTaskList } from '@/renderer/features/tasks';
 import { useAuthStore } from '@/renderer/store';
-import { Font } from '@/renderer/styles';
 
 interface ServerListItemProps {
   server: Server;
@@ -169,100 +168,221 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
   };
 
   return (
-    <>
+    <Stack mt="1rem" p="1rem" spacing="xl">
-      <Stack mt="1rem" spacing="xl">
+      <ServerSection
-        <ServerSection
+        title={
-          title={
+          <Group position="apart">
-            <Group position="apart">
+            <Text>Server details</Text>
-              <Text font={Font.EPILOGUE}>Server details</Text>
+            <Group spacing="md">
-              <Group spacing="md">
-                {serverPermission >= ServerPermission.ADMIN && (
-                  <Button
-                    compact
-                    disabled={isRunningTask}
-                    loading={fullScan.isLoading}
-                    variant="subtle"
-                    onClick={handleFullScan}
-                  >
-                    Full scan
-                  </Button>
-                )}
-                {serverPermission >= ServerPermission.EDITOR && (
-                  <Button
-                    compact
-                    disabled={true || isRunningTask}
-                    variant="subtle"
-                    onClick={handleQuickScan}
-                  >
-                    Quick scan
-                  </Button>
-                )}
-              </Group>
-            </Group>
-          }
-        >
-          {edit ? (
-            <EditServerForm
-              server={server}
-              onCancel={() => editHandlers.toggle()}
-            />
-          ) : (
-            <Group position="apart">
-              <Group>
-                <Stack>
-                  <Text>URL</Text>
-                  {serverPermission >= ServerPermission.EDITOR && (
-                    <Text>Username</Text>
-                  )}
-                </Stack>
-                <Stack>
-                  <Text size="sm">{server.url}</Text>
-                  {serverPermission >= ServerPermission.EDITOR && (
-                    <Text size="sm">{server.username}</Text>
-                  )}
-                </Stack>
-              </Group>
               {serverPermission >= ServerPermission.ADMIN && (
-                <Group>
+                <Button
-                  <Button
+                  compact
-                    tooltip={{ label: 'Edit server details' }}
+                  disabled={isRunningTask}
-                    variant="subtle"
+                  loading={fullScan.isLoading}
-                    onClick={() => editHandlers.toggle()}
+                  variant="subtle"
-                  >
+                  onClick={handleFullScan}
-                    <RiEdit2Fill />
+                >
-                  </Button>
+                  Full scan
-                </Group>
+                </Button>
+              )}
+              {serverPermission >= ServerPermission.EDITOR && (
+                <Button
+                  compact
+                  disabled={true || isRunningTask}
+                  variant="subtle"
+                  onClick={handleQuickScan}
+                >
+                  Quick scan
+                </Button>
               )}
             </Group>
-          )}
+          </Group>
-        </ServerSection>
+        }
-
+      >
-        <ServerSection
+        {edit ? (
-          title={
+          <EditServerForm
+            server={server}
+            onCancel={() => editHandlers.toggle()}
+          />
+        ) : (
+          <Group position="apart">
             <Group>
-              <Text>Music Folders</Text>
+              <Stack>
-              <Tooltip label="Select which music folders you want to enable. Enabled music folders are included in the scan queue and are available to browse.">
+                <Text>URL</Text>
-                <Group>
+                {serverPermission >= ServerPermission.EDITOR && (
-                  <RiInformationLine />
+                  <Text>Username</Text>
-                </Group>
+                )}
-              </Tooltip>
+              </Stack>
+              <Stack>
+                <Text size="sm">{server.url}</Text>
+                {serverPermission >= ServerPermission.EDITOR && (
+                  <Text size="sm">{server.username}</Text>
+                )}
+              </Stack>
             </Group>
-          }
+            {serverPermission >= ServerPermission.ADMIN && (
-        >
+              <Group>
-          <Stack>
+                <Button
-            {server.serverFolders?.map((folder) => (
+                  tooltip={{ label: 'Edit server details' }}
-              <Group key={folder.id} position="apart">
+                  variant="subtle"
-                <Text size="sm">{folder.name}</Text>
+                  onClick={() => editHandlers.toggle()}
-                <Group>
+                >
-                  <>
+                  <RiEdit2Fill />
+                </Button>
+              </Group>
+            )}
+          </Group>
+        )}
+      </ServerSection>
+
+      <ServerSection
+        title={
+          <Group>
+            <Text>Music Folders</Text>
+            <Tooltip label="Select which music folders you want to enable. Enabled music folders are included in the scan queue and are available to browse.">
+              <Group>
+                <RiInformationLine />
+              </Group>
+            </Tooltip>
+          </Group>
+        }
+      >
+        <Stack>
+          {server.serverFolders?.map((folder) => (
+            <Group key={folder.id} position="apart">
+              <Text size="sm">{folder.name}</Text>
+              <Group>
+                <>
+                  <Switch
+                    checked={folder.enabled}
+                    disabled={serverPermission < ServerPermission.ADMIN}
+                    onChange={(e) =>
+                      handleToggleFolder(folder.id, !e.currentTarget.checked)
+                    }
+                  />
+                  {serverPermission >= ServerPermission.ADMIN && (
+                    <DropdownMenu position="bottom-start">
+                      <DropdownMenu.Target>
+                        <Button compact variant="subtle">
+                          <RiMore2Fill size={15} />
+                        </Button>
+                      </DropdownMenu.Target>
+                      <DropdownMenu.Dropdown>
+                        <DropdownMenu.Item
+                          disabled
+                          rightSection={
+                            <RiDeleteBin2Line color="var(--danger-color)" />
+                          }
+                        >
+                          Delete
+                        </DropdownMenu.Item>
+                      </DropdownMenu.Dropdown>
+                    </DropdownMenu>
+                  )}
+                </>
+              </Group>
+            </Group>
+          ))}
+        </Stack>
+      </ServerSection>
+
+      <ServerSection
+        title={
+          <Group>
+            <Text>Credentials</Text>
+            <Tooltip label="If the server admin has required user credentials for this server, you will need to add your own login details here. Any credentials entered here are stored LOCALLY in the browser.">
+              <Group>
+                <RiInformationLine />
+              </Group>
+            </Tooltip>
+          </Group>
+        }
+      >
+        {addCredential ? (
+          <AddServerCredentialForm
+            server={server}
+            onCancel={() => addCredentialHandlers.close()}
+          />
+        ) : (
+          <>
+            <Stack>
+              {serverCredentials?.map((credential) => (
+                <Group key={credential.id} position="apart">
+                  <Text size="sm">{credential.username}</Text>
+                  <Group>
                     <Switch
-                      checked={folder.enabled}
+                      checked={credential.enabled}
-                      disabled={serverPermission < ServerPermission.ADMIN}
                       onChange={(e) =>
-                        handleToggleFolder(folder.id, !e.currentTarget.checked)
+                        handleToggleCredential(
+                          credential.id,
+                          !e.currentTarget.checked
+                        )
                       }
                     />
-                    {serverPermission >= ServerPermission.ADMIN && (
+                    <DropdownMenu position="bottom-start">
+                      <DropdownMenu.Target>
+                        <Button compact variant="subtle">
+                          <RiMore2Fill size={15} />
+                        </Button>
+                      </DropdownMenu.Target>
+                      <DropdownMenu.Dropdown>
+                        <DropdownMenu.Item
+                          rightSection={
+                            <RiDeleteBin2Line color="var(--danger-color)" />
+                          }
+                          onClick={() => handleDeleteCredential(credential.id)}
+                        >
+                          Delete
+                        </DropdownMenu.Item>
+                      </DropdownMenu.Dropdown>
+                    </DropdownMenu>
+                  </Group>
+                </Group>
+              ))}
+            </Stack>
+            <Button
+              compact
+              mt={10}
+              variant="subtle"
+              onClick={() => addCredentialHandlers.open()}
+            >
+              Add credential
+            </Button>
+          </>
+        )}
+      </ServerSection>
+
+      <ServerSection
+        title={
+          <Group>
+            <Text>URLs</Text>
+            <Tooltip label="Enabling a URL will use it to generate image and audio endpoints instead of the server-defined URL. This is useful if you need to be able to access a URL from a local and remote network (e.g. http://localhost:4533 or https://music.domain.net)">
+              <Group>
+                <RiInformationLine />
+              </Group>
+            </Tooltip>
+          </Group>
+        }
+      >
+        {addUrl ? (
+          <AddServerUrlForm
+            serverId={server.id}
+            onCancel={() => addUrlHandlers.close()}
+          />
+        ) : (
+          <>
+            <Stack>
+              {server.serverUrls?.map((serverUrl) => (
+                <Group key={serverUrl.id} position="apart">
+                  <Text size="sm">{serverUrl.url}</Text>
+                  <Group>
+                    <Switch
+                      checked={serverUrl.enabled}
+                      onChange={(e) =>
+                        handleToggleUrl(serverUrl.id, !e.currentTarget.checked)
+                      }
+                    />
+                    {serverPermission >= ServerPermission.EDITOR && (
                       <DropdownMenu position="bottom-start">
                         <DropdownMenu.Target>
                           <Button compact variant="subtle">
@@ -271,201 +391,73 @@ export const ServerListItem = ({ server }: ServerListItemProps) => {
                         </DropdownMenu.Target>
                         <DropdownMenu.Dropdown>
                           <DropdownMenu.Item
-                            disabled
                             rightSection={
                               <RiDeleteBin2Line color="var(--danger-color)" />
                             }
+                            onClick={() => handleDeleteUrl(serverUrl.id)}
                           >
                             Delete
                           </DropdownMenu.Item>
                         </DropdownMenu.Dropdown>
                       </DropdownMenu>
                     )}
-                  </>
-                </Group>
-              </Group>
-            ))}
-          </Stack>
-        </ServerSection>
-
-        <ServerSection
-          title={
-            <Group>
-              <Text>Credentials</Text>
-              <Tooltip label="If the server admin has required user credentials for this server, you will need to add your own login details here. Any credentials entered here are stored LOCALLY in the browser.">
-                <Group>
-                  <RiInformationLine />
-                </Group>
-              </Tooltip>
-            </Group>
-          }
-        >
-          {addCredential ? (
-            <AddServerCredentialForm
-              server={server}
-              onCancel={() => addCredentialHandlers.close()}
-            />
-          ) : (
-            <>
-              <Stack>
-                {serverCredentials?.map((credential) => (
-                  <Group key={credential.id} position="apart">
-                    <Text size="sm">{credential.username}</Text>
-                    <Group>
-                      <Switch
-                        checked={credential.enabled}
-                        onChange={(e) =>
-                          handleToggleCredential(
-                            credential.id,
-                            !e.currentTarget.checked
-                          )
-                        }
-                      />
-                      <DropdownMenu position="bottom-start">
-                        <DropdownMenu.Target>
-                          <Button compact variant="subtle">
-                            <RiMore2Fill size={15} />
-                          </Button>
-                        </DropdownMenu.Target>
-                        <DropdownMenu.Dropdown>
-                          <DropdownMenu.Item
-                            rightSection={
-                              <RiDeleteBin2Line color="var(--danger-color)" />
-                            }
-                            onClick={() =>
-                              handleDeleteCredential(credential.id)
-                            }
-                          >
-                            Delete
-                          </DropdownMenu.Item>
-                        </DropdownMenu.Dropdown>
-                      </DropdownMenu>
-                    </Group>
                   </Group>
-                ))}
+                </Group>
-              </Stack>
+              ))}
+            </Stack>
+            {serverPermission >= ServerPermission.EDITOR && (
               <Button
                 compact
                 mt={10}
                 variant="subtle"
-                onClick={() => addCredentialHandlers.open()}
+                onClick={() => addUrlHandlers.open()}
               >
-                Add credential
+                Add URL
               </Button>
-            </>
+            )}
-          )}
+          </>
-        </ServerSection>
+        )}
+      </ServerSection>
 
-        <ServerSection
+      {serverPermission >= ServerPermission.ADMIN && (
-          title={
+        <ServerSection title="Danger zone">
+          <Group position="apart">
             <Group>
-              <Text>URLs</Text>
+              <Text size="sm">Require user credentials</Text>
-              <Tooltip label="Enabling a URL will use it to generate image and audio endpoints instead of the server-defined URL. This is useful if you need to be able to access a URL from a local and remote network (e.g. http://localhost:4533 or https://music.domain.net)">
+              <Tooltip label="WARNING: Disabling this option will expose your server login credentials to all users. If enabled, all users will be required to enter their own credentials to access this server.">
                 <Group>
                   <RiInformationLine />
                 </Group>
               </Tooltip>
             </Group>
-          }
+            <Switch
-        >
+              checked={server.noCredential}
-          {addUrl ? (
+              onChange={(e) =>
-            <AddServerUrlForm
+                toggleRequiredCredential(e.currentTarget.checked)
-              serverId={server.id}
+              }
-              onCancel={() => addUrlHandlers.close()}
             />
-          ) : (
+          </Group>
+          {permissions.isSuperAdmin && (
             <>
-              <Stack>
+              <Divider my="xl" />
-                {server.serverUrls?.map((serverUrl) => (
+              <Button
-                  <Group key={serverUrl.id} position="apart">
+                compact
-                    <Text size="sm">{serverUrl.url}</Text>
+                disabled
-                    <Group>
+                leftIcon={<RiDeleteBin2Line />}
-                      <Switch
+                size="xs"
-                        checked={serverUrl.enabled}
+                sx={{
-                        onChange={(e) =>
+                  '&:hover': {
-                          handleToggleUrl(
+                    background: 'var(--danger-color)',
-                            serverUrl.id,
+                  },
-                            !e.currentTarget.checked
+                  background: 'var(--danger-color)',
-                          )
+                }}
-                        }
+              >
-                      />
+                Delete server
-                      {serverPermission >= ServerPermission.EDITOR && (
+              </Button>
-                        <DropdownMenu position="bottom-start">
-                          <DropdownMenu.Target>
-                            <Button compact variant="subtle">
-                              <RiMore2Fill size={15} />
-                            </Button>
-                          </DropdownMenu.Target>
-                          <DropdownMenu.Dropdown>
-                            <DropdownMenu.Item
-                              rightSection={
-                                <RiDeleteBin2Line color="var(--danger-color)" />
-                              }
-                              onClick={() => handleDeleteUrl(serverUrl.id)}
-                            >
-                              Delete
-                            </DropdownMenu.Item>
-                          </DropdownMenu.Dropdown>
-                        </DropdownMenu>
-                      )}
-                    </Group>
-                  </Group>
-                ))}
-              </Stack>
-              {serverPermission >= ServerPermission.EDITOR && (
-                <Button
-                  compact
-                  mt={10}
-                  variant="subtle"
-                  onClick={() => addUrlHandlers.open()}
-                >
-                  Add URL
-                </Button>
-              )}
             </>
           )}
         </ServerSection>
-
+      )}
-        {serverPermission >= ServerPermission.ADMIN && (
+    </Stack>
-          <ServerSection title="Danger zone">
-            <Group position="apart">
-              <Group>
-                <Text size="sm">Require user credentials</Text>
-                <Tooltip label="WARNING: Disabling this option will expose your server login credentials to all users. If enabled, all users will be required to enter their own credentials to access this server.">
-                  <Group>
-                    <RiInformationLine />
-                  </Group>
-                </Tooltip>
-              </Group>
-              <Switch
-                checked={server.noCredential}
-                onChange={(e) =>
-                  toggleRequiredCredential(e.currentTarget.checked)
-                }
-              />
-            </Group>
-            {permissions.isSuperAdmin && (
-              <>
-                <Divider my="xl" />
-                <Button
-                  compact
-                  disabled
-                  leftIcon={<RiDeleteBin2Line />}
-                  size="xs"
-                  sx={{
-                    '&:hover': {
-                      background: 'var(--danger-color)',
-                    },
-                    background: 'var(--danger-color)',
-                  }}
-                >
-                  Delete server
-                </Button>
-              </>
-            )}
-          </ServerSection>
-        )}
-      </Stack>
-    </>
   );
 };

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

@@ -3,13 +3,13 @@ import { openContextModal } from '@mantine/modals';
 import { RiAddFill, RiServerFill } from 'react-icons/ri';
 import { Button, ContextModalVars, Accordion } from '@/renderer/components';
 import { ServerListItem } from '@/renderer/features/servers/components/server-list-item';
-import { useServerList } from '@/renderer/features/servers/queries/use-server-list';
+import { useServerList } from '@/renderer/features/servers/queries/get-server-list';
 import { usePermissions } from '@/renderer/features/shared';
 import { titleCase } from '@/renderer/utils';
 import { AddServerForm } from './add-server-form';
 
 export const ServerList = () => {
-  const { data: servers } = useServerList();
+  const serverListQuery = useServerList();
   const permissions = usePermissions();
 
   const handleAddServerModal = () => {
@@ -49,7 +49,7 @@ export const ServerList = () => {
         )}
       </Group>
       <Accordion variant="separated">
-        {servers?.data?.map((s) => (
+        {serverListQuery?.data?.data.map((s) => (
           <Accordion.Item key={s.id} value={s.name}>
             <Accordion.Control icon={<RiServerFill size={15} />}>
               <Group position="apart">

src/renderer/features/servers/index.ts

@@ -1,7 +1,7 @@
-export * from './mutations/use-create-server';
+export * from './mutations/create-server';
 export * from './components/add-server-form';
 export * from './components/server-list';
-export * from './queries/use-server-list';
+export * from './queries/get-server-list';
 export * from './queries/get-server-map';
 export * from './mutations/create-server-folder-permission';
 export * from './mutations/delete-server-folder-permission';

src/renderer/features/servers/queries/get-server-list.ts

@@ -7,14 +7,14 @@ import { useAuthStore } from '@/renderer/store';
 
 export const useServerList = (
   params?: { enabled?: boolean },
-  options?: QueryOptions<ServerListResponse>
+  options?: QueryOptions
 ) => {
   const currentServer = useAuthStore((state) => state.currentServer);
   const setCurrentServer = useAuthStore((state) => state.setCurrentServer);
 
   return useQuery({
-    onSuccess: (data) => {
+    onSettled: (data: ServerListResponse) => {
-      const currentServerFromList = data.data.find(
+      const currentServerFromList = data?.data.find(
         (server) => server.id === currentServer?.id
       );
 

src/renderer/features/servers/queries/get-server-map.ts

@@ -1,11 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import { api } from '@/renderer/api';
 import { queryKeys } from '@/renderer/api/query-keys';
-import { ServerMapResponse } from '@/renderer/api/servers.api';
 import { QueryOptions } from '@/renderer/lib/react-query';
 
-export const useServerMap = (options?: QueryOptions<ServerMapResponse>) => {
+export const useServerMap = (options?: QueryOptions) => {
-  return useQuery<ServerMapResponse>({
+  return useQuery({
     cacheTime: Infinity,
     queryFn: ({ signal }) => api.servers.getServerMap(signal),
     queryKey: queryKeys.servers.map(),

src/renderer/features/tasks/index.ts

@@ -1,3 +1,3 @@
-export * from './queries/task-list';
+export * from './queries/get-task-list';
 export * from './mutations/cancel-all-tasks';
 export * from './mutations/cancel-task';

src/renderer/features/tasks/queries/get-task-list.ts

@@ -5,7 +5,7 @@ import { queryKeys } from '@/renderer/api/query-keys';
 import { TaskListResponse } from '@/renderer/api/tasks.api';
 import { QueryOptions } from '@/renderer/lib/react-query';
 
-export const useTaskList = (options?: QueryOptions<TaskListResponse>) => {
+export const useTaskList = (options?: QueryOptions) => {
   return useQuery({
     queryFn: ({ signal }) => api.tasks.getActiveTasks(signal),
     queryKey: queryKeys.tasks.list(),

src/renderer/features/titlebar/components/activity-menu.tsx

@@ -21,9 +21,9 @@ export const ActivityMenu = () => {
   const queryClient = useQueryClient();
   const serverId = useAuthStore((state) => state.currentServer?.id) || '';
   const [isTaskRunning, setIsTaskRunning] = useState(false);
-  const { data: tasks, refetch } = useTaskList({
+  const taskListQuery = useTaskList({
-    onSuccess: (data) => {
+    onSuccess: (data: ReturnType<typeof useTaskList>['data']) => {
-      if (data.data.length === 0) {
+      if (data?.data.length === 0) {
         queryClient.invalidateQueries(queryKeys.server.root(serverId));
         return setIsTaskRunning(false);
       }
@@ -57,14 +57,14 @@ export const ActivityMenu = () => {
 
   useEffect(() => {
     socket.on('task:started', () => {
-      setTimeout(() => refetch(), 1000);
+      setTimeout(() => taskListQuery.refetch(), 1000);
       setIsTaskRunning(true);
     });
 
     return () => {
       socket.off('task:started');
     };
-  }, [refetch]);
+  }, [taskListQuery]);
 
   return (
     <>
@@ -80,7 +80,7 @@ export const ActivityMenu = () => {
         </Popover.Target>
         <Popover.Dropdown>
           {isTaskRunning ? (
-            tasks?.data?.map((task) => (
+            taskListQuery.data?.data?.map((task) => (
               <Group key={task.id} position="apart">
                 <Text>{task.note}</Text>
               </Group>

src/renderer/features/users/components/edit-user-permissions-form.tsx

@@ -40,8 +40,8 @@ export const EditUserPermissionsForm = ({
   onCancel,
 }: EditUserPermissionsFormProps) => {
   const permissions = usePermissions();
-  const { data: servers } = useServerList();
+  const serverListQuery = useServerList();
-  const { data: user } = useUserDetail({ userId });
+  const userDetailQuery = useUserDetail({ userId });
   const createServerPermissionMutation = useCreateServerPermission();
   const deleteServerPermissionMutation = useDeleteServerPermission();
   const updateServerPermissionMutation = useUpdateServerPermission();
@@ -61,17 +61,20 @@ export const EditUserPermissionsForm = ({
     },
   ];
 
+  const userDetailId = userDetailQuery?.data?.data.id;
+
   return (
     <Stack m={5}>
       <Accordion variant="contained">
-        {servers?.data?.map((s) => {
+        {serverListQuery?.data?.data.map((s) => {
-          const currentServerPermission = user?.data?.serverPermissions?.find(
+          const currentServerPermission =
-            (p) => p.serverId === s.id
+            userDetailQuery?.data?.data.serverPermissions?.find(
-          );
+              (p) => p.serverId === s.id
+            );
 
           const isServerAdminEditingSelf =
             permissions[s.id] >= ServerPermission.ADMIN &&
-            user?.data.id === permissions.userId;
+            userDetailQuery?.data?.data.id === permissions.userId;
 
           const isServerAdminEditingOtherAdmin =
             !permissions.isAdmin &&
@@ -81,7 +84,7 @@ export const EditUserPermissionsForm = ({
             isServerAdminEditingSelf || isServerAdminEditingOtherAdmin;
 
           const handleChangeServerPermission = async (e: string | null) => {
-            if (!e || !user) return;
+            if (!e || !userDetailId) return;
 
             if (e === 'none' && currentServerPermission) {
               deleteServerPermissionMutation.mutate(
@@ -90,7 +93,7 @@ export const EditUserPermissionsForm = ({
                     permissionId: currentServerPermission.id,
                     serverId: s.id,
                   },
-                  userId: user.data.id,
+                  userId: userDetailId,
                 },
                 {
                   onError: (err) =>
@@ -110,7 +113,7 @@ export const EditUserPermissionsForm = ({
                     permissionId: currentServerPermission.id,
                     serverId: s.id,
                   },
-                  userId: user.data.id,
+                  userId: userDetailId,
                 },
                 {
                   onError: (err) =>
@@ -125,7 +128,7 @@ export const EditUserPermissionsForm = ({
                 {
                   body: {
                     type: e as ServerPermissionType,
-                    userId: user.data.id,
+                    userId: userDetailId,
                   },
                   query: {
                     serverId: s.id,
@@ -191,14 +194,14 @@ export const EditUserPermissionsForm = ({
                   </Stack>
                   {s.serverFolders?.map((f) => {
                     const currentFolderPermission =
-                      user?.data.serverFolderPermissions?.find(
+                      userDetailQuery?.data?.data.serverFolderPermissions?.find(
                         (p) => p.serverFolderId === f.id
                       );
 
                     const handleToggleMusicFolderPermission = async (
                       e: ChangeEvent<HTMLInputElement>
                     ) => {
-                      if (!user) return;
+                      if (!userDetailId) return;
                       const { checked } = e.target;
                       const serverId = s.id;
 
@@ -206,7 +209,7 @@ export const EditUserPermissionsForm = ({
                         createServerFolderPermissionMutation.mutate(
                           {
                             body: {
-                              userId: user.data.id,
+                              userId: userDetailId,
                             },
                             query: {
                               folderId: f.id,
@@ -229,7 +232,7 @@ export const EditUserPermissionsForm = ({
                               folderPermissionId: currentFolderPermission.id,
                               serverId,
                             },
-                            userId: user.data.id,
+                            userId: userDetailId,
                           },
                           {
                             onError: (err) =>
@@ -245,7 +248,7 @@ export const EditUserPermissionsForm = ({
                     return (
                       <Switch
                         key={`server-folder-permission-${f.id}`}
-                        defaultChecked={user?.data.serverFolderPermissions.some(
+                        defaultChecked={userDetailQuery?.data?.data.serverFolderPermissions.some(
                           (p) => p.serverFolderId === f.id
                         )}
                         disabled={isServerAdminEditingOtherAdmin}

src/renderer/features/users/queries/get-user-detail.ts

@@ -1,12 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
 import { api } from '@/renderer/api';
 import { queryKeys } from '@/renderer/api/query-keys';
-import { UserDetailResponse } from '@/renderer/api/users.api';
 import { QueryOptions } from '@/renderer/lib/react-query';
 
 export const useUserDetail = (
   q: { userId: string },
-  options?: QueryOptions<UserDetailResponse>
+  options?: QueryOptions
 ) => {
   const query = useQuery({
     queryFn: () => api.users.getUserDetail({ userId: q.userId }),

src/renderer/features/users/queries/get-user-list.ts

@@ -1,12 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
 import { api } from '@/renderer/api';
 import { queryKeys } from '@/renderer/api/query-keys';
-import { UserListResponse } from '@/renderer/api/users.api';
 import { QueryOptions } from '@/renderer/lib/react-query';
 import { useAuthStore } from '@/renderer/store';
 import { getFileUrl } from '@/renderer/utils';
 
-export const useUserList = (options?: QueryOptions<UserListResponse>) => {
+export const useUserList = (options?: QueryOptions) => {
   const serverUrl = useAuthStore((state) => state.serverUrl);
 
   const query = useQuery({

src/renderer/layouts/default-layout.tsx

@@ -4,6 +4,7 @@ import isElectron from 'is-electron';
 import throttle from 'lodash/throttle';
 import { Outlet } from 'react-router';
 import styled from 'styled-components';
+import { UserDetailResponse } from '@/renderer/api/users.api';
 import { SideQueue } from '@/renderer/features/side-queue/components/side-queue';
 import { Titlebar } from '@/renderer/features/titlebar/components/titlebar';
 import { useUserDetail } from '@/renderer/features/users';
@@ -124,7 +125,7 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
     { userId },
     {
       cacheTime: Infinity,
-      onSuccess: (res) => {
+      onSuccess: (res: UserDetailResponse) => {
         const props = {
           permissions: {
             id: res.data.id,

src/renderer/lib/axios.ts

@@ -4,9 +4,7 @@ import { useAuthStore } from '@/renderer/store';
 import { authApi } from '../api/auth.api';
 
 export const ax = Axios.create({
-  headers: {
+  headers: { 'Content-Type': 'application/json' },
-    'Content-Type': 'application/json',
-  },
   withCredentials: false,
 });
 
@@ -35,23 +33,19 @@ ax.interceptors.response.use(
   async (err) => {
     if (err.response && err.response.status === 401) {
       const { config } = err;
-      const auth = JSON.parse(
+
-        localStorage.getItem('store_authentication') || '{}'
+      const auth = useAuthStore.getState();
-      );
 
       if (err.response.data.error.message === 'jwt expired' && !config.sent) {
         config.sent = true;
 
         const { accessToken } = (
-          await authApi.refresh(auth.state.serverUrl, {
+          await authApi.refresh(auth.serverUrl, {
             refreshToken: auth.refreshToken,
           })
         ).data;
 
-        localStorage.setItem(
+        useAuthStore.setState({ ...auth, accessToken });
-          'store_authentication',
-          JSON.stringify({ ...auth, state: { ...auth.state, accessToken } })
-        );
 
         config.headers = {
           ...config.headers,
@@ -61,12 +55,11 @@ ax.interceptors.response.use(
         return Axios(config);
       }
 
-      const { logout } = useAuthStore.getState();
+      // if (err.response.data.error.message === 'No auth token') {
-      if (err.response.data.error.message === 'No auth token') {
+      //   auth.logout();
-        logout();
+      // }
-      }
 
-      logout();
+      auth.logout();
     }
     return Promise.reject(err);
   }

src/renderer/lib/react-query.ts

@@ -1,12 +1,9 @@
 import {
   QueryClient,
   UseQueryOptions,
-  UseMutationOptions,
   DefaultOptions,
   QueryCache,
 } from '@tanstack/react-query';
-import { AxiosError } from 'axios';
-import { PromiseValue } from 'type-fest';
 import { toast } from '@/renderer/components';
 
 const queryCache = new QueryCache({
@@ -26,7 +23,7 @@ const queryConfig: DefaultOptions = {
     onError: (err) => {
       console.error(err);
     },
-    refetchOnWindowFocus: process.env.NODE_ENV === 'production',
+    refetchOnWindowFocus: false,
     retry: process.env.NODE_ENV === 'production',
     staleTime: 1000 * 5,
     useErrorBoundary: true,
@@ -38,31 +35,17 @@ export const queryClient = new QueryClient({
   queryCache,
 });
 
-export type ExtractFnReturnType<FnType extends (...args: any) => any> =
+export type QueryOptions = {
-  PromiseValue<ReturnType<FnType>>;
-
-export type QueryConfig<QueryFnType extends (...args: any) => any> = Omit<
-  UseQueryOptions<ExtractFnReturnType<QueryFnType>>,
-  'queryKey' | 'queryFn'
->;
-
-export type MutationConfig<MutationFnType extends (...args: any) => any> =
-  UseMutationOptions<
-    ExtractFnReturnType<MutationFnType>,
-    AxiosError,
-    Parameters<MutationFnType>[0]
-  >;
-
-export type QueryOptions<TResponse> = {
   cacheTime?: UseQueryOptions['cacheTime'];
   enabled?: UseQueryOptions['enabled'];
   onError?: (err: any) => void;
-  onSuccess?: (data: any) => void;
+  onSettled?: any;
+  onSuccess?: any;
   refetchInterval?: number;
   refetchIntervalInBackground?: UseQueryOptions['refetchIntervalInBackground'];
   refetchOnWindowFocus?: boolean;
   retry?: UseQueryOptions['retry'];
   retryDelay?: UseQueryOptions['retryDelay'];
   staleTime?: UseQueryOptions['staleTime'];
-  useErrorBoundary?: any;
+  useErrorBoundary?: boolean;
 };