Merge pull request #47 from FluxonApps/danny/some-enhancements-of-tas…

…k-form Enhancements of task form
FluxonApps · Jun 6, 2024 · 278f028 · 278f028
2 parents b0d93fc + 73295f7
commit 278f028
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 40 deletions.
diff --git 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
@@ -1,12 +1,11 @@
-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 CustomCalendar from './CustomCalendar';
 
-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;
@@ -18,11 +17,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 ?? '');
@@ -96,7 +94,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 });
@@ -106,18 +104,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
@@ -4,7 +4,7 @@ export interface Task {
   name: string;
   description: string;
   importance: number;
-  deadline: Timestamp;
+  deadline: Timestamp | null;
   archived: boolean;
   status: boolean;
   userId: string;