refactor consecutive snackbar example with hooks

mui · Apr 23, 2020 · ff11358 · ff11358
1 parent e4e1d4e
commit ff11358
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 36 deletions.
diff --git a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js
@@ -12,30 +12,24 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function ConsecutiveSnackbars() {
-  const queueRef = React.useRef([]);
+  const [snackPack, setSnackPack] = React.useState([]);
   const [open, setOpen] = React.useState(false);
   const [messageInfo, setMessageInfo] = React.useState(undefined);
 
-  const processQueue = () => {
-    if (queueRef.current.length > 0) {
-      setMessageInfo(queueRef.current.shift());
+  React.useEffect(() => {
+    if (snackPack.length && !messageInfo) {
+      // Set a new snack when we don't have an active one
+      setMessageInfo({ ...snackPack[0] });
+      setSnackPack((prev) => prev.slice(1));
       setOpen(true);
+    } else if (snackPack.length && messageInfo && open) {
+      // Close an active snack when a new one is added
+      setOpen(false);
     }
-  };
+  }, [snackPack, messageInfo, open]);
 
   const handleClick = (message) => () => {
-    queueRef.current.push({
-      message,
-      key: new Date().getTime(),
-    });
-
-    if (open) {
-      // immediately begin dismissing current message
-      // to start showing new one
-      setOpen(false);
-    } else {
-      processQueue();
-    }
+    setSnackPack((prev) => [...prev, { message, key: new Date().getTime() }]);
   };
 
   const handleClose = (event, reason) => {
@@ -46,7 +40,7 @@ export default function ConsecutiveSnackbars() {
   };
 
   const handleExited = () => {
-    processQueue();
+    setMessageInfo(undefined);
   };
 
   const classes = useStyles();

diff --git a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx
@@ -20,34 +20,29 @@ export interface SnackbarMessage {
 
 export interface State {
   open: boolean;
+  snackPack: SnackbarMessage[];
   messageInfo?: SnackbarMessage;
 }
 
 export default function ConsecutiveSnackbars() {
-  const queueRef = React.useRef<SnackbarMessage[]>([]);
+  const [snackPack, setSnackPack] = React.useState<SnackbarMessage[]>([]);
   const [open, setOpen] = React.useState(false);
   const [messageInfo, setMessageInfo] = React.useState<SnackbarMessage | undefined>(undefined);
 
-  const processQueue = () => {
-    if (queueRef.current.length > 0) {
-      setMessageInfo(queueRef.current.shift());
+  React.useEffect(() => {
+    if (snackPack.length && !messageInfo) {
+      // Set a new snack when we don't have an active one
+      setMessageInfo({ ...snackPack[0] });
+      setSnackPack((prev) => prev.slice(1));
       setOpen(true);
+    } else if (snackPack.length && messageInfo && open) {
+      // Close an active snack when a new one is added
+      setOpen(false);
     }
-  };
+  }, [snackPack, messageInfo, open]);
 
   const handleClick = (message: string) => () => {
-    queueRef.current.push({
-      message,
-      key: new Date().getTime(),
-    });
-
-    if (open) {
-      // immediately begin dismissing current message
-      // to start showing new one
-      setOpen(false);
-    } else {
-      processQueue();
-    }
+    setSnackPack((prev) => [...prev, { message, key: new Date().getTime() }]);
   };
 
   const handleClose = (event: React.SyntheticEvent | MouseEvent, reason?: string) => {
@@ -58,7 +53,7 @@ export default function ConsecutiveSnackbars() {
   };
 
   const handleExited = () => {
-    processQueue();
+    setMessageInfo(undefined);
   };
 
   const classes = useStyles();