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}

src/manifests/chrome.json

@@ -26,5 +26,5 @@
     "page": "options.html"
   },
   "permissions": ["alarms", "tabs", "storage", "idle"],
-  "version": "3.0.2"
+  "version": "3.0.3"
 }

src/manifests/firefox.json

@@ -39,5 +39,5 @@
     "storage",
     "idle"
   ],
-  "version": "3.0.1"
+  "version": "3.0.3"
 }

src/utils/changeExtensionState.ts

@@ -1,5 +1,4 @@
 import config, { ApiStates } from '../config/config';
-
 import changeExtensionIcon from './changeExtensionIcon';
 import changeExtensionTooltip from './changeExtensionTooltip';
 
@@ -31,4 +30,5 @@ export default async function changeExtensionState(state: ApiStates): Promise<vo
     default:
       break;
   }
+  await browser.storage.sync.set({ extensionState: state });
 }