Sebas prompt for api key (#171)

* chore: prompt users when they dont have api key set up

* bump extension version

src/components/Alert.tsx

@@ -1,11 +1,17 @@
-import React from 'react';
+import React, { MouseEventHandler, CSSProperties } from 'react';
 import classNames from 'classnames';
 import { SuccessOrFailType } from '../config/config';
 interface AlertProps {
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  style?: CSSProperties;
   text: string;
   type: SuccessOrFailType;
 }
 
-export default function Alert({ type, text }: AlertProps): JSX.Element {
-  return <div className={classNames('alert', `alert-${type}`)}>{text}</div>;
+export default function Alert({ onClick, style, type, text }: AlertProps): JSX.Element {
+  return (
+    <div className={classNames('alert', `alert-${type}`)} onClick={onClick} style={style}>
+      {text}
+    </div>
+  );
 }

src/components/WakaTime.tsx

@@ -2,6 +2,9 @@ import React, { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { ApiKeyReducer, ReduxSelector } from '../types/store';
 import { fetchUserData } from '../utils/user';
+import apiKeyInvalid from '../utils/apiKey';
+import config from '../config/config';
+import Alert from './Alert';
 import NavBar from './NavBar';
 import MainList from './MainList';
 
@@ -18,9 +21,19 @@ export default function WakaTime(): JSX.Element {
     void fetchUserData(apiKeyFromRedux, dispatch);
   }, []);
 
+  const isApiKeyValid = apiKeyInvalid(apiKeyFromRedux) === '';
+
   return (
     <div>
       <NavBar />
+      {!isApiKeyValid && (
+        <Alert
+          type={config.alert.failure.type}
+          text={'Please update your api key'}
+          onClick={() => browser.runtime.openOptionsPage()}
+          style={{ cursor: 'pointer' }}
+        />
+      )}
       <div className="container">
         <div className="row">
           <div className="col-md-12">