[Snackbar] Improve consecutive demos (#20721)

Author: logicalmoody

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();

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();