Move listeners logic to reducers (#1131)

packages/core-mobile/app/store/browser/listener.ts

@@ -1,12 +1,7 @@
 import { AppListenerEffectAPI } from 'store'
 import { AppStartListening } from 'store/middleware/listener'
 import { Action, isAnyOf } from '@reduxjs/toolkit'
-import { historyAdapter, tabAdapter } from 'store/browser/utils'
-import {
-  removeAllHistories,
-  removeHistory
-} from 'store/browser/slices/globalHistory'
-import { HistoryId } from 'store/browser/types'
+import { historyAdapter } from 'store/browser/utils'
 import {
   goBackward,
   goForward,
@@ -45,66 +40,10 @@ const updateActiveHistory = (
     })
   )
 }
-const handleRemoveAllHistories = (
-  _: Action,
-  listenerApi: AppListenerEffectAPI
-): void => {
-  const state = listenerApi.getState()
-  historyAdapter.removeAll(state.browser.globalHistory)
-  const tabsState = state.browser.tabs
-  const allTabs = tabAdapter.getSelectors().selectAll(tabsState)
-  allTabs.forEach(tab => {
-    tabAdapter.updateOne(tabsState, {
-      id: tab.id,
-      changes: {
-        historyIds: [],
-        activeHistoryIndex: -1
-      }
-    })
-  })
-}
-const handleRemoveHistory = (
-  historyId: HistoryId,
-  listenerApi: AppListenerEffectAPI
-): void => {
-  const state = listenerApi.getState()
-  historyAdapter.removeOne(state.browser.globalHistory, historyId)
-
-  //remove that history item from all tabs
-  const tabsState = state.browser.tabs
-  const allTabs = tabAdapter.getSelectors().selectAll(tabsState)
-  allTabs.forEach(tab => {
-    let historyIds = tab.historyIds.filter(id => id !== historyId)
-    const activeHistoryIndex = historyIds.indexOf(
-      tab.activeHistory?.id ?? 'undefined'
-    )
-    if (activeHistoryIndex === -1) {
-      //we removed history which is currently active on this tab; let's remove all history items for that tab
-      historyIds = []
-    }
-    tabAdapter.updateOne(tabsState, {
-      id: tab.id,
-      changes: {
-        historyIds,
-        activeHistoryIndex
-      }
-    })
-  })
-}
 
 export const addBrowserListener = (startListening: AppStartListening): void => {
   startListening({
     matcher: isAnyOf(goBackward, goForward),
     effect: updateActiveHistory
   })
-  startListening({
-    actionCreator: removeAllHistories,
-    effect: handleRemoveAllHistories
-  })
-  startListening({
-    actionCreator: removeHistory,
-    effect: (action, listenerApi) => {
-      handleRemoveHistory(action.payload.historyId, listenerApi)
-    }
-  })
 }

packages/core-mobile/app/store/browser/slices/globalHistory.ts

@@ -1,4 +1,4 @@
-import { createAction, createSlice } from '@reduxjs/toolkit'
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { createHash } from 'utils/createHash'
 import { RootState } from 'store'
 import { History, HistoryId, HistoryState } from '../types'
@@ -13,7 +13,17 @@ const initialState = historyAdapter.getInitialState()
 const globalHistorySlice = createSlice({
   name: reducerName,
   initialState,
-  reducers: {},
+  reducers: {
+    removeAllHistories: (state: HistoryState) => {
+      historyAdapter.removeAll(state)
+    },
+    removeHistory: (
+      state: HistoryState,
+      action: PayloadAction<{ historyId: HistoryId }>
+    ) => {
+      historyAdapter.removeOne(state, action.payload.historyId)
+    }
+  },
   extraReducers: builder => {
     builder.addCase(
       addHistoryForActiveTab,
@@ -51,11 +61,6 @@ export const selectAllHistories = (state: RootState): History[] => {
 }
 
 // actions
-export const removeAllHistories = createAction(
-  `${reducerName}/removeAllHistories`
-)
-export const removeHistory = createAction<{ historyId: HistoryId }>(
-  `${reducerName}/removeHistory`
-)
+export const { removeAllHistories, removeHistory } = globalHistorySlice.actions
 
 export const globalHistoryReducer = globalHistorySlice.reducer

packages/core-mobile/app/store/browser/slices/tabs.ts

@@ -9,12 +9,17 @@ import { v4 as uuidv4 } from 'uuid'
 import { getUnixTime } from 'date-fns'
 import { createHash } from 'utils/createHash'
 import {
+  removeAllHistories,
+  removeHistory
+} from 'store/browser/slices/globalHistory'
+import {
+  AddHistoryPayload,
+  History,
+  HistoryId,
   Tab,
   TabId,
   TabPayload,
-  AddHistoryPayload,
-  TabState,
-  History
+  TabState
 } from '../types'
 import { limitMaxTabs, tabAdapter, updateActiveTabId } from '../utils'
 import { MAXIMUM_TAB_HISTORIES } from '../const'
@@ -30,7 +35,8 @@ export const getInitialState = (): TabState => {
         [tabId]: {
           id: tabId,
           historyIds: [],
-          activeHistoryIndex: -1
+          activeHistoryIndex: -1,
+          lastVisited: getUnixTime(new Date())
         }
       }
     } as EntityState<Tab>),
@@ -125,6 +131,46 @@ const tabSlice = createSlice({
         }
       })
     }
+  },
+  extraReducers: builder => {
+    builder.addCase(
+      removeHistory,
+      (state: TabState, action: PayloadAction<{ historyId: HistoryId }>) => {
+        //remove that history item from all tabs
+        const allTabs = tabAdapter.getSelectors().selectAll(state)
+        allTabs.forEach(tab => {
+          let historyIds = tab.historyIds.filter(
+            id => id !== action.payload.historyId
+          )
+          const activeHistoryIndex = historyIds.indexOf(
+            tab.activeHistory?.id ?? 'undefined'
+          )
+          if (activeHistoryIndex === -1) {
+            //we removed history which is currently active on this tab; let's remove all history items for that tab
+            historyIds = []
+          }
+          tabAdapter.updateOne(state, {
+            id: tab.id,
+            changes: {
+              historyIds,
+              activeHistoryIndex
+            }
+          })
+        })
+      }
+    )
+    builder.addCase(removeAllHistories, (state: TabState) => {
+      const allTabs = tabAdapter.getSelectors().selectAll(state)
+      allTabs.forEach(tab => {
+        tabAdapter.updateOne(state, {
+          id: tab.id,
+          changes: {
+            historyIds: [],
+            activeHistoryIndex: -1
+          }
+        })
+      })
+    })
   }
 })