nhoangkiet35 · nhoangkiet35 · Jul 1, 2023 · Jul 1, 2023
diff --git a/src/App.js b/src/App.js
@@ -13,6 +13,8 @@ import CheckoutPage from "./pages/CheckoutPage";
 import LoginPage from "./pages/LoginPage";
 import RegisterPage from "./pages/RegisterPage";
 
+// Lazy routes are resolved on initial load and during the loading or submitting
+// Each lazy function will typically return the result of a dynamic import.
 const HomePage = lazy(() => import("./pages/HomePage"));
 const ShopPage = lazy(() => import("./pages/ShopPage"));
 const DetailPage = lazy(() => import("./pages/DetailPage"));

diff --git a/src/components/ChatBox/ChatBox.js b/src/components/ChatBox/ChatBox.js
@@ -9,7 +9,7 @@ const ChatBox = () => {
         const backdrop = document.querySelector("#backdrop");
 
         function onChangeInput(e) {
-            if (e.key === "Enter" && !e.shiftKey) {
+            if (e.key === "Enter") {
                 e.preventDefault();
                 console.log(e.target.value);
             }

diff --git a/src/components/Products/Categories/Categories.js b/src/components/Products/Categories/Categories.js
@@ -53,7 +53,8 @@ const Categories = () => {
     let content = isData;
     // search items based on input
     const searchItemsHandler = (event) => {
-        if (event.key === "Enter") navigated(`?search=${enteredSearch}`);
+        if (event.key === "Enter" || event.charCode === 13)
+            navigated(`?search=${enteredSearch}`);
     };
 
     if (searchId) {
@@ -105,7 +106,7 @@ const Categories = () => {
                     aria-label="Enter Search Here!"
                     className="py-2"
                     onChange={(e) => setEnteredSearch(e.target.value)}
-                    onKeyDown={searchItemsHandler}
+                    onKeyPress={searchItemsHandler}
                 />
             </InputGroup>
             <Form.Select className={classes.select}>

diff --git a/src/components/Products/Details/ProductDetail.js b/src/components/Products/Details/ProductDetail.js
@@ -1,5 +1,5 @@
 import React, { Fragment, useContext, useEffect, useState } from "react";
-import { useLoaderData } from "react-router-dom";
+import { useLoaderData, useParams } from "react-router-dom";
 import { useDispatch } from "react-redux";
 import RelatedContext from "../../../context/related-product";
 import Row from "react-bootstrap/Row";
@@ -61,6 +61,7 @@ const Description = ({ orderList, related }) => (
 
 const ProductDetail = () => {
     const [data] = useLoaderData();
+    const { productId } = useParams();
     // localStorage.removeItem("cartArr");
 
     const [clickImage, setClickImage] = useState();
@@ -72,7 +73,7 @@ const ProductDetail = () => {
     let content;
     useEffect(() => {
         window.scrollTo(0, 0);
-    }, []);
+    }, [productId]);
     // localStorage.clear();
 
     // Not Founded Product Id.
@@ -84,8 +85,11 @@ const ProductDetail = () => {
                 Not Founded Product Id.
             </h1>
         );
+
+    // transform type if data available
     const detail = transformData(data);
 
+    // save to local storage
     const addToCartHandler = () => {
         toast("🦄 Wow so easy!");
         const addAmountObject = {
@@ -96,19 +100,22 @@ const ProductDetail = () => {
         dispatch({ type: "ADD_CART", item: addAmountObject });
     };
 
-    const minusHandler = () => setEnteredAmount(enteredAmount - 1);
+    const minusHandler = () => {
+        if (enteredAmount > 1) {
+            setEnteredAmount(enteredAmount - 1);
+        } else {
+            return;
+        }
+    };
     const addHandler = () => setEnteredAmount(enteredAmount + 1);
 
-    console.log(detail);
-
     if (detail) {
         const orderList = detail.short_desc.split(".");
         content = (
             <Fragment>
                 <ToastContainer autoClose={2000} />
                 <div className={`${classes.showcase} gap-4 py-4`}>
-                    <div
-                        className={`position-absolute d-flex flex-column gap-2`}>
+                    <div className={`d-flex flex-row flex-md-column gap-2`}>
                         {detail.img.map((item) => (
                             <div className={classes.wrapper}>
                                 <img
@@ -119,7 +126,7 @@ const ProductDetail = () => {
                             </div>
                         ))}
                     </div>
-                    <div>
+                    <div className="">
                         <img src={clickImage ?? detail.img} alt="img" />
                     </div>
                     <div className="pb-4 fst-italic position-relative">

diff --git a/src/components/Products/Details/ProductDetail.module.scss b/src/components/Products/Details/ProductDetail.module.scss
@@ -2,8 +2,10 @@
 
 .showcase {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    :last-child {
+    > :nth-child(2) {
+        order: -1;
+    }
+    > :last-child {
         > :nth-child(3) {
             height: 15rem;
             // padding: 0.5rem;
@@ -66,13 +68,11 @@
     }
 }
 
-@media (max-width: 768px) {
-    .quantity {
-        button {
-            width: 100%;
-        }
-        .buttonQuantity {
-            right: 0rem;
+@media (min-width: 768px) {
+    .showcase {
+        grid-template-columns: repeat(3, auto);
+        > :nth-child(2) {
+            order: 0;
         }
     }
 }
diff --git a/src/components/Products/PopUp/PopUpDetail.js b/src/components/Products/PopUp/PopUpDetail.js
@@ -16,14 +16,14 @@ const PopUpDetail = () => {
             <div>
                 <img src={isInfo.img[0]} alt="img" />
             </div>
-            <div className="py-4 fst-italic position-relative">
+            <div className="py-md-4 py-0 fst-italic">
                 <i
-                    className="bi bi-x position-absolute top-0 end-0"
+                    className="bi bi-x-lg position-absolute top-0 end-0 m-3 px-2"
                     style={{ cursor: "pointer" }}
                     onClick={hidePopUpHandler}></i>
                 <h1 className="ms-2">{isInfo.name}</h1>
                 <p className="ms-2">{isInfo.price}</p>
-                <p className="ms-2">{isInfo.long_desc}</p>
+                <p className="ms-2 d-none d-md-block">{isInfo.long_desc}</p>
                 <Link to={"/shop"} onClick={hidePopUpHandler}>
                     <button className="bg-black text-white py-2 px-4 mt-2 fst-italic">
                         <i className="bi bi-cart-check-fill pe-2"></i> Browse

diff --git a/src/components/Products/PopUp/PopUpDetail.module.scss b/src/components/Products/PopUp/PopUpDetail.module.scss
@@ -1,16 +1,6 @@
 .showcase {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
 
-    :last-child {
-        > :nth-child(4) {
-            height: 15rem;
-            padding: 0.5rem;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            // background-color: gray;
-        }
-    }
     img {
         width: 100%;
     }
@@ -23,3 +13,18 @@
         font-size: x-large;
     }
 }
+
+@media (min-width: 768px) {
+    .showcase {
+        grid-template-columns: repeat(2, 1fr);
+        :last-child {
+            > :nth-child(4) {
+                height: 15rem;
+                padding: 0.5rem;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                // background-color: gray;
+            }
+        }
+    }
+}
diff --git a/src/components/UI/Modal.module.scss b/src/components/UI/Modal.module.scss
@@ -10,9 +10,9 @@
 
 .modal {
     position: fixed;
-    top: 10vh;
-    left: 15%;
-    width: 70%;
+    top: 5vh;
+    left: 5%;
+    width: 90%;
     background-color: white;
     padding: 1rem;
     border-radius: 14px;
@@ -31,3 +31,11 @@
         transform: translateY(0);
     }
 }
+
+@media (min-width: 768px) {
+    .modal {
+        top: 10vh;
+        left: 15%;
+        width: 70%;
+    }
+}
diff --git a/src/context/RelatedProductProvider.js b/src/context/RelatedProductProvider.js
@@ -46,9 +46,7 @@ const RelatedProductProvider = ({ children }) => {
 
     const relatedContext = {
         items: relatedState.items,
-        totalQuantity: 0,
         addItem: addItemToRelatedHandler,
-        removeItem: "",
     };
 
     return (

diff --git a/src/context/related-product.js b/src/context/related-product.js
@@ -4,7 +4,6 @@ const RelatedProductContext = React.createContext({
     items: [],
     totalQuantity: 0,
     addItem: (item) => {},
-    removeItem: (id) => {},
 });
 
 export default RelatedProductContext;
diff --git a/src/store/index.js b/src/store/index.js
@@ -71,19 +71,23 @@ const useGlobalReducer = (state = initialState, action) => {
         const userArr =
             JSON.parse(localStorage.getItem("userArr")) ?? state.userArr;
 
+        // find the user exists
         const existingUserIndex = userArr.findIndex(
             (user) =>
                 user.email === action.user.email &&
                 user.password === action.user.password
         );
+        // take user data from array
         const existingUser = userArr[existingUserIndex];
 
         if (existingUser) {
+            // save existing user current
             localStorage.setItem("currentUser", JSON.stringify(existingUser));
             // localStorage.setItem("token", generateString(12));
             const expiration = new Date();
             expiration.setHours(expiration.getHours() + 1);
             localStorage.setItem("expiration", expiration.toISOString());
+            // authentication
             return { ...state, isAuthenticated: true };
         } else {
             alert("Please enter a new email & password");
@@ -101,19 +105,19 @@ const useGlobalReducer = (state = initialState, action) => {
         console.log(action.type);
         const cart = JSON.parse(localStorage.getItem("cartArr")) ?? state.cart;
 
-        // transform price to number
-        const price = action.item.price.slice(0, -3).trim().split(".").join("");
-        // total amount of price is
-        const updatedTotalAmount =
-            cart.totalAmount + price * action.item.amount;
-
         const existingCartItemIndex = cart.listCart.findIndex(
             (item) => item._id.$oid === action.item._id.$oid
         );
 
         const existingCartItem = cart.listCart[existingCartItemIndex];
         let updatedItems;
 
+        // transform price to number
+        const price = action.item.price.slice(0, -3).trim().split(".").join("");
+        // total amount of price is
+        const updatedTotalAmount =
+            cart.totalAmount + price * action.item.amount;
+
         if (existingCartItem) {
             // updated quantity
             const updatedItem = {
@@ -209,6 +213,7 @@ const useGlobalReducer = (state = initialState, action) => {
         console.log(action.type);
         const cart = JSON.parse(localStorage.getItem("cartArr")) ?? state.cart;
 
+        // find the item in the cart
         const existingCartItemIndex = cart.listCart.findIndex(
             (item) => item._id.$oid === action.item.id
         );

diff --git a/src/utils/auth.js b/src/utils/auth.js
@@ -25,11 +25,14 @@ export function getAuthToken() {
     return token;
 }
 
+// check token validity existing token
+// take data while rendering page
 export function tokenLoader() {
     const token = getAuthToken();
     return token;
 }
 
+// check into switch page if you are logged in
 export function checkAuthLoader() {
     const token = getAuthToken();
 

diff --git a/src/utils/cart.js b/src/utils/cart.js
@@ -6,6 +6,7 @@ export function getCartToken() {
     return token;
 }
 
+// take data while rendering page
 export function cartLoader() {
     const cart = getCartToken();
     return cart;