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

backend/src/main/kotlin/no/nav/helse/sprik/plugins/Routing.kt

@@ -14,6 +14,7 @@ import io.ktor.server.request.*
 import no.nav.helse.sprik.Test
 import no.nav.helse.sprik.db.FeilmeldingRepository
 import no.nav.helse.sprik.modell.Feilmelding
+import java.time.LocalDateTime
 
 fun configureRouting(): ApplicationEngine = embeddedServer(CIO, applicationEngineEnvironment {
     //Repositories for handlinger mot database:
@@ -57,8 +58,9 @@ fun configureRouting(): ApplicationEngine = embeddedServer(CIO, applicationEngin
                 feilmeldingRepository.lagre(feilmelding)
                 call.respond(status = HttpStatusCode.Created, message = "Feilmelding motatt og sendt til database")
             }
-            get("/api/hentfeil"){
+            get("/api/hentallefeil"){
-                call.respond(status = HttpStatusCode.Created, message = "Prøver å hente feil fra DB")
+                val testMelding = feilmeldingRepository.hentAlleFeilmeldinger()
+                call.respond(status = HttpStatusCode.Created, message = testMelding)
             }
         }
     }

backend/src/test/kotlin/LocalApp.kt

@@ -1,26 +1,34 @@
 import no.nav.helse.sprik.Application
 import no.nav.helse.sprik.configureFlyway
 import no.nav.helse.sprik.db.Database
-// import no.nav.helse.sprik.db.FeilmeldingRepository
+import no.nav.helse.sprik.db.FeilmeldingRepository
 import no.nav.helse.sprik.dbconfig
-// import no.nav.helse.sprik.modell.Feilmelding
+import no.nav.helse.sprik.modell.Feilmelding
-// import java.time.LocalDateTime
+import java.time.LocalDateTime
-// import javax.sql.DataSource
+import javax.sql.DataSource
+import org.jetbrains.exposed.sql.Database as ExposedDatabase
+
 
 
 fun main() {
 
     val db = Database(dbconfig()).configureFlyway()
     val app = Application(db)
+    ExposedDatabase.connect(db.dataSource)
 
-    // oppretteMockData(db.dataSource) // WIP
+
+    oppretteMockData(db.dataSource) // WIP
 
     app.startBlocking()
 }
 
-/* WIP
 private fun oppretteMockData(dataSource: DataSource) {
+    //må lage connection med database først!
     val feilmeldingRepository = FeilmeldingRepository()
-    feilmeldingRepository.lagre(Feilmelding("Tittel Test", "Beskrivelse Test", LocalDateTime.of(2023, 1, 1, 8, 0, 0)))
+    feilmeldingRepository.lagre(Feilmelding("Tittel Test1", "Beskrivelse Test1", LocalDateTime.of(2023, 1, 1, 8, 0, 0)))
+    feilmeldingRepository.lagre(Feilmelding("Tittel Test2", "Beskrivelse Test2", LocalDateTime.of(2023, 1, 1, 8, 0, 0)))
+    feilmeldingRepository.lagre(Feilmelding("Tittel Test3", "Beskrivelse Test3", LocalDateTime.of(2023, 1, 1, 8, 0, 0)))
+    feilmeldingRepository.lagre(Feilmelding("Tittel Test4", "Beskrivelse Test4", LocalDateTime.of(2023, 1, 1, 8, 0, 0)))
+    feilmeldingRepository.lagre(Feilmelding("Tittel Test5", "Beskrivelse Test5", LocalDateTime.of(2023, 1, 1, 8, 0, 0)))
+    feilmeldingRepository.lagre(Feilmelding("Tittel Test6", "Beskrivelse Test6", LocalDateTime.of(2023, 1, 1, 8, 0, 0)))
 }
-*/

frontend/src/components/CardsContainer.tsx

@@ -1,53 +1,51 @@
+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 = () => {    
+async function fetchAlleFeil() {    
-    const {data, error, isLoading } = useSWR("/api/hentFeil", fetcher)
+    // const {data, error, isLoading } = useSWR("/api/hentallefeil", fetcher)
-    if (error) return <div>failed to load</div>
+    // if (error) return <div>fail</div>
-    if (isLoading) return <div>loader</div>
+    // if (isLoading) return <div>loader</div>
-    return <div>hello {data.name}!</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[] = [
+    const feilMeldinger: Feilmelding[] = []
-        {
+    printFeil()
-            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()
-        }
-    ]
     
     return(
         <div>
@@ -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 {
+export interface IFeilmelding {
-    tittel: String,
+    tittel: string,
-    beskrivelse: String
+    beskrivelse: string
-    haster: boolean
+    // 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",
+
-            {
+        const payload = {
-                tittel: tittel,
+            tittel: tittel,
-                beskrivelse: beskrivelse,
+            beskrivelse: beskrivelse,
-                dato: new Date().toISOString().replace('Z', '')
+            dato: new Date().toISOString().replace('Z', '')
-            }, {
+        }
+
+        console.log(payload);
+        
+        axios.post(backendURL + "/api/nyfeil", payload, {
                 headers: {
                     'Content-Type': 'application/json'
                 }