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

Author: pkoivisto

frontend/packages/otr/src/components/clerkInterpreter/filters/ClerkInterpreterAutocompleteFilters.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
 import {
-  AutocompleteValue,
   ComboBox,
   CustomTextField,
   H3,
@@ -66,9 +65,9 @@ export const ClerkInterpreterAutocompleteFilters = ({
 
   const handleFilterChange =
     (filter: keyof Omit<ClerkInterpreterFilters, 'fromLang' | 'toLang'>) =>
-    ({}, value: AutocompleteValue) => {
+    (value?: string) => {
       setPage(0);
-      dispatch(addClerkInterpreterFilter({ [filter]: value?.value }));
+      dispatch(addClerkInterpreterFilter({ [filter]: value }));
     };
   const handleLanguageFilterChange =
     (filter: 'fromLang' | 'toLang') => (language?: string) => {

frontend/packages/otr/src/components/clerkInterpreter/qualification/QualificationFields.tsx

@@ -1,7 +1,6 @@
 import dayjs, { Dayjs } from 'dayjs';
 import { ChangeEvent, useEffect, useState } from 'react';
 import {
-  AutocompleteValue,
   ComboBox,
   CustomButton,
   CustomSwitch,
@@ -86,8 +85,8 @@ export const QualificationFields = ({
       setIsQualificationDataChanged(true);
     };
 
-  const handleExaminationTypeChange = ({}, value: AutocompleteValue) => {
-    const examinationType = value?.value as ExaminationType;
+  const handleExaminationTypeChange = (value?: string) => {
+    const examinationType = value as ExaminationType;
 
     setQualification({
       ...qualification,
@@ -96,9 +95,9 @@ export const QualificationFields = ({
     setIsQualificationDataChanged(true);
   };
 
-  const handleBeginDateChange = ({}, value: AutocompleteValue) => {
+  const handleBeginDateChange = (value?: string) => {
     const PERIOD_OF_VALIDITY = 5;
-    const beginDate = value ? dayjs(value?.value) : undefined;
+    const beginDate = value ? dayjs(value) : undefined;
     const endDate = beginDate?.add(PERIOD_OF_VALIDITY, 'year');
 
     setQualification({

frontend/packages/otr/src/components/publicInterpreter/filters/PublicInterpreterFilters.tsx

@@ -10,7 +10,6 @@ import {
   useState,
 } from 'react';
 import {
-  AutocompleteValue,
   ComboBox,
   CustomButton,
   H3,
@@ -71,7 +70,7 @@ export const PublicInterpreterFilters = ({
     fromLang: '',
     toLang: '',
     name: '',
-    region: null,
+    region: '',
   };
 
   // State
@@ -133,30 +132,17 @@ export const PublicInterpreterFilters = ({
       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 }));
-      }
-      setSearchButtonDisabled(false);
-    };
+  const handleRegionChange = (region?: string) => {
+    setFilters((prevState) => ({
+      ...prevState,
+      [SearchFilter.Region]: region || '',
+    }));
+    setValues((prevState) => ({
+      ...prevState,
+      [SearchFilter.Region]: region || '',
+    }));
+    setSearchButtonDisabled(false);
+  };
 
   const handleLanguageChange =
     (languageField: SearchFilter.FromLang | SearchFilter.ToLang) =>
@@ -285,8 +271,17 @@ export const PublicInterpreterFilters = ({
           <ComboBox
             data-testid="public-interpreter-filters__region-combobox"
             {...getComboBoxAttributes(SearchFilter.Region)}
-            value={values[SearchFilter.Region]}
-            onChange={handleComboboxFilterChange(SearchFilter.Region)}
+            value={
+              values[SearchFilter.Region]
+                ? {
+                    label: RegionUtils.translateRegion(
+                      values[SearchFilter.Region]
+                    ),
+                    value: values[SearchFilter.Region],
+                  }
+                : null
+            }
+            onChange={handleRegionChange}
             placeholder={t('region.placeholder')}
             label={t('region.placeholder')}
             id="filters-region"

frontend/packages/otr/src/interfaces/publicInterpreter.ts

@@ -1,4 +1,3 @@
-import { AutocompleteValue } from 'shared/components';
 import { WithId } from 'shared/interfaces';
 
 import { LanguagePair } from 'interfaces/languagePair';
@@ -24,5 +23,5 @@ export interface PublicInterpreterFilterValues {
   fromLang: string;
   toLang: string;
   name: string;
-  region: AutocompleteValue;
+  region: string;
 }