rework (ui): search pages

- reduce duplicated code.
- type things properly so it's easier to change.
- prefer SSR for queries where applicable.
- prefer query params over custom state transfer.
- use react-hook-form correctly.
- remove weird reset effects.

Author: joonatank

apps/ui/components/application/ApplicationEvent.tsx

@@ -20,7 +20,7 @@ import {
 } from "@/modules/util";
 import { ApplicationEventSummary } from "./ApplicationEventSummary";
 import Accordion from "../common/Accordion";
-import { getDurationNumberOptions } from "@/modules/const";
+import { getDurationOptions } from "@/modules/const";
 import ConfirmationModal, { ModalRef } from "../common/ConfirmationModal";
 import { MediumButton } from "@/styles/util";
 import { ApplicationFormValues } from "./Form";
@@ -177,6 +177,7 @@ function ApplicationEventInner({
     return "";
   };
 
+  const durationOptions = getDurationOptions(t);
   return (
     <>
       <SubHeadLine>
@@ -219,11 +220,13 @@ function ApplicationEventInner({
           rules={{ required: true }}
           name={`applicationSections.${index}.ageGroup`}
           render={({ field }) => (
-            <Select<OptionType>
+            <Select
               value={
                 ageGroupOptions.find((v) => v.value === field.value) ?? null
               }
-              onChange={(v: OptionType) => field.onChange(v.value)}
+              onChange={(v: (typeof ageGroupOptions)[0]) =>
+                field.onChange(v.value)
+              }
               required
               label={t("application:Page1.ageGroup")}
               options={ageGroupOptions}
@@ -237,12 +240,14 @@ function ApplicationEventInner({
           rules={{ required: true }}
           name={`applicationSections.${index}.purpose`}
           render={({ field }) => (
-            <Select<OptionType>
+            <Select
               label={t("application:Page1.purpose")}
               value={
                 purposeOptions.find((v) => v.value === field.value) ?? null
               }
-              onChange={(v: OptionType) => field.onChange(v.value)}
+              onChange={(v: (typeof purposeOptions)[0]) =>
+                field.onChange(v.value)
+              }
               required
               options={purposeOptions}
               invalid={errors.applicationSections?.[index]?.purpose != null}
@@ -332,6 +337,7 @@ function ApplicationEventInner({
           invalid={errors.applicationSections?.[index]?.end != null}
           errorText={getTranslatedError("end")}
         />
+        {/* TODO should use ControlledSelect */}
         <Controller
           control={control}
           name={`applicationSections.${index}.minDuration`}
@@ -340,22 +346,21 @@ function ApplicationEventInner({
             <Select
               id={field.name}
               value={
-                getDurationNumberOptions().find(
-                  (x) => x.value === field.value
-                ) ?? null
+                durationOptions.find((x) => x.value === field.value) ?? null
               }
               placeholder={t("common:select")}
-              options={getDurationNumberOptions()}
+              options={durationOptions}
               label={t("application:Page1.minDuration")}
               required
-              onChange={(selection: OptionType): void => {
+              onChange={(selection: (typeof durationOptions)[0]): void => {
                 field.onChange(selection.value);
               }}
               invalid={errors.applicationSections?.[index]?.minDuration != null}
               error={getTranslatedError("minDuration")}
             />
           )}
         />
+        {/* TODO should use ControlledSelect */}
         <Controller
           control={control}
           name={`applicationSections.${index}.maxDuration`}
@@ -364,15 +369,13 @@ function ApplicationEventInner({
             <Select
               id={field.name}
               value={
-                getDurationNumberOptions().find(
-                  (x) => x.value === field.value
-                ) ?? null
+                durationOptions.find((x) => x.value === field.value) ?? null
               }
               placeholder={t("common:select")}
-              options={getDurationNumberOptions()}
+              options={durationOptions}
               label={t("application:Page1.maxDuration")}
               required
-              onChange={(selection: OptionType): void => {
+              onChange={(selection: (typeof durationOptions)[0]): void => {
                 field.onChange(selection.value);
               }}
               invalid={errors.applicationSections?.[index]?.maxDuration != null}

apps/ui/components/calendar/ReservationCalendarControls.tsx

@@ -5,7 +5,6 @@ import { Button, IconAngleDown, IconAngleUp, IconCross } from "hds-react";
 import { maxBy, trim } from "lodash";
 import { fromUIDate, toUIDate } from "common/src/common/util";
 import { Transition } from "react-transition-group";
-import type { OptionType } from "common/types/common";
 import {
   fontBold,
   fontMedium,
@@ -23,7 +22,7 @@ import type { SubmitHandler, UseFormReturn } from "react-hook-form";
 import type { TimeRange } from "@/components/reservation-unit/QuickReservation";
 import { PendingReservationFormType } from "@/components/reservation-unit/schema";
 import ControlledDateInput from "@/components/common/ControlledDateInput";
-import ControlledSelect from "@/components/common/ControlledSelect";
+import { ControlledSelect } from "@/components/common/ControlledSelect";
 
 export type FocusTimeSlot = TimeRange & {
   isReservable: boolean;
@@ -41,7 +40,7 @@ type Props = {
     date?: string;
     time?: string;
   }>;
-  durationOptions: OptionType[];
+  durationOptions: { label: string; value: number }[];
   startingTimeOptions: { label: string; value: string }[];
   focusSlot: FocusTimeSlot;
   submitReservation: SubmitHandler<PendingReservationFormType>;

apps/ui/components/common/ControlledSelect.tsx

@@ -1,21 +1,31 @@
 import React from "react";
 import { Select } from "hds-react";
 import { useTranslation } from "next-i18next";
-import { Controller, useForm } from "react-hook-form";
-import { OptionType } from "common/types/common";
-import { getSelectedOption } from "@/modules/util";
+import {
+  type Control,
+  type FieldValues,
+  type Path,
+  useController,
+} from "react-hook-form";
 
-type Props = {
-  name: string;
+type Props<T extends FieldValues, U> = {
+  name: Path<T>;
+  control: Control<T>;
   label: string;
-  control: ReturnType<typeof useForm>["control"];
-  options: OptionType[];
+  options: Array<{ label: string; value: U }>;
   required?: boolean;
   placeholder?: string;
   error?: string;
   validate?: { [key: string]: (val: string) => boolean };
+  style?: React.CSSProperties;
+  className?: string;
+  clearable?: boolean;
 };
-const ControlledSelect = ({
+
+export function ControlledSelect<
+  T extends FieldValues,
+  U extends number | string,
+>({
   name,
   label,
   control,
@@ -24,36 +34,33 @@ const ControlledSelect = ({
   error,
   placeholder,
   validate,
-}: Props): JSX.Element => {
+  style,
+  className,
+  clearable,
+}: Props<T, U>): JSX.Element {
   const { t } = useTranslation();
+  const {
+    field: { value, onChange },
+  } = useController({ name, control, rules: { required, validate } });
+
+  const currentValue = options.find((x) => x.value === value) ?? null;
+
   return (
-    <Controller
-      control={control}
-      name={name}
-      rules={{ required, validate }}
-      render={({ field }) => {
-        const currentValue = getSelectedOption(field.value, options) ?? {
-          label: "",
-          value: "",
-        };
-        return (
-          <Select
-            id={name}
-            value={currentValue}
-            options={options}
-            label={label}
-            required={required ?? false}
-            onChange={(selection: OptionType): void => {
-              field.onChange(selection.value);
-            }}
-            placeholder={placeholder ?? t("common:select")}
-            invalid={Boolean(error)}
-            error={error}
-          />
-        );
+    <Select
+      id={name}
+      style={style}
+      className={className}
+      clearable={clearable}
+      value={currentValue}
+      options={options}
+      label={label}
+      required={required}
+      onChange={(selection?: (typeof options)[0]): void => {
+        onChange(selection?.value);
       }}
+      placeholder={placeholder ?? t("common:select")}
+      invalid={Boolean(error)}
+      error={error}
     />
   );
-};
-
-export default ControlledSelect;
+}

apps/ui/components/common/Navigation/Navigation.tsx

@@ -88,7 +88,7 @@ export function Navigation({
     // NOTE have to do both, otherwise the i18n and router are out of sync and
     // navigation uses translations for the previous language
     i18n.changeLanguage(language);
-    router.replace(router.pathname, router.asPath, {
+    router.replace({ query: router.query }, router.asPath, {
       locale: language,
     });
   };

apps/ui/components/reservation-unit/Head.tsx

@@ -1,5 +1,5 @@
 import { IconClock, IconGroup, IconGlyphEuro } from "hds-react";
-import React, { useMemo } from "react";
+import React from "react";
 import NextImage from "next/image";
 import { useTranslation } from "next-i18next";
 import styled from "styled-components";
@@ -11,8 +11,6 @@ import {
   ReservationKind,
   type ReservationUnitNode,
 } from "common/types/gql-types";
-import { omit } from "lodash";
-import { useLocalStorage } from "react-use";
 import { Container } from "common";
 import {
   formatDate,
@@ -142,21 +140,15 @@ const NonReservableNotification = ({
   );
 };
 
-const Head = ({
+function Head({
   reservationUnit,
   // activeOpeningTimes,
   reservationUnitIsReservable,
   subventionSuffix,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const { t } = useTranslation();
 
-  const storageKey = "reservationUnit-search";
-
-  const [storedValues] = useLocalStorage(storageKey, null);
-
-  const searchUrlWithParams = useMemo(() => {
-    return singleSearchUrl(omit(storedValues, "applicationRound"));
-  }, [storedValues]);
+  const searchUrl = singleSearchUrl();
 
   const minDur = reservationUnit.minReservationDuration ?? 0;
   const maxDur = reservationUnit.maxReservationDuration ?? 0;
@@ -180,9 +172,9 @@ const Head = ({
   return (
     <>
       <BreadcrumbWrapper
-        route={[searchUrlWithParams, "reservationUnitName"]}
+        route={[searchUrl, "reservationUnitName"]}
         aliases={[
-          { slug: searchUrlWithParams, title: t("breadcrumb:search") },
+          { slug: searchUrl, title: t("breadcrumb:search") },
           { slug: "reservationUnitName", title: reservationUnitName ?? "-" },
         ]}
       />
@@ -270,6 +262,6 @@ const Head = ({
       </TopContainer>
     </>
   );
-};
+}
 
 export default Head;

apps/ui/components/reservation-unit/QuickReservation.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useMemo } from "react";
-import type { OptionType } from "common/types/common";
 import { Button } from "hds-react";
 import { useTranslation } from "next-i18next";
 import styled from "styled-components";
@@ -14,7 +13,7 @@ import type { FocusTimeSlot } from "@/components/calendar/ReservationCalendarCon
 import type { SubmitHandler, UseFormReturn } from "react-hook-form";
 import { PendingReservationFormType } from "@/components/reservation-unit/schema";
 import ControlledDateInput from "@/components/common/ControlledDateInput";
-import ControlledSelect from "@/components/common/ControlledSelect";
+import { ControlledSelect } from "@/components/common/ControlledSelect";
 import { getSelectedOption } from "@/modules/util";
 
 export type TimeRange = {
@@ -30,7 +29,7 @@ type Props = {
     date?: string;
     time?: string;
   }>;
-  durationOptions: OptionType[];
+  durationOptions: { label: string; value: number }[];
   startingTimeOptions: { label: string; value: string }[];
   focusSlot: FocusTimeSlot | null;
   nextAvailableTime: Date | null;

apps/ui/components/search/ControlledMultiSelect.tsx

@@ -0,0 +1,36 @@
+import { Control, FieldValues, Path, useController } from "react-hook-form";
+import { MultiSelectDropdown } from "../form";
+
+export function ControlledMultiSelect<T extends FieldValues>({
+  name,
+  control,
+  options,
+  label,
+}: {
+  name: Path<T>;
+  control: Control<T>;
+  options:
+    | Array<{ value: string; label: string }>
+    | Array<{ value: number; label: string }>;
+  label: string;
+}): JSX.Element {
+  const {
+    field: { value, onChange },
+  } = useController({ control, name });
+
+  // TODO replace with HDS ComboBox
+  return (
+    <MultiSelectDropdown
+      id={`${name}Filter`}
+      checkboxName={`${name}Filter`}
+      name={name}
+      onChange={(selection): void => {
+        onChange(selection.filter((n) => n !== "").join(","));
+      }}
+      options={options}
+      showSearch
+      title={label}
+      value={value?.split(",") ?? [""]}
+    />
+  );
+}