[TIL/React] 2023/10/10

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import styled from "styled-components";
import { calElemTotalPrice } from "../../modules/cartSlice";
import { shoppingData } from "../../data/ShoppingCategory_Pork";
import { useLocation } from "react-router-dom";
import { useParams } from "react-router-dom";
import { splitPrice } from "../../utils/commonModule";

const CounterContainer = styled.div`
  display: flex;
  align-items: center;
`;

const Button = styled.button`
  padding: 10px 20px;
  font-size: 1.5em;
`;

const Display = styled.div`
  padding: 10px;
  font-size: 1.5em;
  margin: 0 20px;
`;

const Counter = () => {
  const [count, setCount] = useState(1);
  const { id } = useParams();
  const dispatch = useDispatch();
  const location = useLocation();
  const category = location?.state;
  const MapData = shoppingData[category];
  const DetailData = MapData?.find((elem) => elem?.id === id);
  const purePrice = splitPrice(DetailData?.price);

  const elemTotalPrice = purePrice * (count + 1);

  const updateCount = (st) => {
    dispatch(calElemTotalPrice(st));
  };

  const handleIncrement = () => {
    setCount((prevCount) => prevCount + 1);
  };

  const handleDecrement = () => {
    if (count > 1) {
      setCount((prevCount) => prevCount - 1);
    }
  };

  return (
    <CounterContainer>
      <Button
        onClick={() => {
          updateCount(elemTotalPrice);
          handleDecrement();
        }}
      >
        -
      </Button>
      <Display>{count}</Display>
      <Button
        onClick={() => {
          updateCount(elemTotalPrice);
          handleIncrement();
        }}
      >
        +
      </Button>
    </CounterContainer>
  );
};

export default Counter;