✨ bygger basen for API for henting av alle feilmeldinger fra database til frontend (#13)

frontend/src/components/CardsContainer.tsx

@@ -1,35 +1,52 @@
+import axios from "axios"
 import FeilCard from "./FeilCard"
+import useSWR from "swr"
 /**
  * 
  * @returns Komponent for returnering av konteiner med alle feilinnmeldingene. 
  */
+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>
+}
+
 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
+            haster: false,
+            dato: new Date()
         },
         {
             tittel: "Speil sier NAV må tilbakekreve sykepenger på feil grunnlag",
             beskrivelse: "baluba",
-            haster: true
+            haster: true,
+            dato: new Date()
         },
         {
             tittel: "Feil A",
             beskrivelse: "Lorem Ipsum",
-            haster: false
+            haster: false,
+            dato: new Date()
         },
         {
             tittel: "Feil B",
             beskrivelse: "dolor",
-            haster: false
+            haster: false,
+            dato: new Date()
         },
         {
             tittel: "Håndkle på hue",
             beskrivelse: "Bombastic side eye",
-            haster: true
+            haster: true,
+            dato: new Date()
         }
     ]
 
@@ -38,13 +55,18 @@ const CardsContainer = () => {
             <div className="grid grid-cols-2 gap-4">
                 {feilMeldinger.map((feilMelding) => (
                     <FeilCard 
-                        key={feilMeldinger.indexOf(feilMelding)} 
-                        tittel={feilMelding.tittel} 
-                        beskrivelse={feilMelding.beskrivelse} 
-                        haster={feilMelding.haster}
-                    /> 
+                        key={feilMeldinger.indexOf(feilMelding)}
+                        tittel={feilMelding.tittel}
+                        beskrivelse={feilMelding.beskrivelse}
+                        haster={feilMelding.haster} 
+                        dato={new Date()}                    /> 
                 ))}
-            </div>     
+            </div> 
+            <div>
+                <br/>
+                <p>Forsøker å loade feil objekter her:</p>
+                {fetchFeil()}
+            </div>    
         </div>
 
     )

frontend/src/index.tsx

@@ -15,9 +15,9 @@ export default function Home() {
       <Header/>
       <div className="flex grow">
         <Filtermeny/>
-        <div className="grow bg-bg-subtle px-32 py-10 flex flex-col gap-10">
+        <div className="grow bg-bg-subtle px-32 py-8 flex flex-col gap-10">
           <div className="flex gap-12 items-end">
-            <Search label="Søkefelt" hideLabel={false}/>
+            <Search label="Søkefelt" description="Søk gjennom innmeldte feil (nøkkelord, tags, status)" hideLabel={false}/>
             <Button 
               className="w-64 h-min" 
               icon={<PlusIcon/>}

frontend/src/interface.ts

@@ -7,4 +7,5 @@ interface Feilmelding {
     tittel: String,
     beskrivelse: String
     haster: boolean
+    dato: Date
 }

frontend/src/pages/feil.tsx

@@ -75,9 +75,6 @@ export default function Feil() {
                         <Button
                             variant="tertiary"
                             icon={<ArrowLeftIcon />}
-                            // onClick={() => {
-                            //     router.push('/')
-                            // }}
                             onClick={() => navigate("/")}
                         >
                             Gå tilbake til hovedmenyen