From ffd2a48b2949eb8d9e2cba04c69a3b37bf71f4b3 Mon Sep 17 00:00:00 2001
From: Juan Sebastian velez Posada <jvelezpo@users.noreply.github.com>
Date: Wed, 15 Feb 2023 10:50:21 -0500
Subject: [PATCH] Sebas prompt for api key (#171)

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

* bump extension version
---
 src/components/Alert.tsx    | 12 +++++++++---
 src/components/WakaTime.tsx | 13 +++++++++++++
 src/manifests/chrome.json   |  2 +-
 src/manifests/firefox.json  |  2 +-
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
index 668f8c0..f600727 100644
--- a/src/components/Alert.tsx
+++ b/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>
+  );
 }
diff --git a/src/components/WakaTime.tsx b/src/components/WakaTime.tsx
index 34d9fee..6b29727 100644
--- a/src/components/WakaTime.tsx
+++ b/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">
diff --git a/src/manifests/chrome.json b/src/manifests/chrome.json
index 5328bb1..f0abfe5 100644
--- a/src/manifests/chrome.json
+++ b/src/manifests/chrome.json
@@ -26,5 +26,5 @@
     "page": "options.html"
   },
   "permissions": ["alarms", "tabs", "storage", "idle"],
-  "version": "3.0.0"
+  "version": "3.0.1"
 }
diff --git a/src/manifests/firefox.json b/src/manifests/firefox.json
index 96f77db..0eb2c34 100644
--- a/src/manifests/firefox.json
+++ b/src/manifests/firefox.json
@@ -39,5 +39,5 @@
     "storage",
     "idle"
   ],
-  "version": "3.0.0"
+  "version": "3.0.1"
 }