Test/calendar merge

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,
     });
 

src/components/CustomCalendar.tsx

@@ -1,26 +1,36 @@
-import { useState } from 'react';
-import { Box } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
 import { Timestamp } from 'firebase/firestore';
 import { DatePicker } from './DatePicker';
+import { Button, Stack } from '@chakra-ui/react';
 
-const CustomCalendar = () => {
-  const [newDeadline, setNewDeadline] = useState(null);
-  const [selectedDate, setSelectedDate] = useState(new Date());
+const CustomCalendar = ({ selectedDate, onDateChange }) => {
+  const [internalDate, setInternalDate] = useState(selectedDate ? new Date(selectedDate) : null);
 
-  const handleDateChange = (date: React.SetStateAction<Date>) => {
-    setSelectedDate(date);
+  useEffect(() => {
+    setInternalDate(selectedDate ? new Date(selectedDate) : null);
+  }, [selectedDate]);
+
+  const handleDateChange = (date) => {
     const timestamp = date ? Timestamp.fromDate(date) : null;
-    console.log(date);
-    console.log(timestamp);
+    setInternalDate(date);
+    onDateChange(timestamp);
+  };
 
-    setNewDeadline(timestamp);
-    console.log(newDeadline);
+  const handleClearDate = () => {
+    setInternalDate(null);
+    onDateChange(null);
   };
 
   return (
-    <Box p={4}>
-      <DatePicker value={selectedDate} onChange={handleDateChange} />
-    </Box>
+    <Stack direction="row" align="center">
+      <DatePicker
+        value={internalDate}
+        onChange={handleDateChange}
+      />
+      <Button onClick={handleClearDate} size="sm" bg="secondarytext" color="white" _hover={{ bg: "secondary", color: "secondarytext" }}>
+        Clear
+      </Button>
+    </Stack>
   );
 };
 

src/components/DatePicker.tsx

@@ -10,6 +10,7 @@ import {
   StyleObjectOrFn,
   Text,
   useTheme,
+  Button,
   css as chakraCSS,
 } from '@chakra-ui/react';
 import {
@@ -22,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"
@@ -111,43 +122,56 @@ function useDatePickerStyles() {
           color: 'white',
         },
       },
+      '& .react-datepicker__time-container': {
+        position: 'relative',
+      },
+      '& .clear-button': {
+        position: 'absolute',
+        top: '50%',
+        right: '-40px',
+        transform: 'translateY(-50%)',
+        zIndex: 2,
+      },
     };
     return chakraCSS(defaultStyles)(theme);
   }, [theme]);
 }
 
 export interface DatePickerProps {
-  value: Date;
+  value: Date | null;
   onChange: (date: Date | null) => void;
+  onClear: () => void;
 }
 
-export const DatePicker: FC<DatePickerProps> = ({ value, onChange }) => {
+export const DatePicker: FC<DatePickerProps> = ({ value, onChange, onClear }) => {
   const styles = useDatePickerStyles();
 
   const render = useCallback(
     ({ css }) => {
       return (
-        <ReactDatePicker
-          dateFormat="dd MMMM, yyyy HH:mm"
-          timeFormat="HH:mm"
-          showPopperArrow={false}
-          popperClassName={css({ marginTop: '4px!important' })}
-          calendarClassName={css(styles)}
-          selected={value}
-          onChange={(date: Date | (Date | null)[] | null) =>
-            Array.isArray(date) ? onChange(date[0]) : onChange(date)
-          }
-          customInput={<CustomInput />}
-          renderCustomHeader={CustomHeader}
-          showTimeInput
-          timeIntervals={15}
-          timeCaption="Time"
-          showTimeSelect={false}
-        />
+        <div style={{ position: 'relative' }}>
+          <ReactDatePicker
+            dateFormat="dd MMMM, yyyy HH:mm"
+            timeFormat="HH:mm"
+            showPopperArrow={false}
+            popperClassName={css({ marginTop: '4px!important' })}
+            calendarClassName={css(styles)}
+            selected={value}
+            onChange={(date: Date | (Date | null)[] | null) =>
+              Array.isArray(date) ? onChange(date[0]) : onChange(date)
+            }
+            customInput={<CustomInput />}
+            renderCustomHeader={CustomHeader}
+            showTimeInput
+            timeIntervals={15}
+            timeCaption="Time"
+            showTimeSelect={false}
+          />
+        </div>
       );
     },
-    [styles, value, onChange]
+    [styles, value, onChange, onClear]
   );
 
   return <ClassNames>{render}</ClassNames>;
-};
+};

src/components/TaskBox.tsx

@@ -1,17 +1,43 @@
-import React, { ChangeEvent, useState } from 'react';
-import { Box, Stack, Checkbox, Flex, Text } from '@chakra-ui/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';
+import { updateDoc, doc, Timestamp } from 'firebase/firestore';
 import { db } from '../../firebase.config';
 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);
 
     const newFields = {
@@ -21,6 +47,11 @@ const TaskBox: React.FC<CustomBoxProps> = ({ task }) => {
 
   };
 
+  const handleBoxClick = () => {
+    setIsModalOpen(true);
+  }
+
+
   const getBorderColor = () => {
     switch (task.importance) {
       case 1:
@@ -34,38 +65,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} task={task} />
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
   );
 };