franpcode/Pomodoro-Timer-with-Clockify-integration
1
0
Fork 0
mirror of https://github.com/FranP-code/Pomodoro-Timer-with-Clockify-integration.git synced 2025-10-12 23:52:30 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Upload API and Change API options done

Browse Source
This commit is contained in:
Francisco Pessano
2021-09-27 18:42:11 -03:00
parent da1f27da91
commit 36ceb825d6
7 changed files with 310 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Account Childrens/Message.jsx
View File

@@ -25,7 +25,7 @@ const Message = (props) => {
}, [])
return (
<div>
<div id="message" className={props.message === 'API UPLOADED' ? 'successfully' : null}>
<h1>{message}</h1>
</div>
)

142
src/components/Account.jsx
View File

@@ -1,7 +1,7 @@
import React, {useState} from 'react'
import {firebase} from './Firebase/firebase'
import {getAuth, onAuthStateChanged} from 'firebase/auth'
import { doc, updateDoc, getFirestore } from "firebase/firestore";
import { doc, updateDoc, getFirestore, collection, getDoc } from "firebase/firestore";
import Message from './Account Childrens/Message';
const Account = () => {
@@ -27,6 +27,10 @@ const Account = () => {
})
React.useEffect( () => {
checkApiKey()
})
const submitApiKey = async (e) => {
e.preventDefault()
e.target.reset()
@@ -102,61 +106,113 @@ const Account = () => {
return false
}
}
const checkApiKey = async () => {
try {
const db = await getFirestore(firebase)
const referenceDocument = await doc(db, 'users', userUID)
const document = await getDoc(referenceDocument)
const data = await document.data()
await applyApiState(data)
} catch (error) {
console.log(error)
}
}
const applyApiState = (data) => {
if (data.keyClockify !== '') {
setActualState('API UPLOADED')
setApiKey(data.keyClockify)
setFristThreeApiKey(apiKey[0] + apiKey[1] + apiKey[2])
}
}
const deleteApiKey = async () => {
try {
const db = await getFirestore(firebase)
const referenceDocument = await doc(db, 'users', userUID)
await updateDoc(referenceDocument, {
keyClockify: ''
})
} catch (error) {
console.log(error)
}
setActualState('')
setApiKey('aa')
setApiKey('')
}
return (
<div>
<div className="account-container">
{
actualState === 'API NOT VALID' || actualState === 'API NOT UPLOADED' || actualState === 'API UPLOADED' ? <Message message={actualState}/> : null
}
{
signIn ?
<div>
<h1>One more step...</h1>
<h2>Insert your Clockify API here</h2>
<form
onSubmit={submitApiKey}
className=
{
actualState === 'API UPLOADED' ? 'disabled' : null
}
>
<input
type="text"
onChange=
{
(e) => {setApiKey(e.target.value)}
}
/>
<div className="next-step">
<div className={actualState === 'API UPLOADED' ? 'disabled' : null}>
<div className="next-step-title">
<h1>One more step...</h1>
<h2>Insert your <a href="https://clockify.me/help/faq/where-can-find-api-information">Clockify API</a> here</h2>
</div>
<form
onSubmit={submitApiKey}
>
<input
type="text"
onChange=
{
(e) => {setApiKey(e.target.value)}
}
placeholder="API Key"
value=
{
actualState === '' ? apiKey : ''
}
/>
<input
type="submit"
value="Send API"
/>
</form>
</div>
<input
type="submit"
/>
</form>
{
actualState === 'API UPLOADED' ?
<div>
<div className="flex-container-change-api-container">
<div className="change-api-container">
<label
for="change-API-button">
<div className="api-preview-container">
<p className="title">
Change the API Key
</p>
<p className="api-preview">
{fristThreeApiKey}*******************
</p>
</div>
</label>
<label
for="change-API-button">
<div>
<p>
Change the API Key
</p>
<p>
{fristThreeApiKey}*******************
</p>
</div>
</label>
<button
id="change-API-button"
onClick={() => setActualState('')}
> Change
</button>
<button
id="change-API-button"
onClick={() => deleteApiKey()}
> Change
</button>
</div>
</div>
: null
}

2
src/components/Identify.jsx
View File

@@ -62,7 +62,7 @@ const Identify = (props) => {
console.log(response)
console.log(response.user)
//props.history.push('/config-account')
props.history.push('/config-account')
} catch (error) {
console.log(error)