buildMasksList: async()

in src/js/popup/popup.js [507:575]
42 lines of code
8 McCabe index (conditional complexity)

          buildMasksList: async (opts = null) => {
            let getMasksOptions = { fetchCustomMasks: false };
            const { premium } = await browser.storage.local.get("premium");

            if (premium) {
              // Check if user may have custom domain masks
              const { premiumSubdomainSet } = await browser.storage.local.get(
                "premiumSubdomainSet"
              );

              // API Note: If a user has not registered a subdomain yet, its default stored/queried value is "None";
              const isPremiumSubdomainSet = premiumSubdomainSet !== "None";
              getMasksOptions.fetchCustomMasks = isPremiumSubdomainSet;

              // If not set, prompt user to register domain
              if (!isPremiumSubdomainSet) {
                const registerSubdomainButton = document.querySelector(".fx-relay-regsiter-subdomain-button");
                registerSubdomainButton.classList.remove("is-hidden");
              }

              // Show Generate Button
              const generateRandomMask = document.querySelector(".js-generate-random-mask");
              generateRandomMask.classList.remove("is-hidden");              
            }
            
            const masks = await popup.utilities.getMasks(getMasksOptions);
            
            const maskList = document.querySelector(".fx-relay-mask-list");

            // Reset mask list
            maskList.textContent = "";
            
            // Generate and append each mask item to the mask list
            masks.forEach( mask => {
                const maskListItem = popup.panel.masks.utilities.buildMaskListItem(mask);
                maskList.append(maskListItem);
            });

            // Display "Mask created" temporary label when a new mask is created in the panel
            if (opts && opts.newMaskCreated && maskList.firstElementChild) {
              maskList.firstElementChild.classList.add("is-new-mask");

              setTimeout(() => {
                maskList.firstElementChild.classList.remove("is-new-mask");
              }, 1000);
            }

            // If user has no masks created, show onboarding prompt and focus on random gen button
            if (masks.length === 0) {
              const noMasksCreatedPanel = document.querySelector(".fx-relay-no-masks-created");
              noMasksCreatedPanel.classList.remove("is-hidden");
              
              const generateRandomMask = document.querySelector(".js-generate-random-mask");
              generateRandomMask.focus();

              // Remove loading state since exiting early
              document.body.classList.remove("is-loading");
              return;
            }

            // If premium, focus on search instead
            if (premium) {
              popup.panel.masks.search.init();
            }

            // Remove loading state
            document.body.classList.remove("is-loading");

          },