diff --git a/apps/ui/pages/search/index.tsx b/apps/ui/pages/search/index.tsx index 4d1332adef..204bf64c68 100644 --- a/apps/ui/pages/search/index.tsx +++ b/apps/ui/pages/search/index.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo } from "react"; import { useTranslation } from "next-i18next"; import styled from "styled-components"; import type { GetServerSidePropsContext } from "next"; -import queryString from "query-string"; +import queryString, { ParsedQuery } from "query-string"; import { useLocalStorage } from "react-use"; import { Notification } from "hds-react"; import { useRouter } from "next/router"; @@ -149,14 +149,45 @@ const processVariables = (values: Record, language: string) => { }; }; +function convertParamsToValues(params: ParsedQuery) { + const parsed = params; + if (!parsed.sort) parsed.sort = "name"; + if (!parsed.order) parsed.order = "asc"; + + const newValues = Object.keys(parsed).reduce>( + (p, key) => { + if (parsed[key]) { + return { ...p, [key]: parsed[key]?.toString() } as Record< + string, + string + >; + } + return p; + }, + {} + ); + + return newValues; +} + const Search = ({ applicationRounds }: Props): JSX.Element => { + const searchParams = isBrowser ? window.location.search : ""; + const parsedParams = queryString.parse(searchParams); + const [values, setValues] = useState>( + convertParamsToValues(parsedParams) + ); + + const selectedApplicationRound = applicationRounds.find( + (ar) => ar.pk === Number(values.applicationRound) + ); const { reservationUnits: selectedReservationUnits, selectReservationUnit, removeReservationUnit, containsReservationUnit, clearSelections, - } = useReservationUnitsList(); + // Hide other application rounds' reservation units + } = useReservationUnitsList(selectedApplicationRound); const { t, i18n } = useTranslation(); @@ -178,7 +209,6 @@ const Search = ({ applicationRounds }: Props): JSX.Element => { [t] ); - const [values, setValues] = useState({} as Record); const setStoredValues = useLocalStorage("reservationUnit-search", null)[1]; const { data, fetchMore, loading, error, networkStatus } = useQuery< @@ -191,35 +221,19 @@ const Search = ({ applicationRounds }: Props): JSX.Element => { notifyOnNetworkStatusChange: true, }); - const searchParams = isBrowser ? window.location.search : ""; - const parsedParams = queryString.parse(searchParams); - - const reservationUnits: ReservationUnitType[] = - data?.reservationUnits?.edges - ?.map((e) => e?.node) - .filter((n): n is NonNullable => n != null) ?? []; + const reservationUnits: ReservationUnitType[] = filterNonNullable( + data?.reservationUnits?.edges?.map((e) => e?.node) + ); const totalCount = data?.reservationUnits?.totalCount; const pageInfo = data?.reservationUnits?.pageInfo; + // TODO useEffect is not the way to manage state + // functionality that is added here needs to be added to the onSearch function as well + // and neither communicates with the Tags at all useEffect(() => { if (parsedParams) { - const parsed = parsedParams; - if (!parsed.sort) parsed.sort = "name"; - if (!parsed.order) parsed.order = "asc"; - - const newValues = Object.keys(parsed).reduce>( - (p, key) => { - if (parsed[key]) { - return { ...p, [key]: parsed[key]?.toString() } as Record< - string, - string - >; - } - return p; - }, - {} - ); + const newValues = convertParamsToValues(parsedParams); if (!isEqual(values, newValues)) { setValues(newValues);