🚸 Routing in the box

Co-authored-by: Amalie Erdal Mansåker <amalie.erdal.mansaker@nav.no>
Co-authored-by: Øydis Kind Refsum <oydis.kind.refsum@nav.no>

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

@@ -48,7 +48,7 @@ fun configureRouting(): ApplicationEngine = embeddedServer(CIO, applicationEngin
                 val test = call.receive<Test>()
                 call.respond(status = HttpStatusCode.Created, message = test)
             }
-            post("/nyFeil") {
+            post("/nyfeil") {
                 val feilmelding = call.receive<Feilmelding>()
                 feilmeldingRepository.lagre(feilmelding)
                 call.respond(status = HttpStatusCode.Created, message = "Feilmelding motatt og sendt til database")

frontend/src/index.tsx

@@ -2,13 +2,15 @@ import CardsContainer from "./components/CardsContainer";
 import "@navikt/ds-css";
 import { Button, Heading, Search } from "@navikt/ds-react";
 import Header from "./components/Header";
-
+import { useNavigate } from "react-router-dom";
 
 export default function Home() {
   // const handleFeil = () => {
   //   router.push('/feil')
   // }
 
+  const navigate = useNavigate()
+
   return (
     <main className="flex flex-col h-screen">
       <Header/>
@@ -16,8 +18,9 @@ export default function Home() {
         <div className="bg-bg-subtle w-1/6 p-8 flex flex-col justify-end">
           <div className="flex flex-col gap-4 text-center bottom-0">
             <Button 
-              variant="primary" 
+              variant="primary"
               // onClick={handleFeil}
+              onClick={() => navigate("nyfeil")}
             >
               Meld inn feil
             </Button>

frontend/src/main.tsx

@@ -1,10 +1,23 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { RouterProvider, createBrowserRouter } from 'react-router-dom'
 import './index.css'
-import Home from './index.tsx'
+import Home from './index'
+import Feil from './pages/feil'
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Home />,
+  },
+  {
+    path: "nyfeil",
+    element: <Feil />
+  }
+])
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <Home />
+    <RouterProvider router={router} />
   </React.StrictMode>,
 )

frontend/src/pages/feil.tsx

@@ -6,13 +6,14 @@ import axios from "axios";
 import { useState } from "react";
 import BildeOpplastning from "../components/BildeOpplastning";
 import Header from "../components/Header";
+import { useNavigate } from "react-router-dom";
 
 export default function Feil() {
     const [tittel, setTittel] = useState("");
     const [beskrivelse, setBeskrivelse] = useState("");
 
     const handleSubmit = () => {
-        axios.post("https://helse-sprik.intern.dev.nav.no/nyFeil",
+        axios.post("https://helse-sprik.intern.dev.nav.no/nyfeil",
             {
                 "data": {
                     tittel: tittel,
@@ -32,6 +33,7 @@ export default function Feil() {
 
         // TODO: clear data fra felter
 
+    const navigate = useNavigate()
 
     return (
         <main className="flex flex-col h-screen">
@@ -76,6 +78,7 @@ export default function Feil() {
                             // onClick={() => {
                             //     router.push('/')
                             // }}
+                            onClick={() => navigate("/")}
                         >
                             Gå tilbake til hovedmenyen
                         </Button>