From 924df5b7a6591bb5ec622adfb1a5d5860ec04fd7 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Sat, 19 Dec 2020 21:16:57 +1300 Subject: [PATCH] Expanding react-persist reducers to each have their own keys, seems to fix restoring/resetting --- src/js/services/core/actions.js | 3 +- src/js/services/genius/actions.js | 8 ++- src/js/services/genius/middleware.js | 30 +---------- src/js/services/genius/reducer.js | 1 - src/js/store/index.js | 76 +++++++++++++--------------- src/js/views/modals/Reset.js | 17 +++++-- 6 files changed, 55 insertions(+), 80 deletions(-) diff --git a/src/js/services/core/actions.js b/src/js/services/core/actions.js index 9f0e275c..6b4678b9 100755 --- a/src/js/services/core/actions.js +++ b/src/js/services/core/actions.js @@ -50,9 +50,10 @@ export function set(data) { }; } -export function resetState() { +export function resetState(stateKeysToReset) { return { type: 'RESET_STATE', + stateKeysToReset, }; } diff --git a/src/js/services/genius/actions.js b/src/js/services/genius/actions.js index 0fcdc899..f3a69a9d 100755 --- a/src/js/services/genius/actions.js +++ b/src/js/services/genius/actions.js @@ -1,6 +1,6 @@ - import { generateGuid } from '../../util/helpers'; import { makeItemSelector } from '../../util/selectors'; +import { formatUser } from '../../util/format'; const coreActions = require('../core/actions'); const uiActions = require('../ui/actions'); @@ -124,9 +124,13 @@ export function getMe() { sendRequest(dispatch, getState, 'account') .then( (response) => { + const me = formatUser(response.user); dispatch({ type: 'GENIUS_ME_LOADED', - me: response.user, + me: { + ...me, + uri: `genius:user:${me.id}`, + }, }); }, (error) => { diff --git a/src/js/services/genius/middleware.js b/src/js/services/genius/middleware.js index 3e9159bc..0b549afd 100755 --- a/src/js/services/genius/middleware.js +++ b/src/js/services/genius/middleware.js @@ -1,40 +1,12 @@ - -import { formatUser } from '../../util/format'; const coreActions = require('../core/actions'); const geniusActions = require('./actions'); const GeniusMiddleware = (function () { return (store) => (next) => (action) => { - const state = store.getState(); switch (action.type) { case 'GENIUS_ME_LOADED': - var me = formatUser(action.me); - Object.assign( - me, - { - uri: `genius:user:${me.id}`, - }, - ); - - store.dispatch({ - type: 'GENIUS_USER_LOADED', - user: action.me, - }); - action.me = me; - next(action); - break; - - case 'GENIUS_USER_LOADED': - var user = formatUser(action.user); - Object.assign( - user, - { - uri: `genius:user:${user.id}`, - }, - ); - store.dispatch(coreActions.userLoaded(user)); - action.user = user; + store.dispatch(coreActions.userLoaded(action.me)); next(action); break; diff --git a/src/js/services/genius/reducer.js b/src/js/services/genius/reducer.js index d456a2e9..765fdbe6 100755 --- a/src/js/services/genius/reducer.js +++ b/src/js/services/genius/reducer.js @@ -1,4 +1,3 @@ - export default function reducer(genius = {}, action) { switch (action.type) { case 'GENIUS_SET': diff --git a/src/js/store/index.js b/src/js/store/index.js index 5308a99d..ebb2ff1e 100755 --- a/src/js/store/index.js +++ b/src/js/store/index.js @@ -4,8 +4,6 @@ import localForage from 'localforage'; import thunk from 'redux-thunk'; import { generateGuid } from '../util/helpers'; -import hardSet from 'redux-persist/lib/stateReconciler/hardSet' -//import storage from '../util/storage'; import core from '../services/core/reducer'; import ui from '../services/ui/reducer'; import pusher from '../services/pusher/reducer'; @@ -13,7 +11,6 @@ import mopidy from '../services/mopidy/reducer'; import lastfm from '../services/lastfm/reducer'; import spotify from '../services/spotify/reducer'; import snapcast from '../services/snapcast/reducer'; -import google from '../services/google/reducer'; import genius from '../services/genius/reducer'; import migration from './migration'; @@ -25,7 +22,6 @@ import mopidyMiddleware from '../services/mopidy/middleware'; import lastfmMiddleware from '../services/lastfm/middleware'; import geniusMiddleware from '../services/genius/middleware'; import spotifyMiddleware from '../services/spotify/middleware'; -import googleMiddleware from '../services/google/middleware'; import snapcastMiddleware from '../services/snapcast/middleware'; let initialState = { @@ -103,9 +99,6 @@ let initialState = { autocomplete_results: {}, authorization_url: 'https://jamesbarnsley.co.nz/iris/auth_spotify.php', }, - google: { - enabled: false, - }, snapcast: { enabled: false, connected: false, @@ -120,34 +113,9 @@ let initialState = { }, }; -/* -// load all our stored values from LocalStorage -state.core = { ...state.core, ...storage.get('core') }; -state.ui = { ...state.ui, ...storage.get('ui') }; -state.mopidy = { ...state.mopidy, ...storage.get('mopidy') }; -state.pusher = { ...state.pusher, ...storage.get('pusher') }; -state.spotify = { ...state.spotify, ...storage.get('spotify') }; -state.lastfm = { ...state.lastfm, ...storage.get('lastfm') }; -state.genius = { ...state.genius, ...storage.get('genius') }; -state.google = { ...state.google, ...storage.get('google') }; -state.snapcast = { ...state.snapcast, ...storage.get('snapcast') }; -*/ - // Run any migrations initialState = migration(initialState); -const rootPersistConfig = { - key: 'root', - storage: localForage, - blacklist: [ - 'ui', - 'core', - 'spotify', - 'pusher', - ], - debug: window.test_mode, -}; - const corePersistConfig = { key: 'core', storage: localForage, @@ -164,6 +132,24 @@ const corePersistConfig = { ], }; +const geniusPersistConfig = { + key: 'genius', + storage: localForage, + debug: window.test_mode, +}; + +const lastfmPersistConfig = { + key: 'lastfm', + storage: localForage, + debug: window.test_mode, +}; + +const snapcastPersistConfig = { + key: 'snapcast', + storage: localForage, + debug: window.test_mode, +}; + const pusherPersistConfig = { key: 'pusher', storage: localForage, @@ -222,22 +208,29 @@ const appReducer = combineReducers({ mopidy: persistReducer(mopidyPersistConfig, mopidy), spotify: persistReducer(spotifyPersistConfig, spotify), pusher: persistReducer(pusherPersistConfig, pusher), - lastfm, - genius, - google, - snapcast, + genius: persistReducer(geniusPersistConfig, genius), + lastfm: persistReducer(lastfmPersistConfig, lastfm), + snapcast: persistReducer(snapcastPersistConfig, snapcast), }); const rootReducer = (state, action) => { + let nextState = state; if (action.type === 'RESET_STATE') { - state = initialState; + console.log(action); + const { stateKeysToReset } = action; + const resetStates = {}; + stateKeysToReset.forEach((key) => { + resetStates[key] = initialState[key]; + }); + nextState = { + ...state, + ...resetStates, + }; } - return appReducer(state, action); + return appReducer(nextState, action); }; -const persistedReducer = persistReducer(rootPersistConfig, rootReducer); - const store = createStore( - persistedReducer, + rootReducer, initialState, applyMiddleware( thunk, @@ -248,7 +241,6 @@ const store = createStore( spotifyMiddleware, lastfmMiddleware, geniusMiddleware, - googleMiddleware, snapcastMiddleware, ), ); diff --git a/src/js/views/modals/Reset.js b/src/js/views/modals/Reset.js index ba50b240..f7a728ee 100644 --- a/src/js/views/modals/Reset.js +++ b/src/js/views/modals/Reset.js @@ -47,11 +47,17 @@ class Reset extends React.Component { e.preventDefault(); const tasks = []; + const stateKeysToReset = []; + const stateKeys = ['mopidy', 'pusher', 'ui', 'spotify', 'snapcast', 'lastfm', 'genius']; if (preferences) { tasks.push( new Promise((resolve) => { - const keysToRemove = ['persist:root', 'persist:ui', 'persist:spotify', 'persist:pusher']; + const keysToRemove = []; + stateKeys.forEach((key) => { + keysToRemove.push(`persist:${key}`); + stateKeysToReset.push(key); + }); keysToRemove.forEach((key, index) => { localForage.removeItem(key).then(() => { console.debug(`Removed ${key}`); @@ -67,8 +73,9 @@ class Reset extends React.Component { tasks.push( new Promise((resolve) => { localForage.keys().then((keys) => { - const keysToKeep = ['persist:root', 'persist:ui', 'persist:spotify', 'persist:pusher']; - const keysToRemove = keys.filter((key) => keysToKeep.indexOf(key) < 0); + const keysToRemove = keys.filter( + (key) => !stateKeys.includes(key.replace('persist:', '')), + ); keysToRemove.forEach((key, index) => { localForage.removeItem(key).then(() => { console.debug(`Removed ${key}`); @@ -120,9 +127,9 @@ class Reset extends React.Component { Promise.all(tasks).then(() => { console.log('Reset complete, refreshing...'); - resetState(); + resetState(stateKeysToReset); setTimeout( - () => window.location = `/iris${test_mode ? '?test_mode=0' : ''}`, + () => window.location = `/iris/settings${test_mode ? '?test_mode=0' : ''}`, 1000, ); });