From f6d8326179081c7b07e568d5f29aab294efce170 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= <germaga92@gmail.com>
Date: Mon, 16 Sep 2019 14:08:12 +0200
Subject: [PATCH] Add snackbar basic structure

---
 src/components/Header/index.jsx            |  12 ++-
 src/components/SharedSnackBar/index.jsx    | 105 ---------------------
 src/components/layout/PageFrame/index.jsx  |  17 +++-
 src/components/layout/PageFrame/index.scss |  16 ++++
 4 files changed, 37 insertions(+), 113 deletions(-)
 delete mode 100644 src/components/SharedSnackBar/index.jsx

diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
index 0511119b..6c2e1aa4 100644
--- a/src/components/Header/index.jsx
+++ b/src/components/Header/index.jsx
@@ -1,8 +1,8 @@
 // @flow
 import * as React from 'react'
 import { connect } from 'react-redux'
+import { useSnackbar } from 'notistack'
 import { logComponentStack, type Info } from '~/utils/logBoundaries'
-import { SharedSnackbarConsumer, type Variant } from '~/components/SharedSnackBar'
 import { WALLET_ERROR_MSG } from '~/logic/wallets/store/actions'
 import { getProviderInfo } from '~/logic/wallets/getWeb3'
 import type { ProviderProps } from '~/logic/wallets/store/model/provider'
@@ -14,6 +14,8 @@ import Layout from './component/Layout'
 import actions, { type Actions } from './actions'
 import selector, { type SelectorProps } from './selector'
 
+type Variant = 'success' | 'error' | 'warning' | 'info'
+
 type Props = Actions &
   SelectorProps & {
     openSnackbar: (message: string, variant: Variant) => void,
@@ -116,8 +118,10 @@ const Header = connect(
   actions,
 )(HeaderComponent)
 
-const HeaderSnack = () => (
-  <SharedSnackbarConsumer>{({ openSnackbar }) => <Header openSnackbar={openSnackbar} />}</SharedSnackbarConsumer>
-)
+const HeaderSnack = () => {
+  const { enqueueSnackbar } = useSnackbar()
+
+  return <Header openSnackbar={enqueueSnackbar} />
+}
 
 export default HeaderSnack
diff --git a/src/components/SharedSnackBar/index.jsx b/src/components/SharedSnackBar/index.jsx
deleted file mode 100644
index c22c9213..00000000
--- a/src/components/SharedSnackBar/index.jsx
+++ /dev/null
@@ -1,105 +0,0 @@
-// @flow
-import * as React from 'react'
-import { Snackbar } from '@material-ui/core'
-import SnackbarContent from '~/components/SnackbarContent'
-
-export const SharedSnackbar = () => (
-  <SharedSnackbarConsumer>
-    {(value) => {
-      const {
-        snackbarIsOpen, message, closeSnackbar, variant,
-      } = value
-
-      return (
-        <Snackbar
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'right',
-          }}
-          open={snackbarIsOpen}
-          autoHideDuration={4000}
-          onClose={closeSnackbar}
-        >
-          <SnackbarContent onClose={closeSnackbar} message={message} variant={variant} />
-        </Snackbar>
-      )
-    }}
-  </SharedSnackbarConsumer>
-)
-
-type SnackbarContext = {
-  openSnackbar: Function,
-  closeSnackbar: Function,
-  snackbarIsOpen: boolean,
-  message: string,
-  variant: string,
-}
-
-const SharedSnackbarContext = React.createContext<SnackbarContext>({
-  openSnackbar: undefined,
-  closeSnackbar: undefined,
-  snackbarIsOpen: false,
-  message: '',
-  variant: 'info',
-})
-
-type Props = {
-  children: React.Node,
-}
-
-export type Variant = 'success' | 'error' | 'warning' | 'info'
-
-type State = {
-  isOpen: boolean,
-  message: string,
-  variant: Variant,
-}
-
-export class SharedSnackbarProvider extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props)
-
-    this.state = {
-      isOpen: false,
-      message: '',
-      variant: 'info',
-    }
-  }
-
-  openSnackbar = (message: string, variant: Variant) => {
-    this.setState({
-      message,
-      variant,
-      isOpen: true,
-    })
-  }
-
-  closeSnackbar = () => {
-    this.setState({
-      message: '',
-      isOpen: false,
-    })
-  }
-
-  render() {
-    const { children } = this.props
-    const { message, variant, isOpen } = this.state
-
-    return (
-      <SharedSnackbarContext.Provider
-        value={{
-          openSnackbar: this.openSnackbar,
-          closeSnackbar: this.closeSnackbar,
-          snackbarIsOpen: isOpen,
-          message,
-          variant,
-        }}
-      >
-        <SharedSnackbar />
-        {children}
-      </SharedSnackbarContext.Provider>
-    )
-  }
-}
-
-export const SharedSnackbarConsumer = SharedSnackbarContext.Consumer
diff --git a/src/components/layout/PageFrame/index.jsx b/src/components/layout/PageFrame/index.jsx
index 6159ca41..126e774f 100644
--- a/src/components/layout/PageFrame/index.jsx
+++ b/src/components/layout/PageFrame/index.jsx
@@ -1,8 +1,9 @@
 // @flow
 import * as React from 'react'
-import Header from '~/components/Header'
+import { SnackbarProvider } from 'notistack'
 import SidebarProvider from '~/components/Sidebar'
-import { SharedSnackbarProvider } from '~/components/SharedSnackBar'
+import Footer from '~/components/Footer'
+import Header from '~/components/Header'
 import styles from './index.scss'
 
 type Props = {
@@ -10,14 +11,22 @@ type Props = {
 }
 
 const PageFrame = ({ children }: Props) => (
-  <SharedSnackbarProvider>
+  <SnackbarProvider
+    anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+    classes={{
+      variantSuccess: styles.success,
+      variantError: styles.error,
+      variantWarning: styles.warning,
+      variantInfo: styles.info,
+    }}
+  >
     <div className={styles.frame}>
       <SidebarProvider>
         <Header />
         {children}
       </SidebarProvider>
     </div>
-  </SharedSnackbarProvider>
+  </SnackbarProvider>
 )
 
 export default PageFrame
diff --git a/src/components/layout/PageFrame/index.scss b/src/components/layout/PageFrame/index.scss
index 9727c40e..54ceec03 100644
--- a/src/components/layout/PageFrame/index.scss
+++ b/src/components/layout/PageFrame/index.scss
@@ -4,3 +4,19 @@
   flex: 1 1 auto;
   max-width: 100%;
 }
+
+.success {
+  background: 'purple';
+}
+
+.error {
+  background: 'blue';
+}
+
+.warning {
+  background: 'green';
+}
+
+.info {
+  background: 'yellow';
+}