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

frontend/src/components/BildeOpplastning.tsx

@@ -10,13 +10,17 @@ import { Button, Heading } from "@navikt/ds-react"
 const BildeOpplastning = () => {
     return(
         <div className="flex gap-2 flex-col">
-            <Heading size="xsmall">Skjermbilder</Heading>
+            <Heading size="xsmall">
-            <div className="
+                Skjermbilder
-                h-48 p-5 bg-bg-subtle hover:bg-surface-selected border-2 border-blue-500
+            </Heading>
-                rounded-lg border-dashed flex flex-col items-center justify-center text-center gap-2 
+            <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">
-            ">
+                <FileImageIcon 
-                <FileImageIcon fontSize="3.5rem" className="text-blue-500"/> 
+                    fontSize="3.5rem"
-                <p className="text-surface-neutral">Dra og slipp skjermbilder her!</p>
+                    className="text-blue-500"
+                /> 
+                <p className="text-surface-neutral">
+                    Dra og slipp skjermbilder her!
+                </p>
             </div>
             <Button variant="secondary" icon={<UploadIcon />}>
                 Last opp skjermbilder

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