AKR(Frontend): Migrate to updated LanguageSelect [deploy]

Opetushallitus · Oct 21, 2023 · cd29f53 · cd29f53
1 parent f5babb7
commit cd29f53
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 14 deletions.
diff --git a/frontend/packages/akr/package.json b/frontend/packages/akr/package.json
@@ -22,6 +22,6 @@
     "akr:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.9.28"
+    "shared": "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.10.0"
   }
 }
diff --git a/frontend/packages/akr/src/components/clerkTranslator/authorisation/AuthorisationFields.tsx b/frontend/packages/akr/src/components/clerkTranslator/authorisation/AuthorisationFields.tsx
@@ -80,13 +80,12 @@ export const AuthorisationFields = ({
   }, [setAuthorisation]);
 
   const handleLanguageSelectChange =
-    (fieldName: string) =>
-    ({}, value: AutocompleteValue) => {
+    (fieldName: string) => (language?: string) => {
       setAuthorisation({
         ...authorisation,
         languagePair: {
           ...authorisation.languagePair,
-          [fieldName]: value?.value,
+          [fieldName]: language,
         },
       });
       setIsAuthorisationDataChanged(true);
@@ -207,7 +206,7 @@ export const AuthorisationFields = ({
               label={t('fieldPlaceholders.from')}
               variant={TextFieldVariant.Outlined}
               value={getLanguageSelectValue(authorisation.languagePair.from)}
-              onChange={handleLanguageSelectChange('from')}
+              onLanguageChange={handleLanguageSelectChange('from')}
               languages={AuthorisationUtils.selectableLanguagesForLanguageFilter(
                 AuthorisationUtils.getKoodistoLangKeys(),
                 authorisation.languagePair.to
@@ -226,7 +225,7 @@ export const AuthorisationFields = ({
               label={t('fieldPlaceholders.to')}
               variant={TextFieldVariant.Outlined}
               value={getLanguageSelectValue(authorisation.languagePair.to)}
-              onChange={handleLanguageSelectChange('to')}
+              onLanguageChange={handleLanguageSelectChange('to')}
               languages={AuthorisationUtils.selectableLanguagesForLanguageFilter(
                 AuthorisationUtils.getKoodistoLangKeys(),
                 authorisation.languagePair.from

diff --git a/...ackages/akr/src/components/clerkTranslator/filters/ClerkTranslatorAutocompleteFilters.tsx b/...ackages/akr/src/components/clerkTranslator/filters/ClerkTranslatorAutocompleteFilters.tsx
@@ -67,6 +67,14 @@ export const ClerkTranslatorAutocompleteFilters = () => {
       dispatch(addClerkTranslatorFilter({ [filter]: value?.value }));
       dispatch(setPage(0));
     };
+  const handleFromLanguageChange = (language?: string) => {
+    dispatch(addClerkTranslatorFilter({ fromLang: language }));
+    dispatch(setPage(0));
+  };
+  const handleToLanguageChange = (language?: string) => {
+    dispatch(addClerkTranslatorFilter({ toLang: language }));
+    dispatch(setPage(0));
+  };
 
   const getPermissionToPublishSelectValues = () =>
     Object.values(PermissionToPublish).map((v) => ({
@@ -93,7 +101,7 @@ export const ClerkTranslatorAutocompleteFilters = () => {
             label={t('languagePair.fromPlaceholder')}
             value={getLanguageSelectValue(filters.fromLang)}
             variant={TextFieldVariant.Outlined}
-            onChange={handleFilterChange('fromLang')}
+            onLanguageChange={handleFromLanguageChange}
             languages={AuthorisationUtils.selectableLanguagesForLanguageFilter(
               langs.from,
               filters.toLang
@@ -108,7 +116,7 @@ export const ClerkTranslatorAutocompleteFilters = () => {
             label={t('languagePair.toPlaceholder')}
             value={getLanguageSelectValue(filters.toLang)}
             variant={TextFieldVariant.Outlined}
-            onChange={handleFilterChange('toLang')}
+            onLanguageChange={handleToLanguageChange}
             languages={AuthorisationUtils.selectableLanguagesForLanguageFilter(
               langs.to,
               filters.fromLang

diff --git a/frontend/packages/akr/src/components/publicTranslator/filters/PublicTranslatorFilters.tsx b/frontend/packages/akr/src/components/publicTranslator/filters/PublicTranslatorFilters.tsx
@@ -80,8 +80,8 @@ export const PublicTranslatorFilters = ({
   const [filters, setFilters] = useState(defaultFiltersState);
   const [searchButtonDisabled, setSearchButtonDisabled] = useState(false);
   const defaultValuesState: PublicTranslatorFilterValues = {
-    fromLang: null,
-    toLang: null,
+    fromLang: '',
+    toLang: '',
     name: '',
     town: null,
   };
@@ -187,6 +187,21 @@ export const PublicTranslatorFilters = ({
       setSearchButtonDisabled(false);
     };
 
+  const onLanguageChange =
+    (languageField: SearchFilter.FromLang | SearchFilter.ToLang) =>
+    (language?: string) => {
+      setFilters((prevState) => ({
+        ...prevState,
+        [languageField]: language || '',
+      }));
+      setValues((prevState) => ({
+        ...prevState,
+        [languageField]: language || '',
+      }));
+      dispatch(removePublicTranslatorFilterError(languageField));
+      setSearchButtonDisabled(false);
+    };
+
   const handleTextFieldFilterChange =
     (filterName: SearchFilter) =>
     (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
@@ -207,7 +222,6 @@ export const PublicTranslatorFilters = ({
     value: values[fieldName] as AutocompleteValue,
     autoHighlight: true,
     variant: TextFieldVariant.Outlined,
-    onChange: handleComboboxFilterChange(fieldName),
   });
 
   const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {
@@ -290,6 +304,7 @@ export const PublicTranslatorFilters = ({
               primaryLanguages={AuthorisationUtils.primaryLangs}
               excludedLanguage={filters.toLang}
               translateLanguage={translateLanguage}
+              onLanguageChange={onLanguageChange(SearchFilter.FromLang)}
             />
             <LanguageSelect
               data-testid="public-translator-filters__to-language-select"
@@ -308,6 +323,7 @@ export const PublicTranslatorFilters = ({
               primaryLanguages={AuthorisationUtils.primaryLangs}
               excludedLanguage={filters.fromLang}
               translateLanguage={translateLanguage}
+              onLanguageChange={onLanguageChange(SearchFilter.ToLang)}
             />
           </Box>
         </div>
@@ -333,6 +349,7 @@ export const PublicTranslatorFilters = ({
             id="filters-town"
             values={towns.map(townAsComboboxOption)}
             onKeyUp={handleKeyUp}
+            onChange={handleComboboxFilterChange(SearchFilter.Town)}
           />
         </div>
       </div>

diff --git a/frontend/packages/akr/src/interfaces/publicTranslator.ts b/frontend/packages/akr/src/interfaces/publicTranslator.ts
@@ -21,8 +21,8 @@ export interface PublicTranslatorFilter {
 }
 
 export interface PublicTranslatorFilterValues {
-  fromLang: AutocompleteValue;
-  toLang: AutocompleteValue;
+  fromLang: string;
+  toLang: string;
   name: string;
   town: AutocompleteValue;
 }

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -2890,7 +2890,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.akr@workspace:packages/akr"
   dependencies:
-    shared: "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.9.28"
+    shared: "npm:@opetushallitus/kieli-ja-kaantajatutkinnot.shared@1.10.0"
   languageName: unknown
   linkType: soft