Hamza/connect my history to backend + userprofile

backend/src/scripts/seeders/task.seeder.ts

@@ -31,7 +31,7 @@ export const generateTask = async (
 ) => {
   const task = new TaskEntity();
   task.isCompleted = false;
-  task.date = faker.date.future(0.01);
+  task.date = faker.date.future(0.005);
   const repository = dataSource.getRepository(TaskEntity);
   await repository.insert(task);
   await dataSource

frontend/src/Components/MyHistory/HistoryTasksContainer.tsx

@@ -1,220 +1,100 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
+import React, { useState, useEffect, useContext } from "react";
+import { Box } from "@mui/material";
 import SingleDayTasksContainer from "./SingleDayTasksContainer";
-import { useState, useEffect } from "react";
-
-// ------------------------- LINES AFTER THIS WILL BE REMOVED LATER WHEN BACKEND WORKS -----------------------------//
-const day1 = new Date("2023-04-13T00:00:00Z");
-const day2 = new Date("2023-04-14T00:00:00Z");
-const day3 = new Date("2023-04-15T00:00:00Z");
-const day4 = new Date("2023-04-16T00:00:00Z");
-const day5 = new Date("2023-04-17T00:00:00Z");
-const day6 = new Date("2023-04-18T00:00:00Z");
-const day7 = new Date("2023-04-19T00:00:00Z");
-
-const dummyTasks = [
-  {
-    id: 1,
-    date: day1,
-    isCompleted: true,
-    name: "Leopold Bennett",
-    volunteer: null,
-    deliveries: [],
-  },
-  {
-    id: 2,
-    date: day1,
-    isCompleted: false,
-    name: "Avi Sharp",
-    volunteer: null,
-    deliveries: [],
-  },
-  {
-    id: 3,
-    date: day1,
-    isCompleted: true,
-    name: "Zahara Lott",
-    volunteer: null,
-    deliveries: [],
-  },
-  {
-    id: 4,
-    date: day1,
-    isCompleted: true,
-    name: "John Doe",
-    volunteer: null,
-    deliveries: [],
-  },
-  {
-    id: 5,
-    date: day2,
-    isCompleted: false,
-    name: "Jane Doe",
-    volunteer: null,
-    deliveries: [],
-  },
-  {
-    id: 6,
-    date: day3,
-    isCompleted: true,
-    name: "Thomas Walker",
-    volunteer: null,
-    deliveries: [],
-  },
-  {
-    id: 7,
-    date: day3,
-    isCompleted: false,
-    name: "William Maguire",
-    volunteer: null,
-    deliveries: [],
-  },
-  {
-    id: 8,
-    date: day3,
-    isCompleted: false,
-    name: "Tony McLennan",
-    volunteer: null,
-    deliveries: [],
-  },
-  {
-    id: 9,
-    date: day4,
-    isCompleted: false,
-    name: "Harry Park",
-    volunteer: null,
-    deliveries: [],
-  },
-  {
-    id: 10,
-    date: day4,
-    isCompleted: true,
-    name: "Christian D'Silva",
-    volunteer: null,
-    deliveries: [],
-  },
-  {
-    id: 11,
-    date: day4,
-    isCompleted: false,
-    name: "Joseph Kim",
-    volunteer: null,
-    deliveries: [],
-  },
-  {
-    id: 12,
-    date: day5,
-    isCompleted: false,
-    name: "Martin Brooks",
-    volunteer: null,
-    deliveries: [],
-  },
-  {
-    id: 13,
-    date: day6,
-    isCompleted: false,
-    name: "Emmanuel Tan",
-    volunteer: null,
-    deliveries: [],
-  },
-  {
-    id: 14,
-    date: day7,
-    isCompleted: false,
-    name: "Lionel Ronaldo",
-    volunteer: null,
-    deliveries: [],
-  },
-  {
-    id: 15,
-    date: day7,
-    isCompleted: false,
-    name: "Stephanie Han",
-    volunteer: null,
-    deliveries: [],
-  },
-];
-
-// Would have been better if we could just request backend API 
-// to just query tasks within the range of dates... :D
-
-// Getting All Tasks Algorithm choice:
-// First Method:
-// 1. Get All Tasks from a single user (will be an array of all tasks from a user)
-// 2. Go through that tasks array and for each task, if that task's date is 
-//    within the range of dates (startDate ~ endDate) store it in another array
-// 3. Sort the new array with the tasks that are within the desired range of dates.
-// 
-// Second Method:
-// 1. Get ONLY Tasks that are within the desired range of dates from the backend database.
-// 2. Sort in frontend
-// ---------------------------------- LINES BEFORE THIS WILL BE REMOVED LATER ON ---------------------------------------//
+import { getAllTasks } from "../../services";
+import { TaskContext, TaskInterface } from "../../Contexts/Tasks";
+import { getCurrentUserId } from "../../helper";
 
 const HistoryTasksContainer = (props: {
   startDate: Date | null;
   endDate: Date | null;
 }) => {
-  // startdate and enddate can be null, if no dates are chosen.
-  const [historyTasks, setHistoryTasks] = useState(dummyTasks.filter(task => {
-    // filter out tasks that don't fall within the selected date range
-    return (props.startDate === null || task.date >= props.startDate) &&
-           (props.endDate === null || task.date <= props.endDate)
-  }));
-
-  // get the range of dates for given start date and end date
+  const [allTasks, setAllTasks] = useState<{ [date: string]: TaskInterface[] }>({});
+  const [rangeOfDates, setRangeOfDates] = useState<Date[]>([]);
+  const user = Number(getCurrentUserId());
+  const tasksContext = useContext(TaskContext);
+
+  useEffect(() => {
+    const fetchTasks = async () => {
+      try {
+        const response = await getAllTasks(); // Fetch tasks from the backend
+        const tasks = response;
+
+        console.log("initialtasks", tasks);
+
+        const tasksByDate: { [date: string]: TaskInterface[] } = {};
+
+        tasks.forEach((task: TaskInterface) => {
+          if (task.volunteer?.id === user) {
+            const date = convertDate(new Date(task.date)).join('-'); // convert to string format "YYYY-MM-DD"
+            if (!tasksByDate[date]) {
+              tasksByDate[date] = [];
+            }
+            tasksByDate[date].push(task);
+          }
+        });
+
+        setAllTasks(tasksByDate);
+
+        // Update the tasksContext with the fetched tasks
+        tasksContext?.setTasks(tasks);
+      } catch (error) {
+        console.error("Error fetching tasks:", error);
+      }
+    };
+
+    fetchTasks();
+  }, []); // Empty dependency array to run only once on mount
+
+  console.log("allTasks", allTasks);
+
   const getRangeOfDates = (startDate: Date | null, endDate: Date | null) => {
-    if (startDate == null || endDate == null) {
-      // if no dates were selected, do not return range of dates.
+    if (!startDate || !endDate) {
       return [];
     }
-    const date = new Date(startDate);
-    const currentDate = new Date(startDate);
+
     const rangeOfDates = [];
+    const currentDate = new Date(startDate);
 
-    let followingDay = new Date(currentDate);
     while (currentDate <= endDate) {
-      rangeOfDates.push(followingDay);
-      date.setDate(date.getDate() + 1); // get next date
-      followingDay = new Date(date);
+      rangeOfDates.push(new Date(currentDate));
       currentDate.setDate(currentDate.getDate() + 1);
     }
+
     return rangeOfDates;
   };
 
-  const [rangeOfDates, setRangeOfDates] = useState(
-    getRangeOfDates(props.startDate, props.endDate)
-  );
+  console.log("RANGEOFDATES", rangeOfDates);
+
+  function convertDate(input: Date): number[] {
+    // JavaScript months are 0-indexed, so we need to add 1 to get the correct month number.
+    const year = input.getFullYear();
+    const month = input.getMonth() + 1;
+    const day = input.getDate();
+
+    return [year, month, day];
+  }
 
   useEffect(() => {
-    // when startDate and endDate states change in the parent component, update the rangeOfDates that need to be displayed.
     setRangeOfDates(getRangeOfDates(props.startDate, props.endDate));
-
-    // also update the historyTasks state by filtering out tasks that don't fall within the selected date range
-    setHistoryTasks(dummyTasks.filter(task => {
-      return (props.startDate === null || task.date >= props.startDate) &&
-             (props.endDate === null || task.date <= props.endDate)
-    }));
   }, [props.startDate, props.endDate]);
 
   return (
     <Box sx={{ ml: "14px", mr: "14px" }}>
-      {/* when no proper date range is given, display help message. */}
       {!props.startDate || !props.endDate ? (
         <Box sx={{ mt: 3, textAlign: "center" }}>
           Please Select A Date Range To Filter Tasks.
         </Box>
       ) : null}
       {rangeOfDates.map((date: Date) => {
+        const dateString = convertDate(date).join('-');
         return (
           <SingleDayTasksContainer
             date={date}
-            historyTasks={historyTasks}
-            key={date.toDateString()}
+            historyTasks={allTasks[dateString] || []}  // Use dateString as the key
+            key={dateString}
           />
         );
-        {
-          /* use date as key */
-        }
       })}
     </Box>
   );

frontend/src/Components/MyHistory/SingleDayTasksContainer.tsx

@@ -7,32 +7,28 @@ const SingleDayTasksContainer = (props: {
   date: Date;
   historyTasks: TaskInterface[];
 }) => {
-  const filteredTasks = props.historyTasks.filter(
-    (task) => task.date.toDateString() === props.date.toDateString()
-  );
+  console.log(Array.isArray(props.historyTasks));
+  console.log("props.historyTasks:", props.historyTasks);
+  console.log(props.date);
 
+  if (props.historyTasks.length > 0){
   return (
     <Box sx={{ display: "flex", flexDirection: "column" }}>
       <HistoryTaskDate date={props.date} />
-      {filteredTasks.map((task) => (
-        <Box
-          key={task.id}
-          sx={{
-            display: "flex",
-            mb: 1,
-            p: 1,
-            bgcolor: "#FFFFFF",
-            border: "1px solid #DFDFDF",
-            borderRadius: 2,
-            flexDirection: "column",
-            justifyContent: "flex-start",
-          }}
-        >
-          <Typography sx={{ mr: 1 }}>client name</Typography>
+      {props.historyTasks.map((task) => (
+        <Box key={task.id} sx={{ display: "flex", mb: 1, p: 1, bgcolor: "#FFFFFF", border: "1px solid #DFDFDF", borderRadius: 2, flexDirection: "column", justifyContent: "flex-start" }}>
+           <Typography sx={{ mr: 1 }}>{task.volunteer ? task.volunteer.name : task.id}</Typography>  {/*USING ID FOR NOW */}
+          <Typography variant="caption">
+            {"Delivered at " + new Date(task.date).toLocaleTimeString()} 
+          </Typography>
         </Box>
       ))}
     </Box>
   );
-};
+}
+else {
+  return <div></div>
+}
+}
 
 export default SingleDayTasksContainer;

frontend/src/Components/MyTasks/DeliveriesContainer.tsx

@@ -104,4 +104,4 @@ const DeliveriesContainer = (props: {
   );
 };
 
-export default DeliveriesContainer;
+export default DeliveriesContainer;

frontend/src/Components/MyTasks/Delivery.tsx

@@ -83,4 +83,4 @@ const Delivery = (props: {
   );
 };
 
-export default Delivery;
+export default Delivery;

frontend/src/Containers/UserProfileContainer.tsx

@@ -9,10 +9,11 @@ import { useNavigate, useParams } from "react-router-dom";
 import { VolunteerType } from "./UserContainer";
 import { editVolunteer, getVolunteer } from "../services";
 import { setDefaultResultOrder } from "dns";
+import { getCurrentUserId } from "../helper";
 
 const UserProfileContainer = () => {
   const navigate = useNavigate();
-  const id = localStorage.getItem("userId");
+  const id = Number(getCurrentUserId());
   const [volunteer, setVolunteer] = useState<VolunteerType | undefined>();
   const [email, setEmail] = useState<string>("");
   const [validEmail, setValidEmail] = useState(false);
@@ -26,7 +27,7 @@ const UserProfileContainer = () => {
 
   const fetchVolunteer = async () => {
     try {
-      const volunteerData = await getVolunteer(Number(id));
+      const volunteerData = await getVolunteer(id);
       setVolunteer(volunteerData.volunteer);
       console.log(volunteerData);
       console.log(volunteer);
@@ -71,12 +72,12 @@ const UserProfileContainer = () => {
     } else {
       try {
         const updatedVolunteer = {
-          id: volunteer?.id,
+          id: id,
           email,
           phoneNumber,
         };
 
-        await editVolunteer(volunteer?.id, updatedVolunteer);
+        await editVolunteer(id, updatedVolunteer);
         navigate(`/profile`);
       } catch (error) {
         console.error("Error updating volunteer:", error);