Added the upload to clockify function

src/App.js

@@ -26,6 +26,11 @@ function App() {
 
   const [signIn, setSignIn] = useState('')
 
+  const [apiKey, setApiKey] = useState('')
+
+  const [workspaceID, setWorspaceID] = useState(0)
+  const [projectID, setProjectID] = useState(0)
+
   const auth = getAuth()
 
   onAuthStateChanged(auth, (user) => {
@@ -63,10 +68,28 @@ function App() {
               signIn={signIn}
               timerOn={timerOn}
               setTimerOn={setTimerOn}
+
+              workspaceID={workspaceID}
+              setWorspaceID={setWorspaceID}
+
+              projectID={projectID}
+              setProjectID={setProjectID}
+
+              apiKey={apiKey}
             />
+
             <ClockifyTasksDisplay
               signIn={signIn}
               timerOn={timerOn}
+
+              apiKey={apiKey}
+              setApiKey={setApiKey}
+
+              workspaceID={workspaceID}
+              setWorspaceID={setWorspaceID}
+
+              projectID={projectID}
+              setProjectID={setProjectID}
             />
             <GoDownArrow />
             <AboutThis />

src/components/ClockifyTasksDisplay.jsx

@@ -10,7 +10,6 @@ const ClockifyTasksDisplay = (props) => {
     const auth = getAuth()
 
     const [userUID, setUserUID] = useState('')
-    const [apiKey, setApiKey] = useState('')
 
     const [workspaces, setWorkspaces] = useState([])
     const [workspacesReady, setWorkspacesReady] = useState(false)
@@ -18,9 +17,6 @@ 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 () => {
@@ -61,7 +57,7 @@ const ClockifyTasksDisplay = (props) => {
             const response = await fetch(`https://api.clockify.me/api/v1/workspaces/`, request)
             const data = await response.json()
 
-            setApiKey(apiClockify)
+            props.setApiKey(apiClockify)
     
             return await data 
     
@@ -74,7 +70,7 @@ const ClockifyTasksDisplay = (props) => {
 
         const getApiKeyReturn = key
         
-        console.log(apiKey)
+        console.log(props.apiKey)
 
         const data = await makeRequestWorkspaces(key)
 
@@ -125,7 +121,7 @@ const ClockifyTasksDisplay = (props) => {
             const request = {
                 method: "GET",
                 headers: {
-                    'X-Api-Key': apiKey,
+                    'X-Api-Key': props.apiKey,
                     "content-type": "application/json"
                 }
             }
@@ -151,7 +147,7 @@ const ClockifyTasksDisplay = (props) => {
             setProjectsDone(true)
         }
         
-        setWorspaceID(e)
+        props.setWorspaceID(e)
 
         const data = await makeRequestProjects(e)
 
@@ -165,6 +161,11 @@ const ClockifyTasksDisplay = (props) => {
         
     }
 
+    const selectProject = (e) => {
+
+        props.setProjectID(e)
+    }
+
     if (loading) {
         return (
             <div className="clockify-tasks-display loading-container">
@@ -186,7 +187,8 @@ const ClockifyTasksDisplay = (props) => {
                     : null
                 }
             </select>
-            <select className={workspaceID !== 0 ? 'project-selector' : 'project-selector disabled'}>
+            <select onChange={(e) => {selectProject(e.target.value)}} className={props.workspaceID !== 0 ? 'project-selector' : 'project-selector disabled'}>
+                <option value="0">Select a Project</option>
                 {
                     projectsDone && projects !== undefined ?
                         projects.map( (project) => {

src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx

@@ -1,5 +1,7 @@
 import React, {useState} from 'react'
 
+import uploadToClockifyTimer from '../Clockify/uploadToClockifyTimer'
+
 const MainPomodoroTimer = (props) => {
 
     const [minutes, setMinutes] = useState(25)
@@ -233,6 +235,8 @@ const MainPomodoroTimer = (props) => {
                             
                         }, 1000)
                     }
+
+                    uploadToClockifyTimer( props.workspaceID, props.projectID, '2021-10-02T13:00:14Z', '2021-10-02T15:00:14Z', props.apiKey)
                 }
 
 

src/components/MainPomodoro.jsx

@@ -41,6 +41,15 @@ const MainPomodoro = (props) => {
 
                 longRests={longRests}
                 setLongRests={setLongRests}
+
+
+                workspaceID={props.workspaceID}
+                setWorspaceID={props.setWorspaceID}
+
+                projectID={props.projectID}
+                setProjectID={props.setProjectID}
+
+                apiKey={props.apiKey}
                 />