Change route search into form

Author: Jontzii

ui/src/components/common/search/ExtraFilters/PriorityFilter.tsx

@@ -0,0 +1,70 @@
+import without from 'lodash/without';
+import { ReactElement } from 'react';
+import { FieldValues, Path, useController } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { TranslationKey } from '../../../../i18n';
+import { mapPriorityToUiName } from '../../../../i18n/uiNameMappings';
+import { Column, Row } from '../../../../layoutComponents';
+import { Priority, knownPriorityValues } from '../../../../types/enums';
+import { InputLabel, LabeledCheckbox } from '../../../forms/common';
+
+const testIds = {
+  priorityCheckbox: (prefix: string, priority: Priority) =>
+    `${prefix}::priority::${Priority[priority]}`,
+};
+
+type PriorityFilterProps<FormState extends FieldValues> = {
+  readonly fieldPath: Path<FormState>;
+  readonly testIdPrefix: string;
+  readonly translationPrefix: TranslationKey;
+  readonly className?: string;
+  readonly disabled?: boolean;
+};
+
+export const PriorityFilter = <FormState extends FieldValues>({
+  fieldPath,
+  testIdPrefix,
+  translationPrefix,
+  className,
+  disabled,
+}: PriorityFilterProps<FormState>): ReactElement => {
+  const { t } = useTranslation();
+
+  const {
+    field: { onChange, value, disabled: controllerDisabled, onBlur, ref },
+  } = useController<FormState, typeof fieldPath>({
+    name: fieldPath,
+  });
+
+  const togglePriority = (priority: Priority) => () => {
+    if (value.includes(priority)) {
+      onChange(without(value, priority).toSorted());
+    } else {
+      onChange(value.concat(priority).toSorted());
+    }
+  };
+
+  return (
+    <Column className={className}>
+      <InputLabel
+        fieldPath="priorities"
+        translationPrefix={translationPrefix}
+      />
+      <Row className="gap-2">
+        {knownPriorityValues.map((priority) => (
+          <LabeledCheckbox
+            key={priority}
+            className="h-[--input-height]"
+            label={mapPriorityToUiName(t, priority)}
+            onBlur={onBlur}
+            onClick={togglePriority(priority)}
+            disabled={!!controllerDisabled || disabled}
+            selected={value.includes(priority)}
+            testId={testIds.priorityCheckbox(testIdPrefix, priority)}
+            ref={ref}
+          />
+        ))}
+      </Row>
+    </Column>
+  );
+};

ui/src/components/stop-registry/search/components/StopSearchBar/ExtraFilters/TransportationModeFilter.module.css renamed to ui/src/components/common/search/ExtraFilters/TransportationModeFilter.module.css

@@ -1,17 +1,22 @@
 import without from 'lodash/without';
-import { FC } from 'react';
-import { useController } from 'react-hook-form';
+import { FC, ReactElement } from 'react';
+import { FieldValues, Path, useController } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { twJoin, twMerge } from 'tailwind-merge';
-import { mapStopRegistryTransportModeTypeToUiName } from '../../../../../../i18n/uiNameMappings';
-import { Row } from '../../../../../../layoutComponents';
-import { JoreStopRegistryTransportModeType } from '../../../../../../types/stop-registry';
-import { AllOptionEnum } from '../../../../../../utils';
-import { StopSearchFilters } from '../../../types';
-import { stopSearchBarTestIds } from '../stopSearchBarTestIds';
-import { DisableableFilterProps } from '../Types/DisableableFilterProps';
+import { TranslationKey } from '../../../../i18n';
+import { mapStopRegistryTransportModeTypeToUiName } from '../../../../i18n/uiNameMappings';
+import { Row } from '../../../../layoutComponents';
+import { JoreStopRegistryTransportModeType } from '../../../../types/stop-registry';
+import { AllOptionEnum } from '../../../../utils';
 import s from './TransportationModeFilter.module.css';
 
