🚧 Fetching av feilmeldinger fra DB til frontend i form av Promises

WIP: klarer ikke konvertere Promise<any> til Feilmelding[]

Co-authored-by: Sindre Kjelsrud <sindre.kjelsrud@nav.no>

frontend/src/components/CardsContainer.tsx

@@ -1,54 +1,52 @@
+import { data } from "autoprefixer";
 import FeilCard from "./FeilCard"
 import useSWR from "swr"
+import { backendURL } from "../const.ts"
+import { Feilmelding, IFeilmelding } from "../interface.ts";
 /**
  * 
  * @returns Komponent for returnering av konteiner med alle feilinnmeldingene. 
  */
-const fetcher = (url: RequestInfo | URL) => fetch(url).then(r => r.json())
+// const fetcher = (url: RequestInfo | URL) => fetch(url).then(r => r.json())
 
 
-const fetchFeil = () => {    
-    const {data, error, isLoading } = useSWR("/api/hentFeil", fetcher)
-    if (error) return <div>failed to load</div>
-    if (isLoading) return <div>loader</div>
-    return <div>hello {data.name}!</div>
+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 => new Feilmelding(jsonFeilmelding))                          
+        })
+        .catch((error) => {
+            console.log(error)
+        })
+        return response
+    } catch (error) {
+        console.log("error:", error);
+    }
 }
 
+
+
+const printFeil = async () => {
+    const a = await fetchAlleFeil(); 
+    console.log("a:", a);    
+};
+
 const CardsContainer = () => {
     
-    const feilMeldinger: Feilmelding[] = [
-        {
-            tittel: "Mangel på hensyn til tariffoppgjør",
-            beskrivelse: "Det har vært ett tariffoppgjør og speil sier sykepengene må tilbakekreves, noe som er feil. (sier vi.. har ikke domenekunnskap)",
-            haster: false,
-            dato: new Date()
-        },
-        {
-            tittel: "Speil sier NAV må tilbakekreve sykepenger på feil grunnlag",
-            beskrivelse: "baluba",
-            haster: true,
-            dato: new Date()
-        },
-        {
-            tittel: "Feil A",
-            beskrivelse: "Lorem Ipsum",
-            haster: false,
-            dato: new Date()
-        },
-        {
-            tittel: "Feil B",
-            beskrivelse: "dolor",
-            haster: false,
-            dato: new Date()
-        },
-        {
-            tittel: "Håndkle på hue",
-            beskrivelse: "Bombastic side eye",
-            haster: true,
-            dato: new Date()
-        }
-    ]
-
+    const feilMeldinger: Feilmelding[] = []
+    printFeil()
+    
     return(
         <div>
             <div className="grid grid-cols-2 gap-4">
@@ -57,14 +55,13 @@ const CardsContainer = () => {
                         key={feilMeldinger.indexOf(feilMelding)}
                         tittel={feilMelding.tittel}
                         beskrivelse={feilMelding.beskrivelse}
-                        haster={feilMelding.haster} 
+                        // haster={feilMelding.haster} 
                         dato={new Date()}                    /> 
                 ))}
             </div> 
             <div>
                 <br/>
                 <p>Forsøker å loade feil objekter her:</p>
-                {fetchFeil()}
             </div>    
         </div>
 

frontend/src/components/FeilCard.tsx

@@ -15,7 +15,7 @@ const TagBar = (props: TagBarInterface) => {
     )
 }
 
-const FeilCard = (props: Feilmelding) => {
+const FeilCard = (props: IFeilmelding) => {
     return (
         <ExpansionCard aria-label="tekst">
             <ExpansionCard.Header>
@@ -23,7 +23,7 @@ const FeilCard = (props: Feilmelding) => {
                 <ExpansionCard.Description>
                     {props.beskrivelse}
                 </ExpansionCard.Description>
-                <TagBar haster={props.haster}/>
+                {/* <TagBar haster={props.haster}/> */}
             </ExpansionCard.Header>
             <ExpansionCard.Content>
                 Hællæ

frontend/src/const.ts

@@ -0,0 +1,3 @@
+
+export const backendURL = "http://localhost:8080"
+// const backend = "https://helse-sprik.intern.dev.nav.no"

frontend/src/interface.ts

@@ -3,9 +3,28 @@
  */
 
 
-interface Feilmelding {
-    tittel: String,
-    beskrivelse: String
-    haster: boolean
+export interface IFeilmelding {
+    tittel: string,
+    beskrivelse: string
+    // haster: boolean
     dato: Date
+}
+
+export class Feilmelding implements IFeilmelding {
+    tittel: string = "default tittel"
+    beskrivelse: string = "default beskrivelse"
+    dato: Date = new Date()
+
+    /**
+     * Typescript 2.1 syntax som lar deg sende inn et JSON object og mappe det til class.
+     * https://stackoverflow.com/questions/14142071/typescript-and-field-initializers
+     */
+    public constructor(
+        fields: {
+            tittel: string,
+            beskrivelse: string,
+            dato: Date
+        }) {
+        if (fields) Object.assign(this, fields);    
+    }
 }

frontend/src/pages/feil.tsx

@@ -7,21 +7,23 @@ import { useState } from "react";
 import BildeOpplastning from "../components/BildeOpplastning";
 import Header from "../components/Header";
 import { useNavigate } from "react-router-dom";
+import { backendURL } from "../const";
 
 export default function Feil() {
     const [tittel, setTittel] = useState("");
     const [beskrivelse, setBeskrivelse] = useState("");
 
-    const url = "https://helse-sprik.intern.dev.nav.no"
-    //const url = "http://localhost:5174"
-
     const handleSubmit = () => {
-        axios.post(url + "/api/nyfeil",
-            {
-                tittel: tittel,
-                beskrivelse: beskrivelse,
-                dato: new Date().toISOString().replace('Z', '')
-            }, {
+
+        const payload = {
+            tittel: tittel,
+            beskrivelse: beskrivelse,
+            dato: new Date().toISOString().replace('Z', '')
+        }
+
+        console.log(payload);
+        
+        axios.post(backendURL + "/api/nyfeil", payload, {
                 headers: {
                     'Content-Type': 'application/json'
                 }