refacto(front): create stack form

front/src/interfaces/Forms/Input.interface.ts

@@ -7,6 +7,7 @@ export interface InputProps {
   name?: string
   value?: string
   className?: string
+  required?: boolean
   onChange?: (e: TOnChange) => void
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
 }

front/src/interfaces/Stack.interface.ts

@@ -1,15 +1,29 @@
+import { type EditorForm } from '../forms/editor.structure'
+import Input from '../views/atoms/forms/Input.atom'
+import { string } from 'yup'
+
 export interface IStack {
   id: number
 
   description: string
   name: string
 }
 
-export interface IStackEntity {
-  name: string
-  description: string
-}
+export type IStackCreate = Omit<IStack, 'id'>
 
-export interface IstackMethods {
-  createStack: (stack: IStackEntity) => Promise<IStack>
-}
+export const STACK_STRUCTURE: EditorForm[] = [
+  {
+    label: 'Name',
+    key: 'name',
+    type: 'text',
+    component: Input,
+    validator: string().required()
+  },
+  {
+    label: 'Description',
+    key: 'description',
+    type: 'text',
+    component: Input,
+    validator: string().nullable()
+  }
+]

front/src/services/entities/Stack.entity.ts

@@ -7,7 +7,7 @@ const StackEntity = {
   stacks: async () => await axios.get('/stacks'),
   stack: async (id: string) => await axios.get(`/stacks/${id}`),
   board: async (id: string): Promise<AxiosResponse<IBoard>> => await axios.get(`/stacks/${id}/board`),
-  createStack: async (stack: IStackEntity) => await axios.post('/stacks', stack),
+  create: async (stack: IStackEntity): Promise<AxiosResponse> => await axios.post('/stacks', stack)
 }
 
 export default StackEntity

front/src/views/atoms/forms/Input.atom.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { type InputProps } from '../../../interfaces/Forms/Input.interface'
 
-const Input = ({ label, type, placeholder, name, value, className = '', onChange, onKeyDown }: InputProps): JSX.Element => {
+const Input = ({ label, type, placeholder, name, value, className = '', onChange, onKeyDown, required = false }: InputProps): JSX.Element => {
   return (
         <>
             {(label != null) && <label className="font-semibold text-sm text-gray-600 pb-1 block">{label}</label> }
@@ -13,6 +13,7 @@ const Input = ({ label, type, placeholder, name, value, className = '', onChange
                 onChange={onChange}
                 onKeyDown={onKeyDown}
                 className={`input input-bordered w-full max-w-xs mt-1 ${className}`}
+                required={required}
             />
         </>
   )

front/src/views/organisms/CreateStackModal.organism.tsx

@@ -1,36 +1,28 @@
-import React, { useState } from "react";
-import { object, string } from 'yup'
-import { IStackEntity } from '../../interfaces/Stack.interface'
+import React, { useState } from 'react'
+import { STACK_STRUCTURE, type IStackCreate } from '../../interfaces/Stack.interface'
 import Button from '../atoms/forms/Button.atom'
 import Input from '../atoms/forms/Input.atom'
-import { BiRightArrowAlt } from 'react-icons/bi'
-import { validateSchema } from '../../services/utils/validation.util'
 import StackEntity from '../../services/entities/Stack.entity'
-import { IStack } from "../../interfaces/Stack.interface";
+import useForm from '../../hooks/useForm'
+import { type EditorForm } from '../../forms/editor.structure'
 
-const CreateStackModal = (stacks, setStacks):JSX.Element => {
-  const [form, setForm] = useState<IStackEntity>({ name: '', description: '' })
-
-  const stackSchema = object({
-    name: string().required(),
-    description: string().nullable(),
-  })
-
-  const changeValue = (e: React.ChangeEvent<any>): void => {
-    setForm({ ...form, [e.target.name]: e.target.value })
-  }
+const CreateStackModal = (stacks, setStacks): JSX.Element => {
+  const [structure] = useState<EditorForm[]>(STACK_STRUCTURE)
+  const { form: StackEntityForm, setForm: setStackEntityForm, onChange, validatorsSchema } = useForm<IStackCreate>(
+    {
+      name: '',
+      description: ''
+    }, structure)
 
   const createStack = async (): Promise<void> => {
-    const isSchemaValid = (await validateSchema(stackSchema, form))
-    if (!isSchemaValid) return
+    await validatorsSchema.validate(StackEntityForm)
 
     try {
-      const stacksResponse = await StackEntity.createStack(form)
-
-       setStacks((stacks:IStack[]) => [...stacks, stacksResponse.data])
+      const stacksResponse = await StackEntity.create(StackEntityForm)
 
+      setStacks([...stacks, stacksResponse.data])
     } catch (e: any) {
-      // setStatus({ ...status, errors: [{ path: e.response.data.status, message: e.response.data.message }] })
+      console.log(e)
     }
   }
 
@@ -42,18 +34,14 @@ const CreateStackModal = (stacks, setStacks):JSX.Element => {
           label="Name"
           type="text"
           name="name"
-          onChange={(e) => {
-            changeValue(e)
-          }}
+          onChange={onChange}
         />
 
         <Input
           label="Description"
           type="textarea"
           name="description"
-          onChange={(e) => {
-            changeValue(e)
-          }}
+          onChange={onChange}
           onKeyDown={async (e) => await (e.key === 'Enter' && createStack())}
         />
 
@@ -62,7 +50,6 @@ const CreateStackModal = (stacks, setStacks):JSX.Element => {
           onClick={async () => { createStack() }}
           direction={'right'}
         />
-        {/* if there is a button in form, it will close the modal */}
         <button className="btn">Close</button>
       </form>
   </div>

front/src/views/organisms/NewStack.organism.tsx

@@ -1,10 +1,10 @@
 import Input from '../atoms/forms/Input.atom'
 import Button from '../atoms/forms/Button.atom'
-import React, { type ReactElement, useState } from 'react'
+import React, { useState } from 'react'
 import StackEntity from '../../services/entities/Stack.entity'
 import { useNavigate } from 'react-router-dom'
 
-const NewStackOrganism = (): ReactElement => {
+const NewStackOrganism = () => {
   const [name, setName] = useState('')
 
   const navigate = useNavigate()

front/src/views/pages/StacksPage.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import StackEntity from '../../services/entities/Stack.entity'
 import { type IStack } from '../../interfaces/Stack.interface'
 import { Link } from 'react-router-dom'
 import CreateStackModal from '../organisms/CreateStackModal.organism'
 
 const StacksPage = (): JSX.Element => {
   const [stacks, setStacks] = useState<IStack[]>([])
-  
-  async function getStacks() {
+
+  async function getStacks () {
     const { data: stacksResponse } = await StackEntity.stacks()
     setStacks(stacksResponse)
   }