+const testIds = {
+  transportationModeButton: (
+    prefix: string,
+    mode: JoreStopRegistryTransportModeType,
+  ) => `${prefix}::transportationMode::${mode}`,
+};
+
 const modeIconMap: Readonly<Record<JoreStopRegistryTransportModeType, string>> =
   {
     [JoreStopRegistryTransportModeType.Bus]: 'icon-bus',
@@ -25,12 +30,14 @@ type TransportationModeButtonProps = {
   readonly isSelected: (mode: JoreStopRegistryTransportModeType) => boolean;
   readonly mode: JoreStopRegistryTransportModeType;
   readonly onToggle: (mode: JoreStopRegistryTransportModeType) => void;
+  readonly testIdPrefix: string;
 };
 
 const TransportationModeButton: FC<TransportationModeButtonProps> = ({
   isSelected,
   mode,
   onToggle,
+  testIdPrefix,
 }) => {
   const { t } = useTranslation();
 
@@ -44,7 +51,7 @@ const TransportationModeButton: FC<TransportationModeButtonProps> = ({
         'aria-checked:border-tweaked-brand aria-checked:bg-tweaked-brand aria-checked:text-white',
         modeIconMap[mode],
       )}
-      data-testid={stopSearchBarTestIds.transportationModeButton(mode)}
+      data-testid={testIds.transportationModeButton(testIdPrefix, mode)}
       onClick={() => onToggle(mode)}
       role="checkbox"
       type="button"
@@ -60,20 +67,32 @@ const options: ReadonlyArray<JoreStopRegistryTransportModeType> = [
   JoreStopRegistryTransportModeType.Metro,
 ];
 
-export const TransportationModeFilter: FC<DisableableFilterProps> = ({
+type TransportationModeFilterProps<FormState extends FieldValues> = {
+  readonly fieldPath: Path<FormState>;
+  readonly translationPrefix: TranslationKey;
+  readonly testIdPrefix: string;
+  readonly className?: string;
+  readonly disabled?: boolean;
+};
+
+export const TransportationModeFilter = <FormState extends FieldValues>({
+  fieldPath,
+  translationPrefix,
+  testIdPrefix,
   className,
   disabled,
-}) => {
+}: TransportationModeFilterProps<FormState>): ReactElement => {
   const { t } = useTranslation();
 
   const {
     field: { value, onBlur, onChange },
-  } = useController<StopSearchFilters, 'transportationMode'>({
-    name: 'transportationMode',
+  } = useController<FormState, typeof fieldPath>({
+    name: fieldPath,
     disabled,
   });
 
   const isSelected = (mode: JoreStopRegistryTransportModeType) =>
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     value.includes(AllOptionEnum.All) || value.includes(mode);
 
   const onToggle = (mode: JoreStopRegistryTransportModeType) => {
@@ -101,14 +120,15 @@ export const TransportationModeFilter: FC<DisableableFilterProps> = ({
 
   return (
     <fieldset className={twMerge('flex flex-col', className)} onBlur={onBlur}>
-      <label>{t('stopRegistrySearch.fieldLabels.transportMode')}</label>
+      <label>{t(`${translationPrefix}.transportMode`)}</label>
       <Row className={twJoin('gap-1', s.noIconMargins)}>
         {options.map((mode) => (
           <TransportationModeButton
             key={mode}
             mode={mode}
             onToggle={onToggle}
             isSelected={isSelected}
+            testIdPrefix={testIdPrefix}
           />
         ))}
       </Row>

ui/src/components/stop-registry/search/components/StopSearchBar/ExtraFilters/TransportationModeFilter.tsx renamed to ui/src/components/common/search/ExtraFilters/TransportationModeFilter.tsx

@@ -0,0 +1,2 @@
+export * from './PriorityFilter';
+export * from './TransportationModeFilter';

ui/src/components/common/search/ExtraFilters/index.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { twMerge } from 'tailwind-merge';
-import { ExpandButton } from '../../../../../../uiComponents';
+import { ExpandButton } from '../../../../uiComponents';
 
 const testIds = {
   toggleExpand: (prefix: string) => `${prefix}::chevronToggle`,

ui/src/components/stop-registry/search/components/StopSearchBar/BasicFilters/ExtraFiltersToggle.tsx renamed to ui/src/components/common/search/SearchBar/ExtraFiltersToggle.tsx

@@ -0,0 +1,54 @@
+import { ReactElement } from 'react';
+import { FieldValues, Path } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { TranslationKey } from '../../../../i18n';
+import { Column, Row } from '../../../../layoutComponents';
+import {
+  InputElement,
+  InputLabel,
+  ValidationErrorList,
+} from '../../../forms/common';
+
+type SearchQueryFilterProps<FormState extends FieldValues> = {
+  readonly fieldPath: Path<FormState>;
+  readonly translationPrefix: TranslationKey;
+  readonly testId: string;
+  readonly className?: string;
+};
+
+export const SearchQueryFilter = <FormState extends FieldValues>({
+  className,
+  fieldPath,
+  translationPrefix,
+  testId,
+}: SearchQueryFilterProps<FormState>): ReactElement => {
+  const { t } = useTranslation();
+
+  return (
+    <Column className={className}>
+      <InputLabel<FormState>
+        fieldPath={fieldPath}
+        translationPrefix={translationPrefix}
+      />
+
+      <Row>
+        <InputElement<FormState>
+          className="flex-grow rounded-r-none border-r-0"
+          fieldPath={fieldPath}
+          id={`${translationPrefix}.query`}
+          testId={testId}
+          type="search"
+        />
+
+        <button
+          className="icon-search w-[--input-height] rounded-r bg-tweaked-brand text-2xl text-white"
+          type="submit"
+          aria-label={t('search.search')}
+          title={t('search.search')}
+        />
+      </Row>
+
+      <ValidationErrorList fieldPath={fieldPath} />
+    </Column>
+  );
+};

ui/src/components/common/search/SearchBar/SearchQueryFilter.tsx

@@ -0,0 +1,2 @@
+export * from './ExtraFiltersToggle';
+export * from './SearchQueryFilter';

ui/src/components/common/search/SearchBar/index.ts

@@ -61,14 +61,12 @@ export const useSearch = () => {
    * Pushes selected search conditions and live filters to query string.
    * This will trigger GraphQL request, if the searchConditions have changed.
    */
-  const handleSearch = (state?: SearchNavigationState) => {
-    const combinedParameters = {
-      ...searchConditions,
-      ...queryParameters.filter,
-    };
-
+  const handleSearch = (
+    combinedFilters: typeof searchConditions,
+    state?: SearchNavigationState,
+  ) => {
     setMultipleParametersToUrlQuery({
-      parameters: mapObjectToQueryParameterObjects(combinedParameters),
+      parameters: mapObjectToQueryParameterObjects(combinedFilters),
       pathname: `${basePath}/search`,
       state,
     });

ui/src/components/common/search/useSearch.ts

@@ -5,50 +5,27 @@ import {
 } from '../../../generated/graphql';
 import { useUrlQuery } from '../../../hooks';
 import { Priority } from '../../../types/enums';
-import {
-  AllOptionEnum,
-  DisplayedSearchResultType,
-  SearchConditions,
-} from '../../../utils';
+import { AllOptionEnum, DisplayedSearchResultType } from '../../../utils';
 
 export type FilterConditions = {
   displayedType: DisplayedSearchResultType;
 };
 
-/**
- * Search parameter object with search conditions and filter
- * conditions separately
- */
-export type SearchParameters = {
-  search: SearchConditions;
-  filter: FilterConditions;
-};
-
-/**
- * Query string object where parameters are in string format
- */
-export type QueryStringParameters = {
-  priorities: string;
-  label: string;
-  primaryVehicleMode?: string;
-  typeOfLine?: string;
-  displayedType: string;
+export type SearchConditions = {
+  query: string;
+  priorities: Array<Priority>;
+  transportMode: Array<ReusableComponentsVehicleModeEnum | AllOptionEnum>;
+  typeOfLine: RouteTypeOfLineEnum | AllOptionEnum;
+  observationDate: DateTime;
 };
 
-/**
- * Query string object where parameters are deserialized and validated
- * in their correct format
- */
-export type DeserializedQueryStringParameters = {
-  priorities: ReadonlyArray<Priority>;
-  label: string;
-  primaryVehicleMode?: ReusableComponentsVehicleModeEnum | AllOptionEnum;
-  typeOfLine?: RouteTypeOfLineEnum | AllOptionEnum;
-  displayedType: DisplayedSearchResultType;
+export type QueryParameters = {
+  search: SearchConditions;
+  filter: FilterConditions;
 };
 
 export enum SearchQueryParameterNames {
-  Label = 'label',
+  Query = 'query',
   Priorities = 'priorities',
   TransportMode = 'transportMode',
   DisplayedType = 'displayedType',
@@ -57,29 +34,31 @@ export enum SearchQueryParameterNames {
 }
 
 const DEFAULT_PRIORITIES = [Priority.Standard];
-const DEFAULT_TRANSPORT_MODE = AllOptionEnum.All;
+const DEFAULT_TRANSPORT_MODE = [AllOptionEnum.All];
 const DEFAULT_TYPE_OF_LINE = AllOptionEnum.All;
 const DEFAULT_DISPLAYED_DATA = DisplayedSearchResultType.Lines;
 const DEFAULT_LABEL = '';
 const DEFAULT_OBSERVATION_DATE = DateTime.now().startOf('day');
 
-export const useSearchQueryParser = () => {
+export const useSearchQueryParser = (): QueryParameters => {
   const {
     getStringParamFromUrlQuery,
     getPriorityArrayFromUrlQuery,
     getTransportModeArrayFromUrlQuery,
     getEnumFromUrlQuery,
     getDateTimeFromUrlQuery,
   } = useUrlQuery();
-  const label =
-    getStringParamFromUrlQuery(SearchQueryParameterNames.Label) ??
+  const query =
+    getStringParamFromUrlQuery(SearchQueryParameterNames.Query) ??
     DEFAULT_LABEL;
 
   const priorities =
     getPriorityArrayFromUrlQuery(SearchQueryParameterNames.Priorities) ??
     DEFAULT_PRIORITIES;
 
-  const transportMode =
+  const transportMode: Array<
+    ReusableComponentsVehicleModeEnum | AllOptionEnum
+  > =
     getTransportModeArrayFromUrlQuery(
       SearchQueryParameterNames.TransportMode,
     ) ?? DEFAULT_TRANSPORT_MODE;
@@ -101,7 +80,7 @@ export const useSearchQueryParser = () => {
 
   return {
     search: {
-      label,
+      query,
       priorities,
       transportMode,
       typeOfLine,

ui/src/components/common/search/useSearchQueryParser.ts

@@ -0,0 +1 @@
+export * from './mapSearchConditions';