sidski/helse-sprik
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

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

Co-authored-by: Sindre Kjelsrud <sindre.kjelsrud@nav.no>
This commit is contained in:
Markus Johansen 2023-07-24 15:13:04 +02:00
parent eb470e3c9e
commit 02f999c56b
7 changed files with 97 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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"){
call.respond(status = HttpStatusCode.Created, message = "Prøver å hente feil fra DB")
get("/api/hentallefeil"){
val testMelding = feilmeldingRepository.hentAlleFeilmeldinger()
call.respond(status = HttpStatusCode.Created, message = testMelding)
}
}
}

24
backend/src/test/kotlin/LocalApp.kt
View file

@ -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 java.time.LocalDateTime
// import javax.sql.DataSource
import no.nav.helse.sprik.modell.Feilmelding
import java.time.LocalDateTime
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)))
}
*/

77
frontend/src/components/CardsContainer.tsx
View file

@ -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 = () => {
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>
@ -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>

4
frontend/src/components/FeilCard.tsx
View file

@ -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æ

3
frontend/src/const.ts Normal file
View file

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

27
frontend/src/interface.ts
View file

@ -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);
}
}

14
frontend/src/pages/feil.tsx
View file

@ -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,
beskrivelse: beskrivelse,
dato: new Date().toISOString().replace('Z', '')
}, {
}
console.log(payload);
axios.post(backendURL + "/api/nyfeil", payload, {
headers: {
'Content-Type': 'application/json'
}