Add redux persist to web; use for library categories C-3125 C-3220

packages/common/src/store/pages/index.ts

@@ -62,7 +62,7 @@ export * as savedPageActions from './saved-page/actions'
 export * as savedPageSelectors from './saved-page/selectors'
 export * from './saved-page/types'
 export * from './saved-page/utils'
-export { default as savedPageReducer } from './saved-page/reducer'
+export { persistedSavePageReducer } from './saved-page/reducer'
 
 export {
   default as remixesPageLineupReducer,

packages/common/src/store/pages/saved-page/actions.ts

@@ -21,10 +21,6 @@ export const ADD_LOCAL_COLLECTION = 'SAVED/ADD_LOCAL_COLLECTION'
 export const REMOVE_LOCAL_COLLECTION = 'SAVED/REMOVE_LOCAL_COLLECTION'
 
 export const SET_SELECTED_CATEGORY = 'SAVED/SET_SELECTED_CATEGORY'
-export const INIT_COLLECTIONS_CATEGORY_FROM_LOCAL_STORAGE =
-  'SAVED/INIT_COLLECTIONS_CATEGORY_FROM_LOCAL_STORAGE'
-export const INIT_TRACKS_CATEGORY_FROM_LOCAL_STORAGE =
-  'SAVED/INIT_TRACKS_CATEGORY_FROM_LOCAL_STORAGE'
 
 export const fetchSaves = (
   // the filter query for the "get tracks" query
@@ -155,20 +151,6 @@ export const removeLocalCollection = ({
   category
 })
 
-export const initializeTracksCategoryFromLocalStorage = (
-  category: LibraryCategoryType
-) => ({
-  type: INIT_TRACKS_CATEGORY_FROM_LOCAL_STORAGE,
-  category
-})
-
-export const initializeCollectionsCategoryFromLocalStorage = (
-  category: LibraryCategoryType
-) => ({
-  type: INIT_COLLECTIONS_CATEGORY_FROM_LOCAL_STORAGE,
-  category
-})
-
 export const setSelectedCategory = ({
   category,
   currentTab

packages/common/src/store/pages/saved-page/reducer.ts

@@ -1,3 +1,5 @@
+import { Storage, persistReducer } from 'redux-persist'
+
 import { ID } from 'models/Identifiers'
 import { asLineup } from 'store/lineup/reducer'
 import {
@@ -11,8 +13,6 @@ import {
   FETCH_SAVES_FAILED,
   FETCH_SAVES_REQUESTED,
   FETCH_SAVES_SUCCEEDED,
-  INIT_COLLECTIONS_CATEGORY_FROM_LOCAL_STORAGE,
-  INIT_TRACKS_CATEGORY_FROM_LOCAL_STORAGE,
   REMOVE_LOCAL_COLLECTION,
   REMOVE_LOCAL_TRACK,
   SET_SELECTED_CATEGORY
@@ -201,18 +201,6 @@ const actionsMap: ActionsMap<SavedPageState> = {
       })
     }
   },
-  [INIT_TRACKS_CATEGORY_FROM_LOCAL_STORAGE](state, action) {
-    return {
-      ...state,
-      tracksCategory: action.category
-    }
-  },
-  [INIT_COLLECTIONS_CATEGORY_FROM_LOCAL_STORAGE](state, action) {
-    return {
-      ...state,
-      collectionsCategory: action.category
-    }
-  },
   [signOut.type]() {
     return initialState
   }
@@ -229,4 +217,12 @@ const reducer = (state = initialState, action: any) => {
   return matchingReduceFunction(state, action)
 }
 
-export default reducer
+export const savedPagePersistConfig = (storage: Storage) => ({
+  key: 'saved-page',
+  storage,
+  whitelist: ['tracksCategory', 'collectionsCategory']
+})
+
+export const persistedSavePageReducer = (storage: Storage) => {
+  return persistReducer(savedPagePersistConfig(storage), reducer)
+}

packages/common/src/store/pages/saved-page/types.ts

@@ -12,10 +12,6 @@ import {
   LineupTrack
 } from '../../../models'
 
-export const LIBRARY_TRACKS_CATEGORY_LS_KEY = 'libraryTracksCategory'
-
-export const LIBRARY_COLLECTIONS_CATEGORY_LS_KEY = 'libraryCollectionsCategory'
-
 export const LibraryCategory = full.GetUserLibraryTracksTypeEnum
 export type LibraryCategoryType = ValueOf<typeof LibraryCategory>
 

packages/common/src/store/reducers.ts

@@ -1,4 +1,5 @@
 import { combineReducers } from 'redux'
+import type { Storage } from 'redux-persist'
 
 import apiReducer from '../api/reducer'
 import { Kind } from '../models'
@@ -44,7 +45,7 @@ import premiumTracks from './pages/premium-tracks/slice'
 import profileReducer from './pages/profile/reducer'
 import { ProfilePageState } from './pages/profile/types'
 import remixes from './pages/remixes/slice'
-import savedPageReducer from './pages/saved-page/reducer'
+import { persistedSavePageReducer } from './pages/saved-page/reducer'
 import searchResults from './pages/search-results/reducer'
 import { SearchPageState } from './pages/search-results/types'
 import settings from './pages/settings/reducer'
@@ -132,12 +133,10 @@ import topSupportersUserListReducer from './user-list/top-supporters/reducers'
 import wallet from './wallet/slice'
 
 /**
- * A function that creates common reducers. The function takes
- * a CommonStoreContext as input such that platforms (native and web)
- * may specify system-level APIs, e.g. local storage.
+ * A function that creates common reducers.
  * @returns an object of all reducers to be used with `combineReducers`
  */
-export const reducers = () => ({
+export const reducers = (storage: Storage) => ({
   account,
 
   api: apiReducer,
@@ -234,7 +233,7 @@ export const reducers = () => ({
     historyPage: historyPageReducer,
     profile: profileReducer,
     smartCollection,
-    savedPage: savedPageReducer,
+    savedPage: persistedSavePageReducer(storage),
     searchResults,
     tokenDashboard: tokenDashboardSlice.reducer,
     track,

packages/mobile/src/store/store.ts

@@ -6,6 +6,7 @@ import {
   reducers as commonReducers,
   chatMiddleware
 } from '@audius/common'
+import AsyncStorage from '@react-native-async-storage/async-storage'
 import backend from 'audius-client/src/common/store/backend/reducer'
 import type { BackendState } from 'audius-client/src/common/store/backend/types'
 import searchBar from 'audius-client/src/common/store/search-bar/reducer'
@@ -105,7 +106,7 @@ const onSagaError = (
   }
 }
 
-const commonStoreReducers = commonReducers()
+const commonStoreReducers = commonReducers(AsyncStorage)
 
 const rootReducer = combineReducers({
   ...commonStoreReducers,

packages/web/package.json

@@ -126,6 +126,7 @@
     "lerp": "1.0.3",
     "linkify-react": "^4.1.0",
     "linkifyjs": "4.1.0",
+    "localforage": "1.10.0",
     "lodash": "4.17.21",
     "numeral": "2.0.6",
     "orbit-controls": "0.0.1",
@@ -160,6 +161,7 @@
     "react-virtualized": "9.22.3",
     "redux": "4.1.1",
     "redux-devtools-extension": "2.13.8",
+    "redux-persist": "6.0.0",
     "redux-saga": "1.1.3",
     "redux-sentry-middleware": "0.1.8",
     "redux-thunk": "2.4.2",

packages/web/src/app.tsx

@@ -11,6 +11,7 @@ import { ConnectedRouter } from 'connected-react-router'
 import { Provider, useSelector } from 'react-redux'
 import { Route, Switch } from 'react-router-dom'
 import { LastLocationProvider } from 'react-router-last-location'
+import { PersistGate } from 'redux-persist/integration/react'
 
 import { CoinbasePayButtonProvider } from 'components/coinbase-pay-button'
 import App from 'pages/App'
@@ -26,7 +27,7 @@ import { audiusSdk } from 'services/audius-sdk/audiusSdk'
 import { env } from 'services/env'
 import history from 'utils/history'
 
-import { store } from './store/configureStore'
+import { store, persistor } from './store/configureStore'
 import { reportToSentry } from './store/errors/reportToSentry'
 
 import './index.css'
@@ -49,50 +50,52 @@ const AudiusTrpcProvider = ({ children }: { children: React.ReactNode }) => {
 const AudiusApp = () => {
   return (
     <Provider store={store}>
-      <AudiusTrpcProvider>
-        <AudiusQueryContext.Provider
-          value={{
-            apiClient,
-            audiusBackend: audiusBackendInstance,
-            audiusSdk,
-            dispatch: store.dispatch,
-            reportToSentry,
-            env,
-            fetch
-          }}
-        >
-          <ConnectedRouter history={history}>
-            <LastLocationProvider>
-              <AppProviders>
-                <MainContentContext.Consumer>
-                  {({ mainContentRef }) => (
-                    <>
-                      <SomethingWrong />
-                      <Switch>
-                        <Route
-                          exact
-                          path={'/oauth/auth'}
-                          component={OAuthLoginPage}
-                        />
-                        <Route path='/demo/trpc'>
-                          <DemoTrpcPage />
-                        </Route>
-                        <Route path='/'>
-                          <AppErrorBoundary>
-                            <CoinbasePayButtonProvider>
-                              <App mainContentRef={mainContentRef} />
-                            </CoinbasePayButtonProvider>
-                          </AppErrorBoundary>
-                        </Route>
-                      </Switch>
-                    </>
-                  )}
-                </MainContentContext.Consumer>
-              </AppProviders>
-            </LastLocationProvider>
-          </ConnectedRouter>
-        </AudiusQueryContext.Provider>
-      </AudiusTrpcProvider>
+      <PersistGate loading={null} persistor={persistor}>
+        <AudiusTrpcProvider>
+          <AudiusQueryContext.Provider
+            value={{
+              apiClient,
+              audiusBackend: audiusBackendInstance,
+              audiusSdk,
+              dispatch: store.dispatch,
+              reportToSentry,
+              env,
+              fetch
+            }}
+          >
+            <ConnectedRouter history={history}>
+              <LastLocationProvider>
+                <AppProviders>
+                  <MainContentContext.Consumer>
+                    {({ mainContentRef }) => (
+                      <>
+                        <SomethingWrong />
+                        <Switch>
+                          <Route
+                            exact
+                            path={'/oauth/auth'}
+                            component={OAuthLoginPage}
+                          />
+                          <Route path='/demo/trpc'>
+                            <DemoTrpcPage />
+                          </Route>
+                          <Route path='/'>
+                            <AppErrorBoundary>
+                              <CoinbasePayButtonProvider>
+                                <App mainContentRef={mainContentRef} />
+                              </CoinbasePayButtonProvider>
+                            </AppErrorBoundary>
+                          </Route>
+                        </Switch>
+                      </>
+                    )}
+                  </MainContentContext.Consumer>
+                </AppProviders>
+              </LastLocationProvider>
+            </ConnectedRouter>
+          </AudiusQueryContext.Provider>
+        </AudiusTrpcProvider>
+      </PersistGate>
     </Provider>
   )
 }