add: copy-to-clipboard with notification stack

site/package.json

@@ -24,6 +24,7 @@
     "eslint": "^7.32.0",
     "gatsby": "^5.14.0",
     "gatsby-plugin-styled-components": "^6.14.0",
+    "notistack": "^3.0.2",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "react": "^18.2.0",

site/src/components/ShapeBuilder/index.js

@@ -1,13 +1,14 @@
 // /* global window */
 import React, { useEffect, useRef, useState } from "react";
-import { Wrapper, CanvasContainer, OutputBox, StyledSVG } from "./shapeBuilder.styles";
-import { Button, Typography, Box } from "@layer5/sistent";
-
+import { Wrapper, CanvasContainer, StyledSVG } from "./shapeBuilder.styles";
+import { Button, Box } from "@layer5/sistent";
+import { useNotificationHandlers } from "../utils/notification-handlers"
 // import { useTheme } from "@layer5/sistent/components/ThemeProvider";
 // import { useMediaQuery } from "@layer5/sistent/components/MediaQuery";
 
 
 const ShapeBuilder = () => {
+  const { handleError, handleSuccess } = useNotificationHandlers();
   const boardRef = useRef(null);
   const polyRef = useRef(null);
   const keyHandlersRef = useRef({});
@@ -137,6 +138,16 @@ const ShapeBuilder = () => {
     showCytoArray();
   };
 
+  const copyToClipboard = () => {
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(result).then(() => {
+        handleSuccess("Coordinates copied to clipboard!");
+      }).catch(err => {
+        handleError("Failed to copy to clipboard: " + err);
+      });
+    }
+  };
+
   useEffect(() => {
     const checkSVG = () => {
       if (!window.SVG || !window.SVG.Element.prototype.draw) {
@@ -202,13 +213,7 @@ const ShapeBuilder = () => {
         <Button variant="contained" onClick={closeShape}>Close Shape</Button>
         <Button variant="contained" onClick={handleMaximize}>Maximize</Button>
       </Box>
-
-      <OutputBox>
-        <Typography variant="subtitle1" component="h6">
-          Polygon Coordinates (SVG format):
-        </Typography>
-        <textarea readOnly value={result} />
-      </OutputBox>
+      <Button variant="contained" onClick={copyToClipboard}>Copy To Clipboard</Button>
     </Wrapper>
   );
 };

site/src/components/utils/notification-handlers.js

@@ -0,0 +1,64 @@
+// utils/notification-handlers.js
+import { IconButton } from "@layer5/sistent";
+import CloseIcon from "@mui/icons-material/Close";
+import { useSnackbar } from "notistack";
+import React, { useCallback } from "react";
+
+export const useNotificationHandlers = () => {
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+
+  const handleNotification = useCallback(
+    (type, msg) => {
+      let message = typeof msg === "string" ? msg : msg?.response?.data;
+      enqueueSnackbar(message, {
+        variant: type,
+        action: key => (
+          <IconButton
+            key="close"
+            aria-label="Close"
+            color="inherit"
+            onClick={() => closeSnackbar(key)}
+          >
+            <CloseIcon />
+          </IconButton>
+        ),
+        autoHideDuration: 8000,
+        style: {
+          display: "flex",
+          flexWrap: "nowrap"
+        }
+      });
+    },
+    [enqueueSnackbar, closeSnackbar]
+  );
+
+  const handleSuccess = useCallback(
+    message => {
+      handleNotification("success", message);
+    },
+    [handleNotification]
+  );
+
+  const handleError = useCallback(
+    message => {
+      handleNotification("error", message);
+    },
+    [handleNotification]
+  );
+
+  const handleInfo = useCallback(
+    message => {
+      handleNotification("info", message);
+    },
+    [handleNotification]
+  );
+
+  const handleWarn = useCallback(
+    message => {
+      handleNotification("warning", message);
+    },
+    [handleNotification]
+  );
+
+  return { handleSuccess, handleError, handleInfo, handleWarn };
+};

site/src/pages/index.js

@@ -5,8 +5,11 @@ import { useDarkMode } from "../components/useDarkMode";
 import Navigation from "../components/Navigation";
 import Footer from "../components/Footer";
 import ShapeBuilder from "../components/ShapeBuilder";
-import { Button, SistentThemeProviderWithoutBaseLine, Box } from "@layer5/sistent"
+import { Button, SistentThemeProviderWithoutBaseLine, Box, SistentThemeProvider } from "@layer5/sistent"
 import InstructionsModal from "../components/utils/instructionsModal";
+import { SnackbarProvider } from "notistack";
+import { CheckCircle, Error, Info, Warning } from "@mui/icons-material";
+import { ThemeResponsiveSnackbar } from "../styles/theme.styles";
 
 const IndexPage = () => {
   // const themesistent = useTheme();
@@ -16,6 +19,21 @@ const IndexPage = () => {
 
   return (
     <SistentThemeProviderWithoutBaseLine>
+      <SnackbarProvider
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+        iconVariant={{
+          success: <CheckCircle style={{ marginRight: "1rem" }} />,
+          error: <Error style={{ marginRight: "1rem" }} />,
+          warning: <Warning style={{ marginRight: "1rem" }} />,
+          info: <Info style={{ marginRight: "1rem" }} />
+        }}
+        Components={{
+          info: ThemeResponsiveSnackbar,
+          success: ThemeResponsiveSnackbar,
+          error: ThemeResponsiveSnackbar,
+          warning: ThemeResponsiveSnackbar
+        }}
+        maxSnack={5}>
       <ThemeProvider theme={themeMode}>
         <GlobalStyle />
         <Navigation theme={theme} toggleTheme={toggleTheme} />
@@ -39,7 +57,8 @@ const IndexPage = () => {
           <ShapeBuilder />
         </Main>
         <Footer />
-      </ThemeProvider>
+        </ThemeProvider>
+      </SnackbarProvider>
     </SistentThemeProviderWithoutBaseLine>
   );
 };