♻️ Delt opp feilkort og fullvisningskort i to komponenter ved bruk av useContext()

frontend/src/components/FeilCard.tsx

@@ -1,12 +1,75 @@
 import "@navikt/ds-css";
 import { Button, Heading, Tag } from "@navikt/ds-react";
 import { IFeilmelding } from "../interface";
-import { useState } from "react";
+import { createContext, useContext, useState } from "react";
+import { XMarkIcon } from "@navikt/aksel-icons";
 
 interface TagBarInterface {
     haster: boolean
 }
 
+interface HeaderInterface {
+    tittel: string,
+    beskrivelse: string,
+    haster: boolean
+}
+
+const visningsContext = createContext({
+    visHeleKortet: false,
+    setVisHeleKortet: (value: boolean) => {}
+})
+
+export const FeilCard = (props: IFeilmelding) => {
+    const [visHeleKortet, setVisHeleKortet] = useState(false)
+    const visningsModus = {visHeleKortet, setVisHeleKortet}
+
+    return(
+        <visningsContext.Provider value={visningsModus}>
+            <div className="
+                bg-bg-default border border-border-default p-7 rounded-lg 
+                hover:bg-bg-subtle hover:border-border-strong hover:shadow-md duration-100
+                active:bg-surface-active
+                "
+                onClick={() => {
+                    setVisHeleKortet(true)
+                }}>
+                <FeilkortHeader tittel={props.tittel} beskrivelse={props.beskrivelse} haster={false}/>
+                <FullvisningsKort tittel={props.tittel} beskrivelse={props.beskrivelse} dato={new Date()}/>
+            </div>
+        </visningsContext.Provider>
+    )
+}
+
+const FullvisningsKort = (props: IFeilmelding) => {
+    const {visHeleKortet, setVisHeleKortet} = useContext(visningsContext)
+    return(
+         visHeleKortet ? 
+            <div className="h-screen w-screen absolute top-0 right-0 bg-grayalpha-800">
+                <div className="w-full h-full flex justify-center items-center">
+                    <div className="bg-bg-default border border-border-default p-7 rounded-lg w-1/2">
+                        <div className="flex justify-between gap-4">
+                            <FeilkortHeader tittel={props.tittel} beskrivelse={props.beskrivelse} haster={true}/>
+                            <Button
+                                icon={<XMarkIcon/>}
+                                className="max-h-14 min-w-fit"
+                                variant="secondary"
+                                onClick={(e) => {
+                                    e.stopPropagation()
+                                    setVisHeleKortet(false)
+                                }}
+                            >
+                                Lukk
+                            </Button>                            
+                        </div>
+                        <div className="h-1 bg-bg-subtle w-full my-4"></div>
+                    </div>                    
+                </div>
+            </div> 
+        : <></>
+    )
+}
+
+
 //typen på status er veldig wack heheheh, må fjerne any etterhvert men String fungerer ikke 
 const TagBar = (props: TagBarInterface) => {
     return (
@@ -17,66 +80,15 @@ const TagBar = (props: TagBarInterface) => {
     )
 }
 
-// const FeilCard1 = (props: IFeilmelding) => {
-//     return (
-//         <ExpansionCard aria-label="tekst">
-//             <ExpansionCard.Header>
-//                 <ExpansionCard.Title>{props.tittel}</ExpansionCard.Title>
-//                 <ExpansionCard.Description>
-//                     {props.beskrivelse}
-//                 </ExpansionCard.Description>
-//                 <TagBar haster={true}/>
-//             </ExpansionCard.Header>
-//             <ExpansionCard.Content>
-//                 Hællæ
-//             </ExpansionCard.Content>
-//         </ExpansionCard>
-//     )
-// }
-// export default FeilCard1;
-
-export const FeilCard = (props: IFeilmelding) => {
-    const [visFeilinformasjon, setVisFeilinformasjon] = useState(false)
-
-    const FullvisningsKort = () => {    
-        return(
-            <div className="h-screen w-screen absolute top-0 right-0 bg-grayalpha-800">
-                <div className="w-full h-full flex justify-center items-center">
-                    <div className="
-                        bg-bg-default border border-border-default p-7 rounded-lg
-                        h-1/2 w-1/2
-                    ">
-                        <Button onClick={(e) => {
-                                //hindrer DOM bubbling https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli
-                                e.stopPropagation()
-                                setVisFeilinformasjon(false)
-                        }}>
-                            Avslutt kortvisning
-                        </Button>
-                    </div>                    
-                </div>
-            </div>
-        )
-    }
 
+const FeilkortHeader = (props: HeaderInterface) => {
     return(
-        <div className="
+        <div className="flex justify-between flex-col">
-            bg-bg-default border border-border-default p-7 rounded-lg 
-            flex justify-between flex-col
-            hover:bg-bg-subtle hover:border-border-strong hover:shadow-md duration-100
-            active:bg-surface-active
-            "
-            onClick={() => {
-                setVisFeilinformasjon(true)
-            }}>
-
             <div>
                 <Heading size="medium">{props.tittel}</Heading>
                 <p>{props.beskrivelse}</p>       
             </div>  
-            <TagBar haster={false}/>
+            <TagBar haster={props.haster}/>              
-
-            {visFeilinformasjon ? <FullvisningsKort/> : <></>}
         </div>
     )
 }