🚧 WIP: Fikse alerts på hovedside
This commit is contained in:
parent
dee55dbeff
commit
e7e6a7ebd8
2 changed files with 27 additions and 9 deletions
|
@ -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 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.
|
* 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"
|
||||||
|
|
|
@ -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 nå sendes tilbake til hovedmenyen om fem sekunder.</Alert>
|
return <Alert variant="success">Feil er meldt inn! Du vil nå 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"
|
||||||
|
|
Reference in a new issue