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

City-of-Helsinki · Nov 28, 2024 · d5880f3 · d5880f3
1 parent fe0ab47
commit d5880f3
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 63 deletions.
diff --git a/apps/ui/gql/gql-types.ts b/apps/ui/gql/gql-types.ts
@@ -5535,7 +5535,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?: {
@@ -5592,17 +5612,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 = {
@@ -8838,8 +8861,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
@@ -8850,7 +8879,7 @@ export const OptionsDocument = gql`
         }
       }
     }
-    purposes {
+    purposes(orderBy: $purposesOrderBy) {
       edges {
         node {
           id
@@ -8861,7 +8890,7 @@ export const OptionsDocument = gql`
         }
       }
     }
-    reservationPurposes {
+    reservationPurposes(orderBy: $reservationPurposesOrderBy) {
       edges {
         node {
           id
@@ -8893,16 +8922,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
     }
   }
 `;
@@ -8919,6 +8951,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'
  *   },
  * });
  */

diff --git a/apps/ui/hooks/useOptions.ts b/apps/ui/hooks/useOptions.ts
@@ -1,15 +1,39 @@
 import { gql } from "@apollo/client";
 import { useTranslation } from "next-i18next";
-import { type Maybe, useOptionsQuery, type OptionsQuery } from "@gql/gql-types";
+import {
+  type Maybe,
+  useOptionsQuery,
+  type OptionsQuery,
+  ReservationPurposeOrderingChoices,
+} from "@gql/gql-types";
 import { participantCountOptions } from "@/modules/const";
 import { filterNonNullable, getLocalizationLang } from "common/src/helpers";
 import { getParameterLabel } from "@/modules/util";
 
+/* FIXME: Should the all-queries be separate, or be just be included in the top level/most generic query (like here "useOptions")
+export const ALL_UNITS_QUERY = gql`
+  query AllUnits($orderBy: [UnitOrderingChoices]) {
+    unitsAll(orderBy: $orderBy) {
+      id
+      nameFi
+      nameSv
+      nameEn
+      pk
+    }
+  }
+`;
+*/
 // 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 +44,7 @@ export const OPTIONS_QUERY = gql`
         }
       }
     }
-    purposes {
+    purposes(orderBy: $purposesOrderBy) {
       edges {
         node {
           id
@@ -31,7 +55,7 @@ export const OPTIONS_QUERY = gql`
         }
       }
     }
-    reservationPurposes {
+    reservationPurposes(orderBy: $reservationPurposesOrderBy) {
       edges {
         node {
           id
@@ -63,16 +87,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 +151,11 @@ function sortAgeGroups(ageGroups: AgeGroup[]): AgeGroup[] {
 export function useOptions() {
   const { i18n } = useTranslation();
 
-  const { data, loading: isLoading } = useOptionsQuery();
+  const { data, loading: isLoading } = useOptionsQuery({
+    variables: {
+      reservationPurposesOrderBy: ReservationPurposeOrderingChoices.RankAsc,
+    },
+  });
   const ageGroups = filterNonNullable(
     data?.ageGroups?.edges?.map((edge) => edge?.node)
   );

diff --git a/apps/ui/modules/search.ts b/apps/ui/modules/search.ts
@@ -10,9 +10,10 @@ import {
   ReservationUnitOrderingChoices,
   type OptionsQuery,
   OptionsDocument,
-  type SearchFormParamsUnitQueryVariables,
-  type SearchFormParamsUnitQuery,
-  SearchFormParamsUnitDocument,
+  EquipmentOrderingChoices,
+  UnitOrderingChoices,
+  ReservationUnitTypeOrderingChoices,
+  PurposeOrderingChoices,
 } from "@gql/gql-types";
 import { filterNonNullable } from "common/src/helpers";
 import {
@@ -287,16 +288,22 @@ export async function getSearchOptions(
   const lang = convertLanguageCode(locale ?? "");
   const { data: optionsData } = await apolloClient.query<OptionsQuery>({
     query: OptionsDocument,
+    variables: {
+      reservationUnitTypesOrderBy: ReservationUnitTypeOrderingChoices.RankAsc,
+      purposesOrderBy: PurposeOrderingChoices.RankAsc,
+      unitsOrderBy: UnitOrderingChoices.NameFiAsc,
+      equipmentsOrderBy: EquipmentOrderingChoices.CategoryRankAsc,
+    },
   });
+
   const reservationUnitTypes = filterNonNullable(
     optionsData?.reservationUnitTypes?.edges?.map((edge) => edge?.node)
   );
   const purposes = filterNonNullable(
     optionsData?.purposes?.edges?.map((edge) => edge?.node)
   );
-  const equipments = filterNonNullable(
-    optionsData?.equipments?.edges?.map((edge) => edge?.node)
-  );
+  const equipments = filterNonNullable(optionsData?.equipmentsAll);
+  const units = filterNonNullable(optionsData?.unitsAll);
 
   const reservationUnitTypeOptions = reservationUnitTypes.map((n) => ({
     value: n.pk ?? 0,
@@ -310,21 +317,7 @@ export async function getSearchOptions(
     value: n.pk ?? 0,
     label: getTranslationSafe(n, "name", lang),
   }));
-
-  const { data: unitData } = await apolloClient.query<
-    SearchFormParamsUnitQuery,
-    SearchFormParamsUnitQueryVariables
-  >({
-    query: SearchFormParamsUnitDocument,
-    variables: {
-      publishedReservationUnits: true,
-      ...(page === "direct" ? { onlyDirectBookable: true } : {}),
-      ...(page === "seasonal" ? { onlySeasonalBookable: true } : {}),
-    },
-  });
-  const unitOptions = filterNonNullable(
-    unitData?.units?.edges?.map((e) => e?.node)
-  ).map((node) => ({
+  const unitOptions = units?.map((node) => ({
     value: node.pk ?? 0,
     label: getTranslationSafe(node, "name", lang),
   }));