Refactor mod loading

js/languages/en_US.json

@@ -1517,20 +1517,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",
@@ -5740,4 +5740,4 @@
     "zu": "Zulu",
     "zu-ZA": "Zulu (South Africa)"
   }
-}
+}

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>

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') {

js/views/components/moderators/Moderators.js

@@ -18,6 +18,7 @@ export default class extends baseVw {
    * @param {boolean} options.useCache          - Use cached data for faster speed.
    * @param {array}   options.moderatorIDs      - list of moderators to retrieve. If none get all.
    * @param {array}   options.excludeIDs        - list of moderators to not use.
+   * @param {boolean} options.includeSelf       - allow fetching of the user as a moderator.
    * @param {string}  options.method            - POST or GET
    * @param {string}  options.include           - If apiPath is moderator, set to 'profile' or only
    *                                              the peerIDs of each moderator are returned.
@@ -48,6 +49,7 @@ export default class extends baseVw {
       useCache: true,
       moderatorIDs: [],
       excludeIDs: [],
+      includeSelf: false,
       method: 'POST',
       include: '',
       purchase: false,
@@ -93,9 +95,10 @@ export default class extends baseVw {
 
     super(opts);
     this.options = opts;
-    this.excludeIDs = opts.excludeIDs;
+    this.excludeIDs = opts.includeSelf ?
+      [...opts.excludeIDs] : [...opts.excludeIDs, app.profile.id];
+    this.modsToFetch = [...opts.moderatorIDs];
     this.unfetchedMods = [];
-    this.fetchingMods = [];
     this.fetchingVerifiedMods = [];
     this.modFetches = [];
     this.moderatorsCol = new Moderators();
@@ -172,37 +175,36 @@ 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}` : '';
     const urlString =
       `ob/${op.apiPath}?async=${op.async}${includeString}&usecache=${op.useCache}`;
     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,
       });
 
       const fetch = $.ajax({
         url,
-        data: JSON.stringify(IDs),
+        data: JSON.stringify(this.modsToFetch),
         method: op.method,
       })
           .done((data) => {
@@ -213,13 +215,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 === socketID && !excluded.includes(eventData.peerId)) {
+                  } else if (
+                    eventData.id &&
+                    eventData.peerId &&
+                    eventData.id === socketID &&
+                    !excluded.includes(eventData.peerId)
+                  ) {
                     this.processMod(eventData.profile);
                   }
                 });
@@ -230,9 +234,7 @@ export default class extends baseVw {
               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) => {
@@ -259,7 +261,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,
@@ -272,7 +274,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.
@@ -405,17 +407,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,
       }));

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);
   }

js/views/modals/purchase/Purchase.js

@@ -162,7 +162,7 @@ export default class extends BaseModal {
       singleSelect: true,
       radioStyle: true,
       initialState: {
-        showOnlyCur: currencies[0],
+        showOnlyCur: '',
         showVerifiedOnly: true,
       },
     });