Refactor CustomListEditor and related components. (#31)

* Refactor CustomListEditor and related components.

* Update changelog.

CHANGELOG.md

@@ -1,5 +1,11 @@
 ## Changelog
 
+### v0.0.11
+
+#### Fixed
+
+- When editing lists, the Save and Cancel buttons are now correctly disabled when a new list is opened, before any changes have been made.
+
 ### v0.0.10
 
 #### Fixed

package.json

@@ -33,6 +33,7 @@
     "draft-convert": "^2.1.5",
     "draft-js": "0.11.7",
     "font-awesome": "^4.6.3",
+    "immer": "^9.0.15",
     "isomorphic-fetch": "^3.0.0",
     "library-simplified-reusable-components": "1.3.18",
     "numeral": "^2.0.6",

src/__tests__/actions-test.ts

@@ -941,13 +941,33 @@ describe("actions", () => {
   describe("fetchMoreCustomListEntries", () => {
     it("dispatches request and load", async () => {
       const dispatch = stub();
+
+      const getState = stub().returns({
+        editor: {
+          customListDetails: {
+            data: {
+              nextPageUrl: "url",
+            },
+            isFetchingMoreEntries: false,
+          },
+        },
+      });
+
       const customListDetailsData = {
         title: "custom list",
       };
       fetcher.testData = customListDetailsData;
       fetcher.resolve = true;
 
-      const data = await actions.fetchMoreCustomListEntries("url")(dispatch);
+      // FIXME: This is a bit of a hack that requires knowing that the implementation of
+      // fetchMoreCustomListEntries calls dispatch internally on another action creator.
+      // These tests should all be refactored at some point to account for this case.
+      const outerDispatch = (action) => action(dispatch);
+
+      const data = await actions.fetchMoreCustomListEntries()(
+        outerDispatch,
+        getState
+      );
 
       expect(dispatch.callCount).to.equal(3);
       expect(dispatch.args[0][0].type).to.equal(

src/actions.ts

@@ -35,6 +35,10 @@ import { CollectionData } from "opds-web-client/lib/interfaces";
 import DataFetcher from "opds-web-client/lib/DataFetcher";
 import { RequestError, RequestRejector } from "opds-web-client/lib/DataFetcher";
 import BaseActionCreator from "opds-web-client/lib/actions";
+import {
+  getCustomListEditorFormData,
+  getCustomListEditorSearchUrl,
+} from "./reducers/customListEditor";
 
 /** Create redux actions to be dispatched by connected components, mostly
     to make requests to the server. */
@@ -113,6 +117,21 @@ export default class ActionCreator extends BaseActionCreator {
   static readonly CUSTOM_LIST_DETAILS_MORE = "CUSTOM_LIST_DETAILS_MORE";
   static readonly EDIT_CUSTOM_LIST = "EDIT_CUSTOM_LIST";
   static readonly DELETE_CUSTOM_LIST = "DELETE_CUSTOM_LIST";
+  static readonly OPEN_CUSTOM_LIST_EDITOR = "OPEN_CUSTOM_LIST_EDITOR";
+  static readonly UPDATE_CUSTOM_LIST_EDITOR_PROPERTY =
+    "UPDATE_CUSTOM_LIST_EDITOR_PROPERTY";
+  static readonly TOGGLE_CUSTOM_LIST_EDITOR_COLLECTION =
+    "TOGGLE_CUSTOM_LIST_EDITOR_COLLECTION";
+  static readonly UPDATE_CUSTOM_LIST_EDITOR_SEARCH_PARAM =
+    "UPDATE_CUSTOM_LIST_EDITOR_SEARCH_PARAM";
+  static readonly ADD_CUSTOM_LIST_EDITOR_ENTRY = "ADD_CUSTOM_LIST_EDITOR_ENTRY";
+  static readonly ADD_ALL_CUSTOM_LIST_EDITOR_ENTRIES =
+    "ADD_ALL_CUSTOM_LIST_EDITOR_ENTRIES";
+  static readonly DELETE_CUSTOM_LIST_EDITOR_ENTRY =
+    "DELETE_CUSTOM_LIST_EDITOR_ENTRY";
+  static readonly DELETE_ALL_CUSTOM_LIST_EDITOR_ENTRIES =
+    "DELETE_ALL_CUSTOM_LIST_EDITOR_ENTRIES";
+  static readonly RESET_CUSTOM_LIST_EDITOR = "RESET_CUSTOM_LIST_EDITOR";
   static readonly LANES = "LANES";
   static readonly EDIT_LANE = "EDIT_LANE";
   static readonly DELETE_LANE = "DELETE_LANE";
@@ -827,11 +846,22 @@ export default class ActionCreator extends BaseActionCreator {
     ).bind(this);
   }
 
-  fetchMoreCustomListEntries(url: string) {
-    return this.fetchOPDS<CollectionData>(
-      ActionCreator.CUSTOM_LIST_DETAILS_MORE,
-      url
-    ).bind(this);
+  fetchMoreCustomListEntries() {
+    return (dispatch, getState) => {
+      const {
+        data,
+        isFetchingMoreEntries,
+      } = getState().editor.customListDetails;
+
+      if (!isFetchingMoreEntries) {
+        return dispatch(
+          this.fetchOPDS<CollectionData>(
+            ActionCreator.CUSTOM_LIST_DETAILS_MORE,
+            data.nextPageUrl
+          ).bind(this)
+        );
+      }
+    };
   }
 
   editCustomList(library: string, data: FormData, id?: string) {
@@ -852,6 +882,116 @@ export default class ActionCreator extends BaseActionCreator {
     ).bind(this);
   }
 
+  openCustomListEditor(listId: string) {
+    return (dispatch, getState) =>
+      dispatch({
+        type: ActionCreator.OPEN_CUSTOM_LIST_EDITOR,
+        id: listId,
+        data: getState().editor.customLists.data,
+      });
+  }
+
+  updateCustomListEditorProperty(name: string, value) {
+    return {
+      type: ActionCreator.UPDATE_CUSTOM_LIST_EDITOR_PROPERTY,
+      name,
+      value,
+    };
+  }
+
+  toggleCustomListEditorCollection(id: number) {
+    return {
+      type: ActionCreator.TOGGLE_CUSTOM_LIST_EDITOR_COLLECTION,
+      id,
+    };
+  }
+
+  updateCustomListEditorSearchParam(name: string, value) {
+    return {
+      type: ActionCreator.UPDATE_CUSTOM_LIST_EDITOR_SEARCH_PARAM,
+      name,
+      value,
+    };
+  }
+
+  addCustomListEditorEntry(id: string) {
+    return (dispatch, getState) =>
+      dispatch({
+        type: ActionCreator.ADD_CUSTOM_LIST_EDITOR_ENTRY,
+        id,
+        data: getState().editor.collection.data,
+      });
+  }
+
+  addAllCustomListEditorEntries() {
+    return (dispatch, getState) =>
+      dispatch({
+        type: ActionCreator.ADD_ALL_CUSTOM_LIST_EDITOR_ENTRIES,
+        data: getState().editor.collection.data,
+      });
+  }
+
+  deleteCustomListEditorEntry(id: string) {
+    return {
+      type: ActionCreator.DELETE_CUSTOM_LIST_EDITOR_ENTRY,
+      id,
+    };
+  }
+
+  deleteAllCustomListEditorEntries() {
+    return {
+      type: ActionCreator.DELETE_ALL_CUSTOM_LIST_EDITOR_ENTRIES,
+    };
+  }
+
+  resetCustomListEditor() {
+    return {
+      type: ActionCreator.RESET_CUSTOM_LIST_EDITOR,
+    };
+  }
+
+  saveCustomListEditor(library: string) {
+    return (dispatch, getState) => {
+      const { customListEditor } = getState().editor;
+
+      const { id } = customListEditor;
+
+      return dispatch(
+        this.editCustomList(
+          library,
+          getCustomListEditorFormData(customListEditor),
+          id
+        )
+      ).then(() => {
+        const { successMessage: savedListId } = getState().editor.customLists;
+
+        if (id === null && savedListId) {
+          window.location.href = `/admin/web/lists/${library}/edit/${savedListId}`;
+        }
+      });
+    };
+  }
+
+  executeCustomListEditorSearch(library: string) {
+    return (dispatch, getState) => {
+      const { customListEditor } = getState().editor;
+
+      const url = getCustomListEditorSearchUrl(customListEditor, library);
+
+      return dispatch(this.fetchCollection(url));
+    };
+  }
+
+  fetchMoreCustomListEditorSearchResults() {
+    return (dispatch, getState) => {
+      const { data, isFetchingPage } = getState().editor.collection;
+
+      if (!isFetchingPage) {
+        return dispatch(this.fetchPage(data.nextPageUrl));
+      }
+    };
+  }
+
   fetchLanes(library: string) {
     const url = "/" + library + "/admin/lanes";
     return this.fetchJSON<LanesData>(ActionCreator.LANES, url).bind(this);