widget menu refactoring

client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx

@@ -1,10 +1,8 @@
-import { Box, Heading, Center, Menu, Portal, Flex } from '@chakra-ui/react'
+import { Box, Menu, Portal } from '@chakra-ui/react'
-import AlertLevel from './AlertLevelWidget'
+import WidgetMenu from './WidgetMenu';
-// import AddWidgetMenu from './AddWidgetMenu';
 
 export default function FirstWidgetButton({ appendWidget }) {
-    return (
+  const triggerItem = (<>
-        <Menu.Root positioning={{ placement: "bottom-middle" }} >
     <Menu.Trigger asChild>
       <Box
         p={6}
@@ -26,25 +24,13 @@ export default function FirstWidgetButton({ appendWidget }) {
           boxShadow: "lg",
         }}
       >
-                    Add First Widget
+        Add Your First Widget
       </Box>
     </Menu.Trigger>
-            <Portal>
+  </>);
-                <Menu.Positioner>
+  const positioning = { placement: "bottom-middle" };
-                    <Menu.Content>
+  const WidgetMenuProps = { appendWidget, triggerItem, positioning };
-                        <Menu.Item 
+  return (
-                            value="AlertLevel" 
+    <WidgetMenu {...WidgetMenuProps} />
-                            onClick={() => appendWidget(AlertLevel, 3, 6, 3, 6, 3, 6)}
-                        >
-                            Alert Level
-                        </Menu.Item>
-                        <Menu.Item value="co2">CO2</Menu.Item>
-                        <Menu.Item value="ivans">IVANS</Menu.Item>
-                        <Menu.Item value="plume heights">Plume Heights</Menu.Item>
-                        <Menu.Item value="alert level changes">Alert Level Changes</Menu.Item>
-                    </Menu.Content>
-                </Menu.Positioner>
-            </Portal>
-        </Menu.Root>
   );
 }

client/src/components/Canvas/CanvasComponents/SettingsButton.jsx

@@ -1,9 +1,11 @@
 import { IconButton, Menu, Portal } from "@chakra-ui/react";
+import { IoIosArrowBack } from "react-icons/io";
 import { FiSettings } from "react-icons/fi";
-import AddWidgetMenu from "./AddWidgetMenu";
+import WidgetMenu from "./WidgetMenu";
 
 export function SettingsButton({ onEditWidgets, onDeleteWidgets, appendWidget}) {  
-  const addWidgetMenuProps = { appendWidget }
+  const triggerItem = (<> <Menu.TriggerItem> <IoIosArrowBack /> Add Widget</Menu.TriggerItem> </>);
+  const WidgetMenuProps = { appendWidget, triggerItem }
   return (
     <Menu.Root>
       <Menu.Trigger asChild >
@@ -14,7 +16,7 @@ export function SettingsButton({ onEditWidgets, onDeleteWidgets, appendWidget})
       <Portal>
         <Menu.Positioner>
           <Menu.Content>
-            <AddWidgetMenu {...addWidgetMenuProps}/>
+            <WidgetMenu {...WidgetMenuProps}/>
             <Menu.Item onClick={onEditWidgets} value ="editwidget">Edit Widgets</Menu.Item>
             <Menu.Item 
               onClick={onDeleteWidgets}

client/src/components/Canvas/CanvasComponents/WidgetMenu.jsx

@@ -1,13 +1,10 @@
-import { IoIosArrowBack } from "react-icons/io";
 import { Menu, Portal } from "@chakra-ui/react";
 import AlertLevel from "./AlertLevelWidget";
 
-export default function AddWidgetMenu({appendWidget}) {
+export default function WidgetMenu({appendWidget, triggerItem, positioning}) {
   return (
-    <Menu.Root>
+    <Menu.Root positioning={positioning}>
-      <Menu.TriggerItem>
+      {triggerItem}
-        <IoIosArrowBack /> Add Widget
-      </Menu.TriggerItem>
       <Portal>
         <Menu.Positioner>
           <Menu.Content>
@@ -17,18 +14,10 @@ export default function AddWidgetMenu({appendWidget}) {
             >
               Alert Level
             </Menu.Item>
-            <Menu.Item>
+            <Menu.Item value="co2">CO2</Menu.Item>
-              CO2
+            <Menu.Item value="ivans">IVANS</Menu.Item>
-            </Menu.Item>
+            <Menu.Item value="plume heights">Plume Heights</Menu.Item>
-            <Menu.Item>
+            <Menu.Item value="alert level changes">Alert Level Changes</Menu.Item>
-              IVANS
-            </Menu.Item>
-            <Menu.Item>
-              Plume Heights
-            </Menu.Item>
-            <Menu.Item>
-              Alert Level Changes
-            </Menu.Item>
           </Menu.Content>
         </Menu.Positioner>
       </Portal>