added redux

Author: mishramonalisha76

src/components/ViewChannelItem.jsx

@@ -39,10 +39,11 @@ import { ImageV2 } from './reusables/SharedStylingV2';
 import Tooltip from './reusables/tooltip/Tooltip';
 import UpdateChannelTooltipContent from './UpdateChannelTooltipContent';
 import VerifiedTooltipContent from './VerifiedTooltipContent';
+import { setAllowNotifModalVisibility } from 'redux/slices/modalSlice';
 
 // Internal Configs
 import APP_PATHS from 'config/AppPaths';
-import { addresses, appConfig, CHAIN_DETAILS, ALLOW_NOTIF_MODAL } from 'config/index.js';
+import { addresses, appConfig, CHAIN_DETAILS, ALLOW_NOTIF_MODAL_LAST_TIMESTAMP } from 'config/index.js';
 import { IPFSGateway } from 'helpers/IpfsHelper';
 import { checkPermission } from 'helpers/channel/allowNotification';
 
@@ -60,6 +61,7 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
     (state) => state.contracts
   );
   const { canVerify, channelDetails, coreChannelAdmin } = useSelector((state) => state.admin);
+  const { isAllowNotifModalVisible } = useSelector((state) => state.modal);
   const {
     channelsCache,
     CHANNEL_BLACKLIST,
@@ -87,7 +89,7 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
   const [channelObjectFromHash, setChannelObjectFromHash] = React.useState({});
   const [channelObjectStartBlock, setChannelObjectStartBlock] = React.useState({});
   const [showChannelChangedWarning, setShowChannelChangedWarning] = React.useState(false);
-  const [showAllowNotification, setShowAllowNotification] = useState(false);
+  // const [isAllowNotifModalVisible, setAllowNotifModalVisibility] = useState(false);
 
 
   const isVerified = channelObject.verified_status;
@@ -109,11 +111,11 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
   }, [subscriptionStatus]);
 
   useEffect(() => {
-    if (showAllowNotification)
+    if (isAllowNotifModalVisible)
       setTimeout(() => {
-        setShowAllowNotification(false);
+        dispatch(setAllowNotifModalVisibility({ flag: false }));
       }, 10000);
-  }, [showAllowNotification]);
+  }, [isAllowNotifModalVisible]);
 
   useEffect(() => {
     setIsPushAdmin(pushAdminAddress == account);
@@ -417,19 +419,19 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
     the modal was last opened 24 hours before
     */
     if (checkPermission() === 'pending') {
-      let lastTime = localStorage.getItem(ALLOW_NOTIF_MODAL);
+      let lastTime = localStorage.getItem(ALLOW_NOTIF_MODAL_LAST_TIMESTAMP);
       let today = new Date().getTime() + (1 * 24 * 60 * 60 * 1000);
       if (lastTime) {
         lastTime = parseInt(lastTime);
         if (lastTime >= today) {
-          setShowAllowNotification(true);
+          dispatch(setAllowNotifModalVisibility({ flag: true }));
         }
       }
       else {
-        setShowAllowNotification(true);
+        dispatch(setAllowNotifModalVisibility({ flag: true }));
       }
       //sets the recent opened time in localstorage.
-      localStorage.setItem(ALLOW_NOTIF_MODAL, today);
+      localStorage.setItem(ALLOW_NOTIF_MODAL_LAST_TIMESTAMP, today);
     }
 
   }
@@ -1055,8 +1057,10 @@ function ViewChannelItem({ channelObjectProp, loadTeaser, playTeaser, minimal, p
         />
       )}
       {/* modal to allow notification */}
-      {showAllowNotification &&
-        <AllowNotificationModal onModalClose={() => setShowAllowNotification(false)} />
+      {isAllowNotifModalVisible &&
+        <AllowNotificationModal onModalClose={() =>
+          dispatch(setAllowNotifModalVisibility({ flag: false }))}
+        />
       }
     </Container>
   );

src/config/index.js

@@ -40,4 +40,4 @@ export { CHAIN_DETAILS, abis, addresses, appConfig };
 
 export const defaultSnapOrigin = 'npm:@pushprotocol/snap';
 
-export const ALLOW_NOTIF_MODAL = 'ALLOW_NOTIF_MODAL';
+export const ALLOW_NOTIF_MODAL_LAST_TIMESTAMP = 'ALLOW_NOTIF_MODAL_LAST_TIMESTAMP';

src/redux/slices/modalSlice.ts

@@ -0,0 +1,29 @@
+/**
+ * This file helps us maintain the modal visiblity state so that the modal state is not changed when there are re renders.
+ */
+
+// External Packages
+import { createSlice } from '@reduxjs/toolkit';
+
+export interface IModalSliceState {
+  isAllowNotifModalVisible: boolean;
+}
+
+const initialState: IModalSliceState = {
+  isAllowNotifModalVisible: false, //the current page
+};
+
+export const modalSlice = createSlice({
+  name: 'modal',
+  initialState,
+  reducers: {
+    resetModalSlice: () => initialState,
+    setAllowNotifModalVisibility: (state, action) => {
+      state.isAllowNotifModalVisible = action.payload.flag;
+    },
+  },
+});
+
+export const { resetModalSlice, setAllowNotifModalVisibility } = modalSlice.actions;
+
+export default modalSlice.reducer;

src/redux/store.js

@@ -7,29 +7,31 @@ import channelCreationReducer from './slices/channelCreationSlice';
 import channelReducer from './slices/channelSlice';
 import contractReducer from './slices/contractSlice';
 import notificationReducer from './slices/notificationSlice';
-import canSendNotification from "./slices/sendNotificationSlice";
+import canSendNotification from './slices/sendNotificationSlice';
 import spamReducer from './slices/spamSlice';
 import userJourneyReducer from './slices/userJourneySlice';
-import userReducer from "./slices/userSlice";
+import userReducer from './slices/userSlice';
+import modalReducer from './slices/modalSlice';
 
 const rootReducer = combineReducers({
-	contracts: contractReducer,
-	channels: channelReducer,
-	channelCreation: channelCreationReducer,
-	admin: adminReducer,
-	notifications: notificationReducer,
-	spam: spamReducer,
-	userJourney: userJourneyReducer,
-	canSend:canSendNotification,
-	user: userReducer
+  contracts: contractReducer,
+  channels: channelReducer,
+  channelCreation: channelCreationReducer,
+  admin: adminReducer,
+  notifications: notificationReducer,
+  spam: spamReducer,
+  userJourney: userJourneyReducer,
+  canSend: canSendNotification,
+  user: userReducer,
+  modal: modalReducer,
 });
 
 const store = configureStore({
-	reducer: rootReducer,
-	middleware: getDefaultMiddleware({
-		serializableCheck: false,
-		immutableCheck: false
-	})
+  reducer: rootReducer,
+  middleware: getDefaultMiddleware({
+    serializableCheck: false,
+    immutableCheck: false,
+  }),
 });
 
 export default store;