fix: search filters use the non paged endpoints, options sorting

City-of-Helsinki · Jan 14, 2025 · 09d11e0 · 09d11e0
1 parent 4f27e0f
commit 09d11e0
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 93 deletions.
diff --git a/apps/ui/components/application/Page1.tsx b/apps/ui/components/application/Page1.tsx
@@ -34,7 +34,7 @@ export function Page1({ applicationRound, onNext }: Props): JSX.Element | null {
   );
   const unitsInApplicationRound = filterNonNullable(uniq(resUnitPks));
   const { data } = useSearchFormParamsUnitQuery();
-  const units = filterNonNullable(data?.units?.edges?.map((e) => e?.node))
+  const units = filterNonNullable(data?.unitsAll)
     .filter((u) => u.pk != null && unitsInApplicationRound.includes(u.pk))
     .map((u) => ({
       pk: u.pk ?? 0,

diff --git a/apps/ui/gql/gql-types.ts b/apps/ui/gql/gql-types.ts
@@ -5333,7 +5333,27 @@ export type ReservationInfoCardFragment = {
   }>;
 };
 
-export type OptionsQueryVariables = Exact<{ [key: string]: never }>;
+export type OptionsQueryVariables = Exact<{
+  reservationUnitTypesOrderBy?: InputMaybe<
+    | Array<InputMaybe<ReservationUnitTypeOrderingChoices>>
+    | InputMaybe<ReservationUnitTypeOrderingChoices>
+  >;
+  purposesOrderBy?: InputMaybe<
+    | Array<InputMaybe<PurposeOrderingChoices>>
+    | InputMaybe<PurposeOrderingChoices>
+  >;
+  unitsOrderBy?: InputMaybe<
+    Array<InputMaybe<UnitOrderingChoices>> | InputMaybe<UnitOrderingChoices>
+  >;
+  equipmentsOrderBy?: InputMaybe<
+    | Array<InputMaybe<EquipmentOrderingChoices>>
+    | InputMaybe<EquipmentOrderingChoices>
+  >;
+  reservationPurposesOrderBy?: InputMaybe<
+    | Array<InputMaybe<ReservationPurposeOrderingChoices>>
+    | InputMaybe<ReservationPurposeOrderingChoices>
+  >;
+}>;
 
 export type OptionsQuery = {
   reservationUnitTypes?: {
@@ -5390,17 +5410,20 @@ export type OptionsQuery = {
       } | null;
     } | null>;
   } | null;
-  equipments?: {
-    edges: Array<{
-      node?: {
-        id: string;
-        pk?: number | null;
-        nameFi?: string | null;
-        nameEn?: string | null;
-        nameSv?: string | null;
-      } | null;
-    } | null>;
-  } | null;
+  equipmentsAll?: Array<{
+    id: string;
+    pk?: number | null;
+    nameFi?: string | null;
+    nameEn?: string | null;
+    nameSv?: string | null;
+  }> | null;
+  unitsAll?: Array<{
+    id: string;
+    pk?: number | null;
+    nameFi?: string | null;
+    nameSv?: string | null;
+    nameEn?: string | null;
+  }> | null;
 };
 
 export type ApplicationSectionReservationFragment = {
@@ -6232,17 +6255,13 @@ export type SearchFormParamsUnitQueryVariables = Exact<{
 }>;
 
 export type SearchFormParamsUnitQuery = {
-  units?: {
-    edges: Array<{
-      node?: {
-        id: string;
-        pk?: number | null;
-        nameFi?: string | null;
-        nameEn?: string | null;
-        nameSv?: string | null;
-      } | null;
-    } | null>;
-  } | null;
+  unitsAll?: Array<{
+    id: string;
+    pk?: number | null;
+    nameFi?: string | null;
+    nameEn?: string | null;
+    nameSv?: string | null;
+  }> | null;
 };
 
 export type ReservationUnitPurposesQueryVariables = Exact<{
@@ -9057,8 +9076,14 @@ export const BannerNotificationCommonFragmentDoc = gql`
   }
 `;
 export const OptionsDocument = gql`
-  query Options {
-    reservationUnitTypes {
+  query Options(
+    $reservationUnitTypesOrderBy: [ReservationUnitTypeOrderingChoices]
+    $purposesOrderBy: [PurposeOrderingChoices]
+    $unitsOrderBy: [UnitOrderingChoices]
+    $equipmentsOrderBy: [EquipmentOrderingChoices]
+    $reservationPurposesOrderBy: [ReservationPurposeOrderingChoices]
+  ) {
+    reservationUnitTypes(orderBy: $reservationUnitTypesOrderBy) {
       edges {
         node {
           id
@@ -9069,7 +9094,7 @@ export const OptionsDocument = gql`
         }
       }
     }
