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

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/FeilmeldingsInnhold.tsx

@@ -1,25 +1,31 @@
-import { ChatElipsisIcon, PencilIcon, XMarkIcon } from "@navikt/aksel-icons"
-import { Button, Heading, TextField } from "@navikt/ds-react"
+import { PencilIcon, XMarkIcon } from "@navikt/aksel-icons"
+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/Header.tsx

@@ -1,20 +1,14 @@
-import { MenuGridIcon } from "@navikt/aksel-icons"
-import { InternalHeader, Dropdown } from "@navikt/ds-react"
+import { InternalHeader } 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)}