fix: Edit form button.

Author: shirinapr

package-lock.json

@@ -50,6 +50,7 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "jest": "^27.5.1",
     "postcss": "^8.4.20",
     "prettier-eslint": "^15.0.1",
     "tailwindcss": "^3.2.4",

package.json

@@ -1,23 +1,6 @@
 {
   "short_name": "React App",
   "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",

public/manifest.json

@@ -8,6 +8,7 @@ type Props = {
   memo: string;
   title: string;
   priority: string;
+  currentId?: string;
   openModal: boolean;
   description: string;
   closeModal: () => void;

src/blocks/Modals/EditTask.tsx

@@ -6,23 +6,26 @@ import Item from '../../components/Item';
 import TasksDetails from '../Modals/TasksDetails';
 
 import { nanoid } from 'nanoid';
+import EditTask from '../Modals/EditTask';
 import { ITodo, useTodoContext } from '../../Context/TodoProvider';
 
 const Tasks = () => {
-  const [modalopen, setModalopen] = useState(false);
-  const [modal2open, setModal2open] = useState(false);
+  const [createModal, setCreateModal] = useState(false);
+  const [detailModal, setDetailModal] = useState(false);
+  const [editFormModal, setEditFormModal] = useState(false);
+
   const [currentId, setCurrentId] = useState('');
 
-  const { todoList, setDone, addTodo } = useTodoContext();
+  const { todoList, setDone, addTodo, editTodo } = useTodoContext();
 
   const onGoingTodos = todoList.filter(
     (todo) => todo.status === 'ongoing',
   );
 
-  const openEditModal = (id: string) => {
+  const openDetailModal = (id: string) => {
     setCurrentId(id);
     setTimeout(() => {
-      setModal2open(true);
+      setDetailModal(true);
     }, 50);
   };
 
@@ -35,8 +38,21 @@ const Tasks = () => {
   };
 
   const modalClose = () => {
-    setModalopen(false);
-    setModal2open(false);
+    setCreateModal(false);
+    setDetailModal(false);
+    setEditFormModal(false);
+  };
+
+  const editForm = (id: string) => {
+    setCurrentId(id);
+    setEditFormModal(true);
+  };
+
+  const index = todoList.findIndex((x) => x.id === currentId);
+
+  const onFinishEdit = (values: ITodo) => {
+    editTodo(todoList[index].id, values);
+    setEditFormModal(false);
   };
 
   return (
@@ -50,8 +66,8 @@ const Tasks = () => {
             priority={todo.priority}
             description={todo.description}
             handleIsDone={() => setDone(todo.id)}
-            onClick={() => openEditModal(todo.id)}
-            handleEdit={() => openEditModal(todo.id)}
+            onClick={() => openDetailModal(todo.id)}
+            handleEdit={() => editForm(todo.id)}
           />
         </div>
       ))}
@@ -60,21 +76,33 @@ const Tasks = () => {
         type="primary"
         className="bg-blue-600 absolute bottom-4 right-4 w-10 h-10"
         shape="circle"
-        onClick={() => setModalopen(true)}
+        onClick={() => setCreateModal(true)}
         content="+"
       />
 
       <CreateTask
-        openModal={modalopen}
+        openModal={createModal}
         closeModal={modalClose}
         onFinish={onFinish}
       />
 
       <TasksDetails
         currentId={currentId}
-        openModal={modal2open}
+        openModal={detailModal}
         closeModal={modalClose}
       />
+
+      {index !== -1 && (
+        <EditTask
+          onFinish={onFinishEdit}
+          closeModal={modalClose}
+          openModal={editFormModal}
+          memo={todoList[index].memo}
+          title={todoList[index].title}
+          priority={todoList[index].priority}
+          description={todoList[index].description}
+        />
+      )}
     </>
   );
 };

src/blocks/Tasks/index.tsx

@@ -3,23 +3,25 @@ import Primary from './models/primary';
 import Secondary from './models/secondary';
 
 type Props = {
-  type: 'primary' | 'secondary';
   id: string;
   title: string;
   priority: string;
+  minimized?: boolean;
   description: string;
   hasButtons?: boolean;
   onClick?: () => void;
   handleEdit: () => void;
   handleIsDone: () => void;
   handleDelete?: () => void;
+  type: 'primary' | 'secondary';
 };
 const Item = ({
   type,
   id,
   title,
   onClick,
   priority,
+  minimized,
   hasButtons,
   handleEdit,
   description,
@@ -33,6 +35,7 @@ const Item = ({
           id={id}
           title={title}
           priority={priority}
+          minimized={minimized}
           handleEdit={handleEdit}
           description={description}
           handleIsDone={handleIsDone}
@@ -56,6 +59,7 @@ const Item = ({
 
 Item.defaultProps = {
   hasButtons: true,
+  minimized: false,
   onClick: () => {},
   handleDelete: () => {},
 };

src/components/Item/index.tsx

@@ -8,6 +8,7 @@ type Props = {
   title: string;
   priority: string;
   description: string;
+  minimized?: boolean;
   hasButtons?: boolean;
   onClick?: () => void;
   handleEdit: () => void;
@@ -19,20 +20,28 @@ const Item = ({
   title,
   onClick,
   priority,
+  minimized,
   hasButtons,
   handleEdit,
   description,
   handleIsDone,
 }: Props) => {
   return (
     <div
-      onClick={onClick}
-      className="center my-4 lg:mx-20 mx-5 cursor-pointer"
+      className={`${
+        minimized ? 'mx-4' : 'lg:mx-[150px] mx-5'
+      } center my-4 cursor-pointer`}
     >
       <div className="container flex justify-between items-center">
-        <div>
+        <div onClick={onClick}>
           <p className="title">{title}</p>
-          <p className="description my-2">{description}</p>
+          <p
+            className={`${
+              minimized ? 'mindecription' : 'description'
+            } my-2`}
+          >
+            {description}
+          </p>
         </div>
         <div className="flex flex-col">
           <p className="priority">
@@ -74,6 +83,10 @@ const Item = ({
     </div>
   );
 };
-Item.defaultProps = { hasButtons: true, onClick: () => {} };
+Item.defaultProps = {
+  hasButtons: true,
+  onClick: () => {},
+  minimized: false,
+};
 
 export default Item;

src/components/Item/models/primary.tsx

@@ -8,14 +8,24 @@
   }
 }
 .description {
-  width: 300px;
+  width: 900px;
+  @media (max-width: 1290px) and (min-width: 670px) {
+    width: 400px;
+  }
+  @media (max-width: 670px) and (min-width: 515px) {
+    width: 250px;
+  }
+  @media (max-width: 515px) {
+    width: 100px;
+  }
+}
+
+.mindecription,
+.description {
   font-size: 18px;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 18px;
-  @media (max-width: 600px) {
-    width: 100px;
-  }
 }
 .title {
   font-size: 24px;

src/components/Item/models/styles.scss

@@ -18,6 +18,7 @@ const DoneTasks = () => {
             <div key={i}>
               <Item
                 type="primary"
+                minimized
                 id={todo.id}
                 hasButtons={false}
                 title={todo.title}

src/components/contents/DoneTasks.tsx

@@ -42,8 +42,9 @@ const FormComponent = ({
       name="nest-messages"
       onFinish={onCheck}
       validateMessages={validateMessages}
+      initialValues={{ name: 'hey' }}
     >
-      <Form.Item name={['title']} rules={[{ required: true }]}>
+      <Form.Item name={'title'} rules={[{ required: true }]}>
         <Input
           placeholder="Enter Title"
           onChange={() => {}}
@@ -52,7 +53,7 @@ const FormComponent = ({
           defaultValue={titleValue}
         />
       </Form.Item>
-      <Form.Item name={['description']} rules={[{ required: true }]}>
+      <Form.Item name={'description'} rules={[{ required: true }]}>
         <Input
           placeholder="Enter Description"
           onChange={() => {}}
@@ -61,7 +62,7 @@ const FormComponent = ({
           defaultValue={descriptionValue}
         />
       </Form.Item>
-      <Form.Item name={['memo']} rules={[{ required: true }]}>
+      <Form.Item name={'memo'} rules={[{ required: true }]}>
         <Input
           placeholder="Enter what you like"
           onChange={() => {}}
@@ -70,7 +71,7 @@ const FormComponent = ({
           defaultValue={memoValue}
         />
       </Form.Item>
-      <Form.Item name={['priority']} rules={[{ required: true }]}>
+      <Form.Item name={'priority'} rules={[{ required: true }]}>
         <Radio.Group
           className="flex justify-between items-center"
           defaultValue={priorityValue}