67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import config from '../config/config';
|
|
import { ApiKeyReducer, ReduxSelector } from '../types/store';
|
|
import apiKeyInvalid from '../utils/apiKey';
|
|
import { fetchUserData } from '../utils/user';
|
|
import Alert from './Alert';
|
|
import MainList from './MainList';
|
|
import NavBar from './NavBar';
|
|
|
|
export default function WakaTime(): JSX.Element {
|
|
const dispatch = useDispatch();
|
|
const [extensionStatus, setExtensionStatus] = useState('');
|
|
|
|
const {
|
|
apiKey: apiKeyFromRedux,
|
|
loggingEnabled,
|
|
totalTimeLoggedToday,
|
|
}: ApiKeyReducer = useSelector((selector: ReduxSelector) => selector.config);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
await fetchUserData(apiKeyFromRedux, dispatch);
|
|
};
|
|
void fetchData();
|
|
}, [apiKeyFromRedux, dispatch]);
|
|
|
|
useEffect(() => {
|
|
const init = async () => {
|
|
const items = await browser.storage.sync.get({ extensionStatus: '' });
|
|
setExtensionStatus(items.extensionStatus as string);
|
|
};
|
|
void init();
|
|
}, []);
|
|
|
|
const isApiKeyValid = apiKeyInvalid(apiKeyFromRedux) === '';
|
|
|
|
return (
|
|
<div className="py-4 px-2 pt-0">
|
|
<NavBar />
|
|
{isApiKeyValid && extensionStatus === 'notSignedIn' && (
|
|
<Alert
|
|
type={config.alert.failure.type}
|
|
text={'Invalid API key or API url'}
|
|
onClick={() => browser.runtime.openOptionsPage()}
|
|
style={{ cursor: 'pointer' }}
|
|
/>
|
|
)}
|
|
{!isApiKeyValid && (
|
|
<Alert
|
|
type={config.alert.failure.type}
|
|
text={'Please update your api key'}
|
|
onClick={() => browser.runtime.openOptionsPage()}
|
|
style={{ cursor: 'pointer' }}
|
|
/>
|
|
)}
|
|
<div className="container mt-0">
|
|
<div className="row">
|
|
<div className="col-md-12">
|
|
<MainList loggingEnabled={loggingEnabled} totalTimeLoggedToday={totalTimeLoggedToday} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|