From 4cf7f837556f5ba1cd546ac2691e8bcf512c6198 Mon Sep 17 00:00:00 2001
From: Markus Johansen <markus.aleksander.rakil.johansen@nav.no>
Date: Mon, 7 Aug 2023 12:26:16 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=E2=99=BB=EF=B8=8F=20=20Forenklet?=
 =?UTF-8?q?=20henting=20av=20alle=20feil=20og=20dokumenterte=20resterende?=
 =?UTF-8?q?=20frontend?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/BildeOpplastning.tsx | 18 ++++++-----
 frontend/src/index.tsx                       | 32 +++++++------------
 frontend/src/interface.ts                    | 13 +++-----
 frontend/src/main.tsx                        |  1 +
 frontend/src/pages/feil.tsx                  | 33 ++++++++++----------
 5 files changed, 44 insertions(+), 53 deletions(-)

diff --git a/frontend/src/components/BildeOpplastning.tsx b/frontend/src/components/BildeOpplastning.tsx
index ccfc75e..b64121e 100644
--- a/frontend/src/components/BildeOpplastning.tsx
+++ b/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>
-            <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 fontSize="3.5rem" className="text-blue-500"/> 
-                <p className="text-surface-neutral">Dra og slipp skjermbilder her!</p>
+            <Heading size="xsmall">
+                Skjermbilder
+            </Heading>
+            <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 
+                    fontSize="3.5rem"
+                    className="text-blue-500"
+                /> 
+                <p className="text-surface-neutral">
+                    Dra og slipp skjermbilder her!
+                </p>
             </div>
             <Button variant="secondary" icon={<UploadIcon />}>
                 Last opp skjermbilder
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 7181cfd..c13b070 100644
--- a/frontend/src/index.tsx
+++ b/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")
-      .then(data => data.data)
-      .then(feil => {
-        setFeilmeldinger(
-          feil.map((jsonFeilmelding: any) => new Feilmelding(jsonFeilmelding))
-        );
-      })
+    const { data } = await axios.get("/api/hentallefeil")
+    setFeilmeldinger(data)
   }
-
-  // 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 
-   */
+
+  //oppdaterer visningen av feilmeldinger når søkefeltet endres
   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/>
diff --git a/frontend/src/interface.ts b/frontend/src/interface.ts
index 67d1e78..3b19b97 100644
--- a/frontend/src/interface.ts
+++ b/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
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index cb81e91..4d7f099 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -5,6 +5,7 @@ import './index.css'
 import Home from './index'
 import Feil from './pages/feil'
 
+
 const router = createBrowserRouter([
   {
     path: "/",
diff --git a/frontend/src/pages/feil.tsx b/frontend/src/pages/feil.tsx
index 8a053f8..c195993 100644
--- a/frontend/src/pages/feil.tsx
+++ b/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