chore: implement new ts components
This commit is contained in:
Sebastian Velez
169
src/components/NavBar.tsx
Normal file
169
src/components/NavBar.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import config from '../config/config';
|
||||
import apiKeyInvalid from '../utils/apiKey';
|
||||
|
||||
type Props = {
|
||||
loggedIn: boolean;
|
||||
user: any;
|
||||
};
|
||||
|
||||
export default function NavBar({ loggedIn, user }: Props) {
|
||||
const [state, setState] = useState({
|
||||
apiKey: '',
|
||||
apiKeyError: '',
|
||||
loading: false,
|
||||
});
|
||||
useEffect(() => {
|
||||
const fetch = async () => {
|
||||
const { apiKey } = await browser.storage.sync.get({ apiKey: config.apiKey });
|
||||
setState({ ...state, apiKey });
|
||||
};
|
||||
|
||||
fetch();
|
||||
}, []);
|
||||
|
||||
const signedInAs = () => {
|
||||
if (loggedIn === true) {
|
||||
return (
|
||||
<p className="navbar-text">
|
||||
Signed in as <b>{user.full_name}</b>
|
||||
</p>
|
||||
);
|
||||
} else {
|
||||
return <div />;
|
||||
}
|
||||
};
|
||||
|
||||
const customRules = () => {
|
||||
if (loggedIn === true) {
|
||||
return (
|
||||
<li>
|
||||
<a target="_blank" href="https://wakatime.com/settings/rules" rel="noreferrer">
|
||||
<i className="fa fa-fw fa-filter"></i>
|
||||
Custom Rules
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
} else {
|
||||
return <div />;
|
||||
}
|
||||
};
|
||||
|
||||
const dashboard = () => {
|
||||
if (loggedIn === true) {
|
||||
return (
|
||||
<li>
|
||||
<a target="_blank" href="https://wakatime.com/dashboard" rel="noreferrer">
|
||||
<i className="fa fa-fw fa-tachometer"></i>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
} else {
|
||||
return <div />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<nav className="navbar navbar-default" role="navigation">
|
||||
<div className="container-fluid">
|
||||
<div className="navbar-header">
|
||||
<button
|
||||
type="button"
|
||||
className="navbar-toggle collapsed"
|
||||
data-toggle="collapse"
|
||||
data-target="#bs-example-navbar-collapse-1"
|
||||
>
|
||||
<span className="sr-only">Toggle navigation</span>
|
||||
<i className="fa fa-fw fa-cogs"></i>
|
||||
</button>
|
||||
<a target="_blank" className="navbar-brand" href="https://wakatime.com" rel="noreferrer">
|
||||
WakaTime
|
||||
<img src="graphics/wakatime-logo-48.png" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||
{signedInAs()}
|
||||
<ul className="nav navbar-nav">
|
||||
{customRules()}
|
||||
{dashboard()}
|
||||
<li className="dropdown">
|
||||
<a
|
||||
href="#"
|
||||
className="dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
role="button"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i className="fa fa-fw fa-info"></i>
|
||||
About
|
||||
<span className="caret"></span>
|
||||
</a>
|
||||
<ul className="dropdown-menu" role="menu">
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/wakatime/chrome-wakatime/issues"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<i className="fa fa-fw fa-bug"></i>
|
||||
Report an Issue
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/wakatime/chrome-wakatime"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<i className="fa fa-fw fa-github"></i>
|
||||
View on GitHub
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div className="container-fluid">
|
||||
{state.apiKeyError && (
|
||||
<div className="alert alert-danger" role="alert">
|
||||
{state.apiKeyError}
|
||||
</div>
|
||||
)}
|
||||
<div className="input-group">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="API key"
|
||||
value={state.apiKey}
|
||||
onChange={(e) => {
|
||||
const key = e.target.value;
|
||||
const isApiKeyInvalid = apiKeyInvalid(key);
|
||||
setState({ ...state, apiKey: key, apiKeyError: isApiKeyInvalid });
|
||||
}}
|
||||
/>
|
||||
<span className="input-group-btn">
|
||||
<button
|
||||
className={`btn btn-default ${state.loading ? 'disabled' : ''}`}
|
||||
disabled={state.loading}
|
||||
type="button"
|
||||
data-loading-text="Loading..."
|
||||
onClick={async () => {
|
||||
if (state.apiKeyError === '' && state.apiKey !== '') {
|
||||
setState({ ...state, loading: true });
|
||||
await browser.storage.sync.set({ apiKey: state.apiKey });
|
||||
setState({ ...state, loading: false });
|
||||
}
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
126
src/components/WakaTime.tsx
Normal file
126
src/components/WakaTime.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import WakaTimeCore from '../core/WakaTimeCore';
|
||||
import config from '../config/config';
|
||||
import changeExtensionState from '../utils/changeExtensionState';
|
||||
import NavBar from './NavBar';
|
||||
import MainList from './MainList';
|
||||
|
||||
const API_KEY = 'waka_3766d693-bff3-4c63-8bf5-b439f3e12301';
|
||||
|
||||
export default function WakaTime() {
|
||||
const defaultState = {
|
||||
apiKey: '',
|
||||
loading: true,
|
||||
loggedIn: false,
|
||||
loggingEnabled: config.loggingEnabled,
|
||||
totalTimeLoggedToday: '0 minutes',
|
||||
user: {
|
||||
email: '',
|
||||
full_name: '',
|
||||
photo: '',
|
||||
},
|
||||
};
|
||||
const [state, setState] = useState(defaultState);
|
||||
|
||||
const fetchUserData = async () => {
|
||||
// await browser.storage.sync.set({ apiKey: API_KEY });
|
||||
const { apiKey } = await browser.storage.sync.get({ apiKey: config.apiKey });
|
||||
|
||||
if (!apiKey) {
|
||||
changeExtensionState('notSignedIn');
|
||||
}
|
||||
|
||||
try {
|
||||
const data = await WakaTimeCore.checkAuth(apiKey as string);
|
||||
const items = await browser.storage.sync.get({ loggingEnabled: config.loggingEnabled });
|
||||
|
||||
if (items.loggingEnabled === true) {
|
||||
changeExtensionState('allGood');
|
||||
} else {
|
||||
changeExtensionState('notLogging');
|
||||
}
|
||||
|
||||
const totalTimeLoggedToday = await WakaTimeCore.getTotalTimeLoggedToday(apiKey as string);
|
||||
setState({
|
||||
...state,
|
||||
apiKey,
|
||||
loading: false,
|
||||
loggedIn: true,
|
||||
loggingEnabled: items.loggingEnabled,
|
||||
totalTimeLoggedToday: totalTimeLoggedToday.text,
|
||||
user: {
|
||||
email: data.email,
|
||||
full_name: data.full_name,
|
||||
photo: data.photo,
|
||||
},
|
||||
});
|
||||
|
||||
await WakaTimeCore.recordHeartbeat();
|
||||
} catch (err) {
|
||||
changeExtensionState('notSignedIn');
|
||||
setState({ ...defaultState, loading: false });
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchUserData();
|
||||
}, []);
|
||||
|
||||
const disableLogging = () => {
|
||||
setState({
|
||||
...state,
|
||||
loggingEnabled: false,
|
||||
});
|
||||
|
||||
changeExtensionState('notLogging');
|
||||
|
||||
browser.storage.sync.set({
|
||||
loggingEnabled: false,
|
||||
});
|
||||
};
|
||||
|
||||
const enableLogging = () => {
|
||||
setState({
|
||||
...state,
|
||||
loggingEnabled: true,
|
||||
});
|
||||
|
||||
changeExtensionState('allGood');
|
||||
|
||||
browser.storage.sync.set({
|
||||
loggingEnabled: true,
|
||||
});
|
||||
};
|
||||
|
||||
const logoutUser = async () => {
|
||||
await browser.storage.sync.set({ apiKey: '' });
|
||||
|
||||
setState(defaultState);
|
||||
|
||||
changeExtensionState('notSignedIn');
|
||||
};
|
||||
|
||||
// if (state.loading === true) {
|
||||
// return <div>Loading</div>
|
||||
// }
|
||||
|
||||
return (
|
||||
<div>
|
||||
<NavBar user={state.user} loggedIn={state.loggedIn} />
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<MainList
|
||||
disableLogging={disableLogging}
|
||||
enableLogging={enableLogging}
|
||||
loggingEnabled={state.loggingEnabled}
|
||||
totalTimeLoggedToday={state.totalTimeLoggedToday}
|
||||
logoutUser={logoutUser}
|
||||
loggedIn={state.loggedIn}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user