From d49bab9ec89e5ecfe5438c9c391142f36c3bc473 Mon Sep 17 00:00:00 2001
From: Markus Johansen <markus.aleksander.rakil.johansen@nav.no>
Date: Wed, 2 Aug 2023 09:41:41 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Fornorsket=20komponentnavn=20og?=
 =?UTF-8?q?=20flyttet=20komponenter=20i=20egne=20fielr?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/{FeilCard.tsx => FeilKort.tsx} | 72 ++-----------------
 frontend/src/components/FeilkortHeader.tsx    | 27 +++++++
 .../{CardsContainer.tsx => KortKonteiner.tsx} |  8 +--
 frontend/src/components/TagBar.tsx            | 41 +++++++++++
 frontend/src/index.tsx                        |  4 +-
 5 files changed, 78 insertions(+), 74 deletions(-)
 rename frontend/src/components/{FeilCard.tsx => FeilKort.tsx} (73%)
 create mode 100644 frontend/src/components/FeilkortHeader.tsx
 rename frontend/src/components/{CardsContainer.tsx => KortKonteiner.tsx} (82%)
 create mode 100644 frontend/src/components/TagBar.tsx

diff --git a/frontend/src/components/FeilCard.tsx b/frontend/src/components/FeilKort.tsx
similarity index 73%
rename from frontend/src/components/FeilCard.tsx
rename to frontend/src/components/FeilKort.tsx
index b05b392..fce6db4 100644
--- a/frontend/src/components/FeilCard.tsx
+++ b/frontend/src/components/FeilKort.tsx
@@ -1,10 +1,11 @@
 import "@navikt/ds-css";
-import { Button, Heading, Modal, Radio, RadioGroup, Tag, TextField, Textarea } from "@navikt/ds-react";
+import { Button, Modal, Radio, RadioGroup, TextField, Textarea } from "@navikt/ds-react";
 import { Feilmelding, IFeilmelding } from "../interface";
 import FeilModal from "./FeilModal";
 import { useEffect, useState } from "react";
 import { FloppydiskIcon, PencilIcon, XMarkIcon } from "@navikt/aksel-icons";
 import axios from "axios";
+import FeilkortHeader from "./FeilkortHeader";
 
 /**
  * En konteiner som inneholder all informasjon og funksjonalitet for å vise og interagere med en feilmelding.
@@ -18,7 +19,7 @@ interface IFeilKort extends IFeilmelding {
 }
 
 
-export const FeilKort = (props: IFeilKort) => {
+ const FeilKort = (props: IFeilKort) => {
     const [visModal, setVisModal] = useState<boolean>(false)
     const [redigeringsmodus, setRedigeringsmodus] = useState(false)
     const [tittel, setTittel] = useState(props.tittel)
@@ -166,69 +167,4 @@ export const FeilKort = (props: IFeilKort) => {
         </>
     )
 }
-
-/**
- * FeilkortHeader er komponent som beskriver ikke-sensitiv informasjon om feilmeldingen og vises for alle på forsiden.
- * FeilkortHeaderen er en del av FeilKort-komponenten og FullvisningsKort-komponenten. 
- * 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(
-        <div className="flex justify-between flex-col">
-            <div>
-                <Heading size="medium">{props.tittel}</Heading>
-                <p className="text-text-subtle mb-4">{props.dato.toDateString()}</p>
-                <p>{props.beskrivelse}</p>    
-            </div>
-            <TagBar haster={props.haster} arbeidsstatus={props.arbeidsstatus}/>              
-        </div>
-    )
-}
-
-
-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 
-     * @returns 
-     */
-    const toggleArbeidsstatus = (arbeidsstatus: number) => {
-        switch (arbeidsstatus) {
-            case 0:
-                return <Tag variant="neutral">Ikke påbegynt</Tag>;
-            case 1:
-                return <Tag variant="info">Feilen jobbes med</Tag>;
-            case 2:
-                return <Tag variant="success">Feilen er fikset</Tag>;
-            default:
-                throw new Error("Ikke gyldig arbeidsstatus-kode. Koden må være 0, 1 eller 2");
-                
-        }
-    }
-
-    return (
-        <div className="flex gap-3 mt-4">
-            {toggleArbeidsstatus(props.arbeidsstatus)}
-            {props.haster ? <Tag variant="warning">Haster</Tag> : <></>}
-        </div>
-    )
-}
-
-
-
+export default FeilKort
\ No newline at end of file
diff --git a/frontend/src/components/FeilkortHeader.tsx b/frontend/src/components/FeilkortHeader.tsx
new file mode 100644
index 0000000..de3dd9c
--- /dev/null
+++ b/frontend/src/components/FeilkortHeader.tsx
@@ -0,0 +1,27 @@
+import { Heading } from "@navikt/ds-react";
+import { IFeilmelding } from "../interface";
+import TagBar from "./TagBar";
+
+/**
+ * FeilkortHeader er komponent som beskriver ikke-sensitiv informasjon om feilmeldingen og vises for alle på forsiden.
+ * FeilkortHeaderen er en del av FeilKort-komponenten og FullvisningsKort-komponenten. 
+ * 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(
+        <div className="flex justify-between flex-col">
+            <div>
+                <Heading size="medium">{props.tittel}</Heading>
+                <p className="text-text-subtle mb-4">{props.dato.toDateString()}</p>
+                <p>{props.beskrivelse}</p>    
+            </div>
+            <TagBar haster={props.haster} arbeidsstatus={props.arbeidsstatus}/>              
+        </div>
+    )
+}
+export default FeilkortHeader;
\ No newline at end of file
diff --git a/frontend/src/components/CardsContainer.tsx b/frontend/src/components/KortKonteiner.tsx
similarity index 82%
rename from frontend/src/components/CardsContainer.tsx
rename to frontend/src/components/KortKonteiner.tsx
index 5cf2400..51c63e8 100644
--- a/frontend/src/components/CardsContainer.tsx
+++ b/frontend/src/components/KortKonteiner.tsx
@@ -1,7 +1,7 @@
-import { FeilKort } from "./FeilCard";
+import FeilKort from "./FeilKort.tsx";
 import { Feilmelding } from "../interface.ts";
 
-interface ICardsContainer {
+interface IKortKonteiner {
   feilmeldinger: Feilmelding[]
 }
 
@@ -9,7 +9,7 @@ interface ICardsContainer {
  * Komponent som laster inn feilmeldinger i kort fra database.
  * @returns grid med feilmeldinger 
  */
