ui: add toast notification components and actions

jamaljsr · jamaljsr · commit b825027cd341 · 2020-05-26T12:24:12.000-04:00
diff --git a/app/package.json b/app/package.json
@@ -37,6 +37,7 @@
     "react-dom": "^16.13.1",
     "react-i18next": "11.4.0",
     "react-scripts": "3.4.1",
+    "react-toastify": "6.0.5",
     "react-virtualized": "^9.21.2"
   },
   "devDependencies": {
diff --git a/app/src/App.scss b/app/src/App.scss
@@ -17,6 +17,9 @@
 // rc-tooltip component styles
 @import '../node_modules/rc-tooltip/assets/bootstrap_white.css';
 
+// react-toastify styles
+@import '../node_modules/react-toastify/dist/ReactToastify.css';
+
 @font-face {
   font-family: 'OpenSans Light';
   src: url('./assets/fonts/OpenSans-Light.ttf') format('truetype');
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import './App.scss';
 import { createStore, StoreProvider } from 'store';
+import AlertContainer from 'components/common/AlertContainer';
 import { Layout } from 'components/layout';
 import Pages from 'components/Pages';
 import { ThemeProvider } from 'components/theme';
@@ -13,6 +14,7 @@ const App = () => {
       <ThemeProvider>
         <Layout>
           <Pages />
+          <AlertContainer />
         </Layout>
       </ThemeProvider>
     </StoreProvider>
diff --git a/app/src/components/common/AlertContainer.tsx b/app/src/components/common/AlertContainer.tsx
@@ -0,0 +1,105 @@
+import React, { useEffect } from 'react';
+import { toast, ToastContainer } from 'react-toastify';
+import { values } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { Alert } from 'types/state';
+import { useStore } from 'store';
+import { styled } from 'components/theme';
+import { Close } from './icons';
+
+const Styled = {
+  Body: styled.div`
+    margin-right: 10px;
+  `,
+  Title: styled.div`
+    font-family: ${props => props.theme.fonts.open.semiBold};
+    font-size: ${props => props.theme.sizes.xs};
+    text-transform: uppercase;
+  `,
+  Message: styled.div`
+    font-size: ${props => props.theme.sizes.xs};
+  `,
+  CloseIcon: styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    border: 1px solid ${props => props.theme.colors.offWhite};
+    border-radius: 18px;
+    transition: background-color 0.3s;
+
+    &:hover {
+      color: ${props => props.theme.colors.blue};
+      background-color: ${props => props.theme.colors.offWhite};
+    }
+
+    svg {
+      width: 12px;
+      height: 12px;
+      padding: 0;
+    }
+  `,
+  Container: styled(ToastContainer)`
+    .Toastify__toast {
+      border-radius: 4px;
+    }
+    .Toastify__toast--error {
+      color: ${props => props.theme.colors.offWhite};
+      background-color: ${props => props.theme.colors.pink};
+    }
+  `,
+};
+
+interface AlertToastProps {
+  alert: Alert;
+  onClose: (id: number) => void;
+}
+
+/**
+ * The content to be rendered inside of the toast
+ */
+const AlertToast: React.FC<AlertToastProps> = ({ alert, onClose }) => {
+  // use useEffect to only run the side-effect one time
+  useEffect(() => {
+    const { id, type, message, title } = alert;
+    // create a component to display inside of the toast
+    const { Body, Title, Message } = Styled;
+    const body = (
+      <Body>
+        {title && <Title>{title}</Title>}
+        <Message>{message}</Message>
+      </Body>
+    );
+    // display the toast popup containing the styled body
+    toast(body, { type, onClose: () => onClose(id) });
+  }, [alert, onClose]);
+
+  // do not render anything to the dom. the toast() func will display the content
+  return null;
+};
+
+/**
+ * A wrapper around the ToastContainer to add custom styling. Also renders
+ * each toast message based on the alerts in the mobx store
+ */
+const AlertContainer: React.FC = () => {
+  const { uiStore } = useStore();
+
+  const { Container, CloseIcon } = Styled;
+  const closeButton = (
+    <CloseIcon>
+      <Close />
+    </CloseIcon>
+  );
+  return (
+    <>
+      {values(uiStore.alerts).map(n => (
+        <AlertToast key={n.id} alert={n} onClose={uiStore.clearAlert} />
+      ))}
+      <Container position="top-right" autoClose={5 * 1000} closeButton={closeButton} />
+    </>
+  );
+};
+
+export default observer(AlertContainer);
diff --git a/app/src/components/common/icons.tsx b/app/src/components/common/icons.tsx
@@ -22,6 +22,7 @@ interface IconProps {
 const Icon = styled.span<IconProps>`
   display: inline-block;
   padding: 6px;
+  transition: all 0.3s;
 
   ${props =>
     props.onClick &&
diff --git a/app/src/store/stores/uiStore.ts b/app/src/store/stores/uiStore.ts
@@ -1,4 +1,5 @@
-import { action, observable } from 'mobx';
+import { action, observable, toJS } from 'mobx';
+import { Alert } from 'types/state';
 import { Store } from 'store';
 
 type PageName = 'loop' | 'history' | 'settings';
@@ -14,6 +15,8 @@ export default class UiStore {
   @observable processingSwapsVisible = false;
   /** the selected setting on the Settings page */
   @observable selectedSetting: SettingName = 'general';
+  /** a collection of alerts to display as toasts */
+  @observable alerts = observable.map<number, Alert>();
 
   constructor(store: Store) {
     this._store = store;
@@ -51,5 +54,21 @@ export default class UiStore {
   @action.bound
   showSettings(name: SettingName) {
     this.selectedSetting = name;
+    this._store.log.info('Switch to Setting screen', name);
+  }
+
+  /** adds a alert to the store */
+  @action.bound
+  notify(message: string, title?: string) {
+    const alert: Alert = { id: Date.now(), type: 'error', message, title };
+    this.alerts.set(alert.id, alert);
+    this._store.log.info('Added alert', message, toJS(this.alerts));
+  }
+
+  /** removes an existing alert */
+  @action.bound
+  clearAlert(id: number) {
+    this.alerts.delete(id);
+    this._store.log.info('Cleared alert', id, toJS(this.alerts));
   }
 }
diff --git a/app/src/types/state.ts b/app/src/types/state.ts
@@ -27,3 +27,10 @@ export enum BuildSwapSteps {
   ReviewQuote = 3,
   Processing = 4,
 }
+
+export interface Alert {
+  id: number;
+  type: 'info' | 'success' | 'warning' | 'error' | 'default';
+  title?: string;
+  message: string;
+}
diff --git a/app/yarn.lock b/app/yarn.lock
@@ -5610,7 +5610,7 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
-dom-helpers@^5.0.0:
+dom-helpers@^5.0.0, dom-helpers@^5.0.1:
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.4.tgz#4609680ab5c79a45f2531441f1949b79d6587f4b"
   integrity sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==
@@ -12188,6 +12188,25 @@ react-textarea-autosize@^7.1.0:
     "@babel/runtime" "^7.1.2"
     prop-types "^15.6.0"
 
+react-toastify@6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-6.0.5.tgz#6435b2bf6a298863bc71342dcc88e8283cdb4630"
+  integrity sha512-1YXSb6Jr478c1TJEyVpxLHFvtmeXGMvdpZc0fke/7lK+MoLBC+NFgB74bq+C2SZe6LdK+K1voEURJoY88WqWvA==
+  dependencies:
+    classnames "^2.2.6"
+    prop-types "^15.7.2"
+    react-transition-group "^4.4.1"
+
+react-transition-group@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
+  integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react-virtualized@^9.21.2:
   version "9.21.2"
   resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.2.tgz#02e6df65c1e020c8dbf574ec4ce971652afca84e"
