🚧 WIP: Fikse alerts på hovedside

This commit is contained in:
Sindre Kjelsrud 2023-07-31 12:18:49 +02:00
parent dee55dbeff
commit e7e6a7ebd8
2 changed files with 27 additions and 9 deletions

View file

@ -1,19 +1,33 @@
import CardsContainer from "./components/CardsContainer"; import CardsContainer from "./components/CardsContainer";
import "@navikt/ds-css"; 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 Header from "./components/Header";
import { PlusIcon } from "@navikt/aksel-icons"; import { PlusIcon } from "@navikt/aksel-icons";
import Filtermeny from "./components/Filtermeny"; import Filtermeny from "./components/Filtermeny";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import axios from "axios"; import axios from "axios";
import { useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { Feilmelding } from "./interface"; import { Feilmelding } from "./interface";
import { AlertContext } from "./pages/feil";
export default function Home() { export default function Home() {
const navigate = useNavigate() const navigate = useNavigate()
const [feilmeldinger, setFeilmeldinger] = useState<Feilmelding[]>([]); 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 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. * Henter alle feilmeldinger fra backend.
* Bruker endepunktet /api/hentallefeil. * Bruker endepunktet /api/hentallefeil.
@ -54,6 +68,7 @@ export default function Home() {
<div className="flex grow"> <div className="flex grow">
<Filtermeny/> <Filtermeny/>
<div className="grow bg-bg-subtle px-32 py-8 flex flex-col gap-10"> <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"> <div className="flex gap-12 items-end">
<Search <Search
label="Søkefelt" label="Søkefelt"

View file

@ -3,11 +3,16 @@ import "@navikt/ds-css";
import { ArrowLeftIcon, BugIcon } from "@navikt/aksel-icons"; import { ArrowLeftIcon, BugIcon } from "@navikt/aksel-icons";
import { Alert, Button, Heading, TextField, Textarea } from "@navikt/ds-react"; import { Alert, Button, Heading, TextField, Textarea } from "@navikt/ds-react";
import axios from "axios"; import axios from "axios";
import { useState } from "react"; import { createContext, useState } from "react";
import BildeOpplastning from "../components/BildeOpplastning"; import BildeOpplastning from "../components/BildeOpplastning";
import Header from "../components/Header"; import Header from "../components/Header";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
export const AlertContext = createContext({
status: null,
setStatus: (value: number) => {}
})
export default function Feil() { export default function Feil() {
const [tittel, setTittel] = useState(""); const [tittel, setTittel] = useState("");
const [beskrivelse, setBeskrivelse] = useState(""); const [beskrivelse, setBeskrivelse] = useState("");
@ -30,19 +35,18 @@ export default function Feil() {
}).catch((error) => { }).catch((error) => {
console.log(error); console.log(error);
}) })
handleAlerts()
} }
const handleAlerts = () => { const handleAlerts = () => {
if (status === 201) { if (status === 201) {
console.log("Feil lagt til i database"); console.log("Feil lagt til i database");
setTimeout(() =>
{
navigate("/"); navigate("/");
},
5000);
return <Alert variant="success">Feil er meldt inn! Du vil sendes tilbake til hovedmenyen om fem sekunder.</Alert> return <Alert variant="success">Feil er meldt inn! Du vil sendes tilbake til hovedmenyen om fem sekunder.</Alert>
} else { } else {
console.log("Noe gikk galt, feil ikke lagt til i database!"); 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> return <Alert variant="error">Noe gikk galt! Prøv igjen om noen minutter.</Alert>
} }
} }
@ -83,7 +87,6 @@ export default function Feil() {
<BildeOpplastning/> <BildeOpplastning/>
</div> </div>
<div className="w-1/2 flex flex-col gap-2 justify-center"> <div className="w-1/2 flex flex-col gap-2 justify-center">
{status != 0 ? handleAlerts() : <></>}
<Button <Button
onClick={handleSubmit} onClick={handleSubmit}
variant="primary" variant="primary"