From 4651ab5cb67a5c51123a6f8e766f3afad3970763 Mon Sep 17 00:00:00 2001
From: mheggelund <maohe@equinor.com>
Date: Wed, 4 Oct 2023 10:03:44 +0200
Subject: [PATCH] chore: Add remove case functionality

---
 .../ComputeVariogram/CaseCard/CaseCard.tsx    | 13 +++++++++---
 .../CaseCardButtons/CaseCardButtons.tsx       | 14 +++++++++++--
 .../ComputeVariogram/ComputeVariogram.tsx     | 20 +++++++++++--------
 3 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx b/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx
index bbc4c724..cf0c45de 100644
--- a/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx
+++ b/src/features/Compute/ComputeVariogram/CaseCard/CaseCard.tsx
@@ -5,14 +5,21 @@ import * as Styled from './CaseCard.styled'
 import { CaseCardButtons } from './CaseCardButtons/CaseCardButtons'
 import { CaseCardInputs } from './CaseCardInputs/CaseCardInputs'
 import { CaseCardParameters } from './CaseCardParameters/CaseCardParameters'
-
 export default interface optionTypes {
   id: number
   name: string
   size?: string
 }
 
-export const CaseCard = ({ name }: { name: string }) => {
+export const CaseCard = ({
+  name,
+  id,
+  removeCase,
+}: {
+  name: string
+  id: string
+  removeCase: (id: string) => void
+}) => {
   const [selectedModelArea, setModelArea] = useState<optionTypes>()
   const [selectedComputeMethod, setComputeMethod] = useState<optionTypes>()
   const [selectedGrainSize, setGrainSize] = useState<optionTypes>()
@@ -66,7 +73,7 @@ export const CaseCard = ({ name }: { name: string }) => {
             setModelArea={setModelArea}
             setComputeMethod={setComputeMethod}
           />
-          <CaseCardButtons runCase={runCase} />
+          <CaseCardButtons id={id} runCase={runCase} removeCase={removeCase} />
         </Styled.CaseCard>
       </Styled.Case>
       <div>
diff --git a/src/features/Compute/ComputeVariogram/CaseCard/CaseCardButtons/CaseCardButtons.tsx b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardButtons/CaseCardButtons.tsx
index e97aba0a..5829941f 100644
--- a/src/features/Compute/ComputeVariogram/CaseCard/CaseCardButtons/CaseCardButtons.tsx
+++ b/src/features/Compute/ComputeVariogram/CaseCard/CaseCardButtons/CaseCardButtons.tsx
@@ -1,11 +1,21 @@
 import { Button } from '@equinor/eds-core-react'
 import * as Styled from './CaseCardButtons.styled'
 
-export const CaseCardButtons = ({ runCase }: { runCase: () => void }) => {
+export const CaseCardButtons = ({
+  id,
+  removeCase,
+  runCase,
+}: {
+  id: string
+  removeCase: (id: string) => void
+  runCase: () => void
+}) => {
   return (
     <Styled.ButtonDiv>
       <Button variant="outlined">Duplicate</Button>
-      <Button variant="outlined">Remove</Button>
+      <Button variant="outlined" onClick={() => removeCase(id)}>
+        Remove
+      </Button>
       <Button variant="outlined" onClick={runCase}>
         Run
       </Button>
diff --git a/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx b/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx
index 55a91688..0b195e89 100644
--- a/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx
+++ b/src/pages/ModelPages/Compute/ComputeVariogram/ComputeVariogram.tsx
@@ -6,36 +6,40 @@ import { ComputeCaseInfoActions } from '../../../../features/Compute/ComputeVari
 import * as Styled from './ComputeVariogram.styled'
 
 interface Casetype {
-  id: number
+  id: string
   name: string
 }
 export const ComputeVariogram = () => {
   const [cases, setCases] = useState<Casetype[]>([
-    { id: 1, name: 'Variogram Case 1' },
+    { id: '1', name: 'Variogram Case 1' },
   ])
 
-  const AddCase = () => {
+  const addCase = () => {
     const newCase: Casetype = {
-      id: Math.floor(Math.random() * 100),
+      id: `${Math.floor(Math.random() * 100)}`,
       name: `Variogram Case ${cases.length + 1}`,
     }
-
     setCases([...cases, newCase])
   }
 
+  const removeCase = (id: string) => {
+    const newCaseList = cases.filter((c) => c.id !== id)
+    setCases(newCaseList)
+  }
+
   return (
     <Styled.Case>
-      <ComputeCaseInfoActions addCase={AddCase} />
+      <ComputeCaseInfoActions addCase={addCase} />
       {cases.length !== 0 ? (
         cases.map((c) => (
           <Styled.CaseBorder key={c.id}>
-            <CaseCard name={c.name} />
+            <CaseCard id={c.id} name={c.name} removeCase={removeCase} />
           </Styled.CaseBorder>
         ))
       ) : (
         <Typography>Add a Case</Typography>
       )}
-      <Styled.AddCaseButton variant="outlined" onClick={AddCase}>
+      <Styled.AddCaseButton variant="outlined" onClick={addCase}>
         Add variogram case
       </Styled.AddCaseButton>
     </Styled.Case>