changed project added functionality

client/src/components/Header.jsx

@@ -6,14 +6,14 @@ const Header = () => {
   return (
     <nav className="navbar">
       <div className="navbar-logo">
-        <Link to="/">My University Tasks</Link>
+        <Link to="/">Course Tasks</Link>
       </div>
       <ul className="nav-links">
         <li>
           <Link to="/tasks">Tasks</Link>
         </li>
         <li>
-          <Link to="/add-task">New Task</Link>
+          <Link to="/add-task"> Add A Task</Link>
         </li>
       </ul>
     </nav>

client/src/components/Task.jsx

@@ -17,4 +17,4 @@ function Task({ task, handleDelete }) {
   );
 }
 
-export default Task;
+export default Task;

client/src/context/TasksContext.jsx

@@ -1,37 +1,18 @@
-import React, { createContext, useContext, useState } from "react";
+import React, { createContext, useContext, useState } from 'react';
 
 const TasksContext = createContext();
 
 export const useTasks = () => useContext(TasksContext);
 
 export const TasksProvider = ({ children }) => {
-  const [tasks, setTasks] = useState([
-    {
-      id: 1,
-      title: "Complete Lab 6",
-      course: "CSCI 2110",
-      dueDate: "20 November",
-    },
-    {
-      id: 2,
-      title: "Peer Review Assignment",
-      course: "ASSC 1800",
-      dueDate: "21 November",
-    },
-  ]);
+  const [tasks, setTasks] = useState([]);
 
-  const handleAdd = ({ title, course }) => {
-    const newTask = {
-      id: tasks.length + 1,
-      title,
-      course,
-      dueDate: "Not Set",
-    };
-    setTasks([...tasks, newTask]);
+  const handleAdd = (task) => {
+    setTasks([...tasks, { ...task, id: Date.now() }]);
   };
 
-  const handleDelete = (id) => {
-    setTasks((currentTasks) => currentTasks.filter((task) => task.id !== id));
+  const handleDelete = (taskId) => {
+    setTasks(tasks.filter(task => task.id !== taskId));
   };
 
   return (

client/src/pages/Form.jsx

@@ -4,51 +4,56 @@ import "../styles/Form.css";
 import Header from "../components/Header";
 
 const Form = () => {
-  const [title, setTitle] = useState("");
-  const [course, setCourse] = useState("");
+  const [formState, setFormState] = useState({
+    title: "",
+    course: "",
+    date: "" // This will be adjusted to ensure correct timezone handling
+  });
+
   const { handleAdd } = useTasks();
 
   const handleSubmit = (e) => {
     e.preventDefault();
-
-    if (!title) {
-      alert("Please add a task");
+  
+    if (!formState.title || !formState.date) {
+      console.error("Please add both a title and a date for the task.");
       return;
     }
-    handleAdd({ title, course });
-    setTitle("");
-    setCourse("");
+
+    // Adjust the date to account for timezone, setting it to noon
+    const localDate = new Date(formState.date + 'T12:00:00');
+
+    handleAdd({ ...formState, date: localDate.toISOString().split('T')[0] });
+    setFormState({ title: "", course: "", date: "" });
+  };
+
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormState(prevState => ({
+      ...prevState,
+      [name]: value
+    }));
   };
 
   return (
     <>
       <Header />
       <form className="form" onSubmit={handleSubmit}>
+        {/* Form fields remain unchanged */}
         <div className="form-group">
           <label htmlFor="title">Title</label>
-          <input
-            type="text"
-            id="title"
-            className="form-control"
-            placeholder="Add Task"
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-          />
+          <input type="text" id="title" name="title" className="form-control" placeholder="Add Task" value={formState.title} onChange={handleChange} />
+        </div>
+        <div className="form-group">
+          <label htmlFor="course">Course</label>
+          <input type="text" id="course" name="course" className="form-control" placeholder="Course" value={formState.course} onChange={handleChange} />
         </div>
         <div className="form-group">
-          <label htmlFor="course">Course</label>{" "}
-          <input
-            type="text"
-            id="course"
-            className="form-control"
-            placeholder="Course"
-            value={course}
-            onChange={(e) => setCourse(e.target.value)}
-          />
+          <label htmlFor="date">Date</label>
+          <input type="date" id="date" name="date" className="form-control" value={formState.date} onChange={handleChange} />
         </div>
-        <button type="submit" className="btn btn-primary">
-          Save Task
-        </button>{" "}
+        <button type="submit" className="btn btn-primary">Save Task</button>
       </form>
     </>
   );

client/src/pages/Home.css

@@ -0,0 +1,46 @@
+/* Reset default body margin and padding */
+body, html {
+  margin: 0;
+  padding: 0;
+  overflow: hidden; /* Prevent scrolling */
+
+}
+
+/* Fullscreen container for the calendar */
+.calendar-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+}
+
+
+/* Adjust the .react-calendar size within the container */
+.react-calendar {
+  width: 100%;
+  height: 100%;
+  max-width: unset; /* Remove max-width restriction */
+  display: flex;
+  flex-direction: column;
+}
+
+/* Adjust navigation and tiles to scale correctly */
+.react-calendar__navigation {
+  flex-grow: 0;
+}
+
+.react-calendar__month-view {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.react-calendar__month-view__days {
+  flex-grow: 1;
+}
+
+.react-calendar__tile {
+  height: 100%; /* Make tiles fill available height */
+}

client/src/pages/Home.jsx

@@ -1,11 +1,51 @@
-import React from "react";
+import React, { useState } from "react";
+import Calendar from 'react-calendar';
+import 'react-calendar/dist/Calendar.css'; // Default react-calendar styling
+import './Home.css'; // Your custom styling
+import { useTasks } from "../context/TasksContext";
 import Header from "../components/Header";
 
 const Home = () => {
+  const { tasks } = useTasks();
+  const [value, setValue] = useState(new Date());
+
+  // Enhanced function to find tasks for a specific date
+  const findTasksForDate = (date) => {
+    return tasks.filter(task => {
+      // Convert task.date from ISO string to Date object
+      const taskDate = new Date(task.date);
+      return taskDate.getDate() === date.getDate() &&
+             taskDate.getMonth() === date.getMonth() &&
+             taskDate.getFullYear() === date.getFullYear();
+    });
+  };
+
+  // Updated custom tile content to display tasks
+  const tileContent = ({ date, view }) => {
+    if (view === 'month') {
+      const tasksForDay = findTasksForDate(date);
+      return (
+        <ul className="calendar-tasks-list">
+          {tasksForDay.map(task => (
+            <li key={task.id} className="calendar-task-item">
+              {task.title} {/* Display task title, can add more details */}
+            </li>
+          ))}
+        </ul>
+      );
+    }
+  };
+
   return (
     <>
       <Header />
-      <div>Home</div>
+      <div className="calendar-container">
+        <Calendar
+          onChange={setValue}
+          value={value}
+          tileContent={tileContent} // Display tasks on calendar
+        />
+      </div>
     </>
   );
 };

client/src/pages/Tasks.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import Header from "../components/Header";
 import "../styles/Tasks.css";
 import { useTasks } from "../context/TasksContext";
@@ -13,7 +13,10 @@ const Tasks = () => {
       {tasks.length > 0 ? (
         <div className="tasks-grid">
           {tasks.map((task) => (
-            <Task task={task} key={task.id} handleDelete={handleDelete} />
+            <div key={task.id} className="task-item">
+              <Task task={task} handleDelete={() => handleDelete(task.id)} />
+              <div>Date: {task.date}</div> {/* Display the date of the task */}
+            </div>
           ))}
         </div>
       ) : (
@@ -23,4 +26,4 @@ const Tasks = () => {
   );
 };
 
-export default Tasks;
+export default Tasks;