Refactor initial state override to initial filters in EventsTable and…

… DDNTable components
UKDanceBlue · Dec 9, 2024 · e74a3e9 · e74a3e9
1 parent 0b69c7d
commit e74a3e9
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 71 deletions.
diff --git a/packages/portal/src/elements/tables/EventsTable.tsx b/packages/portal/src/elements/tables/EventsTable.tsx
@@ -76,7 +76,7 @@ export const EventsTable = () => {
       initPage: 1,
       initPageSize: 10,
       initSorting: [],
-      initialStateOverride: {
+      initialFilters: {
         dateFilters: [
           {
             field: "occurrenceStart",

diff --git a/packages/portal/src/elements/tables/fundraising/DDNTable.tsx b/packages/portal/src/elements/tables/fundraising/DDNTable.tsx
@@ -80,7 +80,7 @@ export const DDNTable = () => {
       initPage: 1,
       initPageSize: 10,
       initSorting: [],
-      initialStateOverride: {},
+      initialFilters: {},
     },
     {
       allFields: [

diff --git a/packages/portal/src/hooks/useListQuery.ts b/packages/portal/src/hooks/useListQuery.ts
@@ -10,7 +10,7 @@ import type {
   StringFilterItemInterface,
 } from "@ukdanceblue/common";
 import type { Dispatch, SetStateAction } from "react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 interface FilterObject<
   DateFields extends string,
@@ -108,19 +108,22 @@ export function useListQuery<
     initPage,
     initPageSize,
     initSorting,
-    initialStateOverride,
+    initialFilters,
   }: {
     initPage: number;
     initPageSize: number;
     initSorting: SortOption<AllFields>[];
-    initialStateOverride?: Partial<
-      ListQueryOptions<
-        DateFields,
-        IsNullFields,
-        NumericFields,
-        OneOfFields,
-        StringFields,
-        BooleanFields
+    initialFilters?: Partial<
+      Omit<
+        ListQueryOptions<
+          DateFields,
+          IsNullFields,
+          NumericFields,
+          OneOfFields,
+          StringFields,
+          BooleanFields
+        >,
+        "page" | "pageSize" | "sortBy" | "sortDirection"
       >
     >;
   },
@@ -149,61 +152,38 @@ export function useListQuery<
   IsNullFields,
   BooleanFields
 > {
-  const [initSortDirection, initSortBy] = useMemo(() => {
-    const initSortDirection: SortDirection[] = [];
-    const initSortBy: AllFields[] = [];
-    for (const sortOption of initSorting) {
-      initSortDirection.push(sortOption.direction);
-      initSortBy.push(sortOption.field);
-    }
-    return [initSortDirection, initSortBy];
-  }, [initSorting]);
-
-  const [queryOptions, setQueryOptions] = useState<
-    ListQueryOptions<
-      DateFields,
-      IsNullFields,
-      NumericFields,
-      OneOfFields,
-      StringFields,
-      BooleanFields
-    >
-  >({
-    page: initPage,
-    pageSize: initPageSize,
-    sortBy: initSortBy,
-    sortDirection: initSortDirection,
-    dateFilters: [],
-    isNullFilters: [],
-    numericFilters: [],
-    oneOfFilters: [],
-    stringFilters: [],
-    booleanFilters: [],
-  });
-
   const [page, setPage] = useState<number>(initPage);
   const [pageSize, setPageSize] = useState<number>(initPageSize);
   const [sorting, setSorting] = useState<SortOption<AllFields>[]>(initSorting);
   const [dateFilters, setDateFilters] = useState<
     DateFilterItemInterface<DateFields>[]
-  >([]);
+  >(initialFilters?.dateFilters ?? []);
   const [isNullFilters, setIsNullFilters] = useState<
     IsNullFilterItemInterface<IsNullFields>[]
-  >([]);
+  >(initialFilters?.isNullFilters ?? []);
   const [numericFilters, setNumericFilters] = useState<
     NumericFilterItemInterface<NumericFields>[]
-  >([]);
+  >(initialFilters?.numericFilters ?? []);
   const [oneOfFilters, setOneOfFilters] = useState<
     OneOfFilterItemInterface<OneOfFields>[]
-  >([]);
+  >(initialFilters?.oneOfFilters ?? []);
   const [stringFilters, setStringFilters] = useState<
     StringFilterItemInterface<StringFields>[]
-  >([]);
+  >(initialFilters?.stringFilters ?? []);
   const [booleanFilters, setBooleanFilters] = useState<
     BooleanFilterItemInterface<BooleanFields>[]
-  >([]);
+  >(initialFilters?.booleanFilters ?? []);
 
-  useEffect(() => {
+  const queryOptions = useMemo<
+    ListQueryOptions<
+      DateFields,
+      IsNullFields,
+      NumericFields,
+      OneOfFields,
+      StringFields,
+      BooleanFields
+    >
+  >(() => {
     const sortDirection: SortDirection[] = [];
     const sortBy: AllFields[] = [];
 
@@ -212,7 +192,7 @@ export function useListQuery<
       sortBy.push(sortOption.field);
     }
 
-    setQueryOptions({
+    return {
       page,
       pageSize,
       sortBy,
@@ -223,7 +203,7 @@ export function useListQuery<
       oneOfFilters,
       stringFilters,
       booleanFilters,
-    });
+    };
   }, [
     page,
     pageSize,
@@ -446,13 +426,6 @@ export function useListQuery<
     setBooleanFilters([]);
   }, []);
 
-  useEffect(() => {
-    setQueryOptions((prevQueryOptions) => ({
-      ...prevQueryOptions,
-      ...initialStateOverride,
-    }));
-  }, []);
-
   return {
     queryOptions,
     updatePagination,

diff --git a/packages/portal/src/routes/fundraising/index.tsx b/packages/portal/src/routes/fundraising/index.tsx
@@ -47,22 +47,12 @@ export const Route = createFileRoute("/fundraising/")({
 });
 
 function RouteComponent() {
-  const [result] = useQuery({
-    query: ViewTeamFundraisingDocument,
-    variables: {
-      page: 1,
-      pageSize: 10,
-    },
-  });
-
   const [reportDialogOpen, setReportDialogOpen] = useState(false);
 
-  useQueryStatusWatcher(result);
-
   const listQuery = useListQuery(
     {
       initPage: 1,
-      initPageSize: 10,
+      initPageSize: 20,
       initSorting: [{ field: "donatedOn", direction: "desc" }],
     },
     {