Almost finished cart

15/index.js

@@ -172,29 +172,28 @@ const actionCartClear = () => ({ type: "CART_CLEAR" });
 
 const actionOrder = () => async (dispatch, getState) => {
   let { cart } = getState();
-  let orderGoods = Object.entries(cart).map(([, { _id, count }]) => ({
-    good: { _id, count },
+  let count = 0;
+  const orderGoods = Object.entries(cart).map(([_id, {}]) => ({
+    good: { _id },
+    count: count++,
   }));
-  dispatch(
+
+  await dispatch(
     actionPromise(
       "order",
-      gql(`
-      mutation newOrder($order:OrderInput){
-        OrderUpsert(order:$order)
-        { _id total }
-      }
-    `),
-      { order: { orderGoods } }
+      gql(
+        `
+                  mutation newOrder($order:OrderInput){
+                    OrderUpsert(order:$order)
+                      { _id total 	}
+                  }
+          `,
+        { order: { orderGoods } }
+      )
     )
   );
 };
 
-// store.dispatch(actionCartAdd({ _id: "beer" }, 1));
-// store.dispatch(actionCartAdd({ _id: "vodka" }, 1));
-// store.dispatch(actionCartChange({ _id: "beer" }, 10));
-// store.dispatch(actionCartRemove({ _id: "vodka" }));
-// console.log(store.getState());
-
 const getGQL =
   (url) =>
   async (query, variables = {}) => {
@@ -321,6 +320,98 @@ store.subscribe(() => {
   }
 });
 
+const openCart = () => {
+  const [, route] = location.hash.split("/");
+
+  if (route === "cart") {
+    main.innerHTML = "";
+    const { cart } = store.getState();
+
+    for (let good in cart) {
+      let {
+        good: {
+          _id: id,
+          name: name,
+          price: price,
+          images: [{ url }],
+        },
+        count,
+      } = cart[good];
+
+      let cardMain = document.createElement("div");
+      cardMain.id = "cardMain";
+      let goodImgBlock = document.createElement("div");
+      goodImgBlock.innerHTML = `
+      <div>
+          <img src="${backURL}/${url}" width="400" height="200"/>
+      </div>
+      `;
+      let goodInfoBlock = document.createElement("div");
+      goodInfoBlock.innerHTML = `
+      <div>
+        <h2>${name}</h2>
+        <p><strong>${price}$</strong></p>
+        <p><span>${count}</span></p>
+      </div>
+      `;
+      let goodEditBlock = document.createElement("div");
+      goodEditBlock.className = "form-outline";
+      let deleteBtn = document.createElement("button");
+      deleteBtn.innerText = "Delete";
+      deleteBtn.id = "deleteBtn";
+      deleteBtn.type = "button";
+      deleteBtn.className = "btn btn-danger";
+      goodEditBlock.appendChild(deleteBtn);
+      deleteBtn.onclick = () => {
+        store.dispatch(actionCartRemove(cart[good].good));
+      };
+
+      let countLabel = document.createElement("label");
+      countLabel.className = "form-label";
+      countLabel.htmlFor = "countField";
+      countLabel.innerText = "Change count";
+      let countField = document.createElement("input");
+      countField.type = "number";
+      countField.id = "countField";
+      countField.className = "form-control";
+      goodEditBlock.appendChild(countLabel);
+      goodEditBlock.appendChild(countField);
+
+      cardMain.appendChild(goodImgBlock);
+      cardMain.appendChild(goodInfoBlock);
+      cardMain.appendChild(goodEditBlock);
+      main.appendChild(cardMain);
+    }
+    let clearBtn = document.createElement("button");
+    clearBtn.innerText = "Clear Cart";
+    clearBtn.id = "clearBtn";
+    clearBtn.type = "button";
+    clearBtn.className = "btn btn-dark";
+
+    let makeOrder = document.createElement("button");
+    makeOrder.innerText = "Make Order";
+    makeOrder.id = "makeOrder";
+    makeOrder.type = "button";
+    makeOrder.className = "btn btn-success";
+
+    if (Object.keys(cart).length !== 0) {
+      main.appendChild(makeOrder);
+      main.appendChild(clearBtn);
+    } else {
+      main.innerHTML = `<h2>Your cart is empty!</h2>`;
+    }
+
+    makeOrder.onclick = () => {
+      store.dispatch(actionOrder());
+    };
+
+    clearBtn.onclick = () => {
+      store.dispatch(actionCartClear());
+      document.location.reload();
+    };
+  }
+};
+
 window.onhashchange = () => {
   const [, route, _id] = location.hash.split("/");
   let signOut = document.createElement("button");
@@ -368,7 +459,7 @@ window.onhashchange = () => {
       }
     },
     cart() {
-      // Сделать страницу с позициями, полями ввода количества, картинками
+      openCart();
     },
   };
   if (route in routes) routes[route]();
@@ -425,17 +516,21 @@ store.subscribe(() => {
 
 store.subscribe(() => {
   const { cart } = store.getState();
+
   let countGoods = 0;
 
   for (let good of Object.keys(cart)) {
     countGoods += cart[good].count;
   }
   cartIcon.innerText = `Товаров в корзине: ${countGoods}`;
+
+  cartIcon.onclick = () => {
+    window.location.href = "#/cart";
+  };
 });
 
 store.subscribe(() => {
   const { promise } = store.getState();
-
   const [, route, _id] = location.hash.split("/");
   if (promise?.goodById?.payload && route === "good") {
     main.innerHTML = "";