refactor: reorder arguments in web ui

frontend/src/hooks/useAutoScroll.ts

@@ -20,10 +20,10 @@
 import { type RefObject, useCallback, useRef } from "react";
 
 interface UseAutoScrollResult {
-    preRef: RefObject<HTMLElement | null>;
     handleScroll: () => void;
-    scrollToBottom: () => void;
+    preRef: RefObject<HTMLElement | null>;
     resetScroll: () => void;
+    scrollToBottom: () => void;
 }
 
 export function useAutoScroll(): UseAutoScrollResult {
@@ -59,5 +59,5 @@ export function useAutoScroll(): UseAutoScrollResult {
         }
     }, []);
 
-    return { preRef, handleScroll, scrollToBottom, resetScroll };
+    return { handleScroll, preRef, resetScroll, scrollToBottom };
 }

frontend/src/hooks/usePackageActions.ts

@@ -26,10 +26,10 @@ import { useRepository } from "hooks/useRepository";
 import type { RepositoryId } from "models/RepositoryId";
 
 export interface UsePackageActionsResult {
-    handleReload: () => void;
-    handleUpdate: () => Promise<void>;
     handleRefreshDatabase: () => Promise<void>;
+    handleReload: () => void;
     handleRemove: () => Promise<void>;
+    handleUpdate: () => Promise<void>;
 }
 
 export function usePackageActions(
@@ -63,7 +63,7 @@ export function usePackageActions(
         }
     };
 
