Added in-session recent items with cross tab support. BOD-178

client/src/redux/application/application.reducer.js

@@ -16,7 +16,7 @@ const applicationReducer = (state = INITIAL_STATE, action) => {
     case ApplicationActionTypes.ADD_RECENT_ITEM:
       return {
         ...state,
-        recentItems: [action.payload, ...state.recentItems.slice(0, 9)],
+        recentItems: updateRecentItemsArray(state, action.payload),
       };
     case ApplicationActionTypes.SET_BREAD_CRUMBS:
       return {
@@ -63,3 +63,18 @@ const applicationReducer = (state = INITIAL_STATE, action) => {
 };
 
 export default applicationReducer;
+
+const updateRecentItemsArray = (state, newItem) => {
+  //Check to see if the new item is in the list.
+  const matchingIndex = state.recentItems.findIndex((i) => i.id === newItem.id);
+
+  if (matchingIndex >= 0) {
+    return [
+      newItem,
+      ...state.recentItems.slice(0, matchingIndex),
+      ...state.recentItems.slice(matchingIndex + 1, 9),
+    ];
+  } else {
+    return [newItem, ...state.recentItems.slice(0, 9)];
+  }
+};

client/src/redux/root.reducer.js

@@ -1,6 +1,7 @@
 import { combineReducers } from "redux";
 import { persistReducer } from "redux-persist";
 import storage from "redux-persist/lib/storage";
+import { withReduxStateSync } from "redux-state-sync";
 
 import userReducer from "./user/user.reducer";
 import messagingReducer from "./messaging/messaging.reducer";
@@ -8,10 +9,11 @@ import emailReducer from "./email/email.reducer";
 import modalsReducer from "./modals/modals.reducer";
 import applicationReducer from "./application/application.reducer";
 import techReducer from "./tech/tech.reducer";
+
 const persistConfig = {
   key: "root",
   storage,
-  whitelist: ["messaging", "tech"],
+  whitelist: ["messaging", "tech", "application"],
   blacklist: ["user", "email", "modals"],
 };
 
@@ -24,4 +26,4 @@ const rootReducer = combineReducers({
   tech: techReducer,
 });
 
-export default persistReducer(persistConfig, rootReducer);
+export default withReduxStateSync(persistReducer(persistConfig, rootReducer));

client/src/redux/store.js

@@ -2,11 +2,24 @@ import { createStore, applyMiddleware, compose } from "redux";
 import { persistStore } from "redux-persist";
 import { createLogger } from "redux-logger";
 import createSagaMiddleware from "redux-saga";
+import {
+  createStateSyncMiddleware,
+  initMessageListener,
+} from "redux-state-sync";
+
 import rootReducer from "./root.reducer";
 import rootSaga from "./root.saga";
 
 const sagaMiddleWare = createSagaMiddleware();
-const middlewares = [sagaMiddleWare];
+
+const reduxSyncConfig = {
+  whitelist: ["ADD_RECENT_ITEM"],
+};
+
+const middlewares = [
+  sagaMiddleWare,
+  createStateSyncMiddleware(reduxSyncConfig),
+];
 if (process.env.NODE_ENV === "development") {
   middlewares.push(createLogger({ collapsed: true, diff: true }));
 }
@@ -25,6 +38,7 @@ const enhancer = composeEnhancers(
 
 export const store = createStore(rootReducer, enhancer);
 sagaMiddleWare.run(rootSaga);
+initMessageListener(store);
 
 export const persistor = persistStore(store);