Frontend opprydding (#33)

* se forrige commit

* 🎨📝 Kommentar komponenter i egen fil, og dokumentering av modal, kommentar, header, feilmeldingsinnhold og kortkonteiner

* 📝 Dokumentert redigeringsverktøy, skillelinje og tagbar

* 📝♻️  Forenklet henting av alle feil og dokumenterte resterende frontend

frontend/src/components/BildeOpplastning.tsx

@@ -3,9 +3,9 @@ import { Button, Heading } from "@navikt/ds-react"
 
 
 /**
- * Inkluderer en knapp for opplastning i finder/explorer.
+ * BildeOpplastningskomponentet brukes for å laste opp skjermbilder av en feil i Speil.
- * Inkluderer et felt for drag and drop opplastning av bilder
+ * Komponentet er ment for å støtte både drag-and-drop og vanlig opplasting av bilder.
- * @returns `Drag and drop` komponent for filopplastning av skjermbilder
+ * @TODO: Implementer funksjonalitet for å laste opp bildefiler -> API og backend
  */
 const BildeOpplastning = () => {
     return(
@@ -13,20 +13,16 @@ const BildeOpplastning = () => {
             <Heading size="xsmall">
                 Skjermbilder
             </Heading>
-            <div className="
+            <div className="h-48 p-5 bg-bg-subtle hover:bg-surface-selected border-2 border-blue-500 rounded-lg border-dashed flex flex-col items-center justify-center text-center gap-2">
-                h-48 p-5 bg-bg-subtle hover:bg-surface-selected border-2 border-blue-500
-                rounded-lg border-dashed flex flex-col items-center justify-center text-center gap-2 
-            ">
                 <FileImageIcon 
                     fontSize="3.5rem"
                     className="text-blue-500"
                 /> 
-                <p className="text-surface-neutral">Dra og slipp skjermbilder her!</p>
+                <p className="text-surface-neutral">
+                    Dra og slipp skjermbilder her!
+                </p>
             </div>
-            <Button
+            <Button variant="secondary" icon={<UploadIcon />}>
-                variant="secondary"
-                icon={<UploadIcon />}
-            >
                 Last opp skjermbilder
             </Button>     
         </div>

frontend/src/components/FeilKort.tsx

@@ -7,18 +7,21 @@ import FeilkortHeader from "./FeilkortHeader";
 import RedigeringsVerktoy from "./RedigeringsVerktoy";
 import FeilmeldingsInnhold from "./FeilmeldingsInnhold";
 
-/**
- * En konteiner som inneholder all informasjon og funksjonalitet for å vise og interagere med en feilmelding.
- * @param tittel
- * @param beskrivelse
- * @param dato
- * @returns JSX komponent som beskriver innholdet i feilmeldinger.
- */
 interface IFeilKort extends IFeilmelding {
-    key: number
     reset: () => void
 }
 
+/**
+ * En konteiner som inneholder all informasjon og funksjonalitet for å vise og interagere med en feilmelding.
+ * Komponentet rendres på hovedsiden, og mappes ut fra en liste med feilmeldinger i KortKonteiner.
+ * Du kan trykke på en feilmelding for å åpne en modal som viser mer informasjon om feilmeldingen, samt mulighet for å redigere.
+ * @param id er feilmeldingens unike id
+ * @param tittel 
+ * @param beskrivelse 
+ * @param dato Dato for når feilen ble meldt inn
+ * @param haster Boolean som beskriver om feilen haster eller ikke.
+ * @param reset funksjon som kalles når en feilmelding endres. Denne funksjonen kalles for å oppdatere feilmeldingene som vises på hovedsiden.
+ */
 const FeilKort = (props: IFeilKort) => {
     const [visModal, setVisModal] = useState<boolean>(false)
     const [redigeringsmodus, setRedigeringsmodus] = useState(false)
@@ -30,7 +33,7 @@ const FeilKort = (props: IFeilKort) => {
     return(
         <>
             <div 
-                key={props.key}
+                key={props.id}
                 className="
                 bg-bg-default border border-border-default p-7 rounded-lg 
                 hover:bg-bg-subtle hover:border-border-strong hover:shadow-md duration-100
@@ -47,10 +50,7 @@ const FeilKort = (props: IFeilKort) => {
                     kommentar={props.kommentar}
                     />
             </div>
-            <FeilModal 
+            <FeilModal open={visModal} setOpen={setVisModal}>
-                open={visModal} 
-                setOpen={setVisModal} 
-            >
                 {redigeringsmodus ? 
                     <RedigeringsVerktoy 
                     id={props.id}

frontend/src/components/FeilModal.tsx

@@ -8,6 +8,12 @@ interface modalInterface {
     children: React.ReactNode
 }
 
+/**
+ * Modal som brukes til å vise feilmeldinger i fullvisningsmodus med feilinnhold og redigeringsverktøy
+ * @param open boolean som beskriver om modalen skal være åpen eller ikke
+ * @param setOpen setter open
+ * @param children innholdet i modalen
+ */
 const FeilModal = (props: modalInterface) => {
     return(                  
         <Modal

frontend/src/components/FeilkortHeader.tsx

@@ -3,14 +3,8 @@ import { IFeilmelding } from "../interface";
 import TagBar from "./TagBar";
 
 /**
- * FeilkortHeader er komponent som beskriver ikke-sensitiv informasjon om feilmeldingen og vises for alle på forsiden.
+ * Headeren til et Feilkort, inneholder lite sensitiv informasjon som er beskrivende for feilen (tittel, beskrivelse, dato, haster, arbeidsstatus).
- * FeilkortHeaderen er en del av FeilKort-komponenten og FullvisningsKort-komponenten. 
+ * Komponentet er en del av FeilKort, og er det du kan se når du er på hovedsiden.
- * Midlertidig implementerer komponentet @requires IFeilmelding for props, men dette må endres når IFeilmelding utvides i fremtiden for støtte av flere typer feilmeldinger.
- * @param tittel
- * @param beskrivelse
- * @param haster
- * @param dato
- * @returns JSX komponent som skal vise nødvendig informasjon for å forstå en feil.
  */
 export const FeilkortHeader = (props: IFeilmelding) => {
     return(

frontend/src/components/FeilmeldingsInnhold.tsx

@@ -1,25 +1,31 @@
-import { ChatElipsisIcon, PencilIcon, XMarkIcon } from "@navikt/aksel-icons"
+import { PencilIcon, XMarkIcon } from "@navikt/aksel-icons"
-import { Button, Heading, TextField } from "@navikt/ds-react"
+import { Button } from "@navikt/ds-react"
 import { FeilmeldingsInnholdInterface } from "../interface"
 import FeilkortHeader from "./FeilkortHeader"
 import { useState } from "react"
 import Skillelinje from "./Skillelinje"
 import axios from "axios"
+import { Kommentar, KommentarTekstfelt } from "./Kommentar"
 
+
+/**
+ * FeilmeldingsInnhold er et komponent som viser det fulle innholdet til en feilmelding.
+ * Komponentet er en del av FeilKort, og er det du kan se når du trykker på et Feilkort.
+ * Tilgangen til å vise FeilmeldingsInnhold er skal begrenses til saksbehandlere, utviklere og fagfolk med tjenestlig behov.
+ */
 const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
+    //kommentar kan være null eller undefined når den kommer fra databasen, derfor må den sjekkes og omgjøres til en tom string om det er tilfellet
     const [kommentar, setKommentar] = useState(props.kommentar != (null || undefined)  ? props.kommentar : "") 
     const [kommentarfelt, setKommentarfelt] = useState("") 
 
+    /**
+     * Endrer Feilmeldingsobjektet i databasen og setter en ny kommentar på den
+     */
     const oppdaterkommentar = async() => {
-        console.log(kommentarfelt)
-        console.log(kommentar);
-        
-
         const payload = {
             id: props.id,
             kommentar: kommentarfelt,
         }
-
         await axios.put("/api/oppdaterkommentar", payload, {
             headers: {
                 'Content-Type': 'application/json'
@@ -29,7 +35,8 @@ const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
         }).catch((error) => {
             console.log(error);
         })
-
+        //TODO: fiks så kommentar oppdateres uten å måtte skjule modalen. 
+        props.setVisModal(false)
         props.reset()
     }
 
@@ -84,50 +91,3 @@ const FeilmeldingsInnhold = (props: FeilmeldingsInnholdInterface) => {
     )
 }
 export default FeilmeldingsInnhold;
-
-
-interface Ikommentar {
-    setKommentarfelt: (val: string) => void
-    oppdaterKommentar: () => void
-}
-
-interface kommentarTekstfeltInterface extends Ikommentar{
-    kommentarfelt: string,
-}
-interface kommentarInterface {
-    tekst: string
-}
-
-
-const KommentarTekstfelt = (props: kommentarTekstfeltInterface) => {
-    return(
-        <div className="flex items-end gap-12 w-full mt-4 h-fit">
-            <TextField
-                className="grow"
-                label="Skriv inn din kommentar til feilen"
-                value={props.kommentarfelt}
-                onChange={e => props.setKommentarfelt(e.target.value)}
-            >
-            </TextField>
-            <Button
-                variant="secondary"
-                icon={<ChatElipsisIcon/>}
-                onClick={() => props.oppdaterKommentar()}
-            >
-                Legg til kommentar
-            </Button>
-        </div>
-    )
-}
-
-const Kommentar = (props: kommentarInterface) => {
-    return(
-        <>
-            <Skillelinje/>
-            <div className="p-5 bg-bg-subtle rounded-lg w-2/3 my-4">
-                <Heading size="medium">Notat</Heading>
-                <p className="break-words">{props.tekst}</p>
-            </div> 
-        </>
-    )
-}

frontend/src/components/Filtermeny.tsx

@@ -1,14 +1,70 @@
 import { Accordion, Checkbox, CheckboxGroup, Radio, RadioGroup } from "@navikt/ds-react"
-import { useState } from "react"
+import React, { useState } from "react"
 
+/**
+ * Filtermenyen er en komponent som inneholder alle filterene som kan brukes for å filtrere feil.
+ * Komponentet rendres på hovedsiden.
+ * Foreløpig holder den filter for kategorier, status, prioritet og mine innmeldinger.
+ */
 const Filtermeny = () => {
+    const [visningstype, settVisningstype] = useState(false)
+    const [prioritet, settPrioritet] = useState(false)
+
     return (
         <div className="bg-bg-default w-500">
             <Accordion>
-                <KategoriFilter/>
+                <FilterModul 
-                <StatusFilter/>
+                    tittel="Kategorier"
-                <PrioritetFilter/>
+                    beskrivelse="Denne løsningen er litt mer avansert enn den andre filtreringen. UFERDIG!!!!!!!!!!"
-                <MineInnmeldinger/>
+                >
+
+                </FilterModul>
+
+                <FilterModul 
+                    tittel="Status"
+                    beskrivelse="                    
+                        Ved å filtrere etter status på forskjellig innmeldte feil
+                        kan du enkelt få oversikt over hvilke feil som ikke er påbegynte,
+                        hvilke som utredes av utviklingsteamet og løste feil."
+                >
+                    <CheckboxGroup legend="Hvilke statusflagg ønsker du å vise?">
+                        <Checkbox value="Ikke påbegynt">Velg alle</Checkbox>
+                        <Checkbox value="Ikke påbegynt">Ikke påbegynt</Checkbox>
+                        <Checkbox value="Jobbes med">Jobbes med</Checkbox>
+                        <Checkbox value="Ferdig med">Ferdig med</Checkbox>
+                    </CheckboxGroup>
+                </FilterModul>
+
+                <FilterModul 
+                    tittel="Prioritet"
+                    beskrivelse="
+                        Saker som haster å løse kan merkes med et haster flagg.
+                        For å raskt finne ut av hvilke saker som må løses raskt, 
+                        kan man velge å kun vise hastesaker."
+                >
+                    <RadioGroup
+                        legend="Velg visningstype"
+                        value={prioritet}
+                        onChange={(nyPrioritet: any) => settPrioritet(nyPrioritet)}
+                    >
+                        <Radio value={false}>Alle feil</Radio>
+                        <Radio value={true}>Kun feil som haster</Radio>
+                    </RadioGroup>
+                </FilterModul>
+
+                <FilterModul 
+                    tittel="Mine innmeldinger"
+                    beskrivelse="Som saksbehandler kan det være nyttig å finne tilbake til feil man har meldt inn for å sjekke status eller konklusjon."
+                >
+                    <RadioGroup
+                        legend="Velg visningstype"
+                        value={visningstype}
+                        onChange={(nyVisningstype: any) => settVisningstype(nyVisningstype)}
+                    >
+                        <Radio value={false}>Alle feil</Radio>
+                        <Radio value={true}>Kun egne feil</Radio>
+                    </RadioGroup>
+                </FilterModul>
             </Accordion>
         </div>
     )
@@ -16,99 +72,31 @@ const Filtermeny = () => {
 export default Filtermeny
 
 
-const KategoriFilter = () => {
+/**
-    return (
+ * Filtermodul utgjør en modul for de forskjellige filterene som kan brukes i Filtermenyen.
-        <Accordion.Item>
+ * Komponentet bygger på aksel sin Accordion komponent og enkelt elementer i denne. 
-            <Accordion.Header>
+ * Komponentet kan derfor ikke brukes utenfor en Accordion.
-                Kategori
+ * @param tittel Tittelen på filteret
-            </Accordion.Header>
+ * @param beskrivelse Beskrivelse av hvordan kan brukes
-            <Accordion.Content>
+ * @param children Innholdet i en Filtermodul, som er kontrollkomponenter for filteret
-                <p>
+ * @returns 
-                    Denne løsningen er litt mer avansert enn den andre filtreringen. UFERDIG!!!!!!!!!!!
+*/
-                </p>
+const FilterModul = (props: ItemInterface) => {
-            </Accordion.Content>
-        </Accordion.Item>
-    )
-}
-
-
-const StatusFilter = () => {
     return(
         <Accordion.Item>
             <Accordion.Header>
-                Status
+                {props.tittel}
             </Accordion.Header>
             <Accordion.Content>
-                <p>
+                <p>{props.beskrivelse}</p>
-                    Ved å filtrere etter status på forskjellig innmeldte feil
-                    kan du enkelt få oversikt over hvilke feil som ikke er påbegynte,
-                    hvilke som utredes av utviklingsteamet og løste feil.
-                </p>
                 <br/>
-                <CheckboxGroup
+                {props.children}
-                    legend="Hvilke statusflagg ønsker du å vise?"
-                >
-                    <Checkbox value="Ikke påbegynt">Velg alle</Checkbox>
-                    <Checkbox value="Ikke påbegynt">Ikke påbegynt</Checkbox>
-                    <Checkbox value="Jobbes med">Jobbes med</Checkbox>
-                    <Checkbox value="Ferdig med">Ferdig med</Checkbox>
-                </CheckboxGroup>
             </Accordion.Content>
         </Accordion.Item>
     )
 }
-
+interface ItemInterface {
-
+    tittel: string
-const PrioritetFilter = () => {
+    beskrivelse: string
-    const [verdi, settVerdi] = useState(false)
+    children: React.ReactNode
-    
-    return(
-        <Accordion.Item>
-            <Accordion.Header>
-                Prioritet
-            </Accordion.Header>
-            <Accordion.Content>
-                <p>
-                    Saker som haster å løse kan merkes med et haster flagg.
-                    For å raskt finne ut av hvilke saker som må løses raskt, 
-                    kan man velge å kun vise hastesaker.
-                </p>
-                <br/>
-                <RadioGroup
-                    legend="Velg visningstype"
-                    value={verdi}
-                    onChange={(nyVerdi: any) => settVerdi(nyVerdi)}
-                >
-                    <Radio value={false}>Alle feil</Radio>
-                    <Radio value={true}>Kun feil som haster</Radio>
-                </RadioGroup>
-            </Accordion.Content>
-        </Accordion.Item>
-    )
-}
-
-const MineInnmeldinger = () => {
-    const [verdi, settVerdi] = useState(false)
-
-    return(
-        <Accordion.Item>
-            <Accordion.Header>
-                Mine innmeldinger
-            </Accordion.Header>
-            <Accordion.Content>
-                <p>
-                    Som saksbehandler kan det være nyttig å finne tilbake til feil man har meldt inn for å sjekke status eller konklusjon. 
-                </p>
-                <br/>
-                <RadioGroup
-                    legend="Velg visningstype"
-                    value={verdi}
-                    onChange={(nyVerdi: any) => settVerdi(nyVerdi)}
-                >
-                    <Radio value={false}>Alle feil</Radio>
-                    <Radio value={true}>Kun egne feil</Radio>
-                </RadioGroup>
-            </Accordion.Content>
-        </Accordion.Item>
-    )
 }

frontend/src/components/Header.tsx

@@ -1,20 +1,14 @@
-import { MenuGridIcon } from "@navikt/aksel-icons"
+import { InternalHeader } from "@navikt/ds-react"
-import { InternalHeader, Dropdown } from "@navikt/ds-react"
 
+/**
+ * Headeren til applikasjonen, inneholder logo og lenke til hovedsiden.
+ */
 const Header = () => {
     return(
         <InternalHeader>
             <InternalHeader.Title href="/#home">
                 Sprik
             </InternalHeader.Title>
-            <Dropdown>
-                <InternalHeader.Button
-                    as={Dropdown.Toggle}
-                >
-                    <MenuGridIcon title="MenuGridIconer og oppslagsverk" />
-                </InternalHeader.Button>
-            {/* <Dropdown.Menu /> */}
-            </Dropdown>
         </InternalHeader>
     )
 }

frontend/src/components/Kommentar.tsx

@@ -0,0 +1,53 @@
+import { ChatElipsisIcon } from "@navikt/aksel-icons"
+import { TextField, Button, Heading } from "@navikt/ds-react"
+import Skillelinje from "./Skillelinje"
+
+interface kommentarTekstfeltInterface {
+    kommentarfelt: string,
+    setKommentarfelt: (val: string) => void
+    oppdaterKommentar: () => void
+}
+interface kommentarInterface {
+    tekst: string
+}
+
+/**
+ * Kommentartekstfeltet er et tekstfelt med en knapp som poster en kommentar til en feil.
+ */
+export const KommentarTekstfelt = (props: kommentarTekstfeltInterface) => {
+    return(
+        <div className="flex items-end gap-12 w-full mt-4 h-fit">
+            <TextField
+                className="grow"
+                label="Skriv inn din kommentar til feilen"
+                value={props.kommentarfelt}
+                onChange={e => props.setKommentarfelt(e.target.value)}
+            >
+            </TextField>
+            <Button
+                variant="secondary"
+                icon={<ChatElipsisIcon/>}
+                onClick={() => props.oppdaterKommentar()}
+            >
+                Legg til kommentar
+            </Button>
+        </div>
+    )
+}
+
+/**
+ * Kommentar er en komponent som viser en kommentar til en feil.
+ * Komentaren kan beskrive konklusjonen til en feil, eller være en oppdatering på statusen til en feil.
+ * @param tekst
+ */
+export const Kommentar = (props: kommentarInterface) => {
+    return(
+        <>
+            <Skillelinje/>
+            <div className="p-5 bg-bg-subtle rounded-lg w-2/3 my-4">
+                <Heading size="medium">Kommentar</Heading>
+                <p className="break-words">{props.tekst}</p>
+            </div> 
+        </>
+    )
+}

frontend/src/components/KortKonteiner.tsx

@@ -13,7 +13,6 @@ interface IKortKonteiner {
 const KortKonteiner = (props: IKortKonteiner) => {  
   return (
       <div className="grid grid-cols-2 gap-6">
-        
         {props.feilmeldinger.map((feilMelding) => (
             <FeilKort
               key={props.feilmeldinger.indexOf(feilMelding)}

frontend/src/components/RedigeringsVerktoy.tsx

@@ -9,12 +9,18 @@ interface redigeringsInterface extends FeilmeldingsInnholdInterface {
     reset: () => void
 }
 
+/**
+ * Redigeringsverktøy er et skjema som lar brukeren redigere en innmeldt feil.
+ * Statusflagg som arbeidsstatus og haster flagg kan endres. 
+ * Tittel og beskrivelse kan også endres
+ */
 const RedigeringsVerktoy = (props: redigeringsInterface) => {
     const [tittel, setTittel] = useState(props.tittel)
     const [beskrivelse, setBeskrivelse] = useState(props.beskrivelse)
     const [arbeidsstatus, setArbeidsstatus] = useState(props.arbeidsstatus)
     const [haster, setHaster] = useState(props.haster)
 
+
     const lagreEndringer = async() => {
         props.setVisModal(false)
         props.setRedigeringsmodus(false)
@@ -45,7 +51,6 @@ const RedigeringsVerktoy = (props: redigeringsInterface) => {
 
     return (
         <div className="flex flex-col gap-12 items-center px-12">
-
             <div className="flex flex-col gap-6 w-full">
                 <Heading className="" size="large">
                     Rediger feil

frontend/src/components/Skillelinje.tsx

@@ -1,5 +1,8 @@
 
-
+/**
+ * Skillelinjer som brukes for å dele opp innholdet i et komponent/skjema i mindre deler
+ * Forbedrer lesbarheten til skjemaet
+ */
 const Skillelinje = () => {
     return (
         <div className="h-1 bg-gray-200 my-3 rounded-lg w-full"></div>

frontend/src/components/TagBar.tsx

@@ -4,20 +4,12 @@ interface TagBarInterface {
     haster: boolean
     arbeidsstatus: number
 }
-/**
- * Komponentet er en bar (vanrett linje) som inneholder to statusflagg: "arbeidsstatus" og "Haster".
- * Komponentet er en del av FeilKortHeader
- * @param haster er en boolean som beskriver om feilen haster eller ikke.
- * @param arbeidsstatus
- */
-const TagBar = (props: TagBarInterface) => {
 
-    /**
+/**
-     * Funksjonen tar inn 
+ * @param arbeidsstatus er en kode som beskriver om feilen er fikset, jobbes med eller ikke påbegynt. må være 0, 1 eller 2.
-     * @param arbeidsstatus 
+ * @returns Tag komponent med riktig farge og tekst basert på arbeidsstatus-kode
-     * @returns 
  */
-    const toggleArbeidsstatus = (arbeidsstatus: number) => {
+const toggleArbeidsstatus = (arbeidsstatus: number) => {
     switch (arbeidsstatus) {
         case 0:
             return <Tag variant="neutral">Ikke påbegynt</Tag>;
@@ -27,10 +19,16 @@ const TagBar = (props: TagBarInterface) => {
             return <Tag variant="success">Feilen er fikset</Tag>;
         default:
             throw new Error("Ikke gyldig arbeidsstatus-kode. Koden må være 0, 1 eller 2");
-                
-        }
     }
+}
                 
+/**
+ * Komponentet er en bar (vanrett linje) som inneholder to statusflagg: "arbeidsstatus" og "Haster".
+ * Komponentet er en del av FeilKortHeader
+ * @param haster er en boolean som beskriver om feilen haster eller ikke.
+ * @param arbeidsstatus er en kode som beskriver om feilen er fikset, jobbes med eller ikke påbegynt. må være 0, 1 eller 2.
+ */
+const TagBar = (props: TagBarInterface) => {
     return (
         <div className="flex gap-3 mt-4">
             {toggleArbeidsstatus(props.arbeidsstatus)}

frontend/src/index.tsx

@@ -9,37 +9,28 @@ import axios from "axios";
 import { useEffect, useState } from "react";
 import { Feilmelding } from "./interface";
 
+/**
+ * Hovedsiden til applikasjonen, viser alle innmeldte feil.
+ * Tilbyr søkefelt og filtreringsmuligheter
+ * Tilbyr også navigering til feilinnmeldingssiden
+ */
 export default function Home() {
   const navigate = useNavigate()
-  
   const [feilmeldinger, setFeilmeldinger] = useState<Feilmelding[]>([]);
 
-  /**
+  
-   * Henter alle feilmeldinger fra backend.
-   * Bruker endepunktet /api/hentallefeil.
-   */  
   const hentAlleFeil = async () => {    
-    await axios.get("/api/hentallefeil")
+    const { data } = await axios.get("/api/hentallefeil")
-      .then(data => data.data)
+    setFeilmeldinger(data)
-      .then(feil => {
-        setFeilmeldinger(
-          feil.map((jsonFeilmelding: any) => new Feilmelding(jsonFeilmelding))
-        );
-      })
   }
   
-  // Sørger for at hentAlleFeil() kun kjører når komponentet laster inn
   useEffect(() => {
     hentAlleFeil();
   }, [])
 
-  /**
+
-   * Oppdaterer viste feilmeldinger ved endring i søkefelt.
+  //oppdaterer visningen av feilmeldinger når søkefeltet endres
-   * Kontakter endepunktet /api/hentsok/.
-   * @param soketekst 
-   */
   const handleSearch = async (soketekst: string) => {
-    // Ved tomt søkefelt hentes alle feilmeldinger
     if (soketekst === "") {
       hentAlleFeil()
       return
@@ -48,6 +39,7 @@ export default function Home() {
     setFeilmeldinger(data)
   }
 
+
   return (
     <main className="flex flex-col h-screen">
       <Header/>

frontend/src/interface.ts

@@ -1,8 +1,3 @@
-/**
- * I denne filen kan vi legge interfaces som skal brukes over flere steder!
- */
-
-
 export interface IFeilmelding {
     id: number,
     tittel: string,
@@ -21,6 +16,10 @@ export interface FeilmeldingsInnholdInterface extends IFeilmelding {
     reset: () => void
 }
 
+/**
+ * En klasse som implementerer IFeilmelding interfacet. 
+ * Brukes for å mappe JSON objekter til en klasse ved henting av data fra backend
+ */
 export class Feilmelding implements IFeilmelding {
     id: number = 0
     tittel: string = "default tittel"
@@ -31,10 +30,6 @@ export class Feilmelding implements IFeilmelding {
     kommentar?: string = undefined
     aktorid?: number = undefined
 
-    /**
-     * Typescript 2.1 syntax som lar deg sende inn et JSON object og mappe det til class.
-     * https://stackoverflow.com/questions/14142071/typescript-and-field-initializers
-     */
     public constructor(
         fields: {
             id: number

frontend/src/main.tsx

@@ -5,6 +5,7 @@ import './index.css'
 import Home from './index'
 import Feil from './pages/feil'
 
+
 const router = createBrowserRouter([
   {
     path: "/",

frontend/src/pages/feil.tsx

@@ -9,6 +9,9 @@ import Header from "../components/Header";
 import { useNavigate } from "react-router-dom";
 import Skillelinje from "../components/Skillelinje";
 
+/**
+ * Siden for å melde inn feil i speil.
+ */
 export default function Feil() {
     const [tittel, setTittel] = useState("");
     const [beskrivelse, setBeskrivelse] = useState("");
@@ -16,20 +19,27 @@ export default function Feil() {
     const [haster, setHaster] = useState(false)
     const [valgteTags, setValgteTags] = useState([] as string[]);
     const [aktorid, setAktorid] = useState<number|null>(null);
+    const navigate = useNavigate()
+    const tags = [
+        "Utbetaling",
+        "Inntekt",
+        "Speil",
+        "Annet"
+    ];
     
-    const handleSubmit = () => {
+    //Sender feil til databasen
+    const meldInnFeil = () => {
         const payload = {
             id: null,
             tittel: tittel,
             beskrivelse: beskrivelse,
-            dato: new Date().toISOString().replace('Z', ''), // Litt wack fix, burde endres
+            dato: new Date().toISOString().replace('Z', ''),
             arbeidsstatus: 0,
             haster: haster,
             kommentar: null,
             aktorid: aktorid ? aktorid : null,
-            //kategorier: valgteTags
+            //TODO: kategorier: valgteTags
         }
-        
         axios.post("/api/nyfeil", payload, {
                 headers: {
                     'Content-Type': 'application/json'
@@ -41,6 +51,7 @@ export default function Feil() {
             })
     }
 
+    //Håndterer alerts som vises etter at feil er lagt til i databasen eller feiler i å bli lagt til
     const handleAlerts = () => {
         if (status === 201) {
             console.log("Feil lagt til i database");
@@ -56,18 +67,6 @@ export default function Feil() {
         }
     }
 
-        // TODO: clear data fra felter
-
-
-    const navigate = useNavigate()
-
-    const tags = [
-        "Utbetaling",
-        "Inntekt",
-        "Speil",
-        "Annet"
-    ];
-
     return (
         <main className="flex flex-col h-screen">
             <Header/>
@@ -147,7 +146,7 @@ export default function Feil() {
                     <div className="w-1/2 flex flex-col gap-2 justify-center mt-8">
                         {status != 0 ? handleAlerts() : <></>}
                         <Button
-                            onClick={handleSubmit}
+                            onClick={meldInnFeil}
                             variant="primary"
                         >
                             Meld inn feil