From fdd5c2ea2d2d7f807c6319a7fff9816bbf2ca101 Mon Sep 17 00:00:00 2001
From: Sindre Kjelsrud <sindre.kjelsrud@nav.no>
Date: Mon, 31 Jul 2023 15:32:05 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Toggler=20alerts=20via=20Context?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

WIP: Få oppdatere status

Co-authored-by: Markus A. R. Johansen <markus.aleksander.rakil.johansen@nav.no>
---
 frontend/src/index.tsx      | 33 ++++++++++++++++++++++-----------
 frontend/src/pages/feil.tsx | 31 +++++++++++--------------------
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index cb1b8a8..e0d767e 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -8,25 +8,36 @@ import { useNavigate } from "react-router-dom";
 import axios from "axios";
 import { useContext, useEffect, useState } from "react";
 import { Feilmelding } from "./interface";
-import { AlertContext } from "./pages/feil";
+import { StatusContext } from "./pages/feil";
 
 export default function Home() {
   const navigate = useNavigate()
   
   const [feilmeldinger, setFeilmeldinger] = useState<Feilmelding[]>([]);
 
-  const alertValue = useContext(AlertContext)
+  const [alert, setAlert] = useState(<></>)
+  
+  const status = useContext(StatusContext)
 
-  /**
-   * 
-   */
-  const handleAlerts = () => {
-    if (alertValue.status === 201) {
-        return <Alert variant="success">Feil er meldt inn! Du vil nå sendes tilbake til hovedmenyen om fem sekunder.</Alert>
-    } else {
-        return <Alert variant="error">Noe gikk galt! Prøv igjen om noen minutter.</Alert>
+  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.
@@ -68,7 +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">
-          {alertValue.status != 0 ? handleAlerts() : <></>}
+          {alert}
           <div className="flex gap-12 items-end">
             <Search 
               label="Søkefelt"
diff --git a/frontend/src/pages/feil.tsx b/frontend/src/pages/feil.tsx
index c48d913..20419c6 100644
--- a/frontend/src/pages/feil.tsx
+++ b/frontend/src/pages/feil.tsx
@@ -1,22 +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 { createContext, useState } from "react";
 import BildeOpplastning from "../components/BildeOpplastning";
 import Header from "../components/Header";
 import { useNavigate } from "react-router-dom";
 
-export const AlertContext = createContext({
-    status: null,
+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 = () => {
 
@@ -35,28 +35,18 @@ export default function Feil() {
             }).catch((error) => {
                 console.log(error);
             })
-        
-        handleAlerts()
+
+        navigate("/")
     }
 
-    const handleAlerts = () => {
-        if (status === 201) {
-            console.log("Feil lagt til i database");
-            navigate("/");         
-            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!");
-            navigate("/");         
-            return <Alert variant="error">Noe gikk galt! Prøv igjen om noen minutter.</Alert>
-        }
-    }
+    const [status, setStatus] = useState(0)
+
+    const statusContextVerdi = {status, setStatus}
 
         // 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">
@@ -105,5 +95,6 @@ export default function Feil() {
                 <div className="w-1/4 bg-bg-subtle"></div>
             </div>
         </main>
+        </StatusContext.Provider>
     )
 }
\ No newline at end of file