Propmt when a api key can not be use + house keeping (#173)

* chore: remove old files

* chore: change JS tests to TS, delete dummy tests

* chore: bump manifests version

src/components/WakaTime.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { ApiKeyReducer, ReduxSelector } from '../types/store';
 import { fetchUserData } from '../utils/user';
@@ -10,6 +10,7 @@ import MainList from './MainList';
 
 export default function WakaTime(): JSX.Element {
   const dispatch = useDispatch();
+  const [extensionState, setExtensionState] = useState('');
 
   const {
     apiKey: apiKeyFromRedux,
@@ -18,7 +19,12 @@ export default function WakaTime(): JSX.Element {
   }: ApiKeyReducer = useSelector((selector: ReduxSelector) => selector.config);
 
   useEffect(() => {
-    void fetchUserData(apiKeyFromRedux, dispatch);
+    const fetchData = async () => {
+      await fetchUserData(apiKeyFromRedux, dispatch);
+      const items = await browser.storage.sync.get({ extensionState: '' });
+      setExtensionState(items.extensionState as string);
+    };
+    void fetchData();
   }, []);
 
   const isApiKeyValid = apiKeyInvalid(apiKeyFromRedux) === '';
@@ -26,6 +32,14 @@ export default function WakaTime(): JSX.Element {
   return (
     <div>
       <NavBar />
+      {isApiKeyValid && extensionState === 'notSignedIn' && (
+        <Alert
+          type={config.alert.failure.type}
+          text={'Invalid api key'}
+          onClick={() => browser.runtime.openOptionsPage()}
+          style={{ cursor: 'pointer' }}
+        />
+      )}
       {!isApiKeyValid && (
         <Alert
           type={config.alert.failure.type}