Merge pull request #89 from XavierJ96/feat/add-button

Feat/add button
XavierJ96 · Jul 2, 2024 · 98d09c1 · 98d09c1
2 parents 9327e77 + d8bdb3d
commit 98d09c1
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -6,7 +6,10 @@
     <title>TaskForge</title>
   </head>
   <body>
-    <div id="root" class="container min-h-[500px]"></div>
+    <div
+      id="root"
+      class="container min-h-[600px] max-h-[600px] overflow-x-hidden overflow-y-scroll"
+    ></div>
     <script type="module" src="/src/main.jsx"></script>
     <script
       src="/src/utils/font-awesome.js"

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

diff --git a/src/components/AddTasks.jsx b/src/components/AddTasks.jsx
@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { collection, addDoc } from "@firebase/firestore";
+import { db } from "../utils/firebase_config";
+
+function AddTasks() {
+  const [taskText, setTaskText] = useState("");
+  const [taskDate, setTaskDate] = useState("");
+  const [selectedDate, setSelectedDate] = useState('today');
+
+  const handleTextChange = (event) => {
+    setTaskText(event.target.value);
+  };
+
+  const tasksCollection = collection(db, "forgedTasks");
+
+  const handleDateChange = (event) => {
+    setSelectedDate(event.target.value);
+    setTaskDate(event.target.value);
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    if (!taskText.trim()) {
+      alert("Task text cannot be empty");
+      return;
+    }
+
+    const task = {
+      text: taskText,
+      date: taskDate,
+    };
+
+    let dateAdded;
+
+    if (taskDate === "yesterday") {
+      const yesterday = new Date();
+      yesterday.setDate(yesterday.getDate() - 1);
+      dateAdded = yesterday.toISOString();
+    } else {
+      dateAdded = new Date().toISOString();
+    }
+
+    chrome.runtime.sendMessage(
+      { action: "checkSignInStatus" },
+      async (response) => {
+        const user = response.user;
+
+        try {
+          await addDoc(tasksCollection, {
+            cardTitle: task.text,
+            cardType: "project",
+            author: { name: user.email, id: user.uid },
+            dateAdded: dateAdded,
+          });
+
+          setTaskText("");
+          setTaskDate("");
+          setSelectedDate('today');
+        } catch (error) {
+          throw new Error("Error adding document: ", error);
+        }
+      }
+    );
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="absolute bottom-0 w-full bg-[#161616] min-h-[50px] p-3 flex items-center space-x-3"
+    >
+      <div className="relative w-full">
+        <FontAwesomeIcon
+          icon={faPlus}
+          onClick={handleSubmit}
+          className="absolute left-3 top-[50%] -translate-y-[50%] text-white cursor-pointer"
+        />
+        <input
+          type="text"
+          required
+          className="pl-8 border w-full bg-[#161616] text-white border-gray-300 px-3 py-2 mr-2 rounded-lg"
+          value={taskText}
+          placeholder="Add Tasks"
+          onChange={handleTextChange}
+        />
+      </div>
+      <select
+        required
+        className="border w-[150px] bg-[#161616] text-white border-gray-300 px-2 py-2 text-[11px] rounded-lg appearance-none custom-select-arrow"
+        onChange={handleDateChange}
+        value={selectedDate}
+      >
+        <option value="today">Today</option>
+        <option value="yesterday">Yesterday</option>
+      </select>
+    </form>
+  );
+}
+
+export default AddTasks;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -7,6 +7,7 @@ import TaskCard from "../components/TaskComponent";
 import ToggleSection from "../components/ToggleSection";
 import TaskList from "../components/TaskList";
 import * as taskUtils from "../utils/taskUtils";
+import AddTasks from "../components/AddTasks";
 
 function Home({ userEmail }) {
   const [taskData, setTaskData] = useState([]);
@@ -142,7 +143,7 @@ function Home({ userEmail }) {
         taskData={taskData}
         setTaskData={setTaskData}
       />
-      <div className="task-board space-y-3">
+      <div className="task-board space-y-3 pb-16">
         <Stats
           projectTasksCount={projectTasksCount}
           reviewTasksCount={reviewTasksCount}
@@ -172,6 +173,7 @@ function Home({ userEmail }) {
           view={view}
         />
       </div>
+      <AddTasks />
     </div>
   );
 }

diff --git a/src/styles/Home.css b/src/styles/Home.css
@@ -156,6 +156,20 @@
   transition: background-color 0.3s, transform 0.3s;
 }
 
+.custom-select-arrow {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: #161616;
+  background-image: url("data:image/svg+xml,%3csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M8.354 11.646l4-4a.5.5 0 0 0-.708-.708L8 10.293 4.354 6.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position-x: calc(100% - 0.5rem);
+  background-position-y: center;
+  padding-right: 1.5rem;
+  background-size: 0.75rem;
+  cursor: pointer;
+}
+
 #delete-btn:focus {
   outline: none;
 }

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -2,10 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
-.container{
+.container {
   max-width: 1280px;
   min-width: 400px;
   margin: 0 auto;
   background-color: #161616;
 }
 
+input[type="date"]::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+}