Changed the components order and put to work the request of Clockify workspaces

.gitignore

@@ -24,4 +24,5 @@ yarn-error.log*
 
 # firebase
 
-/src/components/Firebase
+/src/components/Firebase
+/src/components/Clockify

src/App.js

@@ -18,6 +18,7 @@ import {
 
 import Identify from "./components/Identify";
 import Account from "./components/Account";
+import ClockifyTasksDisplay from './components/ClockifyTasksDisplay';
 
 function App() {
 
@@ -56,7 +57,12 @@ function App() {
             <BannerLogin 
               signIn={signIn}
             />
-            <MainPomodoro />
+            <MainPomodoro 
+              signIn={signIn}
+            />
+            <ClockifyTasksDisplay
+              signIn={signIn}
+            />
             <GoDownArrow />
             <AboutThis />
           </Route>

src/components/ClockifyTasksDisplay.jsx

@@ -0,0 +1,119 @@
+import React, {useState} from 'react'
+//import { makeRequest } from '../Clockify/clockify'
+import { firebase } from './Firebase/firebase';
+import { getAuth, onAuthStateChanged } from "firebase/auth";
+import { doc, updateDoc, getFirestore, collection, getDoc } from "firebase/firestore";
+
+
+const ClockifyTasksDisplay = (props) => {
+    
+    const auth = getAuth()
+
+    const [userUID, setUserUID] = useState('')
+    const [apiKey, setApiKey] = useState('')
+    const [workspaces, setWorkspaces] = useState([])
+
+    const getApiKey = async () => {
+
+        try {
+
+            const db = await getFirestore(firebase)
+
+            const reference = await doc(db, 'users', userUID)
+            console.log(reference)
+
+            const dataSnap = await getDoc(reference)
+            const result = await dataSnap.data()
+            
+            console.log(userUID)
+            console.log(result)
+
+            if (result.keyClockify) {
+
+                await generateArrayOfWorkspaces(result.keyClockify)
+            }
+            
+
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
+    const makeRequest = async (apiClockify) => {
+        try {
+            const request = {
+                method: "GET",
+                headers: {
+                    'X-Api-Key': apiClockify,
+                    "content-type": "application/json"
+                }
+            }
+            const response = await fetch(`https://api.clockify.me/api/v1/workspaces/`, request)
+            const data = await response.json()
+    
+            return await data 
+    
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
+    const generateArrayOfWorkspaces = async (key) => {
+
+        const getApiKeyReturn = key
+        
+        console.log(apiKey)
+
+        const data = await makeRequest(key)
+
+        if (data.code !== 1000) {
+            let workspacesCopy = await workspaces
+    
+            await data.forEach(workspace => {
+                
+                workspacesCopy.push(workspace)
+                
+            });
+    
+            await setWorkspaces(workspacesCopy)
+    
+            console.log(workspaces)
+
+        }
+
+    }
+    
+    React.useEffect( () => {
+
+        if (props.signIn) {
+            
+            onAuthStateChanged(auth, async (user) => {
+                
+                if (user) {
+
+                    setUserUID(await user.uid)
+
+                    if (userUID) {
+
+                        await getApiKey()
+                    }
+                } else {
+                    return (<></>)
+                }
+                
+            })
+        }
+
+    }, [props, onAuthStateChanged, setUserUID, userUID])
+
+
+
+
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default ClockifyTasksDisplay

src/components/MainPomodoro.jsx

@@ -2,8 +2,10 @@ import React, {useState} from 'react'
 import MainPomodoroTimer, {setTim} from './Main Pomodoro Childrens/MainPomodoroTimer'
 import PomodoroCounter from './Main Pomodoro Childrens/PomodoroCounter'
 import StyleSelector from './Main Pomodoro Childrens/StyleSelector'
+import { makeRequest } from './Clockify/clockify'
+import ClockifyTasksDisplay from './ClockifyTasksDisplay'
 
-const MainPomodoro = () => {
+const MainPomodoro = (props) => {
 
     console.log('MAIN POMODORO DEPLOYED')