refactor mod loading

OpenBazaar · Jan 16, 2020 · a0a6afe · a0a6afe
1 parent b9f0c1e
commit a0a6afe
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 61 deletions.
diff --git a/js/languages/en_US.json b/js/languages/en_US.json
@@ -1528,20 +1528,20 @@
     "moderatorsLoaded": "%{total} moderator loaded |||| %{total} moderators loaded.",
     "noModsMsg": {
       "noModerators": {
-        "title": "No Valid Moderators Are Available.",
-        "body": "None of the loaded moderators are valid. This order will be a direct payment."
+        "title": "No valid moderators have been loaded.",
+        "body": "This order will be a direct payment."
       },
       "noVerifiedModerators": {
-        "title": "No Verified Moderators Available",
+        "title": "No verified moderators have been loaded.",
         "body": "Try viewing unverified moderators."
       },
       "noMatchingModerators": {
-        "title": "No moderators that accept %{coin} are available.",
+        "title": "No moderators that accept %{coin} have been loaded.",
         "body": "Moderators are available on one or more of the other currencies accepted by this listing."
       },
       "noMatchingVerifiedModerators": {
         "title": "No verified moderators that accept %{coin} have been loaded.",
-        "body": "Try viewing unverified moderators."
+        "body": "Try viewing unverified moderators or using another currency."
       }
     },
     "showUnverified": "Show Unverified Moderators",
@@ -2125,7 +2125,7 @@
     "mustHaveQuantity": "The quantity must be 1 or more",
     "quantityMustBeInteger": "The quantity must be a valid non-decimal number.",
     "quantityMustBeNumeric": "The quantity must be a valid number. If including a decimal, a period should be used as the seperator, for example \"0.00\".",
-    "cryptoQuantityMustBeNumeric": "The amount must be a valid number. If including a decimal, a period should be used as the seperator, for example \"0.00\".",    
+    "cryptoQuantityMustBeNumeric": "The amount must be a valid number. If including a decimal, a period should be used as the seperator, for example \"0.00\".",
     "cryptoQuantityMustBePositive": "The amount must be greater than zero.",
     "fractionTooLow": "%{cur} does not support more than %{coinDiv} decimal places. Please round up the amount so no more than %{coinDiv} decimal places are represented.",
     "missingShippingOption": "Please choose a valid shipping option.",
@@ -5765,4 +5765,4 @@
     "zu": "Zulu",
     "zu-ZA": "Zulu (South Africa)"
   }
-}
+}
diff --git a/js/templates/components/moderators/moderators.html b/js/templates/components/moderators/moderators.html
@@ -1,12 +1,5 @@
 <div class="moderatorsWrapper clrBr <% print(ob.wrapperClasses) %> js-moderatorsWrapper">