-    purposes {
+    purposes(orderBy: $purposesOrderBy) {
       edges {
         node {
           id
@@ -9080,7 +9105,7 @@ export const OptionsDocument = gql`
         }
       }
     }
-    reservationPurposes {
+    reservationPurposes(orderBy: $reservationPurposesOrderBy) {
       edges {
         node {
           id
@@ -9112,16 +9137,19 @@ export const OptionsDocument = gql`
         }
       }
     }
-    equipments {
-      edges {
-        node {
-          id
-          pk
-          nameFi
-          nameEn
-          nameSv
-        }
-      }
+    equipmentsAll(orderBy: $equipmentsOrderBy) {
+      id
+      pk
+      nameFi
+      nameEn
+      nameSv
+    }
+    unitsAll(orderBy: $unitsOrderBy) {
+      id
+      pk
+      nameFi
+      nameSv
+      nameEn
     }
   }
 `;
@@ -9138,6 +9166,11 @@ export const OptionsDocument = gql`
  * @example
  * const { data, loading, error } = useOptionsQuery({
  *   variables: {
+ *      reservationUnitTypesOrderBy: // value for 'reservationUnitTypesOrderBy'
+ *      purposesOrderBy: // value for 'purposesOrderBy'
+ *      unitsOrderBy: // value for 'unitsOrderBy'
+ *      equipmentsOrderBy: // value for 'equipmentsOrderBy'
+ *      reservationPurposesOrderBy: // value for 'reservationPurposesOrderBy'
  *   },
  * });
  */
@@ -9898,22 +9931,18 @@ export const SearchFormParamsUnitDocument = gql`
     $onlySeasonalBookable: Boolean
     $orderBy: [UnitOrderingChoices]
   ) {
-    units(
+    unitsAll(
       publishedReservationUnits: $publishedReservationUnits
       ownReservations: $ownReservations
       onlyDirectBookable: $onlyDirectBookable
       onlySeasonalBookable: $onlySeasonalBookable
       orderBy: $orderBy
     ) {
-      edges {
-        node {
-          id
-          pk
-          nameFi
-          nameEn
-          nameSv
-        }
-      }
+      id
+      pk
+      nameFi
+      nameEn
+      nameSv
     }
   }
 `;

diff --git a/apps/ui/hooks/useOptions.ts b/apps/ui/hooks/useOptions.ts
@@ -1,15 +1,27 @@
 import { gql } from "@apollo/client";
 import { useTranslation } from "next-i18next";
-import { type Maybe, useOptionsQuery, type OptionsQuery } from "@gql/gql-types";
+import {
+  type Maybe,
+  type OptionsQuery,
+  ReservationPurposeOrderingChoices,
+  ReservationUnitTypeOrderingChoices,
+  useOptionsQuery,
+} from "@gql/gql-types";
 import { participantCountOptions } from "@/modules/const";
 import { filterNonNullable, getLocalizationLang } from "common/src/helpers";
 import { getParameterLabel } from "@/modules/util";
 
 // There is a duplicate in admin-ui but it doesn't have translations
 // export so we can use this on SSR
 export const OPTIONS_QUERY = gql`
-  query Options {
-    reservationUnitTypes {
+  query Options(
+    $reservationUnitTypesOrderBy: [ReservationUnitTypeOrderingChoices]
+    $purposesOrderBy: [PurposeOrderingChoices]
+    $unitsOrderBy: [UnitOrderingChoices]
+    $equipmentsOrderBy: [EquipmentOrderingChoices]
+    $reservationPurposesOrderBy: [ReservationPurposeOrderingChoices]
+  ) {
+    reservationUnitTypes(orderBy: $reservationUnitTypesOrderBy) {
       edges {
         node {
           id
@@ -20,7 +32,7 @@ export const OPTIONS_QUERY = gql`
         }
       }
     }
