[FEAT] edit stack (#108)

* feat(front): edit a stack * feat(stack): refactor Co-authored-by: Thomasevano <[email protected]> --------- Co-authored-by: Romain Dreidemy <[email protected]>
RomainDreidemy · Sep 8, 2023 · cdf003c · cdf003c
1 parent ae40442
commit cdf003c
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 55 deletions.
diff --git a/front/src/views/organisms/CreateStackFormModal.organism.tsx b/front/src/views/organisms/CreateStackFormModal.organism.tsx
@@ -0,0 +1,18 @@
+import React, { type ReactElement } from 'react'
+import { type IStackCreate } from '../../interfaces/Stack.interface'
+import StackFormModalOrganism from './StackFormModal.organism'
+
+const CreateStackFormModalOrganism = ({ toggle, onSubmit }: {
+  toggle: () => void
+  onSubmit: (form: IStackCreate) => Promise<void>
+}): ReactElement => {
+  return <StackFormModalOrganism
+    title='Create a new stack'
+    buttonText='Create stack +'
+    stack={undefined}
+    toggle={toggle}
+    onSubmit={onSubmit}
+  />
+}
+
+export default CreateStackFormModalOrganism
diff --git a/front/src/views/organisms/EditStackFormModal.organism.tsx b/front/src/views/organisms/EditStackFormModal.organism.tsx
@@ -0,0 +1,19 @@
+import React, { type ReactElement } from 'react'
+import { type IStack, type IStackCreate } from '../../interfaces/Stack.interface'
+import StackFormModalOrganism from './StackFormModal.organism'
+
+const EditStackFormModalOrganism = ({ stack, toggle, onSubmit }: {
+  stack: IStack | undefined
+  toggle: () => void
+  onSubmit: (form: IStackCreate) => Promise<void>
+}): ReactElement => {
+  return <StackFormModalOrganism
+    title="Edit stack"
+    buttonText="Edit"
+    stack={stack}
+    toggle={toggle}
+    onSubmit={onSubmit}
+  />
+}
+
+export default EditStackFormModalOrganism
diff --git a/front/src/views/organisms/Modal.organism.tsx b/front/src/views/organisms/Modal.organism.tsx
@@ -1,11 +1,12 @@
 import React from 'react'
 import Button from '../atoms/forms/Button.atom'
 
-const ModalOrganism = ({ children, toggle, onSubmit, buttonText }: {
+const ModalOrganism = ({ children, toggle, onSubmit, buttonText, title }: {
   children: React.ReactNode
   toggle: () => void
   onSubmit?: () => void
   buttonText?: string
+  title?: string
 }): JSX.Element => {
   return (
     <>
@@ -18,7 +19,7 @@ const ModalOrganism = ({ children, toggle, onSubmit, buttonText }: {
             {/* header */}
             <div className="flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t">
               <h3 className="text-3xl font-semibold">
-                Create a new stack
+                {title}
               </h3>
             </div>
             {children}

diff --git a/front/src/views/organisms/StackFormModal.organism.tsx b/front/src/views/organisms/StackFormModal.organism.tsx
@@ -1,18 +1,17 @@
-import React, { type Dispatch, type SetStateAction, useState } from 'react'
+import React, { useState } from 'react'
 import { type IStack, type IStackCreate, STACK_STRUCTURE } from '../../interfaces/Stack.interface'
 import Input from '../atoms/forms/Input.atom'
-import StackEntity from '../../services/entities/Stack.entity'
 import useForm from '../../hooks/useForm'
 import { type EditorForm } from '../../forms/editor.structure'
 import TextArea from '../atoms/forms/TextArea.atom'
 import ModalOrganism from './Modal.organism'
-import Button from '../atoms/forms/Button.atom'
 
-const StackFormModalOrganism = ({ stack, stacks, setStacks, toggle }: {
+const StackFormModalOrganism = ({ title, buttonText, stack, toggle, onSubmit }: {
+  title: string
+  buttonText: string
   toggle: () => void
   stack?: IStack
-  stacks: IStack[]
-  setStacks: Dispatch<SetStateAction<IStack[]>>
+  onSubmit: (form: IStackCreate) => Promise<void>
 }): JSX.Element => {
   const [structure] = useState<EditorForm[]>(STACK_STRUCTURE)
 
@@ -23,36 +22,22 @@ const StackFormModalOrganism = ({ stack, stacks, setStacks, toggle }: {
 
   const { form: stackEntityForm, onChange, validatorsSchema } = useForm<IStackCreate>(stack ?? initialForm, structure)
 
-  const isCreating = stack?.id == null
-
-  const onSubmit = async (): Promise<void> => {
+  const onSubmitWithValidation = async (): Promise<void> => {
     await validatorsSchema.validate(stackEntityForm)
 
-    const stacksResponse =
-      isCreating
-        ? await StackEntity.create(stackEntityForm)
-        : await StackEntity.update(stackEntityForm as IStack)
-
-    if (!isCreating) return
-
-    setStacks([...stacks, stacksResponse.data])
-    toggle()
+    await onSubmit(stackEntityForm)
   }
 
-  const buttonText =
-    isCreating
-      ? 'Create stack +'
-      : 'Edit'
-
   return (
-    <ModalOrganism toggle={toggle} onSubmit={onSubmit} buttonText={buttonText}>
+    <ModalOrganism toggle={toggle} onSubmit={onSubmitWithValidation} buttonText={buttonText} title={title}>
       <div className="relative p-6 flex-auto">
         <form>
           <Input
             label="Name"
             type="text"
             name="name"
             className='mb-4'
+            value={stackEntityForm.name}
             onChange={onChange}
           />
 
@@ -61,18 +46,10 @@ const StackFormModalOrganism = ({ stack, stacks, setStacks, toggle }: {
             type="textarea"
             name="description"
             className='h-32'
+            value={stackEntityForm.description}
             onChange={onChange}
           />
         </form>
-        <div className="flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b">
-          <Button
-            label={buttonText}
-            onClick={onSubmit}
-            direction={'right'}
-          />
-
-          <Button className='btn-ghost ml-4' onClick={toggle} label={'Close'} />
-        </div>
       </div>
     </ModalOrganism>
   )

diff --git a/front/src/views/pages/StacksPage.tsx b/front/src/views/pages/StacksPage.tsx
@@ -1,49 +1,52 @@
 import React, { useEffect, useState } from 'react'
 import StackEntity from '../../services/entities/Stack.entity'
-import { type IStack } from '../../interfaces/Stack.interface'
-import StackFormModalOrganism from '../organisms/StackFormModal.organism'
+import { type IStack, type IStackCreate } from '../../interfaces/Stack.interface'
 import useToggle from '../../hooks/useToggle'
 import StackCardOrganism from '../organisms/StackCard.organism'
+import CreateStackFormModalOrganism from '../organisms/CreateStackFormModal.organism'
+import EditStackFormModalOrganism from '../organisms/EditStackFormModal.organism'
 
 const StacksPage = (): JSX.Element => {
   const [open, toggle] = useToggle()
   const [stacks, setStacks] = useState<IStack[]>([])
   const [selectedStack, setSelectedStack] = useState<IStack | undefined>(undefined)
+
   const getStacks = async (): Promise<void> => {
     const { data: stacksResponse } = await StackEntity.stacks()
     setStacks(stacksResponse)
   }
 
-  useEffect(() => {
-    (async () => {
-      await getStacks()
-    })()
-  }, [])
+  useEffect(() => { getStacks() }, [])
 
-  const openModal = (): void => {
+  const onOpenModal = (stack: IStack | undefined): void => {
+    setSelectedStack(stack)
     toggle()
   }
 
-  const onCreate = (): void => {
-    setSelectedStack(undefined)
-    openModal()
+  const onDelete = async (id: string): Promise<void> => {
+    await StackEntity.delete(id)
+    await getStacks()
   }
 
-  const onEdit = (stack: IStack): void => {
-    setSelectedStack(stack)
-    openModal()
-  }
+  const formState = selectedStack == null ? 'create' : 'edit'
+  const FormComponent = formState === 'create'
+    ? CreateStackFormModalOrganism
+    : EditStackFormModalOrganism
+
+  const onSubmit = async (stackEntityForm: IStackCreate): Promise<void> => {
+    formState === 'create'
+      ? await StackEntity.create(stackEntityForm)
+      : await StackEntity.update(stackEntityForm as IStack)
 
-  const onDelete = async (id: string): Promise<void> => {
-    await StackEntity.delete(id)
     await getStacks()
+    toggle()
   }
 
   return (
     <section>
       <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-4 p-5'>
         <button
-          onClick={onCreate}
+          onClick={() => { onOpenModal(undefined) }}
           className="card shadow-md mb-2 rounded bg-blue-100 border border-blue-100 hover:border-blue-200">
           <div className="card-body">
             <h2 className="card-title">+ Create a new stack</h2>
@@ -52,11 +55,22 @@ const StacksPage = (): JSX.Element => {
         </button>
         {
           (stacks.map((stack: IStack) => (
-            <StackCardOrganism key={stack.id} stack={stack} id={stack.id.toString()} name={stack.name} description={stack.description} onEdit={onEdit} onDelete={onDelete} />
+            <StackCardOrganism
+              key={stack.id}
+              stack={stack}
+              id={stack.id.toString()}
+              name={stack.name}
+              description={stack.description}
+              onEdit={() => { onOpenModal(stack) }}
+              onDelete={onDelete} />
           )))
         }
       </div>
-      {open && <StackFormModalOrganism stack={selectedStack} stacks={stacks} setStacks={setStacks} toggle={toggle}/>}
+       {open && <FormComponent
+          stack={selectedStack}
+          toggle={toggle}
+          onSubmit={onSubmit}
+       />}
     </section>
   )
 }