Add support for removal of pizzas.

ihsw · Feb 19, 2018 · 0799df0 · 0799df0
1 parent 1526185
commit 0799df0
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 7 deletions.
diff --git a/src/actions/index.ts b/src/actions/index.ts
@@ -7,7 +7,8 @@ import {
     SELECT_PIZZA_SIZE,
     INCREMENT_TOPPING_QUANTITY,
     DECREMENT_TOPPING_QUANTITY,
-    ADD_PIZZA
+    ADD_PIZZA,
+    REMOVE_PIZZA
 } from '../constants';
 import { GetPizzaSizesData, PizzaSize, SelectedPizza } from '../types';
 
@@ -93,8 +94,21 @@ export const addPizza = (pizza: SelectedPizza): AddPizza => {
     };
 };
 
+export interface RemovePizza {
+    type: REMOVE_PIZZA;
+    index: number;
+}
+
+export const removePizza = (index: number): RemovePizza => {
+    return {
+        type: REMOVE_PIZZA,
+        index
+    };
+};
+
 export type PizzaSizeAction = FetchPizzaSize
     | SelectPizzaSize
     | IncrementToppingQuantity
     | DecrementToppingQuantity
-    | AddPizza;
+    | AddPizza
+    | RemovePizza;
diff --git a/src/components/Cart.tsx b/src/components/Cart.tsx
@@ -8,6 +8,7 @@ export interface StateProps {
 }
 
 export interface DispatchProps {
+    removePizza: (index: number) => void;
 }
 
 export interface OwnProps {
@@ -18,7 +19,9 @@ type Props = StateProps & DispatchProps & OwnProps;
 export class Cart extends React.Component<Props> {
     renderTopping(topping: SelectedPizzaTopping, i: number) {
         return (
-            <li key={i}>{topping.topping.name} x{topping.quantity}</li>
+            <li key={i}>
+                {topping.topping.name} x{topping.quantity}
+            </li>
         );
     }
 
@@ -28,6 +31,7 @@ export class Cart extends React.Component<Props> {
                 key={i}
             >
                 Size: {pizza.size.name} (${totalizePizza(pizza).toFixed(2)})
+                <button type="button" onClick={() => this.props.removePizza(i)}>Remove</button>
                 <ul>
                     {pizza.toppings.map((topping, toppingIndex) => this.renderTopping(topping, toppingIndex))}
                 </ul>
@@ -36,7 +40,7 @@ export class Cart extends React.Component<Props> {
     }
 
     renderPizzas(pizzas?: SelectedPizza[] | null) {
-        if (!pizzas) {
+        if (typeof pizzas === 'undefined' || pizzas === null || pizzas.length === 0) {
             return <p>No pizzas in cart!</p>;
         }
 

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -15,3 +15,6 @@ export type DECREMENT_TOPPING_QUANTITY = typeof DECREMENT_TOPPING_QUANTITY;
 
 export const ADD_PIZZA = 'ADD_PIZZA';
 export type ADD_PIZZA = typeof ADD_PIZZA;
+
+export const REMOVE_PIZZA = 'REMOVE_PIZZA';
+export type REMOVE_PIZZA = typeof REMOVE_PIZZA;
diff --git a/src/containers/Cart.tsx b/src/containers/Cart.tsx
@@ -1,6 +1,7 @@
 import { connect, Dispatch } from 'react-redux';
 
 import { Cart, StateProps, DispatchProps, OwnProps } from '../components/Cart';
+import { removePizza } from '../actions';
 import { StoreState } from '../types';
 
 export const mapStateToProps = (state: StoreState): StateProps => {
@@ -12,6 +13,7 @@ export const mapStateToProps = (state: StoreState): StateProps => {
 
 export const mapDispatchToProps = (dispatch: Dispatch<Cart>): DispatchProps => {
     return {
+        removePizza: (index: number) => dispatch(removePizza(index))
     };
 };
 

diff --git a/src/reducers/index.ts b/src/reducers/index.ts
@@ -5,7 +5,8 @@ import {
     SELECT_PIZZA_SIZE,
     INCREMENT_TOPPING_QUANTITY,
     DECREMENT_TOPPING_QUANTITY,
-    ADD_PIZZA
+    ADD_PIZZA,
+    REMOVE_PIZZA
 } from '../constants';
 import { StoreState, SelectedPizzaTopping, SelectedPizza } from '../types';
 
@@ -59,14 +60,23 @@ export const pizzaSizes = (state: StoreState, action: PizzaSizeAction): StoreSta
 
             return { ...state, selectedPizzaToppings: decremented };
         case ADD_PIZZA:
-            const pizzas = state.pizzas ? state.pizzas : [];
+            const addingPizzas = state.pizzas ? state.pizzas : [];
 
             const addedPizzas: SelectedPizza[] = [
-                ...pizzas,
+                ...addingPizzas,
                 action.pizza
             ];
 
             return { ...state, pizzas: addedPizzas, currentPizzaSize: null, selectedPizzaToppings: [] };
+        case REMOVE_PIZZA:
+            const removingPizzas: SelectedPizza[] = state.pizzas
+                ? [
+                    ...state.pizzas.slice(0, action.index),
+                    ...state.pizzas.slice(action.index + 1)
+                ]
+                : [];
+
+            return { ...state, pizzas: removingPizzas };
         default:
             return state;
     }