XavierJ96 · XavierJ96 · Jul 1, 2024 · Jul 1, 2024 · Jul 1, 2024 · Jul 1, 2024
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "TaskForge",
-  "version": "1.1.041",
+  "version": "1.1.043",
   "action": { "default_popup": "index.html" },
   "permissions": ["storage"],
   "icons": {

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,15 +1,30 @@
 import React from "react";
+import ModalDialogComponent from "./ModalDialog";
+import { deleteAllTasks } from "../utils/taskUtils";
+import { useState } from "react";
 
 function Header({
   userEmail,
   togglePopup,
-  handleDeleteAll,
   copyLearnerData,
   logout,
   isPopupVisible,
   isTechLead,
   copyMyTasks,
+  taskData,
+  setTaskData,
 }) {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  function setModal() {
+    return setIsModalVisible(!isModalVisible);
+  }
+
+  const handleDeleteAll = async () => {
+    deleteAllTasks(taskData, setTaskData);
+    setIsModalVisible(false);
+  };
+
   return (
     <div className="header">
       <div className="my-auto">
@@ -42,6 +57,12 @@ function Header({
             </g>
           </svg>
         </button>
+        {isModalVisible && (
+          <ModalDialogComponent
+            handleDeleteAll={handleDeleteAll}
+            setModal={setModal}
+          />
+        )}
         {isPopupVisible && (
           <div className="popup text-[#E4E4E4] fixed right-4 bg-[#252525] py-3 rounded-md min-w-[200px]">
             {userEmail && (
@@ -51,7 +72,7 @@ function Header({
             )}
             <div
               className="flex px-3 hover:bg-[#a2a2a2] hover:cursor-pointer"
-              onClick={handleDeleteAll}
+              onClick={setModal}
             >
               <span id="" className="font-normal text-sm py-2">
                 Delete All

diff --git a/src/components/ModalDialog.jsx b/src/components/ModalDialog.jsx
@@ -0,0 +1,77 @@
+import React from "react";
+
+function ModalDialogComponent({ handleDeleteAll, setModal }) {
+  return (
+    <div
+      class="relative z-10"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div
+        class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+        aria-hidden="true"
+      ></div>
+
+      <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+          <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+            <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+              <div class="sm:flex sm:items-start">
+                <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                  <svg
+                    class="h-6 w-6 text-red-600"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke-width="1.5"
+                    stroke="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+                    />
+                  </svg>
+                </div>
+                <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                  <h3
+                    class="text-base font-semibold leading-6 text-gray-900"
+                    id="modal-title"
+                  >
+                    Delete All Tasks
+                  </h3>
+                  <div class="mt-2">
+                    <p class="text-sm text-gray-500">
+                      Are you sure you want to delete all your tasks? All of
+                      your data will be permanently removed. This action cannot
+                      be undone.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+              <button
+                type="button"
+                onClick={handleDeleteAll}
+                class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
+              >
+                Confirm
+              </button>
+              <button
+                type="button"
+                onClick={setModal}
+                class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ModalDialogComponent;
diff --git a/src/components/Stats.jsx b/src/components/Stats.jsx
@@ -3,11 +3,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFileCode, faPenToSquare } from "@fortawesome/free-solid-svg-icons";
 
 function Stats({ projectTasksCount, reviewTasksCount, onClick, view }) {
-
   return (
     <div id="stat-container" className="flex justify-center mb-4">
       <div
-        className={`flex text-[#E4E4E4] gap-2 bg-[${view === 'project' ? '#313131' : '#424242'}] py-1 px-2 rounded-full font-semibold cursor-pointer`}
+        className={`flex text-[#E4E4E4] gap-2 ${
+          view === "project" ? "bg-[#15739c]" : "bg-[#424242]"
+        } py-1 px-2 rounded-full font-semibold cursor-pointer`}
         onClick={() => onClick("project")}
       >
         <p>
@@ -17,7 +18,9 @@ function Stats({ projectTasksCount, reviewTasksCount, onClick, view }) {
         <span id="project-count">{projectTasksCount}</span>
       </div>
       <div
-        className={`flex text-[#E4E4E4] gap-2 bg-[${view === 'review' ? '#313131' : '#424242'}] py-1 px-2 rounded-full font-semibold cursor-pointer`}
+        className={`flex text-[#E4E4E4] gap-2 ${
+          view === "review" ? "bg-[#15739c]" : "bg-[#424242]"
+        } py-1 px-2 rounded-full font-semibold cursor-pointer`}
         onClick={() => onClick("review")}
       >
         <p>

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -27,15 +27,19 @@ function Home({ userEmail }) {
   }, [todayVisible, yesterdayVisible]);
 
   useEffect(() => {
-    taskUtils.fetchTasks(taskUtils.userTaskRef(userEmail,db), userEmail, setTaskData);
+    taskUtils.fetchTasks(
+      taskUtils.userTaskRef(userEmail, db),
+      userEmail,
+      setTaskData
+    );
   }, []);
 
   useEffect(() => {
     taskUtils.fetchLearnerData(
       taskUtils.learnerDataRef,
       userEmail,
       setIsTechLead,
-      setLearnerData,
+      setLearnerData
     );
   }, []);
 
@@ -48,10 +52,6 @@ function Home({ userEmail }) {
     taskUtils.togglePopup(isPopupVisible, setIsPopupVisible);
   };
 
-  const handleDeleteAll = async () => {
-    taskUtils.deleteAllTasks(taskData, setTaskData);
-  };
-
   const reviewTasksCount = taskUtils.getCountForCardType("review", taskData);
 
   const projectTasksCount = taskUtils.getCountForCardType("project", taskData);
@@ -134,12 +134,13 @@ function Home({ userEmail }) {
       <Header
         userEmail={userEmail}
         togglePopup={togglePopup}
-        handleDeleteAll={handleDeleteAll}
         copyLearnerData={copyLearnerData}
         logout={logout}
         copyMyTasks={copyMyTasks}
         isTechLead={isTechLead}
         isPopupVisible={isPopupVisible}
+        taskData={taskData}
+        setTaskData={setTaskData}
       />
       <div className="task-board space-y-3">
         <Stats

diff --git a/src/utils/taskUtils.js b/src/utils/taskUtils.js
@@ -31,6 +31,23 @@ export const dateStrings = {
   yesterdayString: setupDates.yesterdayDate().toDateString(),
 };
 
+export function getMissedTasks(tasks) {
+  const lines = tasks.split("\n");
+
+  const missedIndex = lines.indexOf("Missed:");
+
+  if (missedIndex !== -1) {
+    const missedTasks = lines.slice(
+      missedIndex + 1,
+      lines.indexOf("", missedIndex)
+    );
+
+    const missedTasksString = missedTasks.join("\n").trim();
+
+    return missedTasksString;
+  }
+}
+
 export const userTaskRef = (userEmail, db) =>
   query(
     collection(db, "forgedTasks"),
@@ -246,11 +263,13 @@ export const logoutUser = async () => {
 
 export const deleteAllTasks = async (taskData, setTaskData) => {
   try {
-    await Promise.all(taskData.map(async (task) => {
-      await deleteDoc(doc(collection(db, "forgedTasks"), task.id));
-    }));
+    await Promise.all(
+      taskData.map(async (task) => {
+        await deleteDoc(doc(collection(db, "forgedTasks"), task.id));
+      })
+    );
     setTaskData([]);
   } catch (error) {
     throw new Error(`Error deleting tasks: ${error.message}`);
   }
-};
+};