-    const handleReload: () => void = () => {
+    const handleReload = (): void => {
         if (currentRepository !== null) {
             invalidate(currentRepository);
         }
@@ -80,11 +80,11 @@ export function usePackageActions(
 
     const handleRefreshDatabase = (): Promise<void> => performAction(async (repository): Promise<string> => {
         await client.service.servicePackageUpdate(repository, {
-            packages: [],
-            refresh: true,
             aur: false,
             local: false,
             manual: false,
+            packages: [],
+            refresh: true,
         });
         return "Pacman database update has been requested";
     }, "Could not update pacman databases");
@@ -100,9 +100,9 @@ export function usePackageActions(
     };
 
     return {
-        handleReload,
-        handleUpdate,
         handleRefreshDatabase,
+        handleReload,
         handleRemove,
+        handleUpdate,
     };
 }

frontend/src/hooks/usePackageChanges.ts

@@ -27,9 +27,9 @@ export function usePackageChanges(packageBase: string, repository: RepositoryId)
     const client = useClient();
 
     const { data } = useQuery<Changes>({
-        queryKey: QueryKeys.changes(packageBase, repository),
-        queryFn: () => client.fetch.fetchPackageChanges(packageBase, repository),
         enabled: !!packageBase,
+        queryFn: () => client.fetch.fetchPackageChanges(packageBase, repository),
+        queryKey: QueryKeys.changes(packageBase, repository),
     });
 
     return data;

frontend/src/hooks/usePackageData.ts

@@ -30,11 +30,11 @@ import { useMemo } from "react";
 import { defaultInterval } from "utils";
 
 export interface UsePackageDataResult {
-    rows: PackageRow[];
-    isLoading: boolean;
-    isAuthorized: boolean;
-    status: BuildStatus | undefined;
     autoRefresh: ReturnType<typeof useAutoRefresh>;
+    isAuthorized: boolean;
+    isLoading: boolean;
+    rows: PackageRow[];
+    status: BuildStatus | undefined;
 }
 
 export function usePackageData(autoRefreshIntervals: AutoRefreshInterval[]): UsePackageDataResult {
@@ -45,24 +45,24 @@ export function usePackageData(autoRefreshIntervals: AutoRefreshInterval[]): Use
     const autoRefresh = useAutoRefresh("table-autoreload-button", defaultInterval(autoRefreshIntervals));
 
     const { data: packages = [], isLoading } = useQuery({
-        queryKey: currentRepository ? QueryKeys.packages(currentRepository) : ["packages"],
         queryFn: currentRepository ? () => client.fetch.fetchPackages(currentRepository) : skipToken,
+        queryKey: currentRepository ? QueryKeys.packages(currentRepository) : ["packages"],
         refetchInterval: autoRefresh.interval > 0 ? autoRefresh.interval : false,
     });
 
     const { data: status } = useQuery({
-        queryKey: currentRepository ? QueryKeys.status(currentRepository) : ["status"],
         queryFn: currentRepository ? () => client.fetch.fetchServerStatus(currentRepository) : skipToken,
+        queryKey: currentRepository ? QueryKeys.status(currentRepository) : ["status"],
         refetchInterval: autoRefresh.interval > 0 ? autoRefresh.interval : false,
     });
 
     const rows = useMemo(() => packages.map(descriptor => new PackageRow(descriptor)), [packages]);
 
     return {
-        rows,
+        autoRefresh,
         isLoading,
         isAuthorized,
+        rows,
         status: status?.status.status,
-        autoRefresh,
     };
 }

frontend/src/hooks/usePackageTable.ts

@@ -27,35 +27,30 @@ import type { PackageRow } from "models/PackageRow";
 import { useEffect } from "react";
 
 export interface UsePackageTableResult {
-    rows: PackageRow[];
-    isLoading: boolean;
-    isAuthorized: boolean;
-    status: BuildStatus | undefined;
-
-    selectionModel: string[];
-    setSelectionModel: (model: string[]) => void;
-
-    dialogOpen: "dashboard" | "add" | "rebuild" | "keyImport" | null;
-    setDialogOpen: (dialog: "dashboard" | "add" | "rebuild" | "keyImport" | null) => void;
-    selectedPackage: string | null;
-    setSelectedPackage: (base: string | null) => void;
-
-    paginationModel: { pageSize: number; page: number };
-    setPaginationModel: (model: { pageSize: number; page: number }) => void;
-    columnVisibility: Record<string, boolean>;
-    setColumnVisibility: (model: Record<string, boolean>) => void;
-    filterModel: GridFilterModel;
-    setFilterModel: (model: GridFilterModel) => void;
-    searchText: string;
-    setSearchText: (text: string) => void;
-
     autoRefreshInterval: number;
-    onAutoRefreshIntervalChange: (interval: number) => void;
-
-    handleReload: () => void;
-    handleUpdate: () => Promise<void>;
+    columnVisibility: Record<string, boolean>;
+    dialogOpen: "dashboard" | "add" | "rebuild" | "keyImport" | null;
+    filterModel: GridFilterModel;
     handleRefreshDatabase: () => Promise<void>;
+    handleReload: () => void;
     handleRemove: () => Promise<void>;
+    handleUpdate: () => Promise<void>;
+    isAuthorized: boolean;
+    isLoading: boolean;
+    onAutoRefreshIntervalChange: (interval: number) => void;
+    paginationModel: { page: number; pageSize: number };
+    rows: PackageRow[];
+    searchText: string;
+    selectedPackage: string | null;
+    selectionModel: string[];
+    setColumnVisibility: (model: Record<string, boolean>) => void;
+    setDialogOpen: (dialog: "dashboard" | "add" | "rebuild" | "keyImport" | null) => void;
+    setFilterModel: (model: GridFilterModel) => void;
+    setPaginationModel: (model: { page: number; pageSize: number }) => void;
+    setSearchText: (text: string) => void;
+    setSelectedPackage: (base: string | null) => void;
+    setSelectionModel: (model: string[]) => void;
+    status: BuildStatus | undefined;
 }
 
 export function usePackageTable(autoRefreshIntervals: AutoRefreshInterval[]): UsePackageTableResult {
@@ -71,16 +66,13 @@ export function usePackageTable(autoRefreshIntervals: AutoRefreshInterval[]): Us
     }, [isDialogOpen, setPaused]);
 
     return {
-        rows,
+        autoRefreshInterval: autoRefresh.interval,
         isLoading,
         isAuthorized,
-        status,
-
-        ...tableState,
-
-        autoRefreshInterval: autoRefresh.interval,
         onAutoRefreshIntervalChange: autoRefresh.setInterval,
-
+        rows,
+        status,
         ...actions,
+        ...tableState,
     };
 }

