From cdf22ed5c0d069385a1f9ffaf7b36185cbbf67e7 Mon Sep 17 00:00:00 2001
From: Wouch <wouch@noreply.xyz>
Date: Thu, 6 Jun 2024 20:55:27 +0300
Subject: [PATCH 1/7] add button and update on click

---
 src/components/AddTaskButton.tsx     |   2 +-
 src/components/TaskBox.tsx           | 111 +++++++++++++++++++--------
 src/components/TaskForm.tsx          |  58 +++++++++-----
 src/components/layout/MainLayout.tsx |   3 +
 4 files changed, 122 insertions(+), 52 deletions(-)

diff --git a/src/components/AddTaskButton.tsx b/src/components/AddTaskButton.tsx
index 9dbd6ca..535e18c 100644
--- a/src/components/AddTaskButton.tsx
+++ b/src/components/AddTaskButton.tsx
@@ -35,7 +35,7 @@ export function AddTaskButton() {
       description: newTask.description,
       activated: true,
       importance: Number(newTask.importance),
-      status: true,
+      status: false,
       userId: user?.uid,
     });
 
diff --git a/src/components/TaskBox.tsx b/src/components/TaskBox.tsx
index 2aba324..530d5f2 100644
--- a/src/components/TaskBox.tsx
+++ b/src/components/TaskBox.tsx
@@ -1,5 +1,5 @@
-import React, { ChangeEvent, useState } from 'react';
-import { Box, Stack, Checkbox, Flex, Text } from '@chakra-ui/react';
+import React, { useState } from 'react';
+import { ModalBody, ModalContent, Modal, ModalHeader, ModalCloseButton, ModalOverlay, Box, Stack, Checkbox, Flex, Text } from '@chakra-ui/react';
 
 import { updateDoc, doc } from 'firebase/firestore';
 import { db } from '../../firebase.config';
@@ -8,9 +8,32 @@ import { Task } from '../models/Task';
 interface CustomBoxProps {
   task: Task;
 }
+import { TaskFormData, TaskForm } from './TaskForm';
 
 const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const [defaultFormValues] = useState<TaskFormData>({
+    name: task.name,
+    deadline: task.deadline,
+    description: task.description,
+    importance: task.importance,
+  });
+
+  const handleUpdateTask = async (newTask: TaskFormData) => {
+    const taskDoc = doc(db, 'tasks', task.id);
+    const newFields = {
+      name: newTask.name,
+      description: newTask.description,
+      deadline: newTask.deadline,
+      importance: newTask.importance,
+    };
+    await updateDoc(taskDoc, newFields);
+    setIsModalOpen(false);
+  };
+
+
   const handleCheckboxChange = async () => {
     const taskDoc = doc(db, 'tasks', task.id);
 
@@ -21,6 +44,15 @@ const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
 
   };
 
+  const handleWrapper = (isCheckbox: boolean) => {
+    if (isCheckbox) {
+      console.log("what's your problem")
+      handleCheckboxChange();
+    } else {
+      setIsModalOpen(true);
+    }
+  }
+
   const getBorderColor = () => {
     switch (task.importance) {
       case 1:
@@ -35,37 +67,50 @@ const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
   };
 
   return (
-    <Box
-      border="4px"
-      borderColor={getBorderColor()}
-      borderRadius="30px"
-      p="20px"
-      width="100%"
-      height="200px"
-      bg="background"
-      opacity={task.status ? "50%" : "100%"}
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-    >
-      <Flex width="80%" alignItems="center" justifyContent="space-between">
-        <Box >
-          <Stack spacing="5">
-            <Text
-              fontSize="24px"
-              color="black"
-              textDecoration={task.status ? 'line-through' : 'none'}
-            >
-              {task.name}
-            </Text>
-            <Text fontSize="18px" color="grey">
-              {task.deadline?.toDate().toLocaleString()}
-            </Text>
-          </Stack>
-        </Box>
-        <Checkbox colorScheme='green' size="lg" isChecked={task.status} onChange={handleCheckboxChange} />
-      </Flex>
-    </Box >
+    <>
+      <Box
+        border="4px"
+        borderColor={getBorderColor()}
+        borderRadius="30px"
+        p="20px"
+        width="100%"
+        height="200px"
+        bg="background"
+        opacity={task.status ? "50%" : "100%"}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        onClick={() => handleWrapper(false)}
+      >
+        <Flex width="80%" alignItems="center" justifyContent="space-between" >
+          <Box >
+            <Stack spacing="5" >
+              <Text
+                fontSize="24px"
+                color="black"
+                textDecoration={task.status ? 'line-through' : 'none'}
+              >
+                {task.name}
+              </Text>
+              <Text fontSize="18px" color="grey">
+                {task.deadline?.toDate().toLocaleString()}
+              </Text>
+            </Stack>
+          </Box>
+          <Checkbox colorScheme='green' size="lg" isChecked={task.status} onChange={() => handleWrapper(true)} />
+        </Flex>
+      </Box >
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Update task</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <TaskForm onSubmit={handleUpdateTask} defaultValues={defaultFormValues} isUpdate={true} task={task} />
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
   );
 };
 
