From e7e6a7ebd80fc7053595b071430933d0346a9597 Mon Sep 17 00:00:00 2001 From: Sindre Kjelsrud <sindre.kjelsrud@nav.no> Date: Mon, 31 Jul 2023 12:18:49 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20WIP:=20Fikse=20alerts=20p=C3=A5?= =?UTF-8?q?=20hovedside?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/index.tsx | 19 +++++++++++++++++-- frontend/src/pages/feil.tsx | 17 ++++++++++------- 2 files changed, 27 insertions(+), 9 deletions(-) diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 54f2514..cb1b8a8 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -1,19 +1,33 @@ 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 { AlertContext } from "./pages/feil"; export default function Home() { const navigate = useNavigate() const [feilmeldinger, setFeilmeldinger] = useState<Feilmelding[]>([]); + const alertValue = useContext(AlertContext) + + /** + * + */ + 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> + } + } + /** * Henter alle feilmeldinger fra backend. * Bruker endepunktet /api/hentallefeil. @@ -54,6 +68,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() : <></>} <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 ee889c1..c48d913 100644 --- a/frontend/src/pages/feil.tsx +++ b/frontend/src/pages/feil.tsx @@ -3,11 +3,16 @@ import "@navikt/ds-css"; import { ArrowLeftIcon, BugIcon } from "@navikt/aksel-icons"; import { Alert, 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 AlertContext = createContext({ + status: null, + setStatus: (value: number) => {} +}) + export default function Feil() { const [tittel, setTittel] = useState(""); const [beskrivelse, setBeskrivelse] = useState(""); @@ -30,19 +35,18 @@ export default function Feil() { }).catch((error) => { console.log(error); }) + + handleAlerts() } const handleAlerts = () => { if (status === 201) { console.log("Feil lagt til i database"); - setTimeout(() => - { - navigate("/"); - }, - 5000); + 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> } } @@ -83,7 +87,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"