✨ Søk av feil implementert

Co-authored-by: Markus A. R. Johansen <markus.aleksander.rakil.johansen@nav.no>
Co-authored-by: Amalie Erdal Mansåker <amalie.erdal.mansaker@nav.no>

frontend/src/components/CardsContainer.tsx

@@ -1,50 +1,21 @@
 import FeilCard from "./FeilCard";
 import { Feilmelding } from "../interface.ts";
-import { useEffect, useState } from "react";
+
+interface ICardsContainer {
+  feilmeldinger: Feilmelding[]
+}
 
 /**
  * Komponent som laster inn feilmeldinger i kort fra database.
  * @returns grid med feilmeldinger 
  */
-const CardsContainer = () => {
-  // Array med feilmeldinger
-  const [feilMeldinger, setFeilmeldinger] = useState<Feilmelding[]>([]);
-
-  /**
-   * Fetcher feilmeldinger fra backend.
-   * Bruker endepunktet /api/hentallefeil.
-   * @returns response
-   */
-  async function fetchAlleFeil() {
-    const response = await fetch("/api/hentallefeil", {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    })
-      .then((data) => data.json())
-      .then((feil) => {
-        setFeilmeldinger(
-          feil.map((jsonFeilmelding: any) => new Feilmelding(jsonFeilmelding))
-        );
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-    return response;
-  }
-
-  // Sørger for at fetchAlleFeil() kun kjører når komponentet laster inn
-  useEffect(() => {
-    fetchAlleFeil()
-  }, [])
-
+const CardsContainer = (props: ICardsContainer) => {
   return (
     <div>
       <div className="grid grid-cols-2 gap-4">
-        {feilMeldinger.map((feilMelding) => (
+        {props.feilmeldinger.map((feilMelding) => (
           <FeilCard
-            key={feilMeldinger.indexOf(feilMelding)}
+            key={props.feilmeldinger.indexOf(feilMelding)}
             tittel={feilMelding.tittel}
             beskrivelse={feilMelding.beskrivelse}
             dato={new Date()}

frontend/src/index.tsx

@@ -6,22 +6,46 @@ import { PlusIcon } from "@navikt/aksel-icons";
 import Filtermeny from "./components/Filtermeny";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
+import { useEffect, useState } from "react";
+import { Feilmelding } from "./interface";
 
 export default function Home() {
   const navigate = useNavigate()
+  
+  const [feilmeldinger, setFeilmeldinger] = useState<Feilmelding[]>([]);
 
-  const handleChange = (soeketekst: string) => {
-    console.log("search changed")  
+  /**
+   * Henter alle feilmeldinger fra backend.
+   * Bruker endepunktet /api/hentallefeil.
+   */  
+  const hentAlleFeil = async () => {
+    await axios.get("/api/hentallefeil")
+      .then(data => data.data)
+      .then(feil => {
+        setFeilmeldinger(
+          feil.map((jsonFeilmelding: any) => new Feilmelding(jsonFeilmelding))
+        );
+      })
+  }
 
-    axios.post("/api/hentsok", soeketekst, {
-      headers: {
-          'Content-Type': 'application/json'
-      }
-    }).then((response) => {
-      console.log(response.data);
-    }).catch((error) => {
-        console.log(error);
-    })
+  // Sørger for at hentAlleFeil() kun kjører når komponentet laster inn
+  useEffect(() => {
+    hentAlleFeil();
+  }, [])
+
+  /**
+   * Oppdaterer viste feilmeldinger ved endring i søkefelt.
+   * Kontakter endepunktet /api/hentsok/.
+   * @param soketekst 
+   */
+  const handleSearch = async (soketekst: string) => {
+    // Ved tomt søkefelt hentes alle feilmeldinger
+    if (soketekst === "") {
+      hentAlleFeil()
+      return
+    }
+    const { data } = await axios.get(`/api/hentsok/${soketekst}`)
+    setFeilmeldinger(data)
   }
 
   return (
@@ -35,7 +59,7 @@ export default function Home() {
               label="Søkefelt"
               description="Søk gjennom innmeldte feil (nøkkelord, tags, status)"
               hideLabel={false}
-              onChange={(soeketekst) => handleChange(soeketekst)}
+              onChange={soeketekst => handleSearch(soeketekst)}
             />
             <Button 
               className="w-64 h-min" 
@@ -45,7 +69,7 @@ export default function Home() {
               Meld inn feil
             </Button>
           </div>
-          <CardsContainer/>
+          <CardsContainer feilmeldinger={feilmeldinger}/>
         </div>
       </div>
     </main>