Adds notifications for when graph camera menu items are clicked (#1339)

concord-consortium · Jul 11, 2024 · c411a0e · c411a0e
1 parent 8e91ec9
commit c411a0e
Showing 1 changed file with 36 additions and 4 deletions.
diff --git a/v3/src/components/graph/components/camera-menu-list.tsx b/v3/src/components/graph/components/camera-menu-list.tsx
@@ -1,25 +1,51 @@
 import React, { useState } from "react"
-import { MenuItem, MenuList } from "@chakra-ui/react"
+import { MenuItem, MenuList, useToast } from "@chakra-ui/react"
 import { t } from "../../../utilities/translation/translate"
 
 export const CameraMenuList = () => {
   const [hasBackgroundImage, setHasBackgroundImage] = useState(false)
   const [imageLocked, setImageLocked] = useState(false)
+  const toast = useToast()
+  const handleMenuItemClick = (menuItem: string) => {
+    toast({
+      title: 'Menu item clicked',
+      description: `You clicked on ${menuItem}`,
+      status: 'success',
+      duration: 5000,
+      isClosable: true,
+    })
+  }
 
   const handleAddBackgroundImage = () => {
     setHasBackgroundImage(true)
+    handleMenuItemClick("Add Background Image clicked")
   }
 
   const handleRemoveBackgroundImage = () => {
     setHasBackgroundImage(false)
+    handleMenuItemClick("Remove Background Image clicked")
   }
 
   const handleUnlockImage = () => {
     setImageLocked(false)
+    handleMenuItemClick("Unlock Image clicked")
   }
 
   const handleLockImage = () => {
     setImageLocked(true)
+    handleMenuItemClick("Lock Image clicked")
+  }
+
+  const handleCopyImage = () => {
+    handleMenuItemClick("Copy Image clicked")
+  }
+
+  const handleExportPNG = () => {
+    handleMenuItemClick("Export PNG Image clicked")
+  }
+
+  const handleExportSVG = () => {
+    handleMenuItemClick("Export SVG Image clicked")
   }
 
   return (
@@ -42,9 +68,15 @@ export const CameraMenuList = () => {
             {t("DG.DataDisplayMenu.addBackgroundImage")}
           </MenuItem>
       }
-      <MenuItem data-testid="open-in-draw-tool">{t("DG.DataDisplayMenu.copyAsImage")}</MenuItem>
-      <MenuItem data-testid="export-png-image">{t("DG.DataDisplayMenu.exportPngImage")}</MenuItem>
-      <MenuItem data-testid="export-svg-image">{t("DG.DataDisplayMenu.exportSvgImage")}</MenuItem>
+      <MenuItem data-testid="open-in-draw-tool" onClick={handleCopyImage}>
+        {t("DG.DataDisplayMenu.copyAsImage")}
+      </MenuItem>
+      <MenuItem data-testid="export-png-image" onClick={handleExportPNG}>
+        {t("DG.DataDisplayMenu.exportPngImage")}
+      </MenuItem>
+      <MenuItem data-testid="export-svg-image" onClick={handleExportSVG}>
+        {t("DG.DataDisplayMenu.exportSvgImage")}
+      </MenuItem>
     </MenuList>
   )
 }