fix(purge-button): adds feedback to PurgeButton

fixes #85
wp-pwa · Jan 15, 2019 · b5535c0 · b5535c0
1 parent fd0abfc
commit b5535c0
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 55 deletions.
diff --git a/admin/components/Settings/index.js b/admin/components/Settings/index.js
@@ -48,6 +48,7 @@ const Settings = ({
   staticServerValidation,
   ampServerValidation,
   saveButtonStatus,
+  purgePurifierButtonStatus,
 }) => (
   <Box
     margin={{ horizontal: "auto", top: "40px" }}
@@ -138,8 +139,9 @@ const Settings = ({
                 onChange={setHtmlPurifierActive}
               />
             </Box>
-            <Button
-              label={fieldHtmlPurifier.button}
+            <PurgeButton
+              disabled={purgePurifierButtonStatus !== "idle"}
+              label={fieldHtmlPurifier.button[purgePurifierButtonStatus]}
               onClick={purgeHtmlPurifierCache}
             />
           </StyledBox>
@@ -160,7 +162,7 @@ const Settings = ({
         </form>
       </Form>
     </Options>
-    <StyledButton
+    <SaveButton
       form="settings-form"
       primary
       disabled={saveButtonStatus !== "idle"}
@@ -197,7 +199,10 @@ Settings.propTypes = {
   fieldStaticServer: shape({ label: string, placeholder: string }).isRequired,
   fieldAmpServer: shape({ label: string, placeholder: string }).isRequired,
   fieldForceFrontpage: shape({ label: string, comment: string }).isRequired,
-  fieldHtmlPurifier: shape({ label: string, button: string }).isRequired,
+  fieldHtmlPurifier: shape({
+    label: string,
+    button: shape({ idle: string, busy: string, done: string }),
+  }).isRequired,
   fieldExcludes: shape({ label: string, placeholder: string }).isRequired,
   fieldApiFilters: shape({ label: string, placeholder: string }).isRequired,
   saveButtonText: shape({ idle: string, busy: string, done: string })
@@ -207,6 +212,7 @@ Settings.propTypes = {
   staticServerValidation: string,
   ampServerValidation: string,
   saveButtonStatus: string.isRequired,
+  purgePurifierButtonStatus: string.isRequired,
 };
 
 Settings.defaultProps = {
@@ -244,6 +250,7 @@ export default inject(
       staticServerValidation: validations.settings.static_server,
       ampServerValidation: validations.settings.amp_server,
       saveButtonStatus: general.saveButtonStatus,
+      purgePurifierButtonStatus: general.purgePurifierButtonStatus,
       notification: languages.get("settings.notification"),
       formTitleText: languages.get(`${form}.title`),
       fieldSiteId: languages.get(`${form}.fieldSiteId`),
@@ -303,9 +310,12 @@ const StyledTextInput = styled(TextInput)`
     validation === "invalid" ? "background-color: #ea5a3555;" : ""}
 `;
 
-const StyledButton = styled(Button)`
+const SaveButton = styled(Button)`
   width: 162px;
 `;
+const PurgeButton = styled(Button)`
+  width: 197px;
+`;
 
 const StyledBox = styled(Box)`
   @media (max-width: 782px) {

diff --git a/admin/languages/en_US.json b/admin/languages/en_US.json
@@ -145,7 +145,11 @@
       },
       "fieldHtmlPurifier": {
         "label": "Activate HTML Purifier",
-        "button": "Purge HtmlPurifier"
+        "button": {
+          "idle": "Purge HtmlPurifier",
+          "busy": "Purging...",
+          "done": "Purged"
+        }
       },
       "fieldExcludes": {
         "label": "Exclude URLs in the PWA",

diff --git a/admin/models/__tests__/general.tests.js b/admin/models/__tests__/general.tests.js
@@ -11,6 +11,15 @@ describe("Admin › Models › General", () => {
     expect(store.page).toBe("frontity-dashboard");
     expect(store.siteIdJustRequested).toBe(false);
     expect(store.saveButtonStatus).toBe("idle");
+    expect(store.purgePurifierButtonStatus).toBe("idle");
+  });
+
+  test("`setSiteIdJustRequested` should set a value for `siteIdJustRequested`", () => {
+    const store = Store.create();
+
+    expect(store.siteIdJustRequested).toBe(false);
+    store.setSiteIdJustRequested(true);
+    expect(store.siteIdJustRequested).toBe(true);
   });
 
   test("`setSaveButtonStatus` should set a value for `saveButtonStatus`", () => {
@@ -21,11 +30,11 @@ describe("Admin › Models › General", () => {
     expect(store.saveButtonStatus).toBe("busy");
   });
 
-  test("`setSiteIdJustRequested` should set a value for `siteIdJustRequested`", () => {
+  test("`setPurgePurifierButtonStatus` should set a value for `purgePurifierButtonStatus`", () => {
     const store = Store.create();
 
-    expect(store.siteIdJustRequested).toBe(false);
-    store.setSiteIdJustRequested(true);
-    expect(store.siteIdJustRequested).toBe(true);
+    expect(store.purgePurifierButtonStatus).toBe("idle");
+    store.setPurgePurifierButtonStatus("busy");
+    expect(store.purgePurifierButtonStatus).toBe("busy");
   });
 });
diff --git a/admin/models/__tests__/settings.tests.js b/admin/models/__tests__/settings.tests.js
@@ -50,7 +50,7 @@ describe("Admin › Models › Settings", () => {
       .create();
 
     Object.defineProperty(store, "validations", {
-      value: { settings: "validations" },
+      value: "validations",
     });
 
     expect(store.settings.validations).toBe("validations");
@@ -273,7 +273,7 @@ describe("Admin › Models › Settings", () => {
     expect(store.api_filters).toEqual(["something", "something else"]);
   });
 
-  test("`saveSettings` should call `trimTextFields()`, send a request to save the settings and update the value for `saveButtonStatus`", async () => {
+  test("`saveSettings` should call `trimTextFields()`, send a request to save the settings and update `saveButtonStatus`", async () => {
     const store = Store.create();
     const validate = jest.fn(() => true);
     const setSaveButtonStatus = jest.fn();
@@ -395,14 +395,26 @@ describe("Admin › Models › Settings", () => {
     expect(post).not.toHaveBeenCalled();
   });
 
-  test("`purgeHtmlPurifierCache` should send a request to purge the cache", async () => {
+  test("`purgeHtmlPurifierCache` should send a request to purge the cache and update `purgeHtmlPurifierStatus`", async () => {
     const store = Store.create();
+    const setPurgePurifierButtonStatus = jest.fn();
+
+    Object.defineProperty(store, "general", {
+      value: { setPurgePurifierButtonStatus },
+    });
 
     const data = new window.FormData();
     data.append("action", "frontity_purge_htmlpurifier_cache");
 
     await store.purgeHtmlPurifierCache();
     expect(post).toHaveBeenCalledWith("https://ajax.url", data);
+    jest.runOnlyPendingTimers();
+    expect(setTimeout).toHaveBeenNthCalledWith(1, expect.any(Function), 500);
+    expect(setTimeout).toHaveBeenNthCalledWith(2, expect.any(Function), 1000);
+    jest.runOnlyPendingTimers();
+    expect(setPurgePurifierButtonStatus).toHaveBeenNthCalledWith(1, "busy");
+    expect(setPurgePurifierButtonStatus).toHaveBeenNthCalledWith(2, "done");
+    expect(setPurgePurifierButtonStatus).toHaveBeenNthCalledWith(3, "idle");
   });
 
   test("`validate()` should call `validations.validateAll()`", () => {

diff --git a/admin/models/__tests__/validations.request.tests.js b/admin/models/__tests__/validations.request.tests.js
@@ -99,28 +99,15 @@ describe("Admin › Models › Validations › Request", () => {
     expect(clear).toHaveBeenCalledWith("request", "name");
   });
 
-  test("`validate()` should call `validations.validate()` and return a boolean", () => {
-    const store = Request.create();
-    const validate = jest.fn(() => true);
-
-    Object.defineProperty(store, "validations", {
-      value: { validate },
-    });
-
-    const validation = store.validate("name");
-    expect(validate).toHaveBeenCalledWith("request", "name");
-    expect(validation).toEqual(expect.any(Boolean));
-  });
-
-  test("`validateAll()` should call `validations.validateAll()` and return a boolean", () => {
+  test("`validate()` should call `validations.validateAll()` and return a boolean", () => {
     const store = Request.create();
     const validateAll = jest.fn(() => false);
 
     Object.defineProperty(store, "validations", {
       value: { validateAll },
     });
 
-    const validation = store.validateAll();
+    const validation = store.validate();
     expect(validateAll).toHaveBeenCalledWith("request");
     expect(validation).toEqual(expect.any(Boolean));
   });

diff --git a/admin/models/__tests__/validations.settings.tests.js b/admin/models/__tests__/validations.settings.tests.js
@@ -85,28 +85,15 @@ describe("Admin › Models › Validations › Settings", () => {
     expect(clear).toHaveBeenCalledWith("settings", "site_id");
   });
 
-  test("`validate()` should call `validations.validate()` and return a boolean", () => {
-    const store = Settings.create();
-    const validate = jest.fn(() => true);
-
-    Object.defineProperty(store, "validations", {
-      value: { validate },
-    });
-
-    const validation = store.validate("site_id");
-    expect(validate).toHaveBeenCalledWith("settings", "site_id");
-    expect(validation).toEqual(expect.any(Boolean));
-  });
-
-  test("`validateAll()` should call `validations.validateAll()` and return a boolean", () => {
+  test("`validate()` should call `validations.validateAll()` and return a boolean", () => {
     const store = Settings.create();
     const validateAll = jest.fn(() => false);
 
     Object.defineProperty(store, "validations", {
       value: { validateAll },
     });
 
-    const validation = store.validateAll();
+    const validation = store.validate();
     expect(validateAll).toHaveBeenCalledWith("settings");
     expect(validation).toEqual(expect.any(Boolean));
   });

diff --git a/admin/models/general.js b/admin/models/general.js
@@ -7,12 +7,16 @@ export default types
     page: "",
     siteIdJustRequested: false,
     saveButtonStatus: "idle",
+    purgePurifierButtonStatus: "idle",
   })
   .actions(self => ({
+    setSiteIdJustRequested(value) {
+      self.siteIdJustRequested = value;
+    },
     setSaveButtonStatus(value) {
       self.saveButtonStatus = value;
     },
-    setSiteIdJustRequested(value) {
-      self.siteIdJustRequested = value;
+    setPurgePurifierButtonStatus(value) {
+      self.purgePurifierButtonStatus = value;
     },
   }));
diff --git a/admin/models/settings.js b/admin/models/settings.js
@@ -23,7 +23,7 @@ export default types
       return self.root.general;
     },
     get validations() {
-      return self.root.validations.settings;
+      return self.root.validations;
     },
   }))
   .actions(self => ({
@@ -137,12 +137,21 @@ export default types
       }
     },
     async purgeHtmlPurifierCache() {
+      self.general.setPurgePurifierButtonStatus("busy");
+
       const data = new window.FormData();
       data.append("action", "frontity_purge_htmlpurifier_cache");
 
       await post(window.ajaxurl, data);
+
+      setTimeout(() => {
+        self.general.setPurgePurifierButtonStatus("done");
+        setTimeout(() => {
+          self.general.setPurgePurifierButtonStatus("idle");
+        }, 1000);
+      }, 500);
     },
     validate() {
-      return self.validations.validateAll();
+      return self.validations.validateAll("settings");
     },
   }));
diff --git a/admin/models/validations/request.js b/admin/models/validations/request.js
@@ -37,10 +37,7 @@ export default types
     clear(field) {
       self.validations.clear("request", field);
     },
-    validate(field) {
-      return self.validations.validate("request", field);
-    },
-    validateAll() {
+    validate() {
       return self.validations.validateAll("request");
     },
   }));
diff --git a/admin/models/validations/settings.js b/admin/models/validations/settings.js
@@ -37,10 +37,7 @@ export default types
     clear(field) {
       self.validations.clear("settings", field);
     },
-    validate(field) {
-      return self.validations.validate("settings", field);
-    },
-    validateAll() {
+    validate() {
       return self.validations.validateAll("settings");
     },
   }));