Show only selected unit reservationUnits as options in admin search filters

apps/admin-ui/gql/gql-types.ts

@@ -6627,13 +6627,11 @@ export type ReservationUnitsFilterParamsQueryVariables = Exact<{
 }>;
 
 export type ReservationUnitsFilterParamsQuery = {
-  reservationUnits?: {
-    totalCount?: number | null;
-    edges: Array<{
-      node?: { id: string; nameFi?: string | null; pk?: number | null } | null;
-    } | null>;
-    pageInfo: { endCursor?: string | null; hasNextPage: boolean };
-  } | null;
+  reservationUnitsAll?: Array<{
+    id: string;
+    nameFi?: string | null;
+    pk?: number | null;
+  }> | null;
 };
 
 export type ReservationUnitTypesFilterQueryVariables = Exact<{
@@ -6654,20 +6652,17 @@ export type ReservationUnitTypesFilterQuery = {
 };
 
 export type UnitsFilterQueryVariables = Exact<{
-  after?: InputMaybe<Scalars["String"]["input"]>;
   orderBy?: InputMaybe<
     Array<InputMaybe<UnitOrderingChoices>> | InputMaybe<UnitOrderingChoices>
   >;
 }>;
 
 export type UnitsFilterQuery = {
-  units?: {
-    totalCount?: number | null;
-    edges: Array<{
-      node?: { id: string; nameFi?: string | null; pk?: number | null } | null;
-    } | null>;
-    pageInfo: { endCursor?: string | null; hasNextPage: boolean };
-  } | null;
+  unitsAll?: Array<{
+    id: string;
+    nameFi?: string | null;
+    pk?: number | null;
+  }> | null;
 };
 
 export type CurrentUserQueryVariables = Exact<{ [key: string]: never }>;
@@ -10902,28 +10897,17 @@ export type ReservationDenyReasonsQueryResult = Apollo.QueryResult<
 >;
 export const ReservationUnitsFilterParamsDocument = gql`
   query ReservationUnitsFilterParams(
-    $after: String
     $unit: [Int]
     $orderBy: [ReservationUnitOrderingChoices]
   ) {
-    reservationUnits(
-      after: $after
+    reservationUnitsAll(
       onlyWithPermission: true
       unit: $unit
       orderBy: $orderBy
     ) {
-      edges {
-        node {
-          id
-          nameFi
-          pk
-        }
-      }
-      pageInfo {
-        endCursor
-        hasNextPage
-      }
-      totalCount
+      id
+      nameFi
+      pk
     }
   }
 `;
@@ -11090,20 +11074,11 @@ export type ReservationUnitTypesFilterQueryResult = Apollo.QueryResult<
   ReservationUnitTypesFilterQueryVariables
 >;
 export const UnitsFilterDocument = gql`
-  query UnitsFilter($after: String, $orderBy: [UnitOrderingChoices]) {
-    units(onlyWithPermission: true, after: $after, orderBy: $orderBy) {
-      edges {
-        node {
-          id
-          nameFi
-          pk
-        }
-      }
-      pageInfo {
-        endCursor
-        hasNextPage
-      }
-      totalCount
+  query UnitsFilter($orderBy: [UnitOrderingChoices]) {
+    unitsAll(onlyWithPermission: true, orderBy: $orderBy) {
+      id
+      nameFi
+      pk
     }
   }
 `;

apps/admin-ui/src/hooks/useReservationUnitOptions.tsx

@@ -1,67 +1,43 @@
-import { useEffect } from "react";
 import { gql } from "@apollo/client";
 import { filterNonNullable } from "common/src/helpers";
 import {
   ReservationUnitOrderingChoices,
   useReservationUnitsFilterParamsQuery,
 } from "@gql/gql-types";
+import { useSearchParams } from "react-router-dom";
 
 export const RESERVATION_UNITS_FILTER_PARAMS_QUERY = gql`
   query ReservationUnitsFilterParams(
-    $after: String
     $unit: [Int]
     $orderBy: [ReservationUnitOrderingChoices]
   ) {
-    reservationUnits(
-      after: $after
+    reservationUnitsAll(
       onlyWithPermission: true
       unit: $unit
       orderBy: $orderBy
     ) {
-      edges {
-        node {
-          id
-          nameFi
-          pk
-        }
-      }
-      pageInfo {
-        endCursor
-        hasNextPage
-      }
-      totalCount
+      id
+      nameFi
+      pk
     }
   }
 `;
 
 export function useReservationUnitOptions() {
-  const { data, loading, fetchMore } = useReservationUnitsFilterParamsQuery({
+  const [params] = useSearchParams();
+  const { data, loading } = useReservationUnitsFilterParamsQuery({
     variables: {
+      unit: params.getAll("unit").map(Number).filter(Number.isFinite),
       orderBy: [ReservationUnitOrderingChoices.NameFiAsc],
     },
   });
 
-  // auto fetch more (there is no limit, expect number of them would be a few hundred, but in theory this might cause problems)
-  // NOTE have to useEffect, onComplete stops at 200 items
-  useEffect(() => {
-    const { pageInfo } = data?.reservationUnits ?? {};
-    if (pageInfo?.hasNextPage) {
-      fetchMore({
-        variables: {
-          after: pageInfo.endCursor,
-        },
-      });
-    }
-  }, [data, fetchMore]);
-
-  const resUnits = filterNonNullable(
-    data?.reservationUnits?.edges.map((x) => x?.node)
+  const options = filterNonNullable(data?.reservationUnitsAll).map(
+    (reservationUnit) => ({
+      label: reservationUnit?.nameFi ?? "",
+      value: reservationUnit?.pk ?? 0,
+    })
   );
 
-  const options = resUnits.map((reservationUnit) => ({
-    label: reservationUnit?.nameFi ?? "",
-    value: reservationUnit?.pk ?? 0,
-  }));
-
   return { options, loading };
 }

apps/admin-ui/src/hooks/useUnitOptions.tsx

@@ -1,52 +1,27 @@
-import { useEffect } from "react";
 import { gql } from "@apollo/client";
 import { filterNonNullable } from "common/src/helpers";
 import { UnitOrderingChoices, useUnitsFilterQuery } from "@gql/gql-types";
 
 // exporting so it doesn't get removed
 // TODO combine with other options queries so we only make a single request for all of them
 export const UNITS_QUERY = gql`
-  query UnitsFilter($after: String, $orderBy: [UnitOrderingChoices]) {
-    units(onlyWithPermission: true, after: $after, orderBy: $orderBy) {
-      edges {
-        node {
-          id
-          nameFi
-          pk
-        }
-      }
-      pageInfo {
-        endCursor
-        hasNextPage
-      }
-      totalCount
+  query UnitsFilter($orderBy: [UnitOrderingChoices]) {
+    unitsAll(onlyWithPermission: true, orderBy: $orderBy) {
+      id
+      nameFi
+      pk
     }
   }
 `;
 
 export function useUnitOptions() {
-  const { data, loading, fetchMore } = useUnitsFilterQuery({
+  const { data, loading } = useUnitsFilterQuery({
     variables: {
       orderBy: [UnitOrderingChoices.NameFiAsc],
     },
   });
 
-  // auto fetch more (there is no limit, expect number of them would be a few hundred, but in theory this might cause problems)
-  // NOTE have to useEffect, onComplete stops at 200 items
-  useEffect(() => {
-    const { pageInfo } = data?.units ?? {};
-    if (pageInfo?.hasNextPage) {
-      fetchMore({
-        variables: {
-          after: pageInfo.endCursor,
-        },
-      });
-    }
-  }, [data, fetchMore]);
-
-  const units = filterNonNullable(data?.units?.edges.map((x) => x?.node));
-
-  const options = units.map((unit) => ({
+  const options = filterNonNullable(data?.unitsAll).map((unit) => ({
     label: unit?.nameFi ?? "",
     value: unit?.pk ?? 0,
   }));

apps/admin-ui/src/spa/reservations/Filters.tsx

@@ -71,7 +71,9 @@ export function Filters({
   );
 
   const { options: unitOptions } = useUnitOptions();
+
   const { options: reservationUnitOptions } = useReservationUnitOptions();
+
   const recurringOptions = [
     { value: "only", label: t("filters.label.onlyRecurring") },
     { value: "onlyNot", label: t("filters.label.onlyNotRecurring") },