Added styles to the selects and loading state

src/components/ClockifyTasksDisplay.jsx

@@ -3,7 +3,7 @@ import React, {useState} from 'react'
 import { firebase } from './Firebase/firebase';
 import { getAuth, onAuthStateChanged } from "firebase/auth";
 import { doc, updateDoc, getFirestore, collection, getDoc } from "firebase/firestore";
-
+import loadingGif from './img/loading.gif'
 
 const ClockifyTasksDisplay = (props) => {
     
@@ -18,6 +18,11 @@ const ClockifyTasksDisplay = (props) => {
     const [projects, setProjects] = useState([])
     const [projectsDone, setProjectsDone] = useState(false)
 
+    const [workspaceID, setWorspaceID] = useState(0)
+    const [projectID, setProjectID] = useState(0)
+
+    const [loading, setLoading] = useState(true)
+
     const getApiKey = async () => {
 
         try {
@@ -85,6 +90,7 @@ const ClockifyTasksDisplay = (props) => {
             await setWorkspaces(workspacesCopy)
     
             setWorkspacesReady(true)
+            setLoading(false)
         }
         
         console.log(workspaces)
@@ -127,8 +133,6 @@ const ClockifyTasksDisplay = (props) => {
             const data = await response.json()
 
             console.log(data)
-            
-            setProjectsDone(true)
 
             return await data
     
@@ -139,6 +143,16 @@ const ClockifyTasksDisplay = (props) => {
 
     const defineProjects = async (e) => {
 
+        if (e === 0) {
+            setProjectsDone(false)
+            setProjects([])
+
+        } else {
+            setProjectsDone(true)
+        }
+        
+        setWorspaceID(e)
+
         const data = await makeRequestProjects(e)
 
         await setProjects(data)
@@ -151,11 +165,18 @@ const ClockifyTasksDisplay = (props) => {
         
     }
 
+    if (loading) {
+        return (
+            <div className="clockify-tasks-display loading-container">
+                <img src={loadingGif} alt=""/>
+            </div>
+        )
+    }
 
 
     return (
-        <div>
-            <select onChange={(e) => {defineProjects(e.target.value)}}>
+        <div className={props.timerOn ? 'clockify-tasks-display disabled' : 'clockify-tasks-display'}>
+            <select onChange={(e) => {defineProjects(e.target.value)}} className='workspace-selector'>
                 <option value="0">Select a Workspace</option>
                 {
                     workspacesReady ? 
@@ -165,9 +186,9 @@ const ClockifyTasksDisplay = (props) => {
                     : null
                 }
             </select>
-            <select>
+            <select className={workspaceID !== 0 ? 'project-selector' : 'project-selector disabled'}>
                 {
-                    projectsDone ?
+                    projectsDone && projects !== undefined ?
                         projects.map( (project) => {
 
                             if (!project.archived){
@@ -175,7 +196,7 @@ const ClockifyTasksDisplay = (props) => {
 
                             }
                         })
-                    :null
+                    : null
                 }
             </select>
         </div>

src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx

@@ -2,8 +2,8 @@ import React, {useState} from 'react'
 
 const MainPomodoroTimer = (props) => {
 
-    const [minutes, setMinutes] = useState('25')
-    const [seconds, setSeconds] = useState('0')
+    const [minutes, setMinutes] = useState(25)
+    const [seconds, setSeconds] = useState(0)
 
     const [breakTime, setBreakTime] = useState(undefined)
     const [weAreInBreakTime, setWeAreInBreakTime] = useState(false)
@@ -144,12 +144,12 @@ const MainPomodoroTimer = (props) => {
             if (seconds === 0) {
 
                 setSeconds(59) 
-                setMinutes((minutes - 1))
+                setMinutes(minutes - 1)
 
             }
             
             else {
-                setSeconds((seconds - 1))
+                setSeconds(seconds - 1)
             }
 
         }, (1000 / velocity))

src/components/MainPomodoro.jsx

@@ -11,7 +11,6 @@ const MainPomodoro = (props) => {
 
     const [style, setStyle] = useState('Regular')
     const [displayHidden, setDisplayHidden] = useState(true)
-    const [timerOn, setTimerOn] = useState(false)
 
     const [pomodoros, setPomodoros] = useState(0)
     const [rests, setRests] = useState(0)
@@ -31,8 +30,8 @@ const MainPomodoro = (props) => {
                 
                 style={style}
 
-                timerOn={timerOn}
-                setTimerOn={setTimerOn}
+                timerOn={props.timerOn}
+                setTimerOn={props.setTimerOn}
                 
                 pomodoros={pomodoros}
                 setPomodoros={setPomodoros}
@@ -54,8 +53,8 @@ const MainPomodoro = (props) => {
                     </h3>
                 </div>
 
-                <button class="start-pomodoro" onClick={() => setTimerOn(!timerOn)}>{
-                    timerOn ? 'STOP' : 'START'
+                <button class="start-pomodoro" onClick={() => props.setTimerOn(!props.timerOn)}>{
+                    props.timerOn ? 'STOP' : 'START'
 
                 }</button>
             </div>