Fjern janzz fra minne dersom on toggle blir kalt uten verdi (#255)

* Fjern janzz fra minne dersom onToggle blir kalt uten verdi * LEgg på useEffect for å få med endringer i tittel i janzz combobox * Bump deploy * Fiks undefined janzz feil * Fiks undefined janzz feil * Fiks undefined janzz feil * Fiks undefined janzz feil * Tilbakestill til master * Bruk onblur til validering av janzz * Bruk onblur til validering av janzz * Endre feilmeldingstekst når yrkestittel ikke er gyldig * Fjern kommerntarer * Fjern kommerntarer * Legg til filter for ugyldige janzz * Pass på at onChange ikke resetter validering når den kjøres etter toggle * Forsøk comboboks janzz uten å bruke ref * Håndter deselection * Legg inn kommentar om hvorfor vi bruker option ref ved endring av komboboks for janzz
navikt · Nov 8, 2024 · 452ede0 · 452ede0
1 parent ef4f3f0
commit 452ede0
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 14 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -45,7 +45,7 @@ jobs:
     deploy-til-dev:
         name: Deploy til dev-gcp
         needs: bygg-og-push-docker-image
-        if: github.event_name == 'workflow_dispatch' || github.ref == 'refs/heads/master' || github.ref == 'refs/heads/bruk-styrk08Nav-på-gamle-stillinger'
+        if: github.event_name == 'workflow_dispatch' || github.ref == 'refs/heads/master' || github.ref == 'refs/heads/fjern-janzz-fra-minne-dersom-onToggle-blir-kalt-uten-verdi'
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v3

diff --git a/src/stilling/stilling/adValidationReducer.ts b/src/stilling/stilling/adValidationReducer.ts
@@ -144,10 +144,9 @@ function* validateLocationArea(): Generator<unknown, any, any> {
 function* validateYrkestittel(): Generator<unknown, any, any> {
     const state = yield select();
     const { categoryList } = state.adData;
-    console.log('validateYrkestittel SET_JANZZ', categoryList);
 
     if (valueIsNotSet(categoryList)) {
-        yield addValidationError({ field: 'yrkestittel', message: 'Yrkestittel mangler' });
+        yield addValidationError({ field: 'yrkestittel', message: 'Gyldig yrkestittel må velges' });
     } else {
         yield removeValidationError({ field: 'yrkestittel' });
     }

diff --git a/src/stilling/stilling/edit/om-stillingen/janzz/Janzz.tsx b/src/stilling/stilling/edit/om-stillingen/janzz/Janzz.tsx
@@ -1,6 +1,4 @@
-// components/Janzz.tsx
-
-import React, { FunctionComponent, useState } from 'react';
+import React, { FunctionComponent, useState, useRef } from 'react';
 import css from './Janzz.module.css';
 import { SET_EMPLOYMENT_JOBTITLE, SET_JANZZ } from '../../../adDataReducer';
 import { useDispatch, useSelector } from 'react-redux';
@@ -19,16 +17,33 @@ const Janzz: FunctionComponent<Props> = ({ tittel }) => {
     const yrkestittelError = useSelector((state: State) => state.adValidation.errors.yrkestittel);
 
     const [input, setInput] = useState<string>(tittel);
+    const [hasValidSelection, setHasValidSelection] = useState<boolean>(true);
+
+    // Må håndtere at onChange blir kalt når en onToggleSelection blir valgt i comboboxen
+    const optionSelectedRef = useRef<boolean>(false);
 
     const { data: suggestions, isLoading, error } = useHentJanzzYrker(input);
 
+    const filteredSuggestions = suggestions
+        ? suggestions
+              .filter((f) => f.styrk08 && f.styrk08.trim() !== '' && f.styrk08 !== '9999')
+              .map((f) => f.label)
+        : [];
+
     const onChange = (event: React.ChangeEvent<HTMLInputElement> | null, value?: string) => {
-        setInput(event?.target?.value || value || '');
+        const newValue = event?.target.value || value || '';
+        setInput(newValue);
+
+        if (optionSelectedRef.current) {
+            optionSelectedRef.current = false;
+        } else {
+            setHasValidSelection(false);
+        }
     };
 
-    const onToggleSelected = (option: string, isSelected: boolean) => {
-        if (isSelected && suggestions) {
-            const found = suggestions.find(
+    const onToggleSelected = (option: string, isSelected: boolean, isCustomOption: boolean) => {
+        if (isSelected) {
+            const found = suggestions?.find(
                 (forslag) => forslag.label.toLowerCase() === option.toLowerCase()
             );
             if (found) {
@@ -45,13 +60,23 @@ const Janzz: FunctionComponent<Props> = ({ tittel }) => {
                 ];
                 dispatch({ type: SET_JANZZ, kategori });
                 setInput(capitalizeEmployerName(found.label) || '');
+                setHasValidSelection(true);
+                optionSelectedRef.current = true;
             }
+        } else {
+            setHasValidSelection(false);
+            dispatch({ type: SET_JANZZ, kategori: undefined });
+        }
+    };
+
+    const onBlur = () => {
+        if (!hasValidSelection) {
+            dispatch({ type: SET_JANZZ, kategori: undefined });
         }
     };
 
     const feilmeldingTilBruker = error ? error.message : undefined;
 
-    // TODO: Fjern default tekster fra backend, slik at vi slipper å filterere de bort her
     return (
         <div>
             <UnsafeCombobox
@@ -62,14 +87,15 @@ const Janzz: FunctionComponent<Props> = ({ tittel }) => {
                         ? ''
                         : input
                 }
-                options={suggestions ? suggestions.map((f) => f.label) : []}
+                options={filteredSuggestions}
                 onChange={onChange}
                 onToggleSelected={onToggleSelected}
+                onBlur={onBlur}
                 isLoading={isLoading}
-                error={yrkestittelError || feilmeldingTilBruker}
+                error={!hasValidSelection ? yrkestittelError || feilmeldingTilBruker : undefined}
                 className={css.typeahead}
                 aria-labelledby="endre-stilling-styrk"
-                filteredOptions={suggestions ? suggestions.map((f) => f.label) : []}
+                filteredOptions={filteredSuggestions}
             />
         </div>
     );