💥 Poste innmeldte feil til backend

Co-authored-by: Sindre Kjelsrud <sindre.kjelsrud@nav.no>
Co-authored-by: Amalie Mansåker <amalie.erdal.mansaker@nav.no>

backend/src/main/kotlin/no/nav/helse/sprik/Feil.kt

@@ -0,0 +1,13 @@
+package no.nav.helse.sprik
+
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class Feil(
+    val tittel: String,
+    val beskrivelse: String,
+) {
+    override fun toString(): String {
+        return "Feil(${tittel}\n${beskrivelse})"
+    }
+}

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

@@ -8,6 +8,7 @@ import io.ktor.server.plugins.contentnegotiation.*
 import io.ktor.serialization.kotlinx.json.*
 import io.ktor.server.plugins.cors.routing.*
 import io.ktor.server.request.*
+import no.nav.helse.sprik.Feil
 import no.nav.helse.sprik.Test
 
 fun Application.configureRouting() {
@@ -26,6 +27,10 @@ fun Application.configureRouting() {
         }
         post("/test") {
             val test = call.receive<Test>()
+            call.respond(status = HttpStatusCode.Created, message = test)
+        }
+        post("/nyFeil"){
+            val test = call.receive<Feil>()
             println(test)
             call.respond(status = HttpStatusCode.Created, message = test)
         }

frontend/pages/api/http.ts

@@ -0,0 +1,13 @@
+import axios from "axios";
+
+export default function post(route: String, data?: Object) {
+    axios.post("http://0.0.0.0:8080/" + route, data, {
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    }).then((response) => {
+        console.log(response)
+    }).catch((error) => {
+        console.log(error);
+    })
+}

frontend/pages/feil.tsx

@@ -1,9 +1,31 @@
 import "@navikt/ds-css";
 
+import { ArrowLeftIcon, BugIcon, UploadIcon } from "@navikt/aksel-icons";
 import { Button, Heading, TextField, Textarea } from "@navikt/ds-react";
-import { BugIcon, UploadIcon, ArrowLeftIcon } from "@navikt/aksel-icons";
+import post from  "./api/http";
+import { useState } from "react";
 
 export default function Home() {
+    const [tittel, setTittel] = useState("");
+    const [beskrivelse, setBeskrivelse] = useState("");
+
+    const handleSubmit = () => {
+        //hent ut data fra felter lagre i var
+    
+        console.log("submit");
+    
+        const data = {
+            "tittel": tittel,
+            "beskrivelse": beskrivelse
+        };
+
+        console.log(data);
+        
+    
+        post("/nyFeil", data)
+        //clear data fra felter
+    }
+
     return (
       <main className="flex flex-col justify-center gap-32 p-16">
         <div className="w-1/2 flex flex-col gap-4 justify-center">
@@ -21,11 +43,13 @@ export default function Home() {
         <div className="w-1/2 flex flex-col gap-4 justify-center">
             <TextField 
                 label="Tittel" 
-                description="En kort oppsummering av problemet" 
+                description="En kort oppsummering av problemet"
+                onChange={e => setTittel(e.target.value)}
             />
             <Textarea 
                 label="Beskrivelse" 
-                description="Detaljert beskrivelse av problemet" 
+                description="Detaljert beskrivelse av problemet"
+                onChange={e => setBeskrivelse(e.target.value)} 
             />
 
             <Button 
@@ -37,6 +61,7 @@ export default function Home() {
         </div>
         <div className="w-1/2 flex flex-col gap-2 justify-center">
             <Button
+                onClick={handleSubmit}
                 variant="primary"
             >
                 Meld inn feil
@@ -48,7 +73,6 @@ export default function Home() {
                 Gå tilbake til hovedmenyen
             </Button>
         </div>
-
       </main>
     )
   }

frontend/pages/index.tsx

@@ -11,23 +11,6 @@ export default function Home() {
   const {data, error, isLoading} = useSWR('http://0.0.0.0:8080/', fetcher);
   console.log(data);
 
-  function post() {
-    axios.post("http://0.0.0.0:8080/test", { 
-      ord: "heisann hoppsann",
-      tall: 7
-    }, {
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    }).then( (response) => {
-      console.log(response)
-    }).catch( (error) => {
-      console.log(error);
-    })
-  }
-
-  post()
-
   return (
     <main className="flex justify-center">
       <div className="w-1/2 flex flex-col gap-4 justify-center text-center">