In-memory search results cache

- Switching between type and provider now negates need for repeat queries
- Mopidy caching varies, so for some providers this has a huge performance gain (eg YouTube)
- Spotify will requery anyway, but the browser handles query caching

src/js/services/core/middleware.js

@@ -197,12 +197,12 @@ const CoreMiddleware = (function () {
         // Trigger reducer immediately; this will hose out any previous results
         next(action);
 
-        if (providers.includes('spotify:')) {
+        if (providers.includes('spotify')) {
           store.dispatch(spotifyActions.getSearchResults(query));
         }
         store.dispatch(mopidyActions.getSearchResults(
           query,
-          providers.filter((i) => i !== 'spotify:'), // Omit Spotify; handled above
+          providers.filter((i) => i !== 'spotify'), // Omit Spotify; handled above
         ));
         break;
       }

src/js/services/mopidy/middleware.js

@@ -32,6 +32,7 @@ import {
   indexToArray,
 } from '../../util/arrays';
 import { getProvider, getSortSelector } from '../../util/selectors';
+import { iterate } from 'localforage';
 
 const mopidyActions = require('./actions.js');
 const coreActions = require('../core/actions.js');
@@ -268,22 +269,28 @@ const MopidyMiddleware = (function () {
       method = 'library.search',
       data,
     } = queue.shift();
-    const resultKey = getSearchResultKey({ provider, type, term });
     const processKey = 'MOPIDY_GET_SEARCH_RESULTS';
     const processor = store.getState().ui.processes[processKey];
-
     if (processor && processor.status === 'cancelling') {
       store.dispatch(uiActions.processCancelled('MOPIDY_GET_SEARCH_RESULTS'));
       return;
     }
 
+    const iterateNext = (store, queue) => {
+      if (queue.length) {
+        processSearchQueue(store, queue);
+      } else {
+        store.dispatch(uiActions.processFinished(processKey));
+      }
+    }
+
     store.dispatch(uiActions.updateProcess(
       processKey,
       {
         content: i18n(
           'services.mopidy.searching',
           {
-            provider: titleCase(provider.replace(':', '')),
+            provider: titleCase(provider),
             type: requestType,
           },
         ),
@@ -291,6 +298,12 @@ const MopidyMiddleware = (function () {
       },
     ));
   
+    const resultKey = getSearchResultKey({ provider, type, term });
+    if (resultKey in store.getState().core.search_results) {
+      iterateNext(store, queue);
+      return;
+    }
+
     // Each type has a different method of formatting and destructuring.
     const processResults = {
       albums: (response) => {
@@ -377,12 +390,7 @@ const MopidyMiddleware = (function () {
             processResults[requestType](response),
           ));
         }
-
+        iterateNext(store, queue);
-        if (queue.length) {
-          processSearchQueue(store, queue);
-        } else {
-          store.dispatch(uiActions.processFinished(processKey));
-        }
       },
     );
   };
@@ -1239,7 +1247,7 @@ const MopidyMiddleware = (function () {
                 provider,
                 requestType: type,
                 data: {
-                  uris: [provider],
+                  uris: [`${provider}:`],
                 },
               };
               switch (type) {

src/js/util/helpers.js

@@ -603,8 +603,7 @@ const upgradeSpotifyPlaylistUri = function (uri) {
   return upgradeSpotifyPlaylistUris([uri])[0];
 };
 
-const getSearchResultKey = ({ provider, type, term }) =>
+const getSearchResultKey = ({ provider, type, term }) => [provider, type, term].join(':');
-  [provider.replace(':', ''), type, term].join(':');
 
 export {
   debounce,

src/js/util/useSearchQuery.js

@@ -7,11 +7,13 @@ const useSearchQuery = () => {
     type = 'all',
     providers: rawProviders = 'all',
   } = useParams();
-  const allProviders = useSelector((state) => state.mopidy?.uri_schemes || []);
+  const allProviders = useSelector(
+    ({ mopidy: { uri_schemes } }) => uri_schemes || []
+  ).map((str) => str.replace(/:/g,''));
   const providers = rawProviders == 'all'
                     ? [...allProviders]
                     : rawProviders.split(',').filter((str) => allProviders.indexOf(str) > -1);
-  const providersString = providers.join(',').replace(/:/g,'');
+  const providersString = providers.join(',');
 
   return {
     term,

src/js/views/Search.js

@@ -34,16 +34,15 @@ const Search = () => {
 
   useEffect(() => {
     dispatch(setWindowTitle('Search'));
-    $(document).find('.search-form input').focus();
+    $(document).find('.search-form input').trigger('focus');
   }, []);
 
   useEffect(() => {
     if (term) {
-      console.debug('STARTING SEARCH', { term, type, providers })
       dispatch(setWindowTitle(i18n('search.title_window', { term: decodeURIComponent(term) })));
       dispatch(startSearch({ term, type, providers }));
     }
-  }, [])
+  }, [providersString, type, term])
 
   const onSubmit = (term) => {
     updateSearchQuery(term, providers);
@@ -57,8 +56,6 @@ const Search = () => {
   const onReset = () => navigate('/search');
 
   const onProvidersChange = (providers) => {
-    console.debug(providers)
-    // ON BLUR then trigger search event
     updateSearchQuery(term, providers)
     dispatch(hideContextMenu());
   }