Category Selection on Search Page

frontend/src/Store/Actions/Settings/indexerCategories.js

@@ -0,0 +1,48 @@
+import createFetchHandler from 'Store/Actions/Creators/createFetchHandler';
+import { createThunk } from 'Store/thunks';
+
+//
+// Variables
+
+const section = 'settings.indexerCategories';
+
+//
+// Actions Types
+
+export const FETCH_INDEXER_CATEGORIES = 'settings/indexerFlags/fetchIndexerCategories';
+
+//
+// Action Creators
+
+export const fetchIndexerCategories = createThunk(FETCH_INDEXER_CATEGORIES);
+
+//
+// Details
+
+export default {
+
+  //
+  // State
+
+  defaultState: {
+    isFetching: false,
+    isPopulated: false,
+    error: null,
+    items: []
+  },
+
+  //
+  // Action Handlers
+
+  actionHandlers: {
+    [FETCH_INDEXER_CATEGORIES]: createFetchHandler(section, '/indexer/categories')
+  },
+
+  //
+  // Reducers
+
+  reducers: {
+
+  }
+
+};

frontend/src/Store/Actions/providerOptionActions.js

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import { createAction } from 'redux-actions';
 import { createThunk, handleThunks } from 'Store/thunks';
 import requestAction from 'Utilities/requestAction';
@@ -10,11 +11,14 @@ import createHandleActions from './Creators/createHandleActions';
 
 export const section = 'providerOptions';
 
+const lastActions = {};
+let lastActionId = 0;
+
 //
 // State
 
 export const defaultState = {
-  items: {},
+  items: [],
   isFetching: false,
   isPopulated: false,
   error: false
@@ -23,8 +27,8 @@ export const defaultState = {
 //
 // Actions Types
 
-export const FETCH_OPTIONS = 'devices/fetchOptions';
-export const CLEAR_OPTIONS = 'devices/clearOptions';
+export const FETCH_OPTIONS = 'providers/fetchOptions';
+export const CLEAR_OPTIONS = 'providers/clearOptions';
 
 //
 // Action Creators
@@ -38,35 +42,55 @@ export const clearOptions = createAction(CLEAR_OPTIONS);
 export const actionHandlers = handleThunks({
 
   [FETCH_OPTIONS]: function(getState, payload, dispatch) {
+    const subsection = `${section}.${payload.section}`;
+
+    if (lastActions[payload.section] && _.isEqual(payload, lastActions[payload.section].payload)) {
+      return;
+    }
+
+    const actionId = ++lastActionId;
+
+    lastActions[payload.section] = {
+      actionId,
+      payload
+    };
+
     dispatch(set({
-      section,
+      section: subsection,
       isFetching: true
     }));
 
-    const oldItems = getState().providerOptions.items;
-    const itemSection = payload.itemSection;
-
     const promise = requestAction(payload);
 
     promise.done((data) => {
-      oldItems[itemSection] = data.options || [];
+      if (lastActions[payload.section]) {
+        if (lastActions[payload.section].actionId === actionId) {
+          lastActions[payload.section] = null;
+        }
 
-      dispatch(set({
-        section,
-        isFetching: false,
-        isPopulated: true,
-        error: null,
-        items: oldItems
-      }));
+        dispatch(set({
+          section: subsection,
+          isFetching: false,
+          isPopulated: true,
+          error: null,
+          items: data.options || []
+        }));
+      }
     });
 
     promise.fail((xhr) => {
-      dispatch(set({
-        section,
-        isFetching: false,
-        isPopulated: false,
-        error: xhr
-      }));
+      if (lastActions[payload.section]) {
+        if (lastActions[payload.section].actionId === actionId) {
+          lastActions[payload.section] = null;
+        }
+
+        dispatch(set({
+          section: subsection,
+          isFetching: false,
+          isPopulated: false,
+          error: xhr
+        }));
+      }
     });
   }
 });
@@ -76,8 +100,12 @@ export const actionHandlers = handleThunks({
 
 export const reducers = createHandleActions({
 
-  [CLEAR_OPTIONS]: function(state) {
-    return updateSectionState(state, section, defaultState);
+  [CLEAR_OPTIONS]: function(state, { payload }) {
+    const subsection = `${section}.${payload.section}`;
+
+    lastActions[payload.section] = null;
+
+    return updateSectionState(state, subsection, defaultState);
   }
 
-}, defaultState, section);
+}, {}, section);

frontend/src/Store/Actions/settingsActions.js

@@ -3,6 +3,7 @@ import { handleThunks } from 'Store/thunks';
 import createHandleActions from './Creators/createHandleActions';
 import applications from './Settings/applications';
 import general from './Settings/general';
+import indexerCategories from './Settings/indexerCategories';
 import indexerFlags from './Settings/indexerFlags';
 import indexerOptions from './Settings/indexerOptions';
 import languages from './Settings/languages';
@@ -10,6 +11,7 @@ import notifications from './Settings/notifications';
 import ui from './Settings/ui';
 
 export * from './Settings/general';
+export * from './Settings/indexerCategories';
 export * from './Settings/indexerFlags';
 export * from './Settings/indexerOptions';
 export * from './Settings/languages';
@@ -29,6 +31,7 @@ export const defaultState = {
   advancedSettings: false,
 
   general: general.defaultState,
+  indexerCategories: indexerCategories.defaultState,
   indexerFlags: indexerFlags.defaultState,
   indexerOptions: indexerOptions.defaultState,
   languages: languages.defaultState,
@@ -56,6 +59,7 @@ export const toggleAdvancedSettings = createAction(TOGGLE_ADVANCED_SETTINGS);
 
 export const actionHandlers = handleThunks({
   ...general.actionHandlers,
+  ...indexerCategories.actionHandlers,
   ...indexerFlags.actionHandlers,
   ...indexerOptions.actionHandlers,
   ...languages.actionHandlers,
@@ -74,6 +78,7 @@ export const reducers = createHandleActions({
   },
 
   ...general.reducers,
+  ...indexerCategories.reducers,
   ...indexerFlags.reducers,
   ...indexerOptions.reducers,
   ...languages.reducers,