frontend/src/hooks/useSelectedRepository.ts

@@ -22,10 +22,10 @@ import type { RepositoryId } from "models/RepositoryId";
 import { useState } from "react";
 
 export interface SelectedRepositoryResult {
-    selectedKey: string;
-    setSelectedKey: (key: string) => void;
-    selectedRepository: RepositoryId | null;
     reset: () => void;
+    selectedKey: string;
+    selectedRepository: RepositoryId | null;
+    setSelectedKey: (key: string) => void;
 }
 
 export function useSelectedRepository(): SelectedRepositoryResult {
@@ -40,9 +40,9 @@ export function useSelectedRepository(): SelectedRepositoryResult {
         }
     }
 
-    const reset: () => void = () => {
+    const reset = (): void => {
         setSelectedKey("");
     };
 
-    return { selectedKey, setSelectedKey, selectedRepository, reset };
+    return { reset, selectedKey, selectedRepository, setSelectedKey };
 }

frontend/src/hooks/useTableState.ts

@@ -24,22 +24,20 @@ import { useState } from "react";
 export type DialogType = "dashboard" | "add" | "rebuild" | "keyImport";
 
 export interface UseTableStateResult {
-    selectionModel: string[];
-    setSelectionModel: (model: string[]) => void;
-
-    dialogOpen: DialogType | null;
-    setDialogOpen: (dialog: DialogType | null) => void;
-    selectedPackage: string | null;
-    setSelectedPackage: (base: string | null) => void;
-
-    paginationModel: { pageSize: number; page: number };
-    setPaginationModel: (model: { pageSize: number; page: number }) => void;
     columnVisibility: Record<string, boolean>;
-    setColumnVisibility: (model: Record<string, boolean>) => void;
+    dialogOpen: DialogType | null;
     filterModel: GridFilterModel;
-    setFilterModel: (model: GridFilterModel) => void;
+    paginationModel: { pageSize: number; page: number };
     searchText: string;
+    selectedPackage: string | null;
+    selectionModel: string[];
+    setColumnVisibility: (model: Record<string, boolean>) => void;
+    setDialogOpen: (dialog: DialogType | null) => void;
+    setFilterModel: (model: GridFilterModel) => void;
+    setPaginationModel: (model: { pageSize: number; page: number }) => void;
     setSearchText: (text: string) => void;
+    setSelectedPackage: (base: string | null) => void;
+    setSelectionModel: (model: string[]) => void;
 }
 
 export function useTableState(): UseTableStateResult {
@@ -49,8 +47,8 @@ export function useTableState(): UseTableStateResult {
     const [searchText, setSearchText] = useState("");
 
     const [paginationModel, setPaginationModel] = useLocalStorage("ahriman-packages-pagination", {
-        pageSize: 10,
         page: 0,
+        pageSize: 25,
     });
     const [columnVisibility, setColumnVisibility] = useLocalStorage<Record<string, boolean>>(
         "ahriman-packages-columns",
@@ -62,21 +60,19 @@ export function useTableState(): UseTableStateResult {
     );
 
     return {
-        selectionModel,
-        setSelectionModel,
-
-        dialogOpen,
-        setDialogOpen,
-        selectedPackage,
-        setSelectedPackage,
-
-        paginationModel,
-        setPaginationModel,
         columnVisibility,
-        setColumnVisibility,
+        dialogOpen,
         filterModel,
-        setFilterModel,
+        paginationModel,
         searchText,
+        selectedPackage,
+        selectionModel,
+        setColumnVisibility,
+        setDialogOpen,
+        setFilterModel,
+        setPaginationModel,
         setSearchText,
+        setSelectedPackage,
+        setSelectionModel,
     };
 }