From 1945e29cfcc40cff26e9be3197e6f2098afb095e Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Wed, 11 Sep 2024 14:52:32 +0530
Subject: [PATCH] refactor(popup): use reducer/dispatch consistently

---
 src/popup/lib/context.tsx           | 49 +++++++++--------------------
 src/popup/pages/ErrorKeyRevoked.tsx | 10 ++----
 src/popup/pages/Home.tsx            | 15 ++-------
 3 files changed, 21 insertions(+), 53 deletions(-)

diff --git a/src/popup/lib/context.tsx b/src/popup/lib/context.tsx
index 54f06c9f..a89a840e 100644
--- 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
index 48e97249..7dfdbf72 100644
--- 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
index 0edae1e4..adcc5249 100644
--- 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) {