-    purposes {
+    purposes(orderBy: $purposesOrderBy) {
       edges {
         node {
           id
@@ -31,7 +43,7 @@ export const OPTIONS_QUERY = gql`
         }
       }
     }
-    reservationPurposes {
+    reservationPurposes(orderBy: $reservationPurposesOrderBy) {
       edges {
         node {
           id
@@ -63,16 +75,19 @@ export const OPTIONS_QUERY = gql`
         }
       }
     }
-    equipments {
-      edges {
-        node {
-          id
-          pk
-          nameFi
-          nameEn
-          nameSv
-        }
-      }
+    equipmentsAll(orderBy: $equipmentsOrderBy) {
+      id
+      pk
+      nameFi
+      nameEn
+      nameSv
+    }
+    unitsAll(orderBy: $unitsOrderBy) {
+      id
+      pk
+      nameFi
+      nameSv
+      nameEn
     }
   }
 `;
@@ -124,7 +139,12 @@ function sortAgeGroups(ageGroups: AgeGroup[]): AgeGroup[] {
 export function useOptions() {
   const { i18n } = useTranslation();
 
-  const { data, loading: isLoading } = useOptionsQuery();
+  const { data, loading: isLoading } = useOptionsQuery({
+    variables: {
+      reservationUnitTypesOrderBy: ReservationUnitTypeOrderingChoices.RankAsc,
+      reservationPurposesOrderBy: ReservationPurposeOrderingChoices.RankAsc,
+    },
+  });
   const ageGroups = filterNonNullable(
     data?.ageGroups?.edges?.map((edge) => edge?.node)
   );
@@ -138,13 +158,6 @@ export function useOptions() {
     data?.reservationPurposes?.edges?.map((edge) => edge?.node)
   );
 
-  const params = {
-    ageGroups,
-    cities,
-    reservationUnitTypes,
-    purposes,
-  };
-
   const lang = getLocalizationLang(i18n.language);
   const ageGroupOptions = filterNonNullable(sortAgeGroups(ageGroups)).map(
     (v) => ({
@@ -180,5 +193,12 @@ export function useOptions() {
     participantCountOptions,
   };
 
+  const params = {
+    ageGroups,
+    cities,
+    reservationUnitTypes,
+    purposes,
+  };
+
   return { isLoading, options, params };
 }
diff --git a/apps/ui/modules/queries/params.tsx b/apps/ui/modules/queries/params.tsx
@@ -8,22 +8,18 @@ export const SEARCH_FORM_PARAMS_UNIT = gql`
     $onlySeasonalBookable: Boolean
     $orderBy: [UnitOrderingChoices]
   ) {
-    units(
+    unitsAll(
       publishedReservationUnits: $publishedReservationUnits
       ownReservations: $ownReservations
       onlyDirectBookable: $onlyDirectBookable
       onlySeasonalBookable: $onlySeasonalBookable
       orderBy: $orderBy
     ) {
-      edges {
-        node {
-          id
-          pk
-          nameFi
-          nameEn
-          nameSv
-        }
-      }
+      id
+      pk
+      nameFi
+      nameEn
+      nameSv
     }
   }
 `;