Skip to content
Snippets Groups Projects
Select Git revision
  • d3ab5dad5ed7438d9d59fa4e113778be8bec6e3b
  • master default
2 results

utils.h

Blame
  • Forked from sce213ta / mysh-1
    Source project has a limited visibility.
    App.js 8.13 KiB
    import React, { useState, useEffect } from 'react';
    import './assets/css/app.css';
    
    const App = (props) => {
      let [cartItems, setCartItems] = useState({});
      let [showProduct, setShowProduct] = useState(true);
      let [order, setOrder] = useState({ firstName: '', lastName: '', state: 'CA', address: '' });
      let [products, setProducts] = useState([]);
    
      let states = ['AL', 'AR', 'CA', 'NV', 'NY', 'FL'];
    
    
    
    
    
    
      const nameOrder = (p, q) => {
        let [pLow, qLow] = [p.title.toLowerCase(), q.title.toLowerCase()]
        if (pLow > qLow) {
          return 1;
        }
        else if (pLow == qLow) {
          return 0;
        }
        else {
          return -1;
        }
      }
    
    
      const formatPrice = (price) => {
        if (!parseInt(price)) { return ""; }
        if (price > 99999) {
          var priceString = (price / 100).toFixed(2);
          var priceArray = priceString.split("").reverse();
          var index = 3;
          while (priceArray.length > index + 3) {
            priceArray.splice(index + 3, 0, ",");
            index += 4;
          }
          return "$" + priceArray.reverse().join("");
        } else {
          return "$" + (price / 100).toFixed(2);
        }
      }
    
      useEffect(() => {
        fetch('./products.json')
          .then((r) => r.json())
          .then(data => {
            setProducts([...data.products]);
            // console.log(products);
          })
      }, [])
    
    
      // useEffect(() => {
      //   console.log(products);
      // }, [products]);
    
    
      const addToShoppingCart = (product) => {
        const updatedCartItems = { ...cartItems };
        if (updatedCartItems[product.id]) {
          updatedCartItems[product.id] += 1;
        } else {
          updatedCartItems[product.id] = 1;
        }
        setCartItems(updatedCartItems);
      }
    
      const canAddToCart = (product) => {
        // console.log("canAddToCart:" + product.availableInventory)
        let produtNum=0;
        if (cartItems[product.id]) {
          produtNum= cartItems[product.id];
        } 
        return product.availableInventory > produtNum
      }
    
      const updateOrder = (event) => {
        let control = event.target;
        if (control.name == "gift") {
          setOrder({ ...order, gift: control.checked });
          return;
        }
        setOrder({ ...order, [control.name]: control.value });
      }
      const checkRating = (n, product) => {
        return product.rating - n >= 0;
      }
    
    
      const allProductsNum = ()=>{
        let sum=0
        Object.keys(cartItems).forEach((key) => {
          sum+=cartItems[key]
        });
        return sum;
      }
    
    
    
      return (
        <>
          <header>
            <div className="navbar navbar-default">
              <div className="navbar-header">
                <h1>
                  {props.sitename}
                </h1>
              </div>
              <div className="nav navbar-nav navbar-right cart">
                <button type="button" className="btn btn-default btn-lg"
                  onClick={() => setShowProduct(!showProduct)} >
                  <span className="glyphicon glyphicon-shopping-cart">
                    {allProductsNum() || ''}
                  </span>
                  체크아웃
                </button>
              </div>
            </div>
          </header>
          <main>
            <div className="row product">
              {showProduct && products &&
                products.sort(nameOrder).map(product => {
                  
                  let numProductsInCart = cartItems[product.id];
                  if (!numProductsInCart)numProductsInCart=0
                  return (
                    <div className="row product">
                      <div className="col-md-4 col-md-offset-0">
                        <figure>
                          <img className="product" src={product.image} />
                        </figure>
                      </div>
    
                      <div className="col-md-6 col-md-offset-2 description">
                        <h1> {product.title} </h1>
                        <p> {product.description} </p>
                        <p className="price"> {formatPrice(product.price)} </p>
                        {canAddToCart(product) &&
                          <button className="btn btn-primary btn-lg"
                            onClick={() => addToShoppingCart(product)}> 장바구니 담기
                          </button>
                        }
                        <span className="inventory-message">
                          {/* {(product.availableInventory == numProductsInCart && `품절!(Sold out)`) ||
                            (numProductsInCart == 0 && `지금 구매하세요.`) ||
                            (product.availableInventory > numProductsInCart && numProductsInCart > 0 &&
                              `${product.availableInventory - numProductsInCart} 남았습니다.`)} */}
    
                          {product.availableInventory == numProductsInCart && `품절!(Sold out)`}
                              {numProductsInCart == 0 && `지금 구매하세요.`}
                            {product.availableInventory > numProductsInCart && numProductsInCart > 0 &&
                              `${product.availableInventory - numProductsInCart} 남았습니다.`}
                        </span>
    
                        <div className="rating">
                          {[1, 2, 3, 4, 5].map((i) => {
                            return <span className={checkRating(i, product) ? "rating-active" : ""}>☆</span>
                          })}
                        </div>
                      </div>
    
                    </div>
                  )
                })}
    
              {!showProduct && /* Checkout 페이지 들어갈 자리 */
                <div>
                  <div className="col-md-6">
                    <strong>이름</strong>
                    <input className="form-control" name="firstName" value={order.firstName} onChange={updateOrder} />
                  </div>
                  <div className="col-md-6">
                    <strong>성</strong>
                    <input className="form-control" name="lastName" value={order.lastName} onChange={updateOrder} />
                  </div>
    
                  <div className="form-group">
                    <div className="col-md-12"> <strong>주소:</strong></div>
                    <div className="col-md-12">
                      <input className="form-control" name="address" value={order.address} onChange={updateOrder} />
                    </div>
                  </div>
    
                  <div className="form-group">
                    <div className="col-md-12"> <strong>주:</strong>
                      <select className="form-control" name="state" value={order.state} onChange={updateOrder}>
                        {states.map((st) => <option value={st}> {st}</option>)}
                      </select>
                    </div>
                  </div>
    
                  <div className="form-group">
                    <div className="col-md-6 boxes">
                      <input type="checkbox" name="gift" id="gift" value={true} onChange={updateOrder} />
                      <label htmlFor="gift">선물로 보내기?</label>
                    </div>
                  </div>
    
                  <div className="form-group">
                    <div className="col-md-9 boxes">
                      <div className="col-md-3">
                        <input key="radio-1" type="radio" name="method" id="home" value="자택" defaultChecked={true} onChange={updateOrder} />
                        <label htmlFor="home">자택</label>
                      </div>
                      <div className="col-md-3">
                        <input key="radio-2" type="radio" name="method" id="business" value="직장" onChange={updateOrder} />
                        <label htmlFor="business">직장</label>
                      </div>
                    </div>
                  </div>
    
                  <div className="form-group">
                    <div className="col-md-12">
                      <input type="submit" name="submit" className="btn btn-lg btn-primary submit"
                        onClick={() => { alert("제출완료") }} />
                    </div>
                  </div>
    
                  <div className="col-md-12 verify">
                    <pre>
                      이름 : {order.firstName}
                      <br />
                      성 : {order.lastName}
                      <br />
                      주소 : {order.address}
                      <br />
                      주 : {order.state}
                      <br />
                      배송지: {order.method}
                      <br />
                      선물 : {order.gift ? "선물" : "선물아님"}
                    </pre>
                  </div>
                </div>
              }
            </div>
          </main>
        </>
      );
    }
    
    export default App;