🚧 Dynamisk fetching har feil til feilkort

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

@@ -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
+export default CardsContainer;

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"