modularized headerbutton for tooltips

Author: enigmawun

app/src/components/left/HeaderButton.tsx

@@ -28,7 +28,7 @@ const HeaderButton = (props) => {
         id={id}
         onClick={handleClickPopover}
       >
-        {'Create Modules'}
+        {'Module Editor'}
         <Popover
           id={id}
           open={open}
@@ -44,9 +44,9 @@ const HeaderButton = (props) => {
           }}
         >
           <div className={classes.popover}>
-            <div>
+            {/* <div>
               <HelpIcon id={id} size="small" />
-            </div>
+            </div> */}
             <div>
               Add modules to create a canvas for grouping your components.
             </div>

app/src/components/left/ModulePanel.tsx

@@ -5,20 +5,24 @@ import AddCircleIcon from '@mui/icons-material/AddCircle';
 import ComponentDrag from './ComponentDrag';
 import ComponentPanel from '../right/ComponentPanel';
 import { RootState } from '../../redux/store';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import ComponentsContainer from './ComponentsContainer';
 import CreatePanel from './CreatePanel';
 import HeaderButton from './HeaderButton';
+import HTMLItem from './HtmlItem';
+import Grid from '@mui/material/Grid';
+import HTMLTypes from './redux/HTMLTypes';
 
 interface ModulePanelProps {
   isThemeLight: boolean;
 }
-const ModulePanel: React.FC<ModulePanelProps> = ({
-  isThemeLight
-}: ModulePanelProps) => {
+const ModulePanel: React.FC<ModulePanelProps> = ({ isThemeLight }) => {
   const state = useSelector((store: RootState) => store.appState);
+  const contextParam = useSelector((store: RootState) => store.contextSlice);
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
   const [isCreatingModule, setIsCreatingModule] = useState(false);
   const [isEditingModule, setIsEditingModule] = useState(false);
+  const dispatch = useDispatch();
 
   const customComponents = state.components.filter(
     (comp) => !state.rootComponents.includes(comp.id)
@@ -32,6 +36,20 @@ const ModulePanel: React.FC<ModulePanelProps> = ({
     setIsEditingModule(!isEditingModule);
   };
 
+  const handleDelete = (id: number): void => {
+    dispatch(deleteElement({ id: id, contextParam: contextParam }));
+    if (roomCode) {
+      emitEvent('deleteElementAction', roomCode, {
+        id,
+        contextParam
+      });
+    }
+  };
+
+  const htmlTypesToRender = state.HTMLTypes.filter(
+    (type) => type.name !== 'separator'
+  );
+
   return (
     <div className="modulePanelContainer">
       {isEditingModule ? (
@@ -49,6 +67,26 @@ const ModulePanel: React.FC<ModulePanelProps> = ({
             setIsCreatingModule={setIsCreatingModule}
             isThemeLight={false}
           />
+          <Grid container justifyContent="space-around" columnSpacing={2}>
+            {htmlTypesToRender.map((option) => {
+              if (
+                (option.name === 'Switch' ||
+                  option.name === 'LinkTo' ||
+                  option.name === 'Route') &&
+                state.projectType === 'Classic React'
+              ) {
+                return (
+                  <HTMLItem
+                    name={option.name}
+                    key={`html-${option.name}`}
+                    id={option.id}
+                    icon={option.icon}
+                    handleDelete={handleDelete}
+                  />
+                );
+              }
+            })}
+          </Grid>
           <ComponentDrag
             isVisible={true}
             isThemeLight={false}