Video-18-Cart-Screen-Actions (basir#18)

Author: basir

frontend/src/srceens/CartScreen.js

@@ -1,22 +1,53 @@
-import { parseRequestUrl } from '../utils';
+/* eslint-disable no-use-before-define */
+import { parseRequestUrl, rerender } from '../utils';
 import { getProduct } from '../api';
 import { getCartItems, setCartItems } from '../localStorage';
 
 const addToCart = (item, forceUpdate = false) => {
  let cartItems = getCartItems();
  const existItem = cartItems.find((x) => x.product === item.product);
  if (existItem) {
- cartItems = cartItems.map((x) =>
- x.product === existItem.product ? item : x
- );
+ if (forceUpdate) {
+ cartItems = cartItems.map((x) =>
+ x.product === existItem.product ? item : x
+ );
+ }
  } else {
  cartItems = [...cartItems, item];
  }
  setCartItems(cartItems);
+ if (forceUpdate) {
+ rerender(CartScreen);
+ }
+};
+const removeFromCart = (id) => {
+ setCartItems(getCartItems().filter((x) => x.product !== id));
+ if (id === parseRequestUrl().id) {
+ document.location.hash = '/cart';
+ } else {
+ rerender(CartScreen);
+ }
 };
 
 const CartScreen = {
- after_render: () => {},
+ after_render: () => {
+ const qtySelects = document.getElementsByClassName('qty-select');
+ Array.from(qtySelects).forEach((qtySelect) => {
+ qtySelect.addEventListener('change', (e) => {
+ const item = getCartItems().find((x) => x.product === qtySelect.id);
+ addToCart({ ...item, qty: Number(e.target.value) }, true);
+ });
+ });
+ const deleteButtons = document.getElementsByClassName('delete-button');
+ Array.from(deleteButtons).forEach((deleteButton) => {
+ deleteButton.addEventListener('click', () => {
+ removeFromCart(deleteButton.id);
+ });
+ });
+ document.getElementById('checkout-button').addEventListener('click', () => {
+ document.location.hash = '/signin';
+ });
+ },
  render: async () => {
  const request = parseRequestUrl();
  if (request.id) {
@@ -58,9 +89,16 @@ const CartScreen = {
  <div>
  Qty: 
  <select class="qty-select" id="${item.product}">
- <option value="1">1</option>
+ ${[...Array(item.countInStock).keys()].map((x) =>
+ item.qty === x + 1
+ ? `<option selected value="${x + 1}">${x + 1}</option>`
+ : `<option value="${x + 1}">${x + 1}</option>`
+ )} 
+
  </select>
- <button type="button" class="delete-button" id="${item.product}">
+ <button type="button" class="delete-button" id="${
+ item.product
+ }">
  Delete
  </button>
  </div>

frontend/src/utils.js

@@ -7,3 +7,9 @@ export const parseRequestUrl = () => {
  action: request[3],
  };
 };
+export const rerender = async (component) => {
+ document.getElementById(
+ 'main-container'
+ ).innerHTML = await component.render();
+ await component.after_render();
+};