chore: enable disable logging

src/components/MainList.test.tsx

@@ -2,29 +2,16 @@ import React from 'react';
 import { renderWithProviders } from '../utils/test-utils';
 import MainList from './MainList';
 
-type onClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
 describe('MainList', () => {
-  let disableLogging: onClick;
-  let enableLogging: onClick;
   let loggingEnabled: boolean;
-  let logoutUser: onClick;
   let totalTimeLoggedToday: string;
   beforeEach(() => {
-    disableLogging = jest.fn();
-    enableLogging = jest.fn();
     loggingEnabled = false;
-    logoutUser = jest.fn();
     totalTimeLoggedToday = '1/1/1999';
   });
   it('should render properly', () => {
     const { container } = renderWithProviders(
-      <MainList
-        disableLogging={disableLogging}
-        enableLogging={enableLogging}
-        loggingEnabled={loggingEnabled}
-        logoutUser={logoutUser}
-        totalTimeLoggedToday={totalTimeLoggedToday}
-      />,
+      <MainList loggingEnabled={loggingEnabled} totalTimeLoggedToday={totalTimeLoggedToday} />,
     );
     expect(container).toMatchInlineSnapshot(`
       <div>

src/components/MainList.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import changeExtensionState from '../utils/changeExtensionState';
+import { configLogout, setLoggingEnabled } from '../reducers/configReducer';
+import { userLogout } from '../reducers/currentUser';
 import { ReduxSelector } from '../types/store';
 import { User } from '../types/user';
 
 export interface MainListProps {
-  disableLogging: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
-  enableLogging: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
   loggingEnabled: boolean;
-  logoutUser: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
   totalTimeLoggedToday?: string;
 }
 const openOptionsPage = async (): Promise<void> => {
@@ -15,16 +15,34 @@ const openOptionsPage = async (): Promise<void> => {
 };
 
 export default function MainList({
-  disableLogging,
-  enableLogging,
   loggingEnabled,
-  logoutUser,
   totalTimeLoggedToday,
 }: MainListProps): JSX.Element {
+  const dispatch = useDispatch();
+
   const user: User | undefined = useSelector(
     (selector: ReduxSelector) => selector.currentUser.user,
   );
 
+  const logoutUser = async (): Promise<void> => {
+    await browser.storage.sync.set({ apiKey: '' });
+    dispatch(configLogout());
+    dispatch(userLogout());
+    await changeExtensionState('notSignedIn');
+  };
+
+  const enableLogging = async (): Promise<void> => {
+    dispatch(setLoggingEnabled(true));
+    await browser.storage.sync.set({ loggingEnabled: true });
+    await changeExtensionState('allGood');
+  };
+
+  const disableLogging = async (): Promise<void> => {
+    dispatch(setLoggingEnabled(false));
+    await browser.storage.sync.set({ loggingEnabled: false });
+    await changeExtensionState('notLogging');
+  };
+
   return (
     <div>
       {user && (

src/components/NavBar.tsx

@@ -2,9 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { configLogout, setApiKey } from '../reducers/configReducer';
 import { userLogout } from '../reducers/currentUser';
-import { ReduxSelector } from '../types/store';
+import { ApiKeyReducer, ReduxSelector } from '../types/store';
 import { User } from '../types/user';
-import config from '../config/config';
 import apiKeyInvalid from '../utils/apiKey';
 import { fetchUserData } from '../utils/user';
 
@@ -14,20 +13,20 @@ export default function NavBar(): JSX.Element {
     apiKeyError: '',
     loading: false,
   });
-  useEffect(() => {
-    const fetch = async () => {
-      const { apiKey } = await browser.storage.sync.get({ apiKey: config.apiKey });
-      setState({ ...state, apiKey });
-    };
-
-    fetch();
-  }, []);
 
   const dispatch = useDispatch();
+
+  const { apiKey: apiKeyFromRedux }: ApiKeyReducer = useSelector(
+    (selector: ReduxSelector) => selector.config,
+  );
   const user: User | undefined = useSelector(
     (selector: ReduxSelector) => selector.currentUser.user,
   );
 
+  useEffect(() => {
+    setState({ ...state, apiKey: apiKeyFromRedux });
+  }, [apiKeyFromRedux]);
+
   const signedInAs = () => {
     if (user) {
       return (

src/components/WakaTime.tsx

@@ -1,20 +1,13 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { ApiKeyReducer, ReduxSelector } from '../types/store';
-import config from '../config/config';
 import { fetchUserData } from '../utils/user';
-import changeExtensionState from '../utils/changeExtensionState';
 import NavBar from './NavBar';
 import MainList from './MainList';
 
 export default function WakaTime(): JSX.Element {
   const dispatch = useDispatch();
 
-  const defaultState = {
-    loggingEnabled: config.loggingEnabled,
-    totalTimeLoggedToday: '0 minutes',
-  };
-  const [state, setState] = useState(defaultState);
   const {
     apiKey: apiKeyFromRedux,
     loggingEnabled,
@@ -25,53 +18,13 @@ export default function WakaTime(): JSX.Element {
     fetchUserData(apiKeyFromRedux, dispatch);
   }, []);
 
-  const disableLogging = async () => {
-    setState({
-      ...state,
-      loggingEnabled: false,
-    });
-
-    await changeExtensionState('notLogging');
-
-    await browser.storage.sync.set({
-      loggingEnabled: false,
-    });
-  };
-
-  const enableLogging = async () => {
-    setState({
-      ...state,
-      loggingEnabled: true,
-    });
-
-    await changeExtensionState('allGood');
-
-    await browser.storage.sync.set({
-      loggingEnabled: true,
-    });
-  };
-
-  const logoutUser = async () => {
-    await browser.storage.sync.set({ apiKey: '' });
-
-    setState(defaultState);
-
-    await changeExtensionState('notSignedIn');
-  };
-
   return (
     <div>
       <NavBar />
       <div className="container">
         <div className="row">
           <div className="col-md-12">
-            <MainList
-              disableLogging={disableLogging}
-              enableLogging={enableLogging}
-              loggingEnabled={loggingEnabled}
-              totalTimeLoggedToday={totalTimeLoggedToday}
-              logoutUser={logoutUser}
-            />
+            <MainList loggingEnabled={loggingEnabled} totalTimeLoggedToday={totalTimeLoggedToday} />
           </div>
         </div>
       </div>

src/core/WakaTimeCore.ts

@@ -1,6 +1,6 @@
 import axios, { AxiosResponse } from 'axios';
 import moment from 'moment';
-import { Tabs } from 'webextension-polyfill-ts';
+import { Tabs } from 'webextension-polyfill';
 import { AxiosUserResponse, User } from '../types/user';
 import config from '../config/config';
 import { SummariesPayload, GrandTotal } from '../types/summaries';

src/popup.tsx

@@ -14,13 +14,8 @@ const root = createRoot(container!);
 const store = createStore('WakaTime-Options');
 checkCurrentUser(store)(30 * 1000);
 
-const openOptions = async (): Promise<void> => {
-  await browser.runtime.openOptionsPage();
-};
-
 root.render(
   <Provider store={store}>
     <WakaTime />
-    <div onClick={openOptions}>Open options</div>
   </Provider>,
 );

src/utils/changeExtensionIcon.ts

@@ -1,4 +1,4 @@
-import { browser } from 'webextension-polyfill-ts';
+import browser from 'webextension-polyfill';
 import config from '../config/config';
 
 type ColorIconTypes = 'gray' | 'red' | 'white' | '';

src/utils/changeExtensionTooltip.ts

@@ -1,4 +1,4 @@
-import { browser } from 'webextension-polyfill-ts';
+import browser from 'webextension-polyfill';
 import config from '../config/config';
 
 /**