diff --git a/package.json b/package.json
index 853a857..ee92b30 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,13 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "@fortawesome/fontawesome-svg-core": "^6.1.1",
+ "@fortawesome/free-solid-svg-icons": "^6.1.1",
+ "@fortawesome/react-fontawesome": "^0.1.18",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
+ "@uiball/loaders": "^1.2.6",
"firebase": "^9.1.0",
"react": "^17.0.2",
"react-countdown": "^2.3.2",
diff --git a/public/index.html b/public/index.html
index 5b1ef86..f697fcd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,8 +3,7 @@
-
-
+
diff --git a/src/pages/Main/ClockifyTaskForm/ClockifyTaskForm.jsx b/src/pages/Main/ClockifyTaskForm/ClockifyTaskForm.jsx
index cf6b49c..8a149ca 100644
--- a/src/pages/Main/ClockifyTaskForm/ClockifyTaskForm.jsx
+++ b/src/pages/Main/ClockifyTaskForm/ClockifyTaskForm.jsx
@@ -1,27 +1,28 @@
import './clockify-task-form.css'
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { doc, getDoc, getFirestore } from "firebase/firestore";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { firebase } from '../../../Firebase/firebase';
import Loading from "../../../components/Loading/Loading";
-const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, taskName, setTaskName, workspaceID, setWorkspaceID, projectID, setProjectID, darkMode}) => {
+import {faCheck, faPlus} from '@fortawesome/free-solid-svg-icons'
+import { Ring } from '@uiball/loaders'
+
+const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, taskName, setTaskName, projectID, setProjectID, darkMode, taskID, setTaskID, clockifyData, changeClockifyData}) => {
const auth = getAuth()
- const [userUID, setUserUID] = useState('')
-
- const [workspaces, setWorkspaces] = useState([])
- const [workspacesReady, setWorkspacesReady] = useState(false)
-
- const [projects, setProjects] = useState([])
- const [projectsDone, setProjectsDone] = useState(false)
+ const descriptionInput = useRef("")
const [loading, setLoading] = useState(true)
- async function getApiKey() {
+ let newTask = useRef("")
+ const [addingNewTask, setAddingNewTask] = useState(false)
+
+ async function getApiKey(userUID) {
try {
@@ -39,25 +40,22 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
} catch (error) {
+ console.log(error);
}
setLoading(false)
}
React.useEffect(() => {
-
if (signedIn) {
onAuthStateChanged(auth, async (user) => {
- if (user) {
+ if (user && user.uid) {
- setUserUID(user.uid)
-
- if (user.uid) {
- await getApiKey()
- setLoading(false)
- }
+ await getApiKey(user.uid)
+ setLoading(false)
+
} else {
return (<>)
}
@@ -67,7 +65,7 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
setLoading(false)
}
- }, [signedIn, getApiKey])
+ }, [signedIn])
async function makeRequestWorkspaces(apiClockify) {
try {
@@ -86,7 +84,7 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
return await data
} catch (error) {
-
+ console.log(error);
}
}
@@ -95,20 +93,17 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
const data = await makeRequestWorkspaces(key)
if (data.code !== 1000) {
- let workspacesCopy = []
+ let workspaces = []
await data.forEach(workspace => {
- workspacesCopy.push(workspace)
+ workspaces.push(workspace)
});
-
- setWorkspaces(workspacesCopy)
-
- setWorkspacesReady(true)
- setLoading(false)
+
+ changeClockifyData({workspaces: workspaces})
}
}
- async function requestProjects(e) {
+ const getProjects = async (e) => {
try {
const request = {
@@ -119,32 +114,70 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
}
}
const response = await fetch(`https://api.clockify.me/api/v1/workspaces/${e}/projects`, request)
- const data = response.json()
+ const data = await response.json()
+
+ console.log(data);
+ changeClockifyData({projects: data})
- return data
-
} catch (error) {
console.log(error);
}
}
- const defineProjects = async (e) => {
-
- if (e === 0) {
- setProjectsDone(false)
- setProjects([])
+ async function getTasks(projectID) {
+ if (projectID === "0") {
+ changeClockifyData({projectID: undefined})
+ changeClockifyData({tasks: undefined})
+ return
}
- setWorkspaceID(e)
- const data = await requestProjects(e)
- setProjects(data)
- setProjectsDone(true)
+ try {
+ const request = {
+ method: "GET",
+ headers: {
+ 'X-Api-Key': apiKey,
+ "content-type": "application/json"
+ }
+ }
+ const response = await fetch(`https://api.clockify.me/api/v1/workspaces/${clockifyData.workspaceID}/projects/${projectID}/tasks`, request)
+ const data = await response.json()
+
+ changeClockifyData({tasks: data})
+
+ } catch (error) {
+ console.log(error);
+ }
}
- const selectProject = (e) => {
+ async function addNewTask() {
- setProjectID(e)
+ setAddingNewTask("loading")
+
+ try {
+ const url = `https://api.clockify.me/api/v1/workspaces/${clockifyData.workspaceID}/projects/${clockifyData.projectID}/tasks`
+ const request = {
+ method: "POST",
+ body: JSON.stringify({
+ name: newTask.current.value
+ }),
+ headers: {
+ 'X-Api-Key': apiKey,
+ "content-type": "application/json",
+ }
+ }
+
+ await fetch(url, request)
+
+ newTask.current.value = ""
+
+ await getTasks(clockifyData.projectID)
+
+ } catch (error) {
+ console.log(error);
+ }
+
+ setAddingNewTask(false)
}
return (
@@ -155,41 +188,107 @@ const ClockifyTaskForm = ({timerOn, setTimerOn, signedIn, apiKey, setApiKey, tas
:
{
- userUID ?
-
-