Add confirmation dialog on removeAll items from shopping cart

recipes/src/components/RecipeForm/index.tsx

@@ -7,7 +7,7 @@ import sample_image from 'sample.png';
 import { MeasuresTypes } from 'services/measurements';
 import { LightInput as Input } from 'components/Input';
 import Button from 'components/Button';
-import Dialog from 'components/Dialog';
+import Dialog from 'components/DialogConverter';
 import { GetMeasure } from 'services/measurements';
 
 //@ts-ignore

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

@@ -7,7 +7,7 @@ import { Grid, Row, Cell } from '@material/react-layout-grid';
 import List from 'components/List';
 import ShoppingItem from 'src/types/shopping-cart';
 import { addToCart, removeItemFromCart, removeAll } from './../actions';
-
+import Dialog from 'components/Dialog';
 import Button from 'components/Button';
 import { DBRecipe } from 'src/types/recipes';
 
@@ -22,6 +22,9 @@ interface ShoppingListProps extends RouteComponentProps, ActionsType {
   removeAll: typeof removeAll
 }
 
+interface ShoppingListState {
+  openRemoveAll: boolean,
+}
 
 const renderItem = (actions: ActionsType) => (props: ShoppingItem) => (
   <>
@@ -35,21 +38,32 @@ const renderItem = (actions: ActionsType) => (props: ShoppingItem) => (
   </>
 );
 
-class ShoppingList extends Component<ShoppingListProps, {}> {
+class ShoppingList extends Component<ShoppingListProps, ShoppingListState> {
   constructor(props: ShoppingListProps) {
     super(props);
+    this.state = {
+      openRemoveAll: false
+    };
   }
   render () {
     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>
+          <Button onClick={() => this.setState({openRemoveAll: true})}>Clear</Button>
         </Navbar>
         <div>
+          <Dialog
+            isOpen={this.state.openRemoveAll}
+            actions={{
+              cancel: { label: 'cancel', onSelect: () => this.setState({openRemoveAll: false})},
+              accept: { label: 'delete', onSelect: () => removeAll(), isDefault: true}
+            }}
+          >
+            <p>Are you sure you want to remove all items from shopping list ?</p>
+          </Dialog>
           <List
             dense
             nonInteractive