🚧 Toggler alerts via Context

WIP: Få oppdatere status

Co-authored-by: Markus A. R. Johansen <markus.aleksander.rakil.johansen@nav.no>

frontend/src/index.tsx

@@ -1,19 +1,44 @@
 import CardsContainer from "./components/CardsContainer";
 import "@navikt/ds-css";
-import { Button, Search } from "@navikt/ds-react";
+import { Alert, Button, Search } from "@navikt/ds-react";
 import Header from "./components/Header";
 import { PlusIcon } from "@navikt/aksel-icons";
 import Filtermeny from "./components/Filtermeny";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Feilmelding } from "./interface";
+import { StatusContext } from "./pages/feil";
 
 export default function Home() {
   const navigate = useNavigate()
   
   const [feilmeldinger, setFeilmeldinger] = useState<Feilmelding[]>([]);
 
+  const [alert, setAlert] = useState(<></>)
+  
+  const status = useContext(StatusContext)
+
+  const toggleAlert = (status: number) => {
+    if (status === 0) {
+      console.log("oppdaget status var 0");
+      return
+    }
+    else if (status === 201) {
+      setAlert(<Alert variant="success">Woho</Alert>)
+    } else {
+      setAlert(<Alert variant="error">error</Alert>)
+    }
+
+    setTimeout(() => {
+      setAlert(<></>)
+    }, 3000);
+  }
+
+  useEffect(() => {
+    toggleAlert(status.status)   
+  })
+  
   /**
    * Henter alle feilmeldinger fra backend.
    * Bruker endepunktet /api/hentallefeil.
@@ -54,6 +79,7 @@ export default function Home() {
       <div className="flex grow">
         <Filtermeny/>
         <div className="grow bg-bg-subtle px-32 py-8 flex flex-col gap-10">
+          {alert}
           <div className="flex gap-12 items-end">
             <Search 
               label="Søkefelt"

frontend/src/pages/feil.tsx

@@ -1,17 +1,22 @@
 import "@navikt/ds-css";
 
 import { ArrowLeftIcon, BugIcon } from "@navikt/aksel-icons";
-import { Alert, Button, Heading, TextField, Textarea } from "@navikt/ds-react";
+import { Button, Heading, TextField, Textarea } from "@navikt/ds-react";
 import axios from "axios";
-import { useState } from "react";
+import { createContext, useState } from "react";
 import BildeOpplastning from "../components/BildeOpplastning";
 import Header from "../components/Header";
 import { useNavigate } from "react-router-dom";
 
+export const StatusContext = createContext({
+    status: 404,
+    setStatus: (value: number) => {}
+})
+
 export default function Feil() {
+    const navigate = useNavigate()
     const [tittel, setTittel] = useState("");
     const [beskrivelse, setBeskrivelse] = useState("");
-    const [status, setStatus] = useState(0)
 
     const handleSubmit = () => {
 
@@ -30,29 +35,18 @@ export default function Feil() {
             }).catch((error) => {
                 console.log(error);
             })
+
+        navigate("/")
     }
 
-    const handleAlerts = () => {
+    const [status, setStatus] = useState(0)
-        if (status === 201) {
+
-            console.log("Feil lagt til i database");
+    const statusContextVerdi = {status, setStatus}
-            setTimeout(() => 
-            {
-                navigate("/");
-            },
-            5000);           
-            return <Alert variant="success">Feil er meldt inn! Du vil nå sendes tilbake til hovedmenyen om fem sekunder.</Alert>
-        } else {
-            console.log("Noe gikk galt, feil ikke lagt til i database!");
-            return <Alert variant="error">Noe gikk galt! Prøv igjen om noen minutter.</Alert>
-        }
-    }
 
         // TODO: clear data fra felter
 
-
-    const navigate = useNavigate()
-
     return (
+        <StatusContext.Provider value={statusContextVerdi}>
         <main className="flex flex-col h-screen">
             <Header/>
             <div className="flex grow">
@@ -83,7 +77,6 @@ export default function Feil() {
                         <BildeOpplastning/>
                     </div>
                     <div className="w-1/2 flex flex-col gap-2 justify-center">
-                        {status != 0 ? handleAlerts() : <></>}
                         <Button
                             onClick={handleSubmit}
                             variant="primary"
@@ -102,5 +95,6 @@ export default function Feil() {
                 <div className="w-1/4 bg-bg-subtle"></div>
             </div>
         </main>
+        </StatusContext.Provider>
     )
 }