Tasks

Ashera Tasks are organized in Task Sections, Each section has a name and tasks can be created inside of each section. We are using onSnapshot to update the UI everytime a change in the database is made.

  useEffect(() => {
    const curUserId = auth?.uid;
    if (!curUserId) return;
    const q = query(taskSectionRef, where("author", "==", curUserId));
    onSnapshot(q, (snapshot) => {
      const sections: TS[] = [];
      snapshot.docs.forEach((s) => {
        const section = s.data() as TS;
        sections.push({ ...section, id: s.id });
      });
      setIsLoading(false);
      setAllTaskSection(sections.sort((a, b) => a.createdAt.seconds - b.createdAt.seconds));
    });
  }, [auth]);

Task Section

Creating Task Section only needs a Task Section Name and a user to be authenticated. Firebase really makes creating and deleting a doc really easy with their built in functions addDoc and deleteDoc from firestore.

//Refer to firebase section for imports and setups
export const addNewTaskSection = async (taskSectionName: string) => {
  const userId = authFB.currentUser?.uid!;
  if (!userId) return;
  await addDoc(taskSectionRef, {
    author: userId,
    taskSectionName,
    tasks: [],
    createdAt: serverTimestamp(),
  });

export const deleteTaskSection = async (sectionId: string) => {
  const userId = authFB.currentUser?.uid!;
  if (!userId) return;
  return await deleteDoc(doc(taskSectionRef, sectionId));
};
};

Task

Creating and Deleting a Task is basically just the same as Creating and Deleting Task Section

//Refer to firebase section for imports and setups
export const addTask = async (taskSectionId: string, taskName: string) => {
  const userId = authFB.currentUser?.uid!;
  if (!userId) return;
  return await updateDoc(doc(firestoreDB, "TaskSections", taskSectionId), {
    tasks: arrayUnion(taskName),
  });
};

export const deleteTask = async (taskSectionId: string, taskName: string) => {
  return await updateDoc(doc(firestoreDB, "TaskSections", taskSectionId), {
    tasks: arrayRemove(taskName),
  });
};