Add Toastify. Create Toast component. Use Toasts in ShoppingCart for error display

recipes/package.json

@@ -47,6 +47,7 @@
     "react-router-dom": "^5.0.1",
     "react-scripts": "2.1.8",
     "react-svg": "^9.0.4",
+    "react-toastify": "^5.4.0",
     "redux": "^4.0.4",
     "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0",

recipes/src/App.tsx

@@ -2,11 +2,11 @@ import { BrowserRouter as Router, Route, Link, NavLink } from "react-router-dom"
 import React, { Component, Props } from 'react';
 import { Provider } from 'react-redux';
 import CBKDrawer from './components/Drawer';
-import { Grid, Row } from '@material/react-layout-grid';
-import List, { ListItem, ListItemText } from '@material/react-list';
+import Toast from 'components/Toast';
 import configureStore from 'store/configureStore';
 import './styles/app.scss';
 import "@material/react-layout-grid/dist/layout-grid.min.css";
+
 import Routes, { RouteWithSubRoutes } from 'route.config';
 
 function Index() {
@@ -27,6 +27,7 @@ const App = () => {
   ];
   return (
     <Provider store={store}>
+      <Toast />
       <Router>
         <div className="cbk-app-drawer">
         <CBKDrawer>

recipes/src/components/Toast/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { ToastContainer, Slide } from 'react-toastify';
+
+import './styles.scss';
+import 'react-toastify/dist/ReactToastify.css';
+
+const Toast: React.FunctionComponent<any> = (props) => (
+  <ToastContainer
+    className='cbk-toast'
+    bodyClassName='cbk-toast-body'
+    position='top-right'
+    transition={Slide}
+    autoClose={false}
+    hideProgressBar
+    newestOnTop
+    closeOnClick
+    draggable
+    pauseOnHover
+  />
+);
+
+export default Toast;

recipes/src/components/Toast/styles.scss

@@ -0,0 +1,15 @@
+@import 'styles/_variables.scss';
+
+.cbk-toast .Toastify{
+  &__toast {
+    background-color: white;
+    @include solidBoxShadow();
+    &-body {
+      @include display();
+      color: $grey-900;     
+    }
+  }
+  &__close-button {
+    color: black;
+  }
+}

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

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { ThunkDispatch } from 'redux-thunk';
 import { bindActionCreators } from 'redux';
 import { remove, equals } from 'ramda';
+import { toast } from "react-toastify";
 
 import Button from 'components/Button';
 import Dialog from 'components/Dialog';
@@ -16,6 +17,7 @@ import { AppState } from 'store/configureStore';
 
 import { combineMultipleItems } from '../services';
 import { GetMeasure } from 'services/measurements';
+
 import './styles.scss';
 
 type shoppingCartActionTypes = typeof shoppingCartActions;
@@ -97,10 +99,10 @@ class ShoppingCartView extends React.Component<ShoppingCartViewProps, ShoppingCa
         this.props.mergeItemsCart(this.state.selected, combineMultipleItems(this.state.selected));
         this.clearSelection();
       } catch(error) {
-        console.log(error)
+        toast.error("There was an error merging items:", error);
       }
     } else {
-      console.log('one or more items do not match one of the selected measurements')
+      toast.error("There was an error merging items: one or more items have different measure types");
     }
   }
 
@@ -121,7 +123,7 @@ class ShoppingCartView extends React.Component<ShoppingCartViewProps, ShoppingCa
       const sort: SortType = parseInt(event.target.value);
       this.props.sortCart(sort);
     } catch (error) {
-      console.log('error while trying to sort items', error)
+      toast.error("There was an error sorting items: ", error);
     }
   }