Merge pull request 'refactor(footer): created more functions for using and more clean code' (#6) from refactor/footer into develop

Reviewed-on: #6

checkout/src/arquivos/js/components/Footer.js

@@ -13,8 +13,12 @@ export default class Footer {
 
     async init() {
         await this.selectors();
-        this.innerToPayments();
+
-        this.innerDevelopedBy();
+        this.createdToPaymentsInFooter();
+        this.createdToDevelopedBy();
+
+        this.onloadWindowVerificatedShelf();
+
         this.onUpdate();
     }
 
@@ -25,55 +29,55 @@ export default class Footer {
         this.paymentContainer = await waitElement(".footerCheckout__stamps");
         this.developedByContainer = await waitElement(".footerCheckout__developedBy");
         this.checkoutContainer = await waitElement(".container-main");
-        this.self = await waitElement(".footerCheckout__prateleira");
+        this.shelf = await waitElement(".footerCheckout__prateleira");
     }
 
-    innerToPayments() {
+    createdToPaymentsInFooter() {
-        if (this.paymentContainer) {
+        if (this.isExistElement(this.paymentContainer)) {
-            const payments = this.paymentContainer.children[0].children[0];
+            const paymentCreditContent = this.paymentContainer.children[0].children[0];
-            const vericatedVtex = this.paymentContainer.children[2].children[0];
+            const verificatedVtexPCI = this.paymentContainer.children[2].children[0];
 
-            if (payments && vericatedVtex) {
+            let verifacatedContents =
-                let structure = "";
+                this.isExistElement(paymentCreditContent) &&
-                const paymentsTypes = [
+                this.isExistElement(verificatedVtexPCI);
-                    "masterCard",
-                    "visa",
-                    "amex",
-                    "elo",
-                    "hiperCard",
-                    "payPal",
-                    "boleto",
-                ];
 
-                paymentsTypes.forEach(
+            if (verifacatedContents) {
-                    (payment) =>
+                let creditStructure = "";
-                        (structure += `<li class="footerCheckout__creditItem" >${insertImage(
+                let verificatedVtexStructure = insertImage(
-                            payment,
-                            'class="footerCheckout__creditImage"'
-                        )}</li>`)
-                );
-
-                payments.innerHTML = `<ul class="footerCheckout__creditList">${structure}</ul>`;
-
-                vericatedVtex.innerHTML = insertImage(
                     "vtexPCI",
                     'class="footerCheckout__verificatedVtex"'
                 );
+
+                let creditTypes = this.creditPaymentsName();
+
+                creditTypes.forEach((creditType) => {
+                    creditStructure += `<li class="footerCheckout__creditItem" >${insertImage(
+                        creditType,
+                        'class="footerCheckout__creditImage"'
+                    )}</li>`;
+                });
+
+                paymentCreditContent.innerHTML = `<ul class="footerCheckout__creditList">${creditStructure}</ul>`;
+                verificatedVtexPCI.innerHTML = verificatedVtexStructure;
             }
         }
     }
 
-    innerDevelopedBy() {
+    createdToDevelopedBy() {
-        if (this.developedByContainer) {
+        if (this.isExistElement(this.developedByContainer)) {
-            const poweredBy = this.developedByContainer.children[0].children[0];
+            const poweredByContent = this.developedByContainer.children[0].children[0];
-            const developedBy = this.developedByContainer.children[1].children[0];
+            const developedByContent = this.developedByContainer.children[1].children[0];
 
-            if (poweredBy && developedBy) {
+            let verificatedContents =
-                poweredBy.innerHTML = `<span>Powered By</span>${insertImage(
+                this.isExistElement(poweredByContent) && this.isExistElement(developedByContent);
+
+            if (verificatedContents) {
+                poweredByContent.innerHTML = `<span>Powered By</span>${insertImage(
                     "logoVTEX",
                     'class="footerCheckout__logo footerCheckout__logo--vtex"'
                 )}`;
-                developedBy.innerHTML = `<span>Developed By</span>${insertImage(
+
+                developedByContent.innerHTML = `<span>Developed By</span>${insertImage(
                     "logoM3",
                     'class="footerCheckout__logo footerCheckout__logo--m3"'
                 )}`;
@@ -81,52 +85,51 @@ export default class Footer {
         }
     }
 
+    onloadWindowVerificatedShelf() {
+        let checkoutEmpty = this.checkoutEmpty;
+        let checkoutContainer = this.checkoutContainer;
+
+        if (checkoutEmpty.style.display === "none") {
+            this.addClassToElement(checkoutContainer, "container-cart-fill");
+        } else {
+            this.removeClassToElement(checkoutContainer, "container-fill");
+        }
+
+        if (
+            this.getElementClass(checkoutContainer, "container-cart-fill") &&
+            this.getElementClass(checkoutContainer, "container-cart") &&
+            window.location.href.endsWith("#/cart")
+        ) {
+            this.createdInitialShelfList();
+            this.createdProductsToShelf();
+            this.addCarrossel();
+        } else {
+            this.shelf.innerHTML = "";
+        }
+    }
+
     onUpdate() {
         //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos:
         // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver
         // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver
 
-        if (this.checkoutEmpty && this.checkoutContainer) {
+        let verificatedContents =
-            if (this.checkoutEmpty.style.display === "none") {
+            this.isExistElement(this.checkoutEmpty) && this.isExistElement(this.checkoutContainer);
-                this.checkoutContainer.classList.add("container-cart-fill");
-            } else {
-                this.checkoutContainer.classList.remove("container-fill");
-            }
-
-            if (
-                this.checkoutContainer.classList.contains("container-cart-fill") &&
-                this.checkoutContainer.classList.contains("container-cart") &&
-                window.location.href.endsWith("#/cart")
-            ) {
-                this.innerSelfList();
-                this.innerToSelf();
-                this.addCarrossel();
-            } else {
-                this.self.innerHTML = "";
-            }
 
+        if (verificatedContents) {
             let target = this.checkoutEmpty;
             let config = { childList: true, attributes: true };
             let observer = new MutationObserver((mutations) => {
+                /* prettier-ignore */
                 for (let i = 0; i < mutations.length; i++) {
                     if (mutations[i].attributeName === "style") {
                         if (this.checkoutEmpty.style.display === "none") {
-                            this.checkoutContainer.classList.add("container-cart-fill");
+                            this.addClassToElement(this.checkoutContainer, "container-cart-fill");
                         } else {
-                            this.checkoutContainer.classList.remove("container-cart-fill");
+                            this.removeClassToElement(this.checkoutContainer,"container-cart-fill");
                         }
 
-                        if (
+                        this.onloadWindowVerificatedShelf();
-                            this.checkoutContainer.classList.contains("container-cart-fill") &&
-                            this.checkoutContainer.classList.contains("container-cart") &&
-                            window.location.href.endsWith("#/cart")
-                        ) {
-                            this.innerSelfList();
-                            this.innerToSelf();
-                            this.addCarrossel();
-                        } else {
-                            this.self.innerHTML = "";
-                        }
 
                         break;
                     }
@@ -135,24 +138,12 @@ export default class Footer {
 
             observer.observe(target, config);
 
-            window.addEventListener("hashchange", () => {
+            window.addEventListener("hashchange", this.onloadWindowVerificatedShelf.bind(this));
-                if (
-                    this.checkoutContainer.classList.contains("container-cart-fill") &&
-                    this.checkoutContainer.classList.contains("container-cart") &&
-                    window.location.href.endsWith("#/cart")
-                ) {
-                    this.innerSelfList();
-                    this.innerToSelf();
-                    this.addCarrossel();
-                } else {
-                    this.self.innerHTML = "";
-                }
-            });
         }
     }
 
     addCarrossel() {
-        $(this.self.children[1]).slick({
+        $(this.shelf.children[1]).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
             arrows: true,
@@ -174,24 +165,26 @@ export default class Footer {
         });
     }
 
-    async getProducts() {
+    async requestAPIProducts() {
         let url = (name) => {
             let domain = "https://m3academy.myvtex.com/";
             return domain + name;
         };
 
-        let API = fetch(url("api/catalog_system/pub/products/search/?fq=productClusterIds:319"));
+        let featchProducts = fetch(
+            url("api/catalog_system/pub/products/search/?fq=productClusterIds:319")
+        );
 
-        let response = await API.then((res) => res.json());
+        let response = await featchProducts.then((res) => res.json());
 
         return response;
     }
 
-    async innerToSelf() {
+    async createdProductsToShelf() {
-        let datas = await this.getProducts();
+        let datas = await this.requestAPIProducts();
 
         datas.forEach(() => {
-            $(this.self.children[1]).slick("unslick");
+            $(this.shelf.children[1]).slick("unslick");
 
             this.createdCardsProducts(datas);
 
@@ -231,16 +224,47 @@ export default class Footer {
             </div></li>`;
         });
 
-        this.self.children[1].innerHTML = `
+        this.shelf.children[1].innerHTML = `
             ${structure.trim()}
         `;
     }
 
-    innerSelfList() {
+    createdInitialShelfList() {
-        this.self.innerHTML = `
+        this.shelf.innerHTML = `
         <div>
             <h2>Você também pode gostar:</h2>
         </div>
-        <ul class="self-list"></ul>`;
+        <ul class="self-list"></ul>
+        `;
+    }
+
+    addClassToElement(element, name) {
+        element.classList.add(name);
+    }
+
+    removeClassToElement(element, name) {
+        element.classList.remove(name);
+    }
+
+    getElementClass(element, name) {
+        return element.classList.contains(name);
+    }
+
+    isExistElement(element) {
+        return !!element;
+    }
+
+    creditPaymentsName() {
+        const creditPaymentsTypes = [
+            "masterCard",
+            "visa",
+            "amex",
+            "elo",
+            "hiperCard",
+            "payPal",
+            "boleto",
+        ];
+
+        return creditPaymentsTypes;
     }
 }