Merge pull request #3487 from LiteFarmOrg/LF-4390/Persist_error_snackbar

LF-4390: Persist error snackbars
LiteFarmOrg · Oct 17, 2024 · 636cc3e · 636cc3e
2 parents 93f2cf7 + cb7e61a
commit 636cc3e
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 19 deletions.
diff --git a/packages/webapp/src/App.jsx b/packages/webapp/src/App.jsx
@@ -50,7 +50,8 @@ function App() {
                 root: clsx(styles.root, isCompactSideMenu ? styles.isCompact : styles.isExpanded),
                 containerRoot: styles[`containerRoot${isCompactSideMenu ? 'WithCompactMenu' : ''}`],
               }}
-              content={(key, message) => <NotistackSnackbar id={key} message={message} />}
+              // https://notistack.com/features/customization#custom-component
+              Components={{ common: NotistackSnackbar }}
             >
               <Routes isCompactSideMenu={isCompactSideMenu} />
             </SnackbarProvider>

diff --git a/packages/webapp/src/components/Map/ProgressBar/index.jsx b/packages/webapp/src/components/Map/ProgressBar/index.jsx
@@ -18,14 +18,18 @@ const useStyles = makeStyles({
   },
 });
 
+const INCREMENT = 12.5;
+const MAX_PROGRESS = 100 + INCREMENT;
+
 export default function ProgressBar({ onDismiss, type = 'success' }) {
   const classes = useStyles();
-  const [progress, setProgress] = useState(0);
-
-  const INCREMENT = 12.5;
-  const MAX_PROGRESS = 100 + INCREMENT;
+  const [progress, setProgress] = useState(onDismiss ? 0 : MAX_PROGRESS);
 
   useEffect(() => {
+    if (!onDismiss) {
+      return;
+    }
+
     const timer = setInterval(() => {
       setProgress((oldProgress) => {
         if (oldProgress >= MAX_PROGRESS) {
@@ -37,7 +41,7 @@ export default function ProgressBar({ onDismiss, type = 'success' }) {
     return () => {
       clearInterval(timer);
     };
-  }, []);
+  }, [onDismiss]);
 
   useEffect(() => {
     if (progress >= MAX_PROGRESS) {

diff --git a/packages/webapp/src/components/PureSnackbar/index.jsx b/packages/webapp/src/components/PureSnackbar/index.jsx
@@ -12,7 +12,7 @@ function Icon({ type = 'success' }) {
   if (type === 'success') return <Checkmark className={styles.button} />;
 }
 
-export function PureSnackbarWithoutBorder({ className, onDismiss, title, type }) {
+export function PureSnackbarWithoutBorder({ className, onDismiss, title, type, persist }) {
   const [dismissProgressBar, setDismissProgressBar] = useState(false);
 
   return (
@@ -32,28 +32,39 @@ export function PureSnackbarWithoutBorder({ className, onDismiss, title, type })
         </div>
       </div>
       <div className={styles.progressBarContainer}>
-        {!dismissProgressBar && <ProgressBar type={type} onDismiss={onDismiss} />}
+        {!dismissProgressBar && (
+          <ProgressBar type={type} onDismiss={persist ? undefined : onDismiss} />
+        )}
       </div>
     </div>
   );
 }
 
-export const PureSnackbar = forwardRef(({ message, type, onDismiss }, ref) => (
+export const PureSnackbar = forwardRef(({ message, type, onDismiss, persist }, ref) => (
   <div className={clsx(styles.container, styles[type])} ref={ref}>
-    <PureSnackbarWithoutBorder title={message} onDismiss={onDismiss} type={type} />
+    <PureSnackbarWithoutBorder
+      title={message}
+      onDismiss={onDismiss}
+      type={type}
+      persist={persist}
+    />
   </div>
 ));
 
+PureSnackbarWithoutBorder.displayName = 'PureSnackbarWithoutBorder';
 PureSnackbarWithoutBorder.prototype = {
   className: PropTypes.string,
   title: PropTypes.string,
   farmName: PropTypes.string,
   closeSuccessHeader: PropTypes.func,
   type: PropTypes.oneOf(['success', 'error']),
+  persist: PropTypes.bool,
 };
 
+PureSnackbar.displayName = 'PureSnackbar';
 PureSnackbar.prototype = {
   type: PropTypes.oneOf(['success', 'error']),
   message: PropTypes.string,
   onDismiss: PropTypes.func,
+  persist: PropTypes.bool,
 };
diff --git a/packages/webapp/src/containers/Snackbar/NotistackSnackbar.jsx b/packages/webapp/src/containers/Snackbar/NotistackSnackbar.jsx
@@ -2,11 +2,21 @@ import { forwardRef, useCallback } from 'react';
 import { PureSnackbar } from '../../components/PureSnackbar';
 import { useSnackbar } from 'notistack';
 
-export const NotistackSnackbar = forwardRef(({ message, id }, ref) => {
+export const NotistackSnackbar = forwardRef(({ message, id, persist }, ref) => {
   const { closeSnackbar } = useSnackbar();
   const onDismiss = useCallback(() => {
     closeSnackbar(id);
   }, [id, closeSnackbar]);
 
-  return <PureSnackbar ref={ref} onDismiss={onDismiss} message={message} type={id.split('-')[0]} />;
+  return (
+    <PureSnackbar
+      ref={ref}
+      onDismiss={onDismiss}
+      message={message}
+      type={id.split('-')[0]}
+      persist={persist}
+    />
+  );
 });
+
+NotistackSnackbar.displayName = 'NotistackSnackbar';
diff --git a/packages/webapp/src/containers/Snackbar/snackbarSlice.js b/packages/webapp/src/containers/Snackbar/snackbarSlice.js
@@ -9,11 +9,17 @@ const snackbarSlice = createSlice({
   reducers: {
     enqueueSuccessSnackbar: (state, { payload: message }) => {
       const key = `success-${new Date().getTime()}`;
-      state.notifications = [...state.notifications, { message, key }];
+      state.notifications = [
+        ...state.notifications,
+        { message, key, options: { variant: 'common' } },
+      ];
     },
     enqueueErrorSnackbar: (state, { payload: message }) => {
       const key = `error-${new Date().getTime()}`;
-      state.notifications = [...state.notifications, { message, key }];
+      state.notifications = [
+        ...state.notifications,
+        { message, key, options: { variant: 'common', persist: true } },
+      ];
     },
     closeSnackbar: (state, { payload: key }) => {
       state.notifications = state.notifications.map((notification) => ({

diff --git a/packages/webapp/src/containers/Snackbar/useReduxSnackbar.js b/packages/webapp/src/containers/Snackbar/useReduxSnackbar.js
@@ -31,7 +31,6 @@ export function useReduxSnackbar() {
       // display snackbar using notistack
       enqueueSnackbar(message, {
         key,
-        persist: true,
         ...options,
         onClose: (event, reason, myKey) => {
           if (options.onClose) {

diff --git a/packages/webapp/src/stories/SnackBar/Snackbar.stories.jsx b/packages/webapp/src/stories/SnackBar/Snackbar.stories.jsx
@@ -22,7 +22,7 @@ function Page() {
       <Button
         onClick={() =>
           enqueueSnackbar('Upload success', {
-            persist: true,
+            variant: 'common',
             key: `success-${new Date().getTime()}`,
           })
         }
@@ -32,14 +32,26 @@ function Page() {
       <Button
         color={'secondary'}
         onClick={() =>
-          enqueueSnackbar('Upload success', {
-            persist: true,
+          enqueueSnackbar('Upload failed', {
+            variant: 'common',
             key: `error-${new Date().getTime()}`,
           })
         }
       >
         Error
       </Button>
+      <Button
+        color={'secondary'}
+        onClick={() =>
+          enqueueSnackbar('Persist', {
+            variant: 'common',
+            key: `error-${new Date().getTime()}`,
+            persist: true,
+          })
+        }
+      >
+        Persist
+      </Button>
     </Layout>
   );
 }
@@ -52,7 +64,7 @@ const Template = (args) => {
         vertical: 'bottom',
         horizontal: 'center',
       }}
-      content={(key, message) => <NotistackSnackbar id={key} message={message} />}
+      Components={{ common: NotistackSnackbar }}
     >
       <Page />
     </SnackbarProvider>