-  <% // placeholder so border collapse doesn't erase the table border when there are no table cells %>
-  <% if (ob.placeholder) { %>
-    <div class="moderatorCard clrBr">
-      <div class="moderatorCardInner">
-      </div>
-    </div>
-  <% } %>
-  <% if (ob.totalIDs && !ob.totalShown) { %>
+  <% if (!ob.totalShown) { %>
     <div class="moderatorCard moderatorsMessage clrBr">
       <div class="moderatorCardInner">
         <div class="flexCent">
@@ -15,10 +8,12 @@
                const showOnlyCur = ob.showOnlyCur ? 'Matching' : '';
                const opts = ob.showOnlyCur ? { coin: ob.showOnlyCur } : {};
                const msgPath = `moderators.noModsMsg.no${showOnlyCur}${showOnlyVer}Moderators`;
+               const title = ob.loading ?
+                 ob.polyT('moderators.moderatorsLoading') : ob.polyT(`${msgPath}.title`, opts);
             %>
-            <h4><%= ob.polyT(`${msgPath}.title`, opts) %></h4>
+            <h4><%= title %></h4>
             <% // The section below is only relevant if the moderators are loaded in a purchasing context. %>
-            <% if (ob.purchase) { %>
+            <% if (ob.purchase && !ob.loading) { %>
               <div class="tx4 clrT2"><%= ob.polyT(`${msgPath}.body`) %></div>
               <% if (showOnlyVer) { %>
                 <div class="padTn"><% // just a spacer %></div>

diff --git a/js/templates/components/moderators/status.html b/js/templates/components/moderators/status.html
@@ -2,7 +2,7 @@
   <% if (ob.showSpinner && ob.loading) { %>
     <%= ob.spinner({ className: 'spinnerTxt js-spinner' }) %>
   <% } %>
-  <span class="clrT4">
+  <span class="clrTEmph1">
     <% if (ob.mode === 'loaded') {
          print(ob.polyT('moderators.moderatorsLoaded', { total: ob.total, smart_count: ob.total }));
        } else if (ob.mode === 'loadingXofY') {

diff --git a/js/views/components/moderators/Moderators.js b/js/views/components/moderators/Moderators.js
@@ -94,9 +94,9 @@ export default class extends baseVw {
 
     super(opts);
     this.options = opts;
-    this.excludeIDs = opts.excludeIDs;
+    this.excludeIDs = [...opts.excludeIDs, app.profile.id];
+    this.modsToFetch = [...opts.moderatorIDs];
     this.unfetchedMods = [];
-    this.fetchingMods = [];
     this.fetchingVerifiedMods = [];
     this.modFetches = [];
     this.moderatorsCol = new Moderators();
@@ -173,9 +173,6 @@ export default class extends baseVw {
       throw new Error('Please provide the list of moderators as an array.');
     }
 
-    // don't get any that have already been added or excluded, or the user's own id.
-    const excluded = [app.profile.id, ...this.allIDs, ...this.excludeIDs];
-    const IDs = _.without(op.moderatorIDs, excluded);
     const includeString = op.include ? `&include=${op.include}` : '';
 
     let urlString =
@@ -189,22 +186,24 @@ export default class extends baseVw {
 
     const url = app.getServerUrl(urlString);
 
-    this.unfetchedMods = IDs;
-    this.fetchingMods = IDs;
-    this.fetchingVerifiedMods = app.verifiedMods.matched(IDs);
-
-    this.setState({
-      loading: true,
-      noValidModerators: false,
-      noValidVerifiedModerators: !this.fetchingVerifiedMods.length,
-    });
+    // don't get any that have already been added or excluded.
+    const excluded = [...this.allIDs, ...this.excludeIDs];
+    this.modsToFetch = _.without(op.moderatorIDs, excluded);
+    this.unfetchedMods = [...this.modsToFetch];
+    this.fetchingVerifiedMods = app.verifiedMods.matched(this.modsToFetch);
 
     // Either a list of IDs can be posted, or any available moderators can be retrieved with GET
-    if (IDs.length || op.method === 'GET') {
+    if (this.modsToFetch.length || op.method === 'GET') {
+      this.setState({
+        loading: true,
+        noValidModerators: false,
+        noValidVerifiedModerators: !this.fetchingVerifiedMods.length,
+      });
+
       this.moderatorsStatus.setState({
         hidden: false,
         loaded: 0,
-        toLoad: IDs.length,
+        toLoad: this.modsToFetch.length,
         total: this.modCount,
         loading: true,
       });
@@ -215,13 +214,15 @@ export default class extends baseVw {
             const eventData = event.jsonData;
             if (eventData.error) {
               // errors don't have a message id, check to see if the peerID matches
-              if (IDs.includes(eventData.peerId)) {
-                // provide the expected capitalization of peerID
-                eventData.peerID = eventData.peerId;
-                delete eventData.peerId;
+              if (this.modsToFetch.includes(eventData.peerID)) {
                 this.processMod(eventData);
               }
-            } else if (eventData.id === asyncID && !excluded.includes(eventData.peerId)) {
+            } else if (
+              eventData.id &&
+              eventData.peerId &&
+              eventData.id === asyncID &&
+              !excluded.includes(eventData.peerId)
+            ) {
               this.processMod(eventData.profile);
             }
           });
@@ -232,17 +233,15 @@ export default class extends baseVw {
 
       const fetch = $.ajax({
         url,
-        data: JSON.stringify(IDs),
+        data: JSON.stringify(this.modsToFetch),
         method: op.method,
       })
           .done((data) => {
             if (!op.async) {
               data.forEach(mod => {
                 if (!excluded.includes(mod.peerId)) this.processMod(mod.profile);
               });
-              this.unfetchedMods = [];
-              this.checkNotFetched();
-              if (!data.length) this.trigger('noModsFound', { guids: IDs });
+              if (!data.length) this.trigger('noModsFound', { guids: this.modsToFetch });
             }
           })
           .fail((xhr) => {
@@ -269,7 +268,7 @@ export default class extends baseVw {
   }
 
   checkNotFetched() {
-    if (this.unfetchedMods.length === 0 && this.fetchingMods.length) {
+    if (this.unfetchedMods.length === 0) {
       // All ids have been fetched and ids existed to fetch.
       this.moderatorsStatus.setState({
         loading: false,
@@ -282,7 +281,7 @@ export default class extends baseVw {
       // Either ids are still fetching, or this is an open fetch with no set ids.
       this.moderatorsStatus.setState({
         loaded: this.moderatorsCol.length, // not shown if open fetch
-        toLoad: this.fetchingMods.length, // not shown if open fetch
+        toLoad: this.modsToFetch.length, // not shown if open fetch
         total: this.modCount,
       });
       // re-render to show the unverified moderators button if needed.
@@ -415,17 +414,14 @@ export default class extends baseVw {
     const showMods = this.modCards.filter(mod => this.modShouldRender(mod.model));
     const unVerCount = this.modCards.filter(mod =>
       mod.model.hasModCurrency(state.showOnlyCur) && !mod.model.isVerified).length;
-    const totalIDs = this.allIDs.length;
     clearTimeout(this.renderTimer);
     this.renderTimer = null;
 
     loadTemplate('components/moderators/moderators.html', t => {
       this.$el.html(t({
         wrapperClasses: this.options.wrapperClasses,
-        placeholder: !showMods.length && (this.unfetchedMods.length || !totalIDs),
         purchase: this.options.purchase,
         totalShown: showMods.length,
-        totalIDs,
         unVerCount,
         ...state,
       }));

diff --git a/js/views/components/moderators/Status.js b/js/views/components/moderators/Status.js
@@ -38,7 +38,7 @@ export default class extends BaseVw {
         let mode = this.getState().mode;
         if (mode === 'loadingXofY') mode = 'loadingXofYTimedOut';
         this.setState({ showSpinner: false, mode });
-      }, 10000);
+      }, 60000);
     }
     super.setState(state, options);
   }

diff --git a/js/views/modals/Settings/Store.js b/js/views/modals/Settings/Store.js
@@ -286,22 +286,11 @@ export default class extends baseVw {
           const remAvail = this.modsAvailable.removeModeratorsByID(this.modsAvailable.selectedIDs);
 
           this.modsByID.excludeIDs = this.currentMods;
-          this.modsByID.moderatorsStatus.setState({
-            hidden: true,
-          });
 
           this.modsSelected.moderatorsCol.add([...remByID, ...remAvail]);
-          this.modsSelected.moderatorsStatus.setState({
-            hidden: true,
-          });
 
           this.modsAvailable.excludeIDs = this.currentMods;
           this.modsAvailable.moderatorsCol.add(remSel);
-          this.modsAvailable.moderatorsStatus.setState({
-            hidden: false,
-            total: this.modsAvailable.modCount,
-            showSpinner: false,
-          });
 
           // If any of the mods moved to the available collect are unverified, show them
           if (app.verifiedMods.matched(unSel).length !== unSel.length) {

diff --git a/js/views/modals/purchase/Purchase.js b/js/views/modals/purchase/Purchase.js
@@ -185,7 +185,7 @@ export default class extends BaseModal {
       singleSelect: true,
       radioStyle: true,
       initialState: {
-        showOnlyCur: currencies[0],
+        showOnlyCur: '',
         showVerifiedOnly: true,
       },
     });