Prevent redundant /admin/libraries requests when opening config scree…

…n. (#17)

CHANGELOG.md

@@ -1,13 +1,14 @@
 ## Changelog
 
-### December 14, 2021
+### December 16, 2021
 
 #### Updated
 
 - Updated branding and styling for The Palace Project.
 - Updated node-sass and sass-loader dependency versions to reduce the number of high risk vulnerabilities.
 - Removed Analytics tab from System Configuration for librarians and library managers, and added Admins tab.
 - Relabeled "library manager" role to "administrator", and "librarian" role to "user".
+- Removed redundant requests to retrieve libraries when opening the system configuration screen.
 
 ### v0.5.5
 

src/components/EditableConfigList.tsx

@@ -115,8 +115,10 @@ export abstract class GenericEditableConfigList<
   }
 
   UNSAFE_componentWillMount() {
-    if (this.props.fetchData) {
-      this.props.fetchData();
+    const { fetchData, isFetching } = this.props;
+
+    if (fetchData && !isFetching) {
+      fetchData();
     }
   }
 

src/components/Header.tsx

@@ -17,6 +17,7 @@ import * as palaceLogoUrl from "../images/PalaceCollectionManagerLogo.svg";
 import title from "../utils/title";
 
 export interface HeaderStateProps {
+  isFetchingLibraries?: boolean;
   libraries?: LibraryData[];
 }
 
@@ -203,8 +204,10 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
   }
 
   UNSAFE_componentWillMount() {
-    if (this.props.fetchLibraries) {
-      this.props.fetchLibraries();
+    const { fetchLibraries, isFetchingLibraries } = this.props;
+
+    if (fetchLibraries && !isFetchingLibraries) {
+      fetchLibraries();
     }
   }
 
@@ -297,10 +300,8 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
 
 function mapStateToProps(state, ownProps) {
   return {
-    libraries:
-      state.editor.libraries &&
-      state.editor.libraries.data &&
-      state.editor.libraries.data.libraries,
+    isFetchingLibraries: state.editor.libraries?.isFetching,
+    libraries: state.editor.libraries?.data?.libraries,
   };
 }
 

src/components/__tests__/EditableConfigList-test.tsx

@@ -478,6 +478,26 @@ describe("EditableConfigList", () => {
     expect(editItem.callCount).to.equal(1);
   });
 
+  it("does not fetch data on mount if a fetch is already in progress", () => {
+    // Expect one pre-existing call to fetchData from the component mounted in beforeEach()...
+    expect(fetchData.callCount).to.equal(1);
+
+    wrapper = shallow(
+      <ThingEditableConfigList
+        data={thingsData}
+        fetchData={fetchData}
+        editItem={editItem}
+        deleteItem={deleteItem}
+        csrfToken="token"
+        isFetching
+      />,
+      { context: { admin: systemAdmin } }
+    );
+
+    // ...but no more!
+    expect(fetchData.callCount).to.equal(1);
+  });
+
   it("fetches data again on save", async () => {
     wrapper.setProps({ editOrCreate: "create" });
     const form = wrapper.find(ThingEditForm);

src/components/__tests__/Header-test.tsx

@@ -230,6 +230,19 @@ describe("Header", () => {
       expect(fetchLibraries.callCount).to.equal(1);
     });
 
+    it("does not fetch libraries on mount if a fetch is already in progress", () => {
+      const fetchLibraries = stub();
+
+      wrapper = shallow(
+        <Header fetchLibraries={fetchLibraries} isFetchingLibraries />,
+        {
+          context: { admin: libraryManager },
+        }
+      );
+
+      expect(fetchLibraries.callCount).to.equal(0);
+    });
+
     it("changes library", async () => {
       const libraries = [
         { short_name: "nypl", name: "NYPL" },