Merge pull request #10 from cleph01/jason-aviles

update

practuce.js

@@ -0,0 +1,17 @@
+ let content = [
+                {
+                    name: "Pha Ga",
+                    description: "Pha Ga description",
+                },
+                {
+                    name: "Tonkutsu 2.0",
+                    description: "Tonkutsu description",
+                },
+                {
+                    name: "Spicey Miso",
+                    description: "Spicey Miso description",
+                },
+            ]
+
+
+            console.log(content.map(info=> info.name).indexOf("Spicey Miso"))

src/App.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React,{useState} from "react";
 import Home from "./components/Home";
 
 import { useQuery } from "@apollo/react-hooks";
@@ -8,7 +8,8 @@ import { getBusinessInfo } from "./queries/queries";
 import CircularProgress from "@material-ui/core/CircularProgress";
 
 function App() {
-    function ShowApp() {
+    function ShowApp(props) {
+
         const { loading, error, data } = useQuery(getBusinessInfo, {
             variables: { businessId: 1 },
         });
@@ -17,7 +18,7 @@ function App() {
 
         if (error) return <p>Error ... {error}</p>;
 
-        return <Home businessData={data.getBusinessInfo} />;
+        return <Home  businessData={data.getBusinessInfo} />;
     }
 
     return <>{ShowApp()}</>;

src/components/Home.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React,{useState} from "react";
 
 //Start Components
 import Header from "./Header";
@@ -14,6 +14,8 @@ const Container = styled.div`
     background: #ededed;
 `;
 
+
+
 const Home = (props) => {
     //Save menuItems from Props to Variable
     let menuItems = props.businessData.menuItems;
@@ -26,8 +28,11 @@ const Home = (props) => {
     //Array to Hold Product Object List
     let productObj_array = [];
 
+
+
+
     // Loops Menu Items and adds category to array
-    for (let i = 0; i < menuItems.length; i++) {
+     for (let i = 0; i < menuItems.length; i++) {
         if (!category_array.includes(menuItems[i].category)) {
             category_array.push(menuItems[i].category);
         }
@@ -56,15 +61,14 @@ const Home = (props) => {
         productObj_array.push(temp_object);
     }
 
-    console.log(productObj_array, "Product Object Array");
 
-    return (
+    return menuItems.length > 0 && (
         <>
             <Container>
                 <Header businessData={businessData} />
-                <ShoppingCart />
+
                 <Message />
-                <Products productData={productObj_array} />
+                <Products productData={productObj_array}  />
                 <Footer businessData={businessData} />
             </Container>
         </>

src/components/Products.js

@@ -1,11 +1,12 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import arrow from "./img/Arrow.png";
 import { connect } from "react-redux";
-
+import ShoppingCart from "./ShoppingCart";
 import styled from "styled-components";
 import ArrowRightIcon from "@material-ui/icons/ArrowRight";
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import "./color.css";
+import { isElementOfType } from "react-dom/test-utils";
 const Container = styled.div`
   margin: 20px 20px;
   padding: 20px;
@@ -94,51 +95,121 @@ const Container = styled.div`
 /// if item catory eqaul item cataogory in map toggle
 
 const Products = (props) => {
-  const [pop, setPop]= useState(false)
-  console.log(props, "ll");
+  const [pop, setPop] = useState(false);
+  const [cart, setCart] = useState([]);
+
+  const [detailProducts, setDetailProducts] = useState([]);
+
+  useEffect(
+    () => setDetailProducts(props.productData.map((info) => info.content)),
+    []
+  );
+
+  const getItem = (name) => {
+    const product = props.productData.map((info) =>
+      info.content.find((item) => item.name === name)
+    );
+    return product;
+  };
+
+  const handleDetail = (name) => {
+    const product = getItem(name);
+    return setDetailProducts(product);
+  };
+
+  const addToCart = (name, main) => {
+    let tempProducts = [...detailProducts];
+    const index = tempProducts
+      .map((item) => item.map((info) => info.name).indexOf(name))
+      .filter((i) => i > -1)[0];
+    const index2 = props.productData.map((info) => info.category).indexOf(main);
+    //  const index =index2.indexOf( "KFC") ;
+    const product = tempProducts[Number(index2)][Number(index)];
+
+    setDetailProducts(tempProducts);
+    return setCart([...cart, product]);
+
+    //  ;
+    //
+  };
+  console.log(cart, "jj");
   return (
     <div className="nav">
       <div class="multi-level">
-        {props.products.map((info) => (
+        {props.productData.map((info) => (
           <div className="item">
             <input
               type="checkbox"
               style={{ color: "black !important" }}
               id={info.category}
             />
             <img src={arrow} class="arrow" />
-            <label htmlFor={info.category}>{info.category}</label>
+            <label
+              onClick={() => localStorage.setItem("main", info.category)}
+              htmlFor={info.category}
+            >
+              {info.category}
+            </label>
             <ul className="product__list">
               <li>
                 <a href="#">
                   {info.content.map((data) => (
-                    <div onClick={()=>{localStorage.setItem('title', data.name);localStorage.setItem('price', data.price);setPop(true)}} className="product__item">
-                    <div className="product__box">
-
-                      <h3 className="product__item--des">{data.name}</h3>
-                      <h5>{data.description}</h5>
-                      <h6>price</h6></div>
-                      <img className="product__img" alt="jj" src="https://images.all-free-download.com/images/graphicthumb/food_picture_01_hd_pictures_167558.jpg"/>
-
-
+                    <div
+                      onClick={() => {
+                        localStorage.setItem("title", data.name);
+                        localStorage.setItem("price", data.price);
+                        setPop(true);
+                      }}
+                      className="product__item"
+                    >
+                      <div className="product__box">
+                        <h3 className="product__item--des">{data.name}</h3>
+                        <h5>{data.description}</h5>
+                        <h6>{data.price}</h6>
+                      </div>
+                      <img
+                        className="product__img"
+                        alt="jj"
+                        src="https://images.all-free-download.com/images/graphicthumb/food_picture_01_hd_pictures_167558.jpg"
+                      />
                     </div>
                   ))}
                 </a>
               </li>
             </ul>
           </div>
         ))}
-      </div>    <div className={ pop ? "popup " :"u-display-none"}>
-      <div className="popup_box">
-
-              <h1 className="popup_box__title">
-{localStorage.getItem('title')} <span onClick={()=>{ setPop(false)} } className="close">+</span>
-              </h1>
-<img src={localStorage.getItem('img')} alt="img"/>
-            Price: <h4 className="popup_box__title">
-{localStorage.getItem('price')}
-              </h4>
-                      </div></div>
+        <ShoppingCart cart={cart} />
+      </div>{" "}
+      <div className={pop ? "popup " : "u-display-none"}>
+        <div className="popup_box">
+          <h1 className="popup_box__title">
+            {localStorage.getItem("title")}{" "}
+            <span
+              onClick={() => {
+                setPop(false);
+              }}
+              className="close"
+            >
+              +
+            </span>
+          </h1>
+          <img src={localStorage.getItem("img")} alt="img" />
+          Price:{" "}
+          <h4
+
+            className="popup_box__title"
+          >
+            {localStorage.getItem("price")}
+          </h4>    <button className="cart-btn"   onClick={() => {
+              addToCart(
+                localStorage.getItem("title"),
+                localStorage.getItem("main")
+              );
+            }}>Add to cart</button>
+        </div>
+
+      </div>
     </div>
   );
 };

src/components/ShoppingCart.js

@@ -1,40 +1,84 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
 
 const Container = styled.div`
-    margin: 0px 20px;
-    border-radius: 5px;
+  margin: 0px 20px;
+  border-radius: 5px;
 `;
 
 const Header = styled.div`
-    padding: 20px;
-    background-color:#445a82;
-    color:#fff;
+  padding: 20px;
+  background-color: #445a82;
+  color: #fff;
 `;
 
 const Cart = styled.div`
-    padding:20px;    
-    text-align:center;
-    background-color:#fff;
-
+  padding: 20px;
+  text-align: center;
+  background-color: #fff;
 `;
 
+const ShoppingCart = (props) => {
+  const maxChar = (str) => {
+    let array = str.map((info) => info);
+    let charMap = {};
+
+    console.log(array, "kknnk");
+    for (let char of str) {
+      if (charMap[char]) {
+        charMap[char]++;
+      } else {
+        charMap[char] = 1;
+      }
+    }
+    let ster = [];
+    for (const [key, value] of Object.entries(charMap)) {
+      ster.push({ item: key, quantity: value });
+    }
+    return ster;
+  };
+
+  const cartData = props.cart.map((item) => item.name);
+
+  const [filterCart, setFilterCart] = useState([]);
 
-const ShoppingCart = () => {
+  useEffect(() => setFilterCart(maxChar(cartData)), []);
+  const cartArray = maxChar(cartData);
 
-    const [ items, setItems ] = useState([]);
+  console.log(cartArray, "hhhee");
+  const getCartTotal = () => {
+    return props.cart
+      .reduce((acc, value) => {
+        return acc + value.price;
+      }, 0)
+      .toFixed(2);
+  };
 
-    return (
-        <Container>
-            <Header>
-                <div>Pick up</div>
-                <div>Ready for pick up: 20 - 40m</div>
-            </Header>
-            <Cart>
-                {items.length == 0 ? 'Your bag is empty' : 'Your bag is NOT empty'}
-            </Cart>
-        </Container>
-    );
+  const [items, setItems] = useState([]);
+  console.log(cartArray.map((i) => i.quantity), "shoppingcart");
+  return (
+    <Container>
+      <Header>
+        <div>Pick up</div>
+        <div>Ready for pick up: 20 - 40m</div>
+      </Header>
+      <Cart>
+        {props.cart.length == 0 ? (
+          <h1>Your bag is empty</h1>
+        ) : (
+          <div>
+            {cartArray.map((i, index) => (
+              <div key={index}>
+                <h1>item: {i.item}</h1> <h2>quantity: {i.quantity}</h2>{" "}
+              </div>
+            ))}
+            <br />
+            Total: {getCartTotal()}
+          </div>
+        )}
+      </Cart>
+    </Container>
+  );
 };
 
-export default ShoppingCart;
+export default ShoppingCart;

src/components/color.css

@@ -182,4 +182,17 @@ display: none !important;
   font-weight: 300;
   transform: rotate(-136deg);
   cursor: pointer;
+}
+
+
+.cart-btn{
+color:rgb(41, 41, 29);
+  border: 1px solid rgb(207, 153, 109);
+  background-color: transparent;
+  padding: .5rem 1rem;
+}
+
+.cart-btn:hover{
+  color:rgb(148, 148, 44);
+  border: 1px solid rgb(148, 148, 44);
 }