-const CardsContainer = (props: ICardsContainer) => {  
+const KortKonteiner = (props: IKortKonteiner) => {  
   return (
       <div className="grid grid-cols-2 gap-6">
         
@@ -29,4 +29,4 @@ const CardsContainer = (props: ICardsContainer) => {
   );
 };
 
-export default CardsContainer;
\ No newline at end of file
+export default KortKonteiner;
\ No newline at end of file
diff --git a/frontend/src/components/TagBar.tsx b/frontend/src/components/TagBar.tsx
new file mode 100644
index 0000000..45c2ca4
--- /dev/null
+++ b/frontend/src/components/TagBar.tsx
@@ -0,0 +1,41 @@
+import { Tag } from "@navikt/ds-react";
+
+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 
+     * @returns 
+     */
+    const toggleArbeidsstatus = (arbeidsstatus: number) => {
+        switch (arbeidsstatus) {
+            case 0:
+                return <Tag variant="neutral">Ikke påbegynt</Tag>;
+            case 1:
+                return <Tag variant="info">Feilen jobbes med</Tag>;
+            case 2:
+                return <Tag variant="success">Feilen er fikset</Tag>;
+            default:
+                throw new Error("Ikke gyldig arbeidsstatus-kode. Koden må være 0, 1 eller 2");
+                
+        }
+    }
+
+    return (
+        <div className="flex gap-3 mt-4">
+            {toggleArbeidsstatus(props.arbeidsstatus)}
+            {props.haster ? <Tag variant="warning">Haster</Tag> : <></>}
+        </div>
+    )
+}
+export default TagBar;
\ No newline at end of file
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 54f2514..c4f94bd 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,4 +1,4 @@
-import CardsContainer from "./components/CardsContainer";
+import KortKonteiner from "./components/KortKonteiner";
 import "@navikt/ds-css";
 import { Button, Search } from "@navikt/ds-react";
 import Header from "./components/Header";
@@ -69,7 +69,7 @@ export default function Home() {
               Meld inn feil
             </Button>
           </div>
-          <CardsContainer feilmeldinger={feilmeldinger}/>
+          <KortKonteiner feilmeldinger={feilmeldinger}/>
         </div>
       </div>
     </main>