Add Clear button to remove all items from shopping cart

recipes/src/containers/ShoppingCart/List/index.tsx

@@ -6,19 +6,24 @@ import Navbar from 'components/Navbar';
 import { Grid, Row, Cell } from '@material/react-layout-grid';
 import List from 'components/List';
 import ShoppingItem from 'src/types/shopping-cart';
-import { addToCart, removeItemFromCart, AddToCart, RemoveItemFromCart } from './../actions';
+import { addToCart, removeItemFromCart, removeAll } from './../actions';
 
 import Button from 'components/Button';
 import { DBRecipe } from 'src/types/recipes';
 
-interface ShoppingListProps extends RouteComponentProps {
-  items: ShoppingItem[],
-  recipesId: string[],
+type ActionsType = {
   addToCart: typeof addToCart,
   removeItemFromCart: typeof removeItemFromCart
 }
 
-const renderItem = (actions: { addToCart: typeof addToCart, removeItemFromCart: typeof removeItemFromCart }) => (props: ShoppingItem) => (
+interface ShoppingListProps extends RouteComponentProps, ActionsType {
+  items: ShoppingItem[],
+  recipesId: string[],
+  removeAll: typeof removeAll
+}
+
+
+const renderItem = (actions: ActionsType) => (props: ShoppingItem) => (
   <>
     <span>{props.name}</span>
     <span>
@@ -35,14 +40,14 @@ class ShoppingList extends Component<ShoppingListProps, {}> {
     super(props);
   }
   render () {
-    const { addToCart, removeItemFromCart } = this.props;
+    const { addToCart, removeItemFromCart, removeAll } = this.props;
     console.log(this.props);
     return (
       <div className='cbk-shopping-list'>
         <Navbar
           title='Shopping List'
         >
-
+          <Button onClick={() => removeAll()}>Clear</Button>
         </Navbar>
         <div>
           <List
@@ -51,7 +56,7 @@ class ShoppingList extends Component<ShoppingListProps, {}> {
             items={this.props.items}
             render={renderItem({
               addToCart,
-              removeItemFromCart
+              removeItemFromCart,
             })}
           />
         </div>
@@ -66,5 +71,5 @@ const mapStateToProps = (state: AppState) => {
 
 export default connect(
   mapStateToProps,
-  {addToCart, removeItemFromCart}
+  {addToCart, removeItemFromCart, removeAll}
 )(ShoppingList);

recipes/src/containers/ShoppingCart/actions.ts

@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux';
 export const ADD_TO_CART = 'ADD_TO_CART';
 export const REMOVE_RECIPE_FROM_CART = 'REMOVE_RECIPE_FROM_CART';
 export const REMOVE_ITEM_FROM_CART = 'REMOVE_ITEM_FROM_CART';
+export const REMOVE_ALL = 'REMOVE_ALL';
 
 export const addToCart = (recipe: DBRecipe): AddToCart => ({
   type: ADD_TO_CART,
@@ -21,6 +22,10 @@ export const removeItemFromCart = (id: string): RemoveItemFromCart => ({
   payload: id
 })
 
+export const removeAll = (): RemoveAll => ({
+  type: REMOVE_ALL
+});
+
 export type AddToCart = {
   type: typeof ADD_TO_CART,
   payload: DBRecipe
@@ -36,4 +41,8 @@ export type RemoveItemFromCart = {
   payload: string,
 }
 
-export type ActionTypes = AddToCart | RemoveRecipeFromCart | RemoveItemFromCart
+export type RemoveAll = {
+  type: typeof REMOVE_ALL
+}
+
+export type ActionTypes = AddToCart | RemoveRecipeFromCart | RemoveItemFromCart | RemoveAll;

recipes/src/containers/ShoppingCart/reducers.ts

@@ -1,5 +1,5 @@
 import ShoppingItem from 'types/shopping-cart';
-import { ActionTypes, ADD_TO_CART, REMOVE_RECIPE_FROM_CART, REMOVE_ITEM_FROM_CART } from './actions';
+import { ActionTypes, ADD_TO_CART, REMOVE_RECIPE_FROM_CART, REMOVE_ITEM_FROM_CART, REMOVE_ALL } from './actions';
 import { DBRecipe } from 'src/types/recipes';
 
 export type ShoppingCartState = {
@@ -125,13 +125,17 @@ const shoppingCartReducer = (
         recipesId: state.recipesId.filter(item => item !== action.payload)
       }
     case REMOVE_ITEM_FROM_CART: 
-      console.log("remove item", action)
       return {
         ...state,
         items: state.items.filter(
           item => item.name !== action.payload
         )
       }
+    case REMOVE_ALL:
+      return {
+        items: [],
+        recipesId: []
+      }
     default:
       return state
   }