Feat Increment Decrement Delete

Author: devjinius

src/components/App.js

@@ -1,5 +1,6 @@
 import React, { useReducer } from 'react';
 import styled from 'styled-components';
+import { makeId } from 'simple-util-js';
 
 import CartInput from './CartInput';
 import CartShow from './CartShow';
@@ -10,7 +11,7 @@ const reducer = (state, { type, payload }) => {
   switch (type) {
     case 'INCREMENT':
       return state.map(item => {
-        if (item.id === payload.id) {
+        if (item.id === payload) {
           item.quantity = item.quantity + 1;
           return item;
         }
@@ -19,8 +20,8 @@ const reducer = (state, { type, payload }) => {
       });
     case 'DECREMENT':
       return state.map(item => {
-        if (item.id === payload.id) {
-          item.quantity = item.quantity - 1;
+        if (item.id === payload) {
+          item.quantity = item.quantity <= 0 ? 0 : item.quantity - 1;
           return item;
         }
 
@@ -30,9 +31,11 @@ const reducer = (state, { type, payload }) => {
       return [
         state,
         {
-          payload
+          ...payload
         }
       ];
+    case 'DELETE':
+      return state.filter(item => item.id !== payload);
     default:
       throw new Error();
   }
@@ -41,13 +44,13 @@ const reducer = (state, { type, payload }) => {
 const App = () => {
   const [carts, dispatch] = useReducer(reducer, [
     {
-      id: 'test',
+      id: makeId(),
       name: 'test',
       price: 10,
       quantity: 10
     },
     {
-      id: 'test2',
+      id: makeId(),
       name: 'test2',
       price: 100,
       quantity: 4
@@ -56,7 +59,7 @@ const App = () => {
   return (
     <Wrapper>
       <CartInput dispatch={dispatch}></CartInput>
-      <CartShow carts={carts}></CartShow>
+      <CartShow carts={carts} dispatch={dispatch}></CartShow>
     </Wrapper>
   );
 };

src/components/Cart.js

@@ -3,13 +3,13 @@ import styled from 'styled-components';
 
 const Item = styled.div``;
 
-const Cart = ({ id, name, price, quantity }) => {
+const Cart = ({ id, name, price, quantity, onIncrement, onDecrement, onDelete }) => {
   return (
     <Item>
       {name} ({price}) : {quantity}
-      <button>+1</button>
-      <button>-1</button>
-      <button>삭제</button>
+      <button onClick={() => onIncrement(id)}>+1</button>
+      <button onClick={() => onDecrement(id)}>-1</button>
+      <button onClick={() => onDelete(id)}>삭제</button>
     </Item>
   );
 };

src/components/CartList.js

@@ -1,9 +1,22 @@
 import React from 'react';
 import Cart from './Cart';
 
-const getCartComp = carts => carts.map(cart => <Cart {...cart}></Cart>);
+const CartList = ({ carts, dispatch }) => {
+  const onIncrement = id => dispatch({ type: 'INCREMENT', payload: id });
+  const onDecrement = id => dispatch({ type: 'DECREMENT', payload: id });
+  const onDelete = id => dispatch({ type: 'DELETE', payload: id });
+
+  const getCartComp = carts =>
+    carts.map(cart => (
+      <Cart
+        key={cart.id}
+        {...cart}
+        onIncrement={onIncrement}
+        onDecrement={onDecrement}
+        onDelete={onDelete}
+      />
+    ));
 
-const CartList = ({ carts }) => {
   return <div>{getCartComp(carts)}</div>;
 };
 

src/components/CartShow.js

@@ -4,10 +4,10 @@ import TotalCart from './TotalCart';
 
 const getTotal = carts => carts.reduce((acc, cur) => (acc += cur.price * cur.quantity), 0);
 
-const CartShow = ({ carts }) => {
+const CartShow = ({ carts, dispatch }) => {
   return (
     <>
-      <CartList carts={carts}></CartList>
+      <CartList carts={carts} dispatch={dispatch}></CartList>
       <hr />
       <TotalCart total={getTotal(carts)}></TotalCart>
     </>