chore: test redux components with jest

src/components/MainList.test.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import { render } from '@testing-library/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 loggedIn: boolean;
   let loggingEnabled: boolean;
   let logoutUser: onClick;
   let totalTimeLoggedToday: string;
@@ -14,17 +13,15 @@ describe('MainList', () => {
     disableLogging = jest.fn();
     enableLogging = jest.fn();
     loggingEnabled = false;
-    loggedIn = false;
     logoutUser = jest.fn();
     totalTimeLoggedToday = '1/1/1999';
   });
   it('should render properly', () => {
-    const { container } = render(
+    const { container } = renderWithProviders(
       <MainList
         disableLogging={disableLogging}
         enableLogging={enableLogging}
         loggingEnabled={loggingEnabled}
-        loggedIn={loggedIn}
         logoutUser={logoutUser}
         totalTimeLoggedToday={totalTimeLoggedToday}
       />,

src/components/MainList.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
+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;
-  loggedIn: boolean;
   loggingEnabled: boolean;
   logoutUser: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
   totalTimeLoggedToday?: string;
@@ -15,14 +17,17 @@ const openOptionsPage = async (): Promise<void> => {
 export default function MainList({
   disableLogging,
   enableLogging,
-  loggedIn,
   loggingEnabled,
   logoutUser,
   totalTimeLoggedToday,
 }: MainListProps): JSX.Element {
+  const user: User | undefined = useSelector(
+    (selector: ReduxSelector) => selector.currentUser.user,
+  );
+
   return (
     <div>
-      {loggedIn && (
+      {user && (
         <div className="row">
           <div className="col-xs-12">
             <blockquote>
@@ -34,7 +39,7 @@ export default function MainList({
           </div>
         </div>
       )}
-      {loggingEnabled && loggedIn && (
+      {loggingEnabled && user && (
         <div className="row">
           <div className="col-xs-12">
             <p>
@@ -45,7 +50,7 @@ export default function MainList({
           </div>
         </div>
       )}
-      {!loggingEnabled && loggedIn && (
+      {!loggingEnabled && user && (
         <div className="row">
           <div className="col-xs-12">
             <p>
@@ -61,7 +66,7 @@ export default function MainList({
           <i className="fa fa-fw fa-cogs"></i>
           Options
         </a>
-        {loggedIn && (
+        {user && (
           <div>
             <a href="#" className="list-group-item" onClick={logoutUser}>
               <i className="fa fa-fw fa-sign-out"></i>
@@ -69,7 +74,7 @@ export default function MainList({
             </a>
           </div>
         )}
-        {!loggedIn && (
+        {!user && (
           <a
             target="_blank"
             rel="noreferrer"

src/components/NavBar.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { setValue } from '../reducers/apiKey';
+import { configLogout, setApiKey } from '../reducers/configReducer';
+import { userLogout } from '../reducers/currentUser';
 import { ReduxSelector } from '../types/store';
 import { User } from '../types/user';
 import config from '../config/config';
 import apiKeyInvalid from '../utils/apiKey';
-import WakaTimeCore from '../core/WakaTimeCore';
-import { setUser } from '../reducers/currentUser';
-import changeExtensionState from '../utils/changeExtensionState';
+import { fetchUserData } from '../utils/user';
 
 export default function NavBar(): JSX.Element {
   const [state, setState] = useState({
@@ -158,15 +157,11 @@ export default function NavBar(): JSX.Element {
                         if (state.apiKeyError === '' && state.apiKey !== '') {
                           setState({ ...state, loading: true });
                           await browser.storage.sync.set({ apiKey: state.apiKey });
-                          dispatch(setValue(state.apiKey));
+                          dispatch(configLogout());
+                          dispatch(userLogout());
+                          dispatch(setApiKey(state.apiKey));
 
-                          try {
-                            const data = await WakaTimeCore.checkAuth(state.apiKey);
-                            dispatch(setUser(data));
-                          } catch (err: unknown) {
-                            dispatch(setUser(undefined));
-                            await changeExtensionState('notSignedIn');
-                          }
+                          await fetchUserData(state.apiKey, dispatch);
                           setState({ ...state, loading: false });
                         }
                       }}

src/components/WakaTime.tsx

@@ -1,69 +1,28 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { setValue } from '../reducers/apiKey';
-import { ReduxSelector } from '../types/store';
-import { setUser } from '../reducers/currentUser';
-import WakaTimeCore from '../core/WakaTimeCore';
+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';
 
-const API_KEY = 'waka_3766d693-bff3-4c63-8bf5-b439f3e12301';
-
 export default function WakaTime(): JSX.Element {
   const dispatch = useDispatch();
 
   const defaultState = {
-    loggedIn: false,
     loggingEnabled: config.loggingEnabled,
     totalTimeLoggedToday: '0 minutes',
   };
   const [state, setState] = useState(defaultState);
-  const apiKeyFromRedux: string = useSelector((selector: ReduxSelector) => selector.apiKey.value);
-
-  const fetchUserData = async (): Promise<void> => {
-    // await browser.storage.sync.set({ apiKey: API_KEY });
-    let apiKey = '';
-    if (!apiKeyFromRedux) {
-      const storage = await browser.storage.sync.get({
-        apiKey: config.apiKey,
-      });
-      apiKey = storage.apiKey as string;
-      dispatch(setValue(apiKey));
-    }
-
-    if (!apiKey) {
-      await changeExtensionState('notSignedIn');
-    }
-
-    try {
-      const data = await WakaTimeCore.checkAuth(apiKey);
-      dispatch(setUser(data));
-      const items = await browser.storage.sync.get({ loggingEnabled: config.loggingEnabled });
-
-      if (items.loggingEnabled === true) {
-        await changeExtensionState('allGood');
-      } else {
-        await changeExtensionState('notLogging');
-      }
-
-      const totalTimeLoggedToday = await WakaTimeCore.getTotalTimeLoggedToday(apiKey);
-      setState({
-        ...state,
-        loggedIn: true,
-        loggingEnabled: items.loggingEnabled as boolean,
-        totalTimeLoggedToday: totalTimeLoggedToday.text,
-      });
-
-      await WakaTimeCore.recordHeartbeat();
-    } catch (err: unknown) {
-      await changeExtensionState('notSignedIn');
-    }
-  };
+  const {
+    apiKey: apiKeyFromRedux,
+    loggingEnabled,
+    totalTimeLoggedToday,
+  }: ApiKeyReducer = useSelector((selector: ReduxSelector) => selector.config);
 
   useEffect(() => {
-    fetchUserData();
+    fetchUserData(apiKeyFromRedux, dispatch);
   }, []);
 
   const disableLogging = async () => {
@@ -109,10 +68,9 @@ export default function WakaTime(): JSX.Element {
             <MainList
               disableLogging={disableLogging}
               enableLogging={enableLogging}
-              loggingEnabled={state.loggingEnabled}
-              totalTimeLoggedToday={state.totalTimeLoggedToday}
+              loggingEnabled={loggingEnabled}
+              totalTimeLoggedToday={totalTimeLoggedToday}
               logoutUser={logoutUser}
-              loggedIn={state.loggedIn}
             />
           </div>
         </div>