From ff11358687b396726a22b8981d6f925520342e8e Mon Sep 17 00:00:00 2001
From: Calvin Moody <calvinmcm@gmail.com>
Date: Thu, 23 Apr 2020 10:46:21 -0400
Subject: [PATCH] refactor consecutive snackbar example with hooks

---
 .../snackbars/ConsecutiveSnackbars.js         | 30 +++++++-----------
 .../snackbars/ConsecutiveSnackbars.tsx        | 31 ++++++++-----------
 2 files changed, 25 insertions(+), 36 deletions(-)

diff --git a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js
index b04b139848bd79..a666ab6f4f34fe 100644
--- 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
index cb5989c0c01d93..b64dfccdbb296f 100644
--- 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();