AKR(Frontend): Move to new ComboBox implementation [deploy]

pkoivisto · pkoivisto · commit a6733ecdb1ae · 2023-10-26T13:03:24.000+03:00
diff --git a/frontend/packages/akr/src/components/clerkTranslator/authorisation/AuthorisationFields.tsx b/frontend/packages/akr/src/components/clerkTranslator/authorisation/AuthorisationFields.tsx
@@ -1,7 +1,6 @@
 import dayjs, { Dayjs } from 'dayjs';
 import { ChangeEvent, useEffect, useState } from 'react';
 import {
-  AutocompleteValue,
   ComboBox,
   CustomButton,
   CustomSwitch,
@@ -91,8 +90,8 @@ export const AuthorisationFields = ({
       setIsAuthorisationDataChanged(true);
     };
 
-  const handleBasisChange = ({}, value: AutocompleteValue) => {
-    const basis = value?.value as AuthorisationBasis;
+  const handleBasisChange = (value?: string) => {
+    const basis = value as AuthorisationBasis;
     const examinationDate =
       basis === AuthorisationBasisEnum.AUT
         ? authorisation.examinationDate
@@ -108,8 +107,8 @@ export const AuthorisationFields = ({
     setIsAuthorisationDataChanged(true);
   };
 
-  const handleTermBeginDateChange = ({}, value: AutocompleteValue) => {
-    const termBeginDate = value?.value ? dayjs(value?.value) : undefined;
+  const handleTermBeginDateChange = (value?: string) => {
+    const termBeginDate = value ? dayjs(value) : undefined;
     const termEndDate = getNewTermEndDate(authorisation.basis, termBeginDate);
 
     setAuthorisation({
@@ -131,10 +130,10 @@ export const AuthorisationFields = ({
       : undefined;
   };
 
-  const handleExaminationDateChange = ({}, value: AutocompleteValue) => {
+  const handleExaminationDateChange = (value?: string) => {
     setAuthorisation({
       ...authorisation,
-      examinationDate: value?.value ? dayjs(value?.value) : undefined,
+      examinationDate: value ? dayjs(value) : undefined,
     });
     setIsAuthorisationDataChanged(true);
   };
diff --git a/frontend/packages/akr/src/components/clerkTranslator/filters/ClerkTranslatorAutocompleteFilters.tsx b/frontend/packages/akr/src/components/clerkTranslator/filters/ClerkTranslatorAutocompleteFilters.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
 import {
-  AutocompleteValue,
   ComboBox,
   CustomTextField,
   H3,
@@ -62,9 +61,8 @@ export const ClerkTranslatorAutocompleteFilters = () => {
   };
 
   const handleFilterChange =
-    (filter: keyof ClerkTranslatorFilter) =>
-    ({}, value: AutocompleteValue) => {
-      dispatch(addClerkTranslatorFilter({ [filter]: value?.value }));
+    (filter: keyof ClerkTranslatorFilter) => (value?: string) => {
+      dispatch(addClerkTranslatorFilter({ [filter]: value }));
       dispatch(setPage(0));
     };
   const handleFromLanguageChange = (language?: string) => {
diff --git a/frontend/packages/akr/src/components/clerkTranslator/filters/ClerkTranslatorEmailFilter.tsx b/frontend/packages/akr/src/components/clerkTranslator/filters/ClerkTranslatorEmailFilter.tsx
@@ -1,4 +1,4 @@
-import { AutocompleteValue, ComboBox, H3 } from 'shared/components';
+import { ComboBox, H3 } from 'shared/components';
 import { TextFieldVariant } from 'shared/enums';
 
 import { useAppTranslation } from 'configs/i18n';
@@ -19,9 +19,8 @@ export const ClerkTranslatorEmailFilter = () => {
   const dispatch = useAppDispatch();
 
   const handleFilterChange =
-    (filter: keyof ClerkTranslatorFilter) =>
-    ({}, value: AutocompleteValue) => {
-      dispatch(addClerkTranslatorFilter({ [filter]: value?.value }));
+    (filter: keyof ClerkTranslatorFilter) => (value?: string) => {
+      dispatch(addClerkTranslatorFilter({ [filter]: value }));
       dispatch(setPage(0));
     };
 
diff --git a/frontend/packages/akr/src/components/clerkTranslator/new/NewTranslatorBasicInformation.tsx b/frontend/packages/akr/src/components/clerkTranslator/new/NewTranslatorBasicInformation.tsx
@@ -1,5 +1,4 @@
 import { ChangeEvent } from 'react';
-import { AutocompleteValue } from 'shared/components';
 
 import { ClerkTranslatorDetailsFields } from 'components/clerkTranslator/overview/ClerkTranslatorDetailsFields';
 import { useAppDispatch, useAppSelector } from 'configs/redux';
@@ -27,9 +26,8 @@ export const NewTranslatorBasicInformation = ({
     };
 
   const handleComboBoxChange =
-    (field: keyof ClerkTranslatorBasicInformation) =>
-    ({}, autocompleteValue?: AutocompleteValue) => {
-      handleFieldChange(field, autocompleteValue?.value);
+    (field: keyof ClerkTranslatorBasicInformation) => (value?: string) => {
+      handleFieldChange(field, value);
     };
 
   const handleCheckBoxChange =
diff --git a/frontend/packages/akr/src/components/clerkTranslator/overview/ClerkTranslatorDetails.tsx b/frontend/packages/akr/src/components/clerkTranslator/overview/ClerkTranslatorDetails.tsx
@@ -1,5 +1,4 @@
 import { ChangeEvent, useCallback, useEffect, useState } from 'react';
-import { AutocompleteValue } from 'shared/components';
 import { APIResponseStatus, Severity, Variant } from 'shared/enums';
 import { useDialog, useToast } from 'shared/hooks';
 import { StringUtils } from 'shared/utils';
@@ -87,9 +86,8 @@ export const ClerkTranslatorDetails = () => {
     };
 
   const handleComboBoxChange =
-    (field: keyof ClerkTranslatorBasicInformation) =>
-    ({}, autocompleteValue?: AutocompleteValue) => {
-      handleFieldChange(field, autocompleteValue?.value);
+    (field: keyof ClerkTranslatorBasicInformation) => (value?: string) => {
+      handleFieldChange(field, value);
     };
 
   const handleCheckBoxChange =
diff --git a/frontend/packages/akr/src/components/clerkTranslator/overview/ClerkTranslatorDetailsFields.tsx b/frontend/packages/akr/src/components/clerkTranslator/overview/ClerkTranslatorDetailsFields.tsx
@@ -1,7 +1,6 @@
 import { FormHelperTextProps } from '@mui/material';
 import { ChangeEvent, useState } from 'react';
 import {
-  AutocompleteValue,
   ComboBox,
   CustomSwitch,
   CustomTextField,
@@ -129,7 +128,7 @@ export const ClerkTranslatorDetailsFields = ({
   ) => (event: ChangeEvent<HTMLTextAreaElement>) => void;
   onComboBoxChange: (
     field: keyof ClerkTranslatorBasicInformation
-  ) => ({}, autocompleteValue?: AutocompleteValue) => void;
+  ) => (value?: string) => void;
   onCheckBoxChange: (
     field: keyof ClerkTranslatorBasicInformation
   ) => (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;
diff --git a/frontend/packages/akr/src/components/publicTranslator/filters/PublicTranslatorFilters.tsx b/frontend/packages/akr/src/components/publicTranslator/filters/PublicTranslatorFilters.tsx
@@ -5,12 +5,12 @@ import {
   KeyboardEvent,
   SetStateAction,
   SyntheticEvent,
+  useCallback,
   useMemo,
   useRef,
   useState,
 } from 'react';
 import {
-  AutocompleteValue,
   Caption,
   ComboBox,
   CustomButton,
@@ -83,7 +83,7 @@ export const PublicTranslatorFilters = ({
     fromLang: '',
     toLang: '',
     name: '',
-    town: null,
+    town: '',
   };
   const debounce = useDebounce(300);
 
@@ -161,31 +161,18 @@ export const PublicTranslatorFilters = ({
       setSearchButtonDisabled(false);
     };
 
-  const handleComboboxFilterChange =
-    (filterName: SearchFilter) =>
-    (
-      {},
-      value: AutocompleteValue,
-      reason:
-        | 'selectOption'
-        | 'createOption'
-        | 'removeOption'
-        | 'blur'
-        | 'clear'
-    ) => {
-      if (reason === 'clear') {
-        setFilters((prevState) => ({ ...prevState, [filterName]: '' }));
-        setValues((prevState) => ({ ...prevState, [filterName]: null }));
-      } else {
-        setFilters((prevState) => ({
-          ...prevState,
-          [filterName]: value?.value || '',
-        }));
-        setValues((prevState) => ({ ...prevState, [filterName]: value }));
-      }
-      dispatch(removePublicTranslatorFilterError(filterName));
-      setSearchButtonDisabled(false);
-    };
+  const handleTownChange = (value?: string) => {
+    setFilters((prevState) => ({
+      ...prevState,
+      [SearchFilter.Town]: value || '',
+    }));
+    setValues((prevState) => ({
+      ...prevState,
+      [SearchFilter.Town]: value || '',
+    }));
+    dispatch(removePublicTranslatorFilterError(SearchFilter.Town));
+    setSearchButtonDisabled(false);
+  };
 
   const onLanguageChange =
     (languageField: SearchFilter.FromLang | SearchFilter.ToLang) =>
@@ -240,16 +227,24 @@ export const PublicTranslatorFilters = ({
     }
   };
 
-  const townAsComboboxOption = (publicTown: PublicTown) => {
-    const country = publicTown.country
-      ? translateCountry(publicTown.country)
-      : '';
-    const value = `${publicTown.name}::${publicTown.country ?? ''}`;
-    const townName = isCurrentLangSv() ? publicTown.nameSv : publicTown.name;
-    const label = country ? `${townName} (${country})` : townName;
+  const townAsComboboxOption = useCallback(
+    (publicTown: PublicTown) => {
+      const country = publicTown.country
+        ? translateCountry(publicTown.country)
+        : '';
+      const value = `${publicTown.name}::${publicTown.country ?? ''}`;
+      const townName = isCurrentLangSv() ? publicTown.nameSv : publicTown.name;
+      const label = country ? `${townName} (${country})` : townName;
 
-    return { value, label };
-  };
+      return { value, label };
+    },
+    [translateCountry]
+  );
+
+  const memoizedTownOptions = useMemo(
+    () => towns.map(townAsComboboxOption),
+    [townAsComboboxOption, towns]
+  );
 
   const renderPhoneBottomAppBar = () =>
     isPhone &&
@@ -359,13 +354,19 @@ export const PublicTranslatorFilters = ({
           <ComboBox
             data-testid="public-translator-filters__town-combobox"
             {...getComboBoxAttributes(SearchFilter.Town)}
-            value={values.town ?? null}
+            value={
+              values.town
+                ? memoizedTownOptions.filter(
+                    ({ value }) => values.town === value
+                  )[0]
+                : null
+            }
             placeholder={t('town.placeholder')}
             label={t('town.placeholder')}
             id="filters-town"
-            values={towns.map(townAsComboboxOption)}
+            values={memoizedTownOptions}
             onKeyUp={handleKeyUp}
-            onChange={handleComboboxFilterChange(SearchFilter.Town)}
+            onChange={handleTownChange}
           />
         </div>
       </div>
diff --git a/frontend/packages/akr/src/interfaces/publicTranslator.ts b/frontend/packages/akr/src/interfaces/publicTranslator.ts
@@ -1,5 +1,3 @@
-import { AutocompleteValue } from 'shared/components';
-
 import { SearchFilter } from 'enums/app';
 import { LanguagePair, LanguagePairsDict } from 'interfaces/languagePair';
 import { WithId } from 'interfaces/with';
@@ -24,7 +22,7 @@ export interface PublicTranslatorFilterValues {
   fromLang: string;
   toLang: string;
   name: string;
-  town: AutocompleteValue;
+  town: string;
 }
 
 export interface PublicTown {
