feat: add toaster if create instance failed (#39)

add toaster if create instance failed
myriadsocial · Sep 7, 2022 · 76cb991 · 76cb991
1 parent 0edca73
commit 76cb991
Show file tree

Hide file tree

Showing 9 changed files with 199 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "next": "12.1.6",
     "next-http-proxy-middleware": "^1.2.4",
     "nookies": "^2.5.2",
+    "notistack": "^2.0.5",
     "postcss": "^8.4.16",
     "react": "18.2.0",
     "react-chartjs-2": "^4.3.1",

diff --git a/src/components/Instance/InstanceComponent.tsx b/src/components/Instance/InstanceComponent.tsx
@@ -2,14 +2,14 @@ import React, {useState} from 'react';
 
 import dynamic from 'next/dynamic';
 
+import {Backdrop, CircularProgress} from '@material-ui/core';
 import {useRouter} from 'next/router';
 import {destroyCookie} from 'nookies';
-import {Backdrop, CircularProgress} from '@material-ui/core';
 
-import {InstanceList} from './InstanceList';
+import {InstanceType, useInstances} from 'src/hooks/use-instances.hooks';
 import {useStyles} from './Instance.styles';
 import {InstanceHeader} from './InstanceHeader';
-import {useInstances, InstanceType} from 'src/hooks/use-instances.hooks';
+import {InstanceList} from './InstanceList';
 
 const InstanceStepperModal = dynamic(() => import('./InstanceStepperModal'), {
   ssr: false,

diff --git a/src/components/molecules/Snackbar/Snackbar.interface.ts b/src/components/molecules/Snackbar/Snackbar.interface.ts
@@ -0,0 +1,7 @@
+import {VariantType} from 'notistack';
+
+export interface SnackbarProps {
+  variant: VariantType;
+  message: string;
+  key: string | number;
+}
diff --git a/src/components/molecules/Snackbar/Snackbar.style.ts b/src/components/molecules/Snackbar/Snackbar.style.ts
@@ -0,0 +1,68 @@
+import {makeStyles, Theme} from '@material-ui/core/styles';
+
+import {VariantType} from 'notistack';
+
+interface VariantProps {
+  variant: VariantType;
+}
+
+export const useStyles = makeStyles<Theme, VariantProps>(theme => ({
+  root: {
+    maxWidth: 600,
+    [theme.breakpoints.up('sm')]: {
+      minWidth: '344px !important',
+      // maxWidth: '344px !important',
+    },
+  },
+  card: {
+    backgroundColor: props =>
+      props?.variant === 'success'
+        ? '#47B881'
+        : props?.variant === 'error'
+        ? '#FE3636'
+        : props?.variant === 'warning'
+        ? '#F0A200'
+        : props?.variant === 'info'
+        ? '#1070CA'
+        : '#FFFFFF',
+    width: '100%',
+    height: '60px',
+    paddingLeft: 8,
+    borderRadius: 10,
+  },
+  cardInside: {
+    backgroundColor: '#FFFFFF',
+    width: '100%',
+    height: '100%',
+    borderTopRightRadius: 10,
+    borderBottomRightRadius: 10,
+    display: 'flex',
+    alignItems: 'center',
+    paddingLeft: 15,
+  },
+  typography: {
+    fontWeight: 'normal',
+    lineHeight: '17.57px',
+  },
+  icons: {
+    marginLeft: 'auto',
+  },
+  iconLeft: {
+    marginRight: '12px',
+    fill: props =>
+      props?.variant === 'success'
+        ? '#47B881'
+        : props?.variant === 'error'
+        ? '#FE3636'
+        : props?.variant === 'warning'
+        ? '#F0A200'
+        : props?.variant === 'info'
+        ? '#1070CA'
+        : '#FFFFFF',
+  },
+  iconClose: {
+    marginRight: '5px',
+    marginLeft: '5px',
+    fill: '#66788A',
+  },
+}));
diff --git a/src/components/molecules/Snackbar/Snackbar.tsx b/src/components/molecules/Snackbar/Snackbar.tsx
@@ -0,0 +1,65 @@
+import {
+  ExclamationIcon,
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  InformationCircleIcon,
+  QuestionMarkCircleIcon,
+  XIcon,
+} from '@heroicons/react/solid';
+
+import React from 'react';
+
+import IconButton from '@material-ui/core/IconButton';
+import SvgIcon from '@material-ui/core/SvgIcon';
+import Typography from '@material-ui/core/Typography';
+
+import {SnackbarProps} from './Snackbar.interface';
+import {useStyles} from './Snackbar.style';
+
+import {useSnackbar, SnackbarContent} from 'notistack';
+
+export const Snackbar = React.forwardRef<HTMLDivElement, SnackbarProps>((props, ref) => {
+  const style = useStyles(props);
+
+  const {closeSnackbar} = useSnackbar();
+  const dismiss = () => closeSnackbar(props.key);
+
+  return (
+    <SnackbarContent ref={ref} className={style.root}>
+      <div className={style.card}>
+        <div className={style.cardInside}>
+          <SvgIcon
+            classes={{root: style.iconLeft}}
+            component={
+              props?.variant === 'success'
+                ? CheckCircleIcon
+                : props?.variant === 'error'
+                ? ExclamationCircleIcon
+                : props?.variant === 'warning'
+                ? ExclamationIcon
+                : props?.variant === 'info'
+                ? InformationCircleIcon
+                : QuestionMarkCircleIcon
+            }
+            viewBox="0 0 20 20"
+          />
+          <Typography variant="body1" className={style.typography} color="textPrimary">
+            {props.message}
+          </Typography>
+          <div className={style.icons}>
+            <IconButton aria-label="close" onClick={dismiss}>
+              <SvgIcon
+                component={XIcon}
+                viewBox="0 0 20 20"
+                classes={{root: style.iconClose}}
+                color="inherit"
+              />
+            </IconButton>
+          </div>
+        </div>
+      </div>
+    </SnackbarContent>
+  );
+});
+
+Snackbar.displayName = 'Snackbar';
diff --git a/src/components/molecules/Snackbar/useEnqueueSnackbar.hook.tsx b/src/components/molecules/Snackbar/useEnqueueSnackbar.hook.tsx
@@ -0,0 +1,30 @@
+import {useMediaQuery, useTheme} from '@material-ui/core';
+
+import {Snackbar} from './Snackbar';
+import {SnackbarProps} from './Snackbar.interface';
+
+import {useSnackbar as useDefaultSnackbar} from 'notistack';
+
+export const useEnqueueSnackbar = () => {
+  const {enqueueSnackbar} = useDefaultSnackbar();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
+
+  const pushSnackbar = (payload: Omit<SnackbarProps, 'key'> & {id?: string | number}) => {
+    const {message, variant, id} = payload;
+
+    enqueueSnackbar(payload.message, {
+      variant,
+      preventDuplicate: true,
+      anchorOrigin: {
+        vertical: isMobile ? 'bottom' : 'top',
+        horizontal: 'right',
+      },
+      content: key => {
+        return <Snackbar key={id ?? key} message={message} variant={variant} />;
+      },
+    });
+  };
+
+  return pushSnackbar;
+};
diff --git a/src/hooks/use-instances.hooks.ts b/src/hooks/use-instances.hooks.ts
@@ -1,3 +1,4 @@
+import {useEnqueueSnackbar} from './../components/molecules/Snackbar/useEnqueueSnackbar.hook';
 import {useEffect, useState} from 'react';
 
 import {ServerListProps} from 'src/interface/ServerListInterface';
@@ -11,7 +12,7 @@ export enum InstanceType {
 
 export const useInstances = (instanceType: InstanceType, accountId?: string) => {
   const {provider, loading: loadingBlockchain, error} = useBlockchain();
-
+  const enqueueSnackbar = useEnqueueSnackbar();
   const [serverList, setServerList] = useState<ServerListProps[]>([]);
   const [metric, setMetric] = useState({totalUsers: 0, totalPosts: 0, totalInstances: 0});
   const [loading, setLoading] = useState<boolean>(true);
@@ -114,8 +115,11 @@ export const useInstances = (instanceType: InstanceType, accountId?: string) =>
             .finally(() => setServerList([...serverList, server]));
         }
       });
-    } catch (err) {
-      console.log(err);
+    } catch (err: any) {
+      enqueueSnackbar({
+        message: err.toString(),
+        variant: 'error',
+      });
     } finally {
       callback && callback();
       setLoading(false);

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -7,6 +7,7 @@ import {NextPage} from 'next';
 import {ReactElement, ReactNode} from 'react';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
+import {SnackbarProvider} from 'notistack';
 
 import '../../styles/globals.css';
 
@@ -28,12 +29,14 @@ export default function MyApp({Component, pageProps}: AppPropsWithLayout) {
   const queryClient = new QueryClient();
   return (
     <ThemeProvider theme={themeV2}>
-      <BlockchainProvider>
-        <QueryClientProvider client={queryClient}>
-          <ReactQueryDevtools initialIsOpen={false} />
-          {getLayout(<Component {...pageProps} />)}
-        </QueryClientProvider>
-      </BlockchainProvider>
+      <SnackbarProvider maxSnack={4}>
+        <BlockchainProvider>
+          <QueryClientProvider client={queryClient}>
+            <ReactQueryDevtools initialIsOpen={false} />
+            {getLayout(<Component {...pageProps} />)}
+          </QueryClientProvider>
+        </BlockchainProvider>
+      </SnackbarProvider>
     </ThemeProvider>
   );
 }
diff --git a/yarn.lock b/yarn.lock
@@ -4753,7 +4753,7 @@ clsx@^1.0.4:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
 
-clsx@^1.2.1:
+clsx@^1.1.0, clsx@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
@@ -8226,6 +8226,14 @@ normalize-url@^4.1.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.1.tgz#0dd90cf1288ee1d1313b87081c9a5932ee48518a"
   integrity sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==
 
+notistack@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/notistack/-/notistack-2.0.5.tgz#8eb53720453f6e02182cd0e6784ced630a7bb7e6"
+  integrity sha512-Ig2T1Muqkc1PaSQcEDrK7diKv6cBxw02Iq6uv074ySfgq524TV5lK41diAb6OSsaiWfp3aRt+T3+0MF8m2EcJQ==
+  dependencies:
+    clsx "^1.1.0"
+    hoist-non-react-statics "^3.3.0"
+
 npm-run-path@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"