diff --git a/src/context api/context.jsx b/src/context api/context.jsx index 66c1dcf..5b0682f 100644 --- a/src/context api/context.jsx +++ b/src/context api/context.jsx @@ -20,6 +20,7 @@ export const AllconversProvider = ({ children }) => { const [assigntask, setAssigntask] = useState(false); const [viewchanneltasks, setViewchanneltask] = useState(false); const [viewtask, setViewtask] = useState(false); + const [assigntaskself, setassigntaskself] = useState(false); // Fetch user data once on component mount useEffect(() => { const fetchUserData = async () => { @@ -80,6 +81,8 @@ export const AllconversProvider = ({ children }) => { setViewchanneltask, viewtask, setViewtask, + assigntaskself, + setassigntaskself, }; return ( diff --git a/src/homepage/ToDo_list/mytododlist.jsx b/src/homepage/ToDo_list/mytododlist.jsx new file mode 100644 index 0000000..f154901 --- /dev/null +++ b/src/homepage/ToDo_list/mytododlist.jsx @@ -0,0 +1,188 @@ +import supabase from "../../supabase"; +import assigntaskselfCSS from "./mytodolist.module.css"; +import { Allconvers } from "../../context api/context"; +import { useContext, useState, useEffect } from "react"; +import { ImCross } from "react-icons/im"; +import { fetchusertodo } from "../../database.jsx"; // Import your utility functions +import { v4 as uuid } from "uuid"; + +const Assigntaskself = () => { + const { setassigntaskself, currentUser } = useContext(Allconvers); + const [taskName, setTaskName] = useState(""); + const [dueDateTime, setDueDateTime] = useState(""); + const [noDueDate, setNoDueDate] = useState(false); // State to track if "No Due Date" option is selected + const [taskDescription, setTaskDescription] = useState(""); + const [user_todo, setUserTodo] = useState([]); + const [refreshuserlist, setrefreshuserlist] = useState(false); + // Notification states + const [showNotification, setShowNotification] = useState(false); + const [showSuccessNotification, setShowSuccessNotification] = useState(false); + + useEffect(() => { + const fetchUserTodoList = async () => { + const receivedUserTodo = await fetchusertodo(currentUser[0].id); + setUserTodo(receivedUserTodo); + setrefreshuserlist(false); + }; + fetchUserTodoList(); + }, [currentUser[0].id, refreshuserlist]); + + useEffect(() => { + console.log(refreshuserlist), [refreshuserlist]; + }); + useEffect(() => { + const userlistupd = () => { + const userlistupds = supabase + .channel("user_list") + .on( + "postgres_changes", + { + event: "*", //channels are used to listen to real time changes + schema: "public", //here we listen to the changes in realtime and update the postgres changes here + table: "Todo_list", + select: "todo_list", + filter: `id=eq.${currentUser[0].id}`, + }, + (payload) => { + setrefreshuserlist(true); + } + ) + .subscribe(); + + // Cleanup function to unsubscribe from the channel to avoid data leakage + return () => { + supabase.removeChannel(userlistupds); + }; + }; + userlistupd(); + }, [currentUser[0].id]); + + const handleSubmit = async () => { + try { + // Check if required fields are filled + if (!taskName || (!noDueDate && !dueDateTime) || !taskDescription) { + setShowNotification(true); + // Hide notification after 2.5 seconds + setTimeout(() => { + setShowNotification(false); + }, 2500); + return; + } + + const assignedOn = new Date().toISOString(); // Current timestamp + const task_id = uuid(); // Generate a random UUID + + let todoListData = {}; + + todoListData = [ + ...user_todo, + { + task_id, + taskname: taskName, + duedate: noDueDate ? null : dueDateTime || null, + assignedon: assignedOn, + task_description: taskDescription, + taskdone: false, + assigned_by: currentUser[0].username, + assigned_byid: currentUser[0].id, + }, + ]; + + await supabase + .from("Todo_list") + .update({ todo_list: todoListData }) + .eq("id", currentUser[0].id); + + // Clear input fields and reset states after successful submission + setTaskName(""); + setDueDateTime(""); + setNoDueDate(false); + setTaskDescription(""); + setShowSuccessNotification(true); + // Hide success notification after 3 seconds + setTimeout(() => { + setShowSuccessNotification(false); + }, 3000); + } catch (error) { + console.error("Error assigning task:", error.message); + } + }; + + return ( +
+
+ { + setassigntaskself(false); + }} + className={assigntaskselfCSS.closeIcon} + /> +
+

Add my Tasks

+
+
+ + setTaskName(e.target.value)} + required // Ensure task name is compulsory + /> + * Required +
+
+ +
+ { + setDueDateTime(e.target.value); + setNoDueDate(false); // Ensure "No Due Date" is unchecked when a due date is selected + }} + /> + +
+ * Required +
+
+ +