🎨 Laget RedigeringsVerktøy komponent

frontend/src/components/FeilKort.tsx

@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
 import { FloppydiskIcon, PencilIcon, XMarkIcon } from "@navikt/aksel-icons";
 import axios from "axios";
 import FeilkortHeader from "./FeilkortHeader";
+import RedigeringsVerktoy from "./RedigeringsVerktoy";
 
 /**
  * En konteiner som inneholder all informasjon og funksjonalitet for å vise og interagere med en feilmelding.
@@ -18,44 +19,14 @@ interface IFeilKort extends IFeilmelding {
     key: number
 }
 
-
+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)
-    const [beskrivelse, setBeskrivelse] = useState(props.beskrivelse)
-    const [arbeidsstatus, setArbeidsstatus] = useState(props.arbeidsstatus)
-    const [haster, setHaster] = useState(props.haster)
 
     useEffect(() => {
         Modal.setAppElement(document.getElementById('root'));
     }, []);
 
-    const lagreEndringer = () => {
-        setRedigeringsmodus(false)
-
-        const payload = {
-            id: props.id,
-            tittel: tittel,
-            beskrivelse: beskrivelse,
-            dato: props.dato.toISOString().replace('Z', ''),
-            arbeidsstatus: arbeidsstatus,
-            haster: haster
-        }
-
-        axios.put(`/api/oppdaterfeil/${props.id}`, payload, {
-            headers: {
-                'Content-Type': 'application/json'
-            }
-        }).then((response) => {
-            console.log(response);
-        }).catch((error) => {
-            console.log(error);
-        })
-
-
-    }
-    
     return(
         <>
             <div 
@@ -77,57 +48,15 @@ interface IFeilKort extends IFeilmelding {
             </div>
             <FeilModal open={visModal} setOpen={setVisModal} >
                 {redigeringsmodus ? 
-
+                    <RedigeringsVerktoy 
-                    <div className="flex justify-between">
+                        id={props.id}
-                        <div className="flex flex-col gap-4 w-1/2">
+                        tittel={props.tittel}
-                            <TextField 
+                        beskrivelse={props.beskrivelse}
-                                label="Tittel"
+                        dato={props.dato}
-                                value={tittel}
+                        haster={props.haster}
-                                onChange={e => setTittel(e.target.value)}
+                        arbeidsstatus={props.arbeidsstatus}
+                        setRedigeringsmodus={setRedigeringsmodus}
                     />
-                            <Textarea 
-                                label="Beskrivelse"
-                                value={beskrivelse}
-                                onChange={e => setBeskrivelse(e.target.value)}
-                            />
-                            <RadioGroup
-                                legend="Velg arbeidsstatus for feil"
-                                onChange={(arbeidsstatus: number) => {setArbeidsstatus(arbeidsstatus)}}
-                                value={arbeidsstatus}
-                            >
-                                <Radio value={0}>Ikke påbegynt</Radio>
-                                <Radio value={1}>Feilen jobbes med</Radio>
-                                <Radio value={2}>Feilen er fikset</Radio>
-                            </RadioGroup>
-                            <RadioGroup
-                                legend="Hvor vil du sitte?"
-                                onChange={(haster: boolean) => {setHaster(haster)}}
-                                value={haster}
-                            >
-                                <Radio value={true}>Ja</Radio>
-                                <Radio value={false}>Nei</Radio>
-                            </RadioGroup>
-                        </div>
-                        <div className="flex gap-4 items-start">
-                            <Button
-                                variant="primary"
-                                icon={<FloppydiskIcon/>}
-                                onClick={() => lagreEndringer()}
-                            >
-                                Lagre
-                            </Button>
-                            <Button
-                                variant="danger"
-                                icon={<XMarkIcon/>}
-                                onClick={() => {
-                                    setRedigeringsmodus(false)
-                                }}
-                            >
-                                Avbryt
-                            </Button>
-                        </div>
-                    </div>
-
                 : 
                 <div>
                     <div className="flex justify-between">

frontend/src/components/RedigeringsVerktoy.tsx

@@ -0,0 +1,92 @@
+import { FloppydiskIcon, XMarkIcon } from "@navikt/aksel-icons"
+import { TextField, Textarea, RadioGroup, Radio, Button } from "@navikt/ds-react"
+import { useState } from "react"
+import { IFeilmelding } from "../interface"
+import axios from "axios"
+
+interface RedigeringsInterface extends IFeilmelding {
+    setRedigeringsmodus: (redigeringsmodus: boolean) => void
+}
+
+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 = () => {
+        props.setRedigeringsmodus(false)
+
+        const payload = {
+            id: props.id,
+            tittel: tittel,
+            beskrivelse: beskrivelse,
+            dato: props.dato.toISOString().replace('Z', ''),
+            arbeidsstatus: arbeidsstatus,
+            haster: haster
+        }
+
+        axios.put(`/api/oppdaterfeil/${props.id}`, payload, {
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        }).then((response) => {
+            console.log(response);
+        }).catch((error) => {
+            console.log(error);
+        })
+    }
+
+    return (
+        <div className="flex justify-between">
+            <div className="flex flex-col gap-4 w-1/2">
+                <TextField 
+                    label="Tittel"
+                    value={tittel}
+                    onChange={e => setTittel(e.target.value)}
+                />
+                <Textarea 
+                    label="Beskrivelse"
+                    value={beskrivelse}
+                    onChange={e => setBeskrivelse(e.target.value)}
+                />
+                <RadioGroup
+                    legend="Velg arbeidsstatus for feil"
+                    onChange={(arbeidsstatus: number) => {setArbeidsstatus(arbeidsstatus)}}
+                    value={arbeidsstatus}
+                >
+                    <Radio value={0}>Ikke påbegynt</Radio>
+                    <Radio value={1}>Feilen jobbes med</Radio>
+                    <Radio value={2}>Feilen er fikset</Radio>
+                </RadioGroup>
+                <RadioGroup
+                    legend="Hvor vil du sitte?"
+                    onChange={(haster: boolean) => {setHaster(haster)}}
+                    value={haster}
+                >
+                    <Radio value={true}>Ja</Radio>
+                    <Radio value={false}>Nei</Radio>
+                </RadioGroup>
+            </div>
+            <div className="flex gap-4 items-start">
+                <Button
+                    variant="primary"
+                    icon={<FloppydiskIcon/>}
+                    onClick={() => lagreEndringer()}
+                >
+                    Lagre
+                </Button>
+                <Button
+                    variant="danger"
+                    icon={<XMarkIcon/>}
+                    onClick={() => {
+                        props.setRedigeringsmodus(false)
+                    }}
+                >
+                    Avbryt
+                </Button>
+            </div>
+        </div>
+    )
+}
+export default RedigeringsVerktoy;