Implementert error og loading håndtering

src/demo/setup-demo-mock.ts

@@ -45,6 +45,7 @@ import {
     hentStandardInnsatsgruppe,
     hentDemoState,
     DemoData,
+    settArbeidssokerPeriode,
 } from './demo-state';
 
 import { telemetryUrl } from '../innhold/lenker';
@@ -175,7 +176,14 @@ export const demo_handlers = [
 
     rest.get(REAKTIVERING_URL, reaktiveringGetResolver),
     rest.post(REAKTIVERING_URL, reaktiveringPostResolver),
-    rest.post(FULLFOER_REAKTIVERING_URL, (req, res, ctx) => {
+    rest.post(FULLFOER_REAKTIVERING_URL, async (req, res, ctx) => {
+        const delay = new Promise((resolve) =>
+            setTimeout(() => {
+                settArbeidssokerPeriode('aktiv');
+                resolve(null);
+            }, 1000),
+        );
+        await delay;
         return res(ctx.status(204));
     }),
 

src/komponenter/reaktivering/reaktivering-aktuelt.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Alert, BodyShort, Button, Heading, Link } from '@navikt/ds-react';
+import { Alert, BodyShort, Heading, Link } from '@navikt/ds-react';
 
 import { useAmplitudeData } from '../hent-initial-data/amplitude-provider';
 import { useMeldeplikt } from '../../contexts/meldeplikt';
@@ -12,8 +12,7 @@ import SisteMeldekortVidereRegistrertValg from './siste-meldekort-videre-registr
 
 import styles from '../../innhold/innhold.module.css';
 import spacingStyles from '../../spacing.module.css';
-import { fetchToJson } from '../../ducks/api-utils';
-import { FULLFOER_REAKTIVERING_URL, requestConfig } from '../../ducks/api';
+import ReaktiveringKnapp from './reaktivering-knapp';
 
 interface Props {
     handleIkkeReaktivering: (event: React.SyntheticEvent) => void;
@@ -30,12 +29,6 @@ const ReaktiveringAktuelt = (props: Props) => {
         window.location.assign(dialogLenke);
     };
 
-    const fullfoerReaktivering = async () =>
-        await fetchToJson(FULLFOER_REAKTIVERING_URL, {
-            ...requestConfig(),
-            method: 'POST',
-        });
-
     return (
         <section className={`${styles.limit} ${spacingStyles.blokkM}`}>
             <ErRendret loggTekst="Rendrer tema: kan reaktiveres" />
@@ -46,9 +39,7 @@ const ReaktiveringAktuelt = (props: Props) => {
                 <div>
                     <SisteMeldekortVidereRegistrertValg meldeplikt={meldeplikt} />
                     <BodyShort className={spacingStyles.blokkS}>
-                        <Button variant="primary" onClick={fullfoerReaktivering}>
-                            Registrer deg som arbeidssøker
-                        </Button>
+                        <ReaktiveringKnapp />
                     </BodyShort>
                     <BodyShort className={spacingStyles.blokkXs}>
                         <Link href={dialogLenke} onClick={handleIkkeReaktivering}>

src/komponenter/reaktivering/reaktivering-knapp.tsx

@@ -0,0 +1,40 @@
+import { fetchToJson } from '../../ducks/api-utils';
+import { FULLFOER_REAKTIVERING_URL, requestConfig } from '../../ducks/api';
+import { Alert, Button } from '@navikt/ds-react';
+import { useState } from 'react';
+import spacing from '../../spacing.module.css';
+
+const ReaktiveringsKnapp = () => {
+    const [showError, setShowError] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const fullfoerReaktivering = async () => {
+        setLoading(true);
+        setShowError(false);
+        try {
+            await fetchToJson(FULLFOER_REAKTIVERING_URL, {
+                ...requestConfig(),
+                method: 'POST',
+            });
+            window.location.reload();
+        } catch (e) {
+            setShowError(true);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <>
+            <Button variant="primary" onClick={fullfoerReaktivering} loading={loading}>
+                Registrer deg som arbeidssøker
+            </Button>
+            {showError && (
+                <Alert variant={'error'} className={spacing.mt1}>
+                    Noe gikk dessverre galt. Prøv igjen.
+                </Alert>
+            )}
+        </>
+    );
+};
+
+export default ReaktiveringsKnapp;