refactor(popup): use reducer/dispatch consistently (#587)

interledger · Sep 11, 2024 · f75ce1f · f75ce1f
1 parent 1216610
commit f75ce1f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 53 deletions.
diff --git a/src/popup/lib/context.tsx b/src/popup/lib/context.tsx
@@ -10,12 +10,6 @@ import {
 } from '@/shared/messages';
 
 // #region PopupState
-export enum ReducerActionType {
-  SET_DATA = 'SET_DATA',
-  TOGGLE_WM = 'TOGGLE_WM',
-  SET_CONNECTED = 'SET_CONNECTED',
-  UPDATE_RATE_OF_PAY = 'UPDATE_RATE_OF_PAY',
-}
 
 export type PopupState = Required<
   DeepNonNullable<Omit<PopupStore, 'state'>> & Pick<PopupStore, 'state'>
@@ -27,31 +21,27 @@ export interface PopupContext {
 }
 
 interface ReducerActionMock {
-  type: ReducerActionType;
+  type: string;
   data?: any;
 }
 
 interface SetDataAction extends ReducerActionMock {
-  type: ReducerActionType.SET_DATA;
+  type: 'SET_DATA';
   data: PopupState;
 }
 
 interface ToggleWMAction extends ReducerActionMock {
-  type: ReducerActionType.TOGGLE_WM;
+  type: 'TOGGLE_WM';
 }
 
 interface SetConnected extends ReducerActionMock {
-  type: ReducerActionType.SET_CONNECTED;
-  data: {
-    value: boolean;
-  };
+  type: 'SET_CONNECTED';
+  data: { connected: boolean };
 }
 
 interface UpdateRateOfPayAction extends ReducerActionMock {
-  type: ReducerActionType.UPDATE_RATE_OF_PAY;
-  data: {
-    rateOfPay: string;
-  };
+  type: 'UPDATE_RATE_OF_PAY';
+  data: { rateOfPay: string };
 }
 
 type BackgroundToPopupAction = BackgroundToPopupMessage;
@@ -69,23 +59,14 @@ export const usePopupState = () => React.useContext(PopupStateContext);
 
 const reducer = (state: PopupState, action: ReducerActions): PopupState => {
   switch (action.type) {
-    case ReducerActionType.SET_DATA: {
+    case 'SET_DATA':
       return action.data;
-    }
-    case ReducerActionType.TOGGLE_WM: {
-      return {
-        ...state,
-        enabled: !state.enabled,
-      };
-    }
-    case ReducerActionType.SET_CONNECTED:
-      return { ...state, connected: action.data.value };
-    case ReducerActionType.UPDATE_RATE_OF_PAY: {
-      return {
-        ...state,
-        rateOfPay: action.data.rateOfPay,
-      };
-    }
+    case 'TOGGLE_WM':
+      return { ...state, enabled: !state.enabled };
+    case 'SET_CONNECTED':
+      return { ...state, connected: action.data.connected };
+    case 'UPDATE_RATE_OF_PAY':
+      return { ...state, rateOfPay: action.data.rateOfPay };
     case 'SET_STATE':
       return { ...state, state: action.data.state };
     case 'SET_IS_MONETIZED':
@@ -114,7 +95,7 @@ export function PopupContextProvider({ children }: PopupContextProviderProps) {
       const response = await message.send('GET_CONTEXT_DATA');
 
       if (response.success) {
-        dispatch({ type: ReducerActionType.SET_DATA, data: response.payload });
+        dispatch({ type: 'SET_DATA', data: response.payload });
         setIsLoading(false);
       }
     }

diff --git a/src/popup/pages/ErrorKeyRevoked.tsx b/src/popup/pages/ErrorKeyRevoked.tsx
@@ -1,10 +1,6 @@
 import React from 'react';
 import { ErrorKeyRevoked } from '@/popup/components/ErrorKeyRevoked';
-import {
-  useMessage,
-  usePopupState,
-  ReducerActionType,
-} from '@/popup/lib/context';
+import { useMessage, usePopupState } from '@/popup/lib/context';
 import { useNavigate } from 'react-router-dom';
 import { ROUTES_PATH } from '@/popup/Popup';
 
@@ -26,8 +22,8 @@ export const Component = () => {
 
   const onDisconnect = () => {
     dispatch({
-      type: ReducerActionType.SET_CONNECTED,
-      data: { value: false },
+      type: 'SET_CONNECTED',
+      data: { connected: false },
     });
     navigate(ROUTES_PATH.HOME);
   };

diff --git a/src/popup/pages/Home.tsx b/src/popup/pages/Home.tsx
@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-  ReducerActionType,
-  usePopupState,
-  useMessage,
-} from '@/popup/lib/context';
+import { usePopupState, useMessage } from '@/popup/lib/context';
 import { WarningSign } from '@/popup/components/Icons';
 import { Slider } from '../components/ui/Slider';
 import { Label } from '../components/ui/Label';
@@ -60,18 +56,13 @@ export const Component = () => {
 
   const onRateChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const rateOfPay = event.currentTarget.value;
-    dispatch({
-      type: ReducerActionType.UPDATE_RATE_OF_PAY,
-      data: {
-        rateOfPay,
-      },
-    });
+    dispatch({ type: 'UPDATE_RATE_OF_PAY', data: { rateOfPay } });
     void updateRateOfPay.current(rateOfPay);
   };
 
   const onChangeWM = () => {
     message.send('TOGGLE_WM');
-    dispatch({ type: ReducerActionType.TOGGLE_WM, data: {} });
+    dispatch({ type: 'TOGGLE_WM', data: {} });
   };
 
   if (!isSiteMonetized) {