diff --git a/src/components/TaskForm.tsx b/src/components/TaskForm.tsx
index 5263ec8..e4d6f70 100644
--- a/src/components/TaskForm.tsx
+++ b/src/components/TaskForm.tsx
@@ -1,7 +1,12 @@
-import { Button, Heading, Input, Radio, RadioGroup, Stack } from '@chakra-ui/react';
-import { Timestamp } from 'firebase/firestore';
+import { Button, HStack, Heading, Input, Radio, RadioGroup, Stack } from '@chakra-ui/react';
+import { DeleteIcon } from '@chakra-ui/icons';
 import { useState } from 'react';
 
+import { deleteDoc, doc, Timestamp } from 'firebase/firestore';
+import { db } from '../../firebase.config';
+
+import { Task } from '../models/Task'
+
 export interface TaskFormData {
   name: string;
   deadline: Timestamp | null;
@@ -13,14 +18,20 @@ interface ITaskForm {
   defaultValues?: TaskFormData;
   onSubmit: (newTask: TaskFormData) => void;
   isUpdate: boolean;
+  task: Task
 }
 
-export function TaskForm({ onSubmit, defaultValues, isUpdate }: ITaskForm) {
+export function TaskForm({ onSubmit, defaultValues, isUpdate, task }: ITaskForm) {
   const [name, setName] = useState(defaultValues?.name ?? '');
   const [deadline, setDeadline] = useState<Timestamp | null>(defaultValues?.deadline ?? null);
   const [description, setDescription] = useState(defaultValues?.description ?? '');
   const [importance, setImportance] = useState(defaultValues?.importance ?? 1);
 
+  const deleteTask = async (id: string) => {
+    const taskDoc = doc(db, 'tasks', id);
+    await deleteDoc(taskDoc);
+  };
+
   return (
     <Stack spacing="3">
       <Input
@@ -63,20 +74,31 @@ export function TaskForm({ onSubmit, defaultValues, isUpdate }: ITaskForm) {
           <Radio value="3">High</Radio>
         </Stack>
       </RadioGroup>
-      <Button
-        width="50%"
-        size="sm"
-        colorScheme="green"
-        onClick={() => {
-          onSubmit({ name, deadline, description, importance });
-          setName('');
-          setDeadline(null);
-          setDescription('');
-          setImportance(1);
-        }}
-      >
-        {isUpdate ? 'Update' : 'Add'}
-      </Button>
-    </Stack>
+      <HStack>
+        <Button
+          width="50%"
+          size="sm"
+          colorScheme="green"
+          onClick={() => {
+            onSubmit({ name, deadline, description, importance });
+            setName('');
+            setDeadline(null);
+            setDescription('');
+            setImportance(1);
+          }}
+        >
+          {isUpdate ? 'Update' : 'Add'}
+        </Button>
+
+        {isUpdate ?
+          < Button size="sm" colorScheme="red" onClick={() => deleteTask(task.id)}>
+            <DeleteIcon />
+          </Button>
+          :
+          <>
+          </>
+        }
+      </HStack>
+    </Stack >
   );
 }
diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx
index 5d2f764..a8c880c 100644
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -3,6 +3,8 @@ import { FC, ReactNode } from 'react';
 import { getAuth } from 'firebase/auth';
 import { useSignOut } from 'react-firebase-hooks/auth';
 
+import { AddTaskButton } from '../AddTaskButton';
+
 interface MainLayoutProps {
   children: ReactNode;
 }
@@ -30,6 +32,7 @@ const MainLayout: FC<MainLayoutProps> = ({ children }) => {
         <Button onClick={signOut} isDisabled={isSigningOut} isLoading={isSigningOut}>
           Sign out
         </Button>
+        <AddTaskButton />
       </Flex>
       <Box pt={16}>{children}</Box>
     </Box>

From f43f33e7d539f18309193ef0d455dec9ba44d91a Mon Sep 17 00:00:00 2001
From: Wouch <wouch@noreply.xyz>
Date: Thu, 6 Jun 2024 22:14:16 +0300
Subject: [PATCH 2/7] update task doesn't overlaps with checkbox

---
 src/components/TaskBox.tsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/TaskBox.tsx b/src/components/TaskBox.tsx
index 530d5f2..d0f577d 100644
--- a/src/components/TaskBox.tsx
+++ b/src/components/TaskBox.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { ModalBody, ModalContent, Modal, ModalHeader, ModalCloseButton, ModalOverlay, Box, Stack, Checkbox, Flex, Text } from '@chakra-ui/react';
 
 import { updateDoc, doc } from 'firebase/firestore';
@@ -35,6 +35,9 @@ const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
 
 
   const handleCheckboxChange = async () => {
+
+
+
     const taskDoc = doc(db, 'tasks', task.id);
 
     const newFields = {
@@ -44,15 +47,11 @@ const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
 
   };
 
-  const handleWrapper = (isCheckbox: boolean) => {
-    if (isCheckbox) {
-      console.log("what's your problem")
-      handleCheckboxChange();
-    } else {
-      setIsModalOpen(true);
-    }
+  const handleBoxClick = () => {
+    setIsModalOpen(true);
   }
 
+
   const getBorderColor = () => {
     switch (task.importance) {
       case 1:
@@ -80,9 +79,8 @@ const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
         display="flex"
         alignItems="center"
         justifyContent="center"
-        onClick={() => handleWrapper(false)}
       >
-        <Flex width="80%" alignItems="center" justifyContent="space-between" >
+        <Flex width="80%" alignItems="center" justifyContent="space-between" onClick={handleBoxClick}>
           <Box >
             <Stack spacing="5" >
               <Text
@@ -97,8 +95,9 @@ const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
               </Text>
             </Stack>
           </Box>
-          <Checkbox colorScheme='green' size="lg" isChecked={task.status} onChange={() => handleWrapper(true)} />
+
         </Flex>
+        <Checkbox colorScheme='green' size="lg" isChecked={task.status} onChange={handleCheckboxChange} />
       </Box >
       <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
         <ModalOverlay />

From 003ce92b70a45f8aa015802a6f3250e6e3bd82b6 Mon Sep 17 00:00:00 2001
From: Wouch <wouch@noreply.xyz>
Date: Thu, 6 Jun 2024 22:21:44 +0300
Subject: [PATCH 3/7] bigger flex box to easier aim on the task box

---
 src/components/TaskBox.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/TaskBox.tsx b/src/components/TaskBox.tsx
index d0f577d..f67f7c6 100644
--- a/src/components/TaskBox.tsx
+++ b/src/components/TaskBox.tsx
@@ -80,9 +80,9 @@ const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
         alignItems="center"
         justifyContent="center"
       >
-        <Flex width="80%" alignItems="center" justifyContent="space-between" onClick={handleBoxClick}>
+        <Flex width="100%" height="100%" alignItems="center" justifyContent="space-between" onClick={handleBoxClick}>
           <Box >
-            <Stack spacing="5" >
+            <Stack spacing="5" paddingLeft="20">
               <Text
                 fontSize="24px"
                 color="black"
@@ -95,9 +95,8 @@ const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
               </Text>
             </Stack>
           </Box>
-
         </Flex>
-        <Checkbox colorScheme='green' size="lg" isChecked={task.status} onChange={handleCheckboxChange} />
+        <Checkbox colorScheme='green' size="lg" isChecked={task.status} onChange={handleCheckboxChange} paddingRight="20" />
       </Box >
       <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
         <ModalOverlay />

From bcb6017263ce670ca5b5b7743ef06114cfd93e3a Mon Sep 17 00:00:00 2001
From: Wouch <wouch@noreply.xyz>
Date: Thu, 6 Jun 2024 22:34:14 +0300
Subject: [PATCH 4/7] redesign of update/add task form

---
 src/components/TaskForm.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/components/TaskForm.tsx b/src/components/TaskForm.tsx
index e4d6f70..596c0eb 100644
--- a/src/components/TaskForm.tsx
+++ b/src/components/TaskForm.tsx
@@ -41,6 +41,12 @@ export function TaskForm({ onSubmit, defaultValues, isUpdate, task }: ITaskForm)
         value={name}
         placeholder="Name of Task..."
         size="sm"
+        borderRadius="15"
+        borderWidth="3"
+        borderColor="highlight"
+        _focusVisible={{ borderWidth: '3px', borderColor: 'secondarytext' }}
+        bg="background"
+        color="secondarytext"
       />
       <Input
         type="datetime-local"
@@ -51,6 +57,12 @@ export function TaskForm({ onSubmit, defaultValues, isUpdate, task }: ITaskForm)
         }}
         value={deadline?.toDate().toLocaleString()}
         size="sm"
+        borderRadius="15"
+        borderWidth="3"
+        borderColor="highlight"
+        _focusVisible={{ borderWidth: '3px', borderColor: 'secondarytext' }}
+        bg="background"
+        color="secondarytext"
       />
       <Input
         placeholder="Description..."
@@ -59,6 +71,12 @@ export function TaskForm({ onSubmit, defaultValues, isUpdate, task }: ITaskForm)
         }}
         value={description}
         size="sm"
+        borderRadius="15"
+        borderWidth="3"
+        borderColor="highlight"
+        _focusVisible={{ borderWidth: '3px', borderColor: 'secondarytext' }}
+        bg="background"
+        color="secondarytext"
       />
       <Heading fontSize={20}>Choose the level of importance</Heading>
       <RadioGroup
@@ -78,6 +96,8 @@ export function TaskForm({ onSubmit, defaultValues, isUpdate, task }: ITaskForm)
         <Button
           width="50%"
           size="sm"
+          bg="secondarytext"
+          _hover={{ bg: "secondary", color: "secondarytext" }}
           colorScheme="green"
           onClick={() => {
             onSubmit({ name, deadline, description, importance });

From 73295f79417c917b1f5424cc5e610e1aa6c80782 Mon Sep 17 00:00:00 2001
From: Danny <danny@fluxon.com>
Date: Fri, 7 Jun 2024 00:04:11 +0300
Subject: [PATCH 5/7] Enhancements of task form

---
 src/components/TaskBox.tsx  | 63 +++++++++++++++++++++++--------------
 src/components/TaskForm.tsx | 29 ++++++++---------
 src/models/Task.ts          |  2 +-
 3 files changed, 54 insertions(+), 40 deletions(-)

diff --git a/src/components/TaskBox.tsx b/src/components/TaskBox.tsx
index f67f7c6..ee637e1 100644
--- a/src/components/TaskBox.tsx
+++ b/src/components/TaskBox.tsx
@@ -1,26 +1,47 @@
-import { useState } from 'react';
-import { ModalBody, ModalContent, Modal, ModalHeader, ModalCloseButton, ModalOverlay, Box, Stack, Checkbox, Flex, Text } from '@chakra-ui/react';
-
+import {
+  ModalBody,
+  ModalContent,
+  Modal,
+  ModalHeader,
+  ModalCloseButton,
+  ModalOverlay,
+  Box,
+  Stack,
+  Checkbox,
+  Flex,
+  Text,
+} from '@chakra-ui/react';
 import { updateDoc, doc } from 'firebase/firestore';
+import { useEffect, useState } from 'react';
+
 import { db } from '../../firebase.config';
 import { Task } from '../models/Task';
 
+import { TaskFormData, TaskForm } from './TaskForm';
+
 interface CustomBoxProps {
   task: Task;
 }
-import { TaskFormData, TaskForm } from './TaskForm';
 
 const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
-
   const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const [defaultFormValues] = useState<TaskFormData>({
+  const [defaultFormValues, setDefaultFormValues] = useState<TaskFormData>({
     name: task.name,
     deadline: task.deadline,
     description: task.description,
     importance: task.importance,
   });
 
+  useEffect(() => {
+    setDefaultFormValues({
+      name: task.name,
+      deadline: task.deadline,
+      description: task.description,
+      importance: task.importance,
+    });
+  }, [task]);
+
   const handleUpdateTask = async (newTask: TaskFormData) => {
     const taskDoc = doc(db, 'tasks', task.id);
     const newFields = {
@@ -33,24 +54,18 @@ const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
     setIsModalOpen(false);
   };
 
-
   const handleCheckboxChange = async () => {
-
-
-
     const taskDoc = doc(db, 'tasks', task.id);
 
     const newFields = {
-      status: !task.status
+      status: !task.status,
     };
     await updateDoc(taskDoc, newFields);
-
   };
 
   const handleBoxClick = () => {
     setIsModalOpen(true);
-  }
-
+  };
 
   const getBorderColor = () => {
     switch (task.importance) {
@@ -75,19 +90,15 @@ const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
         width="100%"
         height="200px"
         bg="background"
-        opacity={task.status ? "50%" : "100%"}
+        opacity={task.status ? '50%' : '100%'}
         display="flex"
         alignItems="center"
         justifyContent="center"
       >
         <Flex width="100%" height="100%" alignItems="center" justifyContent="space-between" onClick={handleBoxClick}>
-          <Box >
+          <Box>
             <Stack spacing="5" paddingLeft="20">
-              <Text
-                fontSize="24px"
-                color="black"
-                textDecoration={task.status ? 'line-through' : 'none'}
-              >
+              <Text fontSize="24px" color="black" textDecoration={task.status ? 'line-through' : 'none'}>
                 {task.name}
               </Text>
               <Text fontSize="18px" color="grey">
@@ -96,8 +107,14 @@ const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
             </Stack>
           </Box>
         </Flex>
-        <Checkbox colorScheme='green' size="lg" isChecked={task.status} onChange={handleCheckboxChange} paddingRight="20" />
-      </Box >
+        <Checkbox
+          colorScheme="green"
+          size="lg"
+          isChecked={task.status}
+          onChange={handleCheckboxChange}
+          paddingRight="20"
+        />
+      </Box>
       <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
         <ModalOverlay />
         <ModalContent>
diff --git a/src/components/TaskForm.tsx b/src/components/TaskForm.tsx
index 596c0eb..29ec483 100644
--- a/src/components/TaskForm.tsx
+++ b/src/components/TaskForm.tsx
@@ -1,11 +1,10 @@
-import { Button, HStack, Heading, Input, Radio, RadioGroup, Stack } from '@chakra-ui/react';
 import { DeleteIcon } from '@chakra-ui/icons';
+import { Button, HStack, Heading, Input, Radio, RadioGroup, Stack } from '@chakra-ui/react';
+import { deleteDoc, doc, Timestamp } from 'firebase/firestore';
 import { useState } from 'react';
 
-import { deleteDoc, doc, Timestamp } from 'firebase/firestore';
 import { db } from '../../firebase.config';
-
-import { Task } from '../models/Task'
+import { Task } from '../models/Task';
 
 export interface TaskFormData {
   name: string;
@@ -17,11 +16,10 @@ export interface TaskFormData {
 interface ITaskForm {
   defaultValues?: TaskFormData;
   onSubmit: (newTask: TaskFormData) => void;
-  isUpdate: boolean;
-  task: Task
+  taskId?: string;
 }
 
-export function TaskForm({ onSubmit, defaultValues, isUpdate, task }: ITaskForm) {
+export function TaskForm({ onSubmit, defaultValues, taskId }: ITaskForm) {
   const [name, setName] = useState(defaultValues?.name ?? '');
   const [deadline, setDeadline] = useState<Timestamp | null>(defaultValues?.deadline ?? null);
   const [description, setDescription] = useState(defaultValues?.description ?? '');
@@ -97,7 +95,7 @@ export function TaskForm({ onSubmit, defaultValues, isUpdate, task }: ITaskForm)
           width="50%"
           size="sm"
           bg="secondarytext"
-          _hover={{ bg: "secondary", color: "secondarytext" }}
+          _hover={{ bg: 'secondary', color: 'secondarytext' }}
           colorScheme="green"
           onClick={() => {
             onSubmit({ name, deadline, description, importance });
@@ -107,18 +105,17 @@ export function TaskForm({ onSubmit, defaultValues, isUpdate, task }: ITaskForm)
             setImportance(1);
           }}
         >
-          {isUpdate ? 'Update' : 'Add'}
+          {taskId ? 'Update' : 'Add'}
         </Button>
 
-        {isUpdate ?
-          < Button size="sm" colorScheme="red" onClick={() => deleteTask(task.id)}>
+        {taskId ? (
+          <Button size="sm" colorScheme="red" onClick={() => deleteTask(taskId)}>
             <DeleteIcon />
           </Button>
-          :
-          <>
-          </>
-        }
+        ) : (
+          <></>
+        )}
       </HStack>
-    </Stack >
+    </Stack>
   );
 }
diff --git a/src/models/Task.ts b/src/models/Task.ts
index e57b8db..5c6adc7 100644
--- a/src/models/Task.ts
+++ b/src/models/Task.ts
@@ -4,7 +4,7 @@ export interface Task {
   name: string;
   description: string;
   importance: number;
-  deadline: Timestamp;
+  deadline: Timestamp | null;
   archived: boolean;
   status: boolean;
   userId: string;

From 7a590ee810ce56260cebab6340ec72d06369c437 Mon Sep 17 00:00:00 2001
From: Wouch <wouch@noreply.xyz>
Date: Fri, 7 Jun 2024 00:19:24 +0300
Subject: [PATCH 6/7] small fixes and enhancements

---
 src/components/TaskBox.tsx  |  7 +------
 src/components/TaskForm.tsx | 10 +++++-----
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/components/TaskBox.tsx b/src/components/TaskBox.tsx
index f9a376b..1021d04 100644
--- a/src/components/TaskBox.tsx
+++ b/src/components/TaskBox.tsx
@@ -33,11 +33,8 @@ const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
     setIsModalOpen(false);
   };
 
-
   const handleCheckboxChange = async () => {
 
-
-
     const taskDoc = doc(db, 'tasks', task.id);
 
     const newFields = {
@@ -51,7 +48,6 @@ const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
     setIsModalOpen(true);
   }
 
-
   const getBorderColor = () => {
     switch (task.importance) {
       case 1:
@@ -65,7 +61,6 @@ const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
     }
   };
 
-
   return (
     <>
       <Box
@@ -105,7 +100,7 @@ const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
           <ModalHeader>Update task</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            <TaskForm onSubmit={handleUpdateTask} defaultValues={defaultFormValues} isUpdate={true} task={task} />
+            <TaskForm onSubmit={handleUpdateTask} defaultValues={defaultFormValues} isUpdate={true} taskId={task.id} />
           </ModalBody>
         </ModalContent>
       </Modal>
diff --git a/src/components/TaskForm.tsx b/src/components/TaskForm.tsx
index 52d9fb3..b98fa1d 100644
--- a/src/components/TaskForm.tsx
+++ b/src/components/TaskForm.tsx
@@ -2,11 +2,11 @@ import { Button, HStack, Heading, Input, Radio, RadioGroup, Stack } from '@chakr
 import { DeleteIcon } from '@chakra-ui/icons';
 import { useState } from 'react';
 import CustomCalendar from './CustomCalendar';
+import { Textarea } from '@chakra-ui/react';
 
 import { deleteDoc, doc, Timestamp } from 'firebase/firestore';
 import { db } from '../../firebase.config';
 
-import { Task } from '../models/Task'
 
 export interface TaskFormData {
   name: string;
@@ -19,10 +19,10 @@ interface ITaskForm {
   defaultValues?: TaskFormData;
   onSubmit: (newTask: TaskFormData) => void;
   isUpdate: boolean;
-  task: Task
+  taskId: string
 }
 
-export function TaskForm({ onSubmit, defaultValues, isUpdate, task }: ITaskForm) {
+export function TaskForm({ onSubmit, defaultValues, isUpdate, taskId }: ITaskForm) {
   const [name, setName] = useState(defaultValues?.name ?? '');
   const [deadline, setDeadline] = useState<Timestamp | null>(defaultValues?.deadline ?? null);
   const [description, setDescription] = useState(defaultValues?.description ?? '');
@@ -63,7 +63,7 @@ export function TaskForm({ onSubmit, defaultValues, isUpdate, task }: ITaskForm)
         bg="background"
         color="secondarytext"
       />
-      <Input
+      <Textarea
         placeholder="Description..."
         onChange={(event) => {
           setDescription(event.target.value);
@@ -110,7 +110,7 @@ export function TaskForm({ onSubmit, defaultValues, isUpdate, task }: ITaskForm)
         </Button>
 
         {isUpdate ?
-          < Button size="sm" colorScheme="red" onClick={() => deleteTask(task.id)}>
+          < Button size="sm" colorScheme="red" onClick={() => deleteTask(taskId)}>
             <DeleteIcon />
           </Button>
           :

From eb164bb6dc0f3a1ab9f891a6fc9c15b3ad0eb520 Mon Sep 17 00:00:00 2001
From: Wouch <wouch@noreply.xyz>
Date: Fri, 7 Jun 2024 10:07:52 +0300
Subject: [PATCH 7/7] fix of export taskbox

---
 src/components/TaskBox.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/TaskBox.tsx b/src/components/TaskBox.tsx
index 2f9ed3e..1c6d182 100644
--- a/src/components/TaskBox.tsx
+++ b/src/components/TaskBox.tsx
@@ -129,3 +129,4 @@ const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
   );
 };
 
+export default TaskBox;