Merge pull request #50 from FluxonApps/test/calendar-merge

calendar merge
FluxonApps · Jun 7, 2024 · e357320 · e357320
2 parents 98c3a30 + eb164bb
commit e357320
Show file tree

Hide file tree

Showing 7 changed files with 174 additions and 58 deletions.
diff --git 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/CustomCalendar.tsx b/src/components/CustomCalendar.tsx
@@ -27,7 +27,7 @@ const CustomCalendar = ({ selectedDate, onDateChange }) => {
         value={internalDate}
         onChange={handleDateChange}
       />
-      <Button onClick={handleClearDate} size="sm" colorScheme="red">
+      <Button onClick={handleClearDate} size="sm" bg="secondarytext" color="white" _hover={{ bg: "secondary", color: "secondarytext" }}>
         Clear
       </Button>
     </Stack>

diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx
@@ -23,7 +23,17 @@ import { ClassNames } from '@emotion/react';
 const CustomInput = forwardRef<any, any>((props, ref) => {
   return (
     <InputGroup>
-      <Input {...props} ref={ref} backgroundColor="white" />
+      <Input {...props}
+        ref={ref}
+        backgroundColor="white"
+        borderRadius="15"
+        borderWidth="3"
+        borderColor="highlight"
+        _focusVisible={{ borderWidth: '3px', borderColor: 'secondarytext' }}
+        bg="background"
+        color="secondarytext"
+      />
+
       <InputRightElement
         userSelect="none"
         pointerEvents="none"

diff --git a/src/components/TaskBox.tsx b/src/components/TaskBox.tsx
@@ -1,24 +1,70 @@
-import React, { ChangeEvent, useState } from 'react';
-import { Box, Stack, Checkbox, Flex, Text } from '@chakra-ui/react';
+import { updateDoc, doc, Timestamp } from 'firebase/firestore';
+import {
+  ModalBody,
+  ModalContent,
+  Modal,
+  ModalHeader,
+  ModalCloseButton,
+  ModalOverlay,
+  Box,
+  Stack,
+  Checkbox,
+  Flex,
+  Text,
+} from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
 
-import { updateDoc, doc } from 'firebase/firestore';
 import { db } from '../../firebase.config';
 import { Task } from '../models/Task';
 
+import { TaskFormData, TaskForm } from './TaskForm';
+
 interface CustomBoxProps {
   task: Task;
 }
 
 const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  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 = {
+      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);
 
     const newFields = {
-      status: !task.status
+      status: !task.status,
     };
     await updateDoc(taskDoc, newFields);
+  };
 
+  const handleBoxClick = () => {
+    setIsModalOpen(true);
   };
 
   const getBorderColor = () => {
@@ -35,37 +81,51 @@ 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"
+      >
+        <Flex width="100%" height="100%" alignItems="center" justifyContent="space-between" onClick={handleBoxClick}>
+          <Box>
+            <Stack spacing="5" paddingLeft="20">
+              <Text fontSize="24px" color="black" textDecoration={task.status ? 'line-through' : 'none'}>
+                {task.name}
+              </Text>
+              <Text fontSize="18px" color={Timestamp.fromDate(new Date()) > task.deadline ? "warning" : "grey"} decoration={Timestamp.fromDate(new Date()) > task.deadline ? "underline" : "none"}>
+                {task.deadline?.toDate().toLocaleString()}
+              </Text>
+            </Stack>
+          </Box>
+        </Flex>
+        <Checkbox
+          colorScheme="green"
+          size="lg"
+          isChecked={task.status}
+          onChange={handleCheckboxChange}
+          paddingRight="20"
+        />
+      </Box>
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Update task</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <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
@@ -1,7 +1,11 @@
-import { Button, Heading, Input, Radio, RadioGroup, Stack } from '@chakra-ui/react';
-import { Timestamp } from 'firebase/firestore';
+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 { Textarea } from '@chakra-ui/react';
+
+import { db } from '../../firebase.config';
 
 export interface TaskFormData {
   name: string;
@@ -14,14 +18,21 @@ interface ITaskForm {
   defaultValues?: TaskFormData;
   onSubmit: (newTask: TaskFormData) => void;
   isUpdate: boolean;
+  taskId: string
 }
 
-export function TaskForm({ onSubmit, defaultValues, isUpdate }: 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 ?? '');
   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
@@ -31,20 +42,40 @@ export function TaskForm({ onSubmit, defaultValues, isUpdate }: ITaskForm) {
         value={name}
         placeholder="Name of Task..."
         size="sm"
+        borderRadius="15"
+        borderWidth="3"
+        borderColor="highlight"
+        _focusVisible={{ borderWidth: '3px', borderColor: 'secondarytext' }}
+        bg="background"
+        color="secondarytext"
       />
       <CustomCalendar
         selectedDate={deadline ? deadline.toDate() : null}
         onDateChange={(timestamp) => {
           setDeadline(timestamp);
         }}
+        value={deadline?.toDate().toLocaleString()}
+        size="sm"
+        borderRadius="15"
+        borderWidth="3"
+        borderColor="highlight"
+        _focusVisible={{ borderWidth: '3px', borderColor: 'secondarytext' }}
+        bg="background"
+        color="secondarytext"
       />
-      <Input
+      <Textarea
         placeholder="Description..."
         onChange={(event) => {
           setDescription(event.target.value);
         }}
         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
@@ -60,20 +91,32 @@ 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"
+          bg="secondarytext"
+          _hover={{ bg: 'secondary', color: 'secondarytext' }}
+          colorScheme="green"
+          onClick={() => {
+            onSubmit({ name, deadline, description, importance });
+            setName('');
+            setDeadline(null);
+            setDescription('');
+            setImportance(1);
+          }}
+        >
+          {taskId ? 'Update' : 'Add'}
+        </Button>
+
+        {taskId ? (
+          <Button size="sm" colorScheme="red" onClick={() => deleteTask(taskId)}>
+            <DeleteIcon />
+          </Button>
+        ) : (
+          <></>
+        )}
+      </HStack>
+    </Stack >
   );
 }
diff --git 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>

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;