wip: remove old reservation filters

apps/admin-ui/src/component/filters/ReservationUnitFilter.tsx

@@ -1,37 +1,23 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { useQuery } from "@apollo/client";
-import { useTranslation } from "react-i18next";
 import type {
   Query,
   QueryReservationUnitsArgs,
   ReservationUnitNode,
 } from "common/types/gql-types";
-import { SortedSelect } from "@/component/SortedSelect";
 import { GQL_MAX_RESULTS_PER_QUERY } from "@/common/const";
 import { RESERVATION_UNITS_FILTER_PARAMS_QUERY } from "./queries";
 import { filterNonNullable } from "common/src/helpers";
 
-type OptionType = {
-  label: string;
-  value: number;
-};
-
-type Props = {
-  onChange: (reservationUnits: OptionType[]) => void;
-  value: OptionType[];
-};
-
 // TODO this should be refactored to use Apollo cache because local state is bad
 // local state problems:
 // - two components have separate state so a mutation requires refetch on both
 // - load time issues if the data changes between component loads they are inconsistant
 // - the fetch (that could include 100s of gql queries) is run for every component
 // i.e. create dummy data of 10k ReservationUnits, add 100 filter components to the page and
 // watch the backend break.
-const ReservationUnitFilter = ({ onChange, value }: Props): JSX.Element => {
-  const { t } = useTranslation();
+export function useReservationUnitOptions() {
   const [resUnits, setResUnits] = useState<ReservationUnitNode[]>([]);
-
   // TODO this request is rerun whenever the selection changes (it'll return 0 every time)
   const offset = resUnits.length > 0 ? resUnits.length : undefined;
   const { loading } = useQuery<Query, QueryReservationUnitsArgs>(
@@ -55,26 +41,10 @@ const ReservationUnitFilter = ({ onChange, value }: Props): JSX.Element => {
     }
   );
 
-  const opts = resUnits.map((reservationUnit) => ({
+  const options = resUnits.map((reservationUnit) => ({
     label: reservationUnit?.nameFi ?? "",
     value: reservationUnit?.pk ?? 0,
   }));
 
-  // NOTE replaced frontend sort with backend, but this caused the sort to be case sensitive.
-  // TODO combobox would be preferable since we have like 400 items in it
-  // but combobox has some weird issue with ghost options being created.
-  return (
-    <SortedSelect
-      disabled={loading}
-      label={t("ReservationUnitsFilter.label")}
-      multiselect
-      placeholder={t("common.filter")}
-      options={opts}
-      value={value}
-      onChange={onChange}
-      id="reservation-unit"
-    />
-  );
-};
-
-export default ReservationUnitFilter;
+  return { loading, options };
+}

apps/admin-ui/src/component/filters/ReservationUnitTypeFilter.tsx

@@ -1,24 +1,12 @@
 import { useQuery } from "@apollo/client";
-import React from "react";
-import { useTranslation } from "react-i18next";
 import type {
   Query,
   QueryReservationUnitTypesArgs,
 } from "common/types/gql-types";
-import { SortedSelect } from "@/component/SortedSelect";
 import { RESERVATION_UNIT_TYPES_QUERY } from "./queries";
 import { filterNonNullable } from "common/src/helpers";
 
-type OptionType = {
-  label: string;
-  value: number;
-};
-type Props = {
-  onChange: (reservationUnitType: OptionType[]) => void;
-  value: OptionType[];
-  style?: React.CSSProperties;
-};
-
+// TODO move
 export function useReservationUnitTypes() {
   const result = useQuery<Query, QueryReservationUnitTypesArgs>(
     RESERVATION_UNIT_TYPES_QUERY
@@ -36,30 +24,3 @@ export function useReservationUnitTypes() {
 
   return { options, ...result };
 }
-
-function ReservationUnitTypeFilter({
-  onChange,
-  value,
-  style,
-}: Props): JSX.Element {
-  const { t } = useTranslation();
-
-  const { options, loading } = useReservationUnitTypes();
-
-  return (
-    <SortedSelect
-      style={style}
-      disabled={loading}
-      sort
-      label={t("ReservationUnitsSearch.typeLabel")}
-      multiselect
-      placeholder={t("ReservationUnitsSearch.typePlaceHolder")}
-      options={options}
-      onChange={(units) => onChange(units)}
-      id="type-combobox"
-      value={value}
-    />
-  );
-}
-
-export default ReservationUnitTypeFilter;

apps/admin-ui/src/component/filters/UnitFilter.tsx

@@ -1,10 +1,8 @@
-import React from "react";
 import { gql, useQuery } from "@apollo/client";
-import { useTranslation } from "react-i18next";
 import type { Query, QueryUnitsArgs } from "common/types/gql-types";
-import { SortedSelect } from "@/component/SortedSelect";
 import { filterNonNullable } from "common/src/helpers";
 
+// TODO combine with other options queries so we only make a single request for all of them
 const UNITS_QUERY = gql`
   query UnitsFilter($offset: Int, $first: Int) {
     units(onlyWithPermission: true, offset: $offset, first: $first) {
@@ -19,15 +17,6 @@ const UNITS_QUERY = gql`
   }
 `;
 
-type OptionType = {
-  label: string;
-  value: number;
-};
-type Props = {
-  onChange: (units: OptionType[]) => void;
-  value: OptionType[];
-};
-
 export function useUnitFilterOptions() {
   // Copy-paste from ReservationUnitFilter (same issues etc.)
   const query = useQuery<Query, QueryUnitsArgs>(UNITS_QUERY);
@@ -41,23 +30,3 @@ export function useUnitFilterOptions() {
 
   return { options, ...query };
 }
-
-export function UnitFilter({ onChange, value }: Props): JSX.Element {
-  const { t } = useTranslation();
-
-  const { options, loading } = useUnitFilterOptions();
-
-  return (
-    <SortedSelect
-      disabled={loading}
-      sort
-      label={t("ReservationUnitsSearch.unitLabel")}
-      multiselect
-      placeholder={t("ReservationUnitsSearch.unitPlaceHolder")}
-      options={options}
-      value={value}
-      onChange={onChange}
-      id="reservation-unit-combobox"
-    />
-  );
-}