🚧 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 "@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 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"

View file

@ -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 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"