From f1efaa8bce93190cec0d98e990cba80f4af845e6 Mon Sep 17 00:00:00 2001 From: Sindre Kjelsrud <sindre.kjelsrud@nav.no> Date: Mon, 24 Jul 2023 16:34:49 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Dynamisk=20fetching=20har=20feil?= =?UTF-8?q?=20til=20feilkort?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit WIP: fetchfunksjonen kjører kontinuerlig Co-authored-by: Øydis Kind Refsum <oydis.kind.refsum@nav.no> Co-authored-by: Markus A. R. Johansen <markus.aleksander.rakil.johansen@nav.no> --- frontend/src/components/CardsContainer.tsx | 112 +++++++++++---------- frontend/src/const.ts | 4 +- 2 files changed, 60 insertions(+), 56 deletions(-) diff --git a/frontend/src/components/CardsContainer.tsx b/frontend/src/components/CardsContainer.tsx index 47dc6d6..af14061 100644 --- a/frontend/src/components/CardsContainer.tsx +++ b/frontend/src/components/CardsContainer.tsx @@ -1,68 +1,72 @@ -import FeilCard from "./FeilCard" -import { backendURL } from "../const.ts" +import FeilCard from "./FeilCard"; +import { backendURL } from "../const.ts"; import { Feilmelding } from "../interface.ts"; +import { useState } from "react"; /** - * - * @returns Komponent for returnering av konteiner med alle feilinnmeldingene. + * + * @returns Komponent for returnering av konteiner med alle feilinnmeldingene. */ // const fetcher = (url: RequestInfo | URL) => fetch(url).then(r => r.json()) +// const test = async () => { +// const response = await fetch(backendURL + "/api/hentallefeil") +// const data = await response.json() // data er Promise +// return data.then({ -async function fetchAlleFeil() { +// }) +// } + +const CardsContainer = () => { + const [test, setTest] = useState([]); + + async function fetchAlleFeil() { // const {data, error, isLoading } = useSWR("/api/hentallefeil", fetcher) // if (error) return <div>fail</div> // if (isLoading) return <div>loader</div> // return <div>hello {data.data}!</div> - try { - const response = await fetch(backendURL + "/api/hentallefeil", { - method: "GET", - headers: { - "Content-Type": "application/json" - }, - }) - .then((data) => data.json()) - .then((feil) => { - return feil.map((jsonFeilmelding: any) => new Feilmelding(jsonFeilmelding)) - }) - .catch((error) => { - console.log(error) - }) - return response - } catch (error) { - console.log("error:", error); - } -} + const response = await fetch(backendURL + "/api/hentallefeil", { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }) + .then((data) => data.json()) + .then((feil) => { + setTest( + feil.map((jsonFeilmelding: any) => new Feilmelding(jsonFeilmelding)) + ); + }) + .catch((error) => { + console.log(error); + }); + return response; + } +// fetchAlleFeil(); -const printFeil = async () => { - const a = await fetchAlleFeil(); - console.log("a:", a); + const feilMeldinger: Feilmelding[] = test; + + // console.log(test()) + + return ( + <div> + <div className="grid grid-cols-2 gap-4"> + {feilMeldinger.map((feilMelding) => ( + <FeilCard + key={feilMeldinger.indexOf(feilMelding)} + tittel={feilMelding.tittel} + beskrivelse={feilMelding.beskrivelse} + // haster={feilMelding.haster} + dato={new Date()} + /> + ))} + </div> + <div> + <br /> + <p>Forsøker å loade feil objekter her:</p> + </div> + </div> + ); }; - -const CardsContainer = () => { - - const feilMeldinger: Feilmelding[] = [] - printFeil() - - return( - <div> - <div className="grid grid-cols-2 gap-4"> - {feilMeldinger.map((feilMelding) => ( - <FeilCard - key={feilMeldinger.indexOf(feilMelding)} - tittel={feilMelding.tittel} - beskrivelse={feilMelding.beskrivelse} - // haster={feilMelding.haster} - dato={new Date()} /> - ))} - </div> - <div> - <br/> - <p>Forsøker å loade feil objekter her:</p> - </div> - </div> - - ) -} -export default CardsContainer \ No newline at end of file +export default CardsContainer; diff --git a/frontend/src/const.ts b/frontend/src/const.ts index aeec6f6..64d30ed 100644 --- a/frontend/src/const.ts +++ b/frontend/src/const.ts @@ -1,3 +1,3 @@ -export const backendURL = "http://localhost:8080" -// const backend = "https://helse-sprik.intern.dev.nav.no" +// export const backendURL = "http://localhost:8080" +export const backend = "https://helse-sprik.intern.dev.nav.no"