chore: Add remove case functionality

equinor · Oct 4, 2023 · 4651ab5 · 4651ab5
1 parent 8b8c6ff
commit 4651ab5
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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>