can signout now

Author: piyushya

.gitignore

@@ -23,5 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 
-# Ignore Firebase configuration file
-firebaseConfig.js
+# environment variables
+.env

firebase.js

@@ -1,12 +1,30 @@
-import { initializeApp } from 'firebase/app';
-import { getAuth } from 'firebase/auth';
-import { getFirestore } from 'firebase/firestore';
-import { getStorage } from "firebase/storage";
-import firebaseConfig from './firebaseConfig';
+import { initializeApp } from "firebase/app";
+import { getAuth, signInWithEmailAndPassword, signOut } from "firebase/auth";
+import { getFirestore } from "firebase/firestore";
+// import { getStorage } from "firebase/storage";
+// import firebaseConfig from "./firebaseConfig";
+
+const firebaseConfig = {
+  apiKey : import.meta.env.VITE_REACT_APP_API_KEY,
+  authDomain : import.meta.env.VITE_REACT_APP_AUTH_DOMAIN,
+  projectId : import.meta.env.VITE_REACT_APP_PROJECT_ID,
+  storageBucket : import.meta.env.VITE_REACT_APP_STORAGE_BUCKET,
+  messagingSenderId : import.meta.env.VITE_REACT_APP_MESSAGING_SENDER_ID,
+  appId : import.meta.env.VITE_REACT_APP_APP_ID,
+  measurementId : import.meta.env.VITE_REACT_APP_MEASUREMENT_ID,
+};
 
 const app = initializeApp(firebaseConfig);
 const auth = getAuth(app);
 const db = getFirestore(app);
-const storage = getStorage(app);
+// const storage = getStorage(app);
+
+const logInWithEmailAndPassword = async (email, password) => {
+  await signInWithEmailAndPassword(auth, email, password);
+};
+
+const logout = () => {
+  signOut(auth);
+};
 
-export { auth, db, storage };
+export { auth, db, logInWithEmailAndPassword, logout };

package-lock.json

@@ -13,6 +13,7 @@
     "firebase": "^10.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-firebase-hooks": "^5.1.1",
     "react-router-dom": "^6.18.0",
     "react-select": "^5.8.0"
   },

package.json

@@ -1,15 +1,13 @@
 import Select from "react-select";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
+import { useAuthState } from "react-firebase-hooks/auth";
 import {
   addTask,
   getTags,
   getSegments,
   getContributors,
-  getProjects,
-  uploadImage,
-  logout
 } from "../../utils/databaseOps";
-
+import { auth, logout} from "../../../firebase";
 import styles from "./CreateTask.module.css";
 import { useNavigate, useLocation } from "react-router-dom";
 import SummaryEdit from './components/SummaryEdit';
@@ -18,6 +16,24 @@ export default function CreateTask() {
   const location = useLocation();
   const navigate = useNavigate();
 
+  function handleLogout(){
+    if(!user){
+        navigate('/');
+    }
+    logout();
+  }
+
+  //If the user logs out redirect to login page
+  const [user, loading] = useAuthState(auth);
+  useEffect(() => {
+      if(loading){
+          return;
+      }
+      if (!user){
+          navigate("/");
+      }
+  }, [user]);
+
   // hardcoded values
   const priorities = [
     { value: 1, label: "Low" },
@@ -46,7 +62,9 @@ export default function CreateTask() {
 
   // values per project basis
   const [data, setData] = useState({
-    projects: [],
+    projects: location.state?.userData.PROJECTS.map((project) => {
+      return {value : project, label : project}
+    }),
     segments: [],
     sections: [],
     contributors: [],
@@ -75,35 +93,16 @@ export default function CreateTask() {
         version: 4,
     })
 
-    function logout(){
-        navigate("/");
-    }
-
-    // get projects on page load
-    useEffect(() => {
-        if(!location.state?.userData)
-            logout();
-        setData((prevData) => {
-            return {...prevData, projects : location.state?.userData.PROJECTS.map((project) => {
-                return {value : project, label : project}
-            })}
-        })
-        // getProjects(task.assigner).then((projects) => {
-        //     setData((prevData) => {
-        //         return {...prevData, projects : projects ? projects.map((project) => {
-        //             return {value : project, label : project}
-        //         }) : [] }
-        //     })
-        // })
-    }, [location.state?.userData])
+    // function logout(){
+    //     navigate("/");
+    // }
 
   // get project specific data when new project is selected
   useEffect(() => {
     if (!task.project_ID) return;
 
     // get tags of the selected project
     getTags(task.project_ID).then((tagsData) => {
-      console.log(tagsData);
       setData((prevData) => {
         return { ...prevData, tags: tagsData ? [...tagsData] : [] };
       });
@@ -172,7 +171,7 @@ export default function CreateTask() {
   // event handler for handling changes in select
   const handleSelectChange = (select, spec) => {
     setTask((prevTask) => ({ ...prevTask, [spec]: select.value }));
-    console.log(`Option selected:`, select.value);
+    // console.log(`Option selected:`, select.value);
   };
 
   // event handler for handling project title and desc input
@@ -265,49 +264,20 @@ export default function CreateTask() {
     }));
   }
 
-  //   Handler for handling the image drop
-  function handleImageDrop(e) {
-    e.preventDefault();
-    setDragging(false);
-    const file = e.dataTransfer.files[0];
-    if ((task, file)) {
-      setUploadMessage(`Uploading ${file.name}...`);
-      console.log("File", file);
-      uploadImage(task, file).then((url) => {
-        console.log("IMAGE URL from store", url);
-        const cursorPosition = descriptionRef.current.selectionStart;
-        const newDescription =
-          task.description.slice(0, cursorPosition) +
-          `![Image](${url})` +
-          task.description.slice(cursorPosition);
-
-        setTask((prevTask) => ({ ...prevTask, description: newDescription }));
-        setUploadMessage(null);
-      });
-    }
-  }
-
-  // event handler for handling drag enter
-  function handleDragEnter(e) {
-    e.preventDefault();
-    setDragging(true);
-  }
-
-  // event handler for handling drag leave
-  function handleDragLeave(e) {
-    e.preventDefault();
-    setDragging(false);
-  }
-
     // render task form
     return (
         <>
             <form className={styles.form} onSubmit={handleTaskSubmit}>
                 <div className={styles.header}>
                     <h1>New Task</h1>
-                    <button type="submit" className={styles.taskSubmit}>
-                        Create Task
-                    </button>
+                    <div className={styles.btnCont}>
+                      <button type="submit" className={styles.taskSubmit}>
+                          Create Task
+                      </button>
+                      <button type="button" className={styles.logoutBtn} onClick={handleLogout}>
+                          Logout
+                      </button>
+                    </div>
                 </div>
                 <div className={styles.taskSpecs}>
 

src/pages/CreateTask/CreateTask.jsx

@@ -1,4 +1,25 @@
+.btnCont{
+    display: flex;
+    gap: 1rem;
+}
+
 .taskSubmit {
+    background-color: rgb(0, 164, 11);
+    color: rgb(255, 255, 255);
+    border: none;
+    font-size: 1rem;
+    margin-top: 0.8rem;
+    padding: 10px;
+    font-weight: bold;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.taskSubmit:hover {
+    background-color: rgb(0, 133, 9);
+}
+
+.logoutBtn{
     background-color: rgb(255, 94, 0);
     color: #fff;
     border: none;
@@ -10,8 +31,8 @@
     cursor: pointer;
 }
 
-.taskSubmit:hover {
-    background-color: #c1450b;
+.logoutBtn:hover {
+    background-color: rgb(188, 69, 0);
 }
 
 .selectElement{

src/pages/CreateTask/CreateTask.module.css

@@ -14,7 +14,7 @@ export default function SummaryEdit({description, handleChange}){
                 className={styles.summaryBox}
                 name="description" 
                 onChange={handleChange} 
-                placeholder="Trivial Summary Editor, needs upgrade, styling upgrade required throughout the page, show label for different dropdowns"
+                placeholder="Task Summary"
                 rows="7"
                 required
             />