From 7839c4c81084bb8dc04988d58de7c20be8fdaeb1 Mon Sep 17 00:00:00 2001 From: Sindre Kjelsrud <sindre.kjelsrud@nav.no> Date: Wed, 26 Jul 2023 15:06:47 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20S=C3=B8k=20av=20feil=20implementert?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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> --- .../no/nav/helse/sprik/plugins/Routing.kt | 6 ++- frontend/src/components/CardsContainer.tsx | 43 +++------------- frontend/src/index.tsx | 50 ++++++++++++++----- 3 files changed, 48 insertions(+), 51 deletions(-) diff --git a/backend/src/main/kotlin/no/nav/helse/sprik/plugins/Routing.kt b/backend/src/main/kotlin/no/nav/helse/sprik/plugins/Routing.kt index 3155ca5..e9fdc4d 100644 --- a/backend/src/main/kotlin/no/nav/helse/sprik/plugins/Routing.kt +++ b/backend/src/main/kotlin/no/nav/helse/sprik/plugins/Routing.kt @@ -56,8 +56,10 @@ fun configureRouting(): ApplicationEngine = embeddedServer(CIO, applicationEngin call.respond(status = HttpStatusCode.Created, message = testMelding) } get("/api/hentsok/{sokestreng}"){ - val sokestreng = call.receive<String>() - call.respond(status = HttpStatusCode.Created, message = sokestreng) + val sokestreng = call.parameters["sokestreng"] + ?: return@get call.respond(HttpStatusCode.BadRequest, "Sokestreng må være definert") + val sokeresultat = feilmeldingRepository.hentSokteFeilmeldinger(sokestreng) + call.respond(status = HttpStatusCode.Created, message = sokeresultat) } } } diff --git a/frontend/src/components/CardsContainer.tsx b/frontend/src/components/CardsContainer.tsx index a0bc9bb..79f45fb 100644 --- a/frontend/src/components/CardsContainer.tsx +++ b/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()} diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 21acd46..54f2514 100644 --- a/frontend/src/index.tsx +++ b/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>