Lag use metode for janzz titler

src/api/stillings-api/hentJanzzyrker.ts

@@ -0,0 +1,30 @@
+// src/api/stilling-api/janzz-api.ts
+
+import useSWR from 'swr';
+import { getAPIwithSchema } from '../fetcher';
+import { z } from 'zod';
+
+export const hentJanzzYrkerEndepunkt = '/stilling-api/rekrutteringsbistand/api/v1/janzz-yrker';
+
+export const janzzStillingSchema = z.object({
+    label: z.string(),
+    konseptId: z.number(),
+});
+
+const hentJanzzYrkerSchema = z.array(janzzStillingSchema);
+
+export type JanzzStillingDTO = z.infer<typeof janzzStillingSchema>;
+export type HentJanzzYrkerDTO = z.infer<typeof hentJanzzYrkerSchema>;
+
+export const useHentJanzzYrker = (query: string) => {
+    const shouldFetch = query.length > 1;
+    const endpoint = shouldFetch
+        ? `${hentJanzzYrkerEndepunkt}?query=${encodeURIComponent(query)}`
+        : null;
+    return useSWR(endpoint, getAPIwithSchema(hentJanzzYrkerSchema));
+};
+
+export interface JanzzStilling {
+    label: string;
+    konseptId: number;
+}

src/stilling/stilling/edit/om-stillingen/janzz/Janzz.tsx

@@ -1,12 +1,13 @@
-import React, { FunctionComponent, useEffect, useState, useCallback } from 'react';
+// components/Janzz.tsx
+
+import React, { FunctionComponent, useState } from 'react';
 import css from './Janzz.module.css';
-import { ikkeLastet, Nettressurs, Nettstatus } from 'felles/nettressurs';
-import { fetchJanzzYrker, JanzzStilling } from '../../../../api/api';
-import capitalizeEmployerName from '../../endre-arbeidsgiver/capitalizeEmployerName';
 import { SET_EMPLOYMENT_JOBTITLE, SET_JANZZ } from '../../../adDataReducer';
 import { useDispatch, useSelector } from 'react-redux';
 import { State } from '../../../../redux/store';
 import { UNSAFE_Combobox as UnsafeCombobox } from '@navikt/ds-react';
+import capitalizeEmployerName from '../../endre-arbeidsgiver/capitalizeEmployerName';
+import { useHentJanzzYrker } from '../../../../../api/stillings-api/hentJanzzyrker';
 
 type Props = {
     tittel: string;
@@ -17,33 +18,16 @@ const Janzz: FunctionComponent<Props> = ({ tittel }) => {
     const yrkestittelError = useSelector((state: State) => state.adValidation.errors.yrkestittel);
 
     const [input, setInput] = useState<string>(tittel);
-    const [suggestions, setSuggestions] = useState<Nettressurs<JanzzStilling[]>>(ikkeLastet());
 
-    const hentJanzzYrker = useCallback(async (typeahead: string) => {
-        setSuggestions({ kind: Nettstatus.LasterInn });
-        try {
-            const response = await fetchJanzzYrker(typeahead);
-            setSuggestions({ kind: Nettstatus.Suksess, data: response });
-        } catch (e: any) {
-            setSuggestions({ kind: Nettstatus.Feil, error: e });
-        }
-    }, []);
-
-    useEffect(() => {
-        if (input.length > 1) {
-            hentJanzzYrker(input);
-        } else {
-            setSuggestions(ikkeLastet());
-        }
-    }, [input, hentJanzzYrker]);
+    const { data: suggestions, isLoading, error } = useHentJanzzYrker(input);
 
     const onChange = (event: React.ChangeEvent<HTMLInputElement> | null, value?: string) => {
         setInput(event?.target?.value || value || '');
     };
 
     const onToggleSelected = (option: string, isSelected: boolean) => {
-        if (isSelected && suggestions.kind === Nettstatus.Suksess) {
-            const found = suggestions.data.find(
+        if (isSelected && suggestions) {
+            const found = suggestions.find(
                 (forslag) => forslag.label.toLowerCase() === option.toLowerCase()
             );
             if (found) {
@@ -68,22 +52,17 @@ const Janzz: FunctionComponent<Props> = ({ tittel }) => {
         }
     };
 
-    const feilmeldingTilBruker =
-        suggestions.kind === Nettstatus.Feil ? suggestions.error.message : undefined;
+    const feilmeldingTilBruker = error ? error.message : undefined;
 
     return (
         <div>
             <UnsafeCombobox
                 label="Yrkestittel som vises på stillingen"
                 value={input === 'Stilling uten valgt jobbtittel' ? '' : input}
-                options={
-                    suggestions.kind === Nettstatus.Suksess
-                        ? suggestions.data.map((f) => f.label)
-                        : []
-                }
+                options={suggestions ? suggestions.map((f) => f.label) : []}
                 onChange={onChange}
                 onToggleSelected={onToggleSelected}
-                isLoading={suggestions.kind === Nettstatus.LasterInn}
+                isLoading={isLoading}
                 error={yrkestittelError || feilmeldingTilBruker}
                 className={css.typeahead}
                 aria-labelledby="endre-stilling-styrk"