deleted keyBindCreateComponent & its useEffect hook in ComponentPanel.tsx because it was duplicating handleCreateElement, currently dealing with bug in custom elements list that makes the MUI add more to the render rather than toggling

Author: enigmawun

app/src/components/ContextMenu.tsx

@@ -84,7 +84,7 @@ function ContextMenu({
 
   // remove the keystroke listener on unmount.
   useEffect(
-    // the next line is intentional, im not an idiot, do not remove.
+    // the next line is intentional
     () => () => {
       document.removeEventListener('keydown', keyStrokeFunction); // remove old one first if we have
     },

app/src/components/bottom/CreationPanel.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable max-len */
 import React from 'react';
-import ComponentPanel from '../right/ComponentPanel';
 import HTMLPanel from '../left/HTMLPanel';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../redux/store';
@@ -23,7 +22,7 @@ const CreationPanel = (props): JSX.Element => {
   const style = useSelector((store: RootState) => store.styleSlice);
   return (
     <div className="creation-panel" style={style.style}>
-{/* NOTE: This component has been moved to ModulePanel.tsx
+      {/* NOTE: This component has been moved to ModulePanel.tsx
       <ComponentPanel isThemeLight={props.isThemeLight} /> */}
       <HTMLPanel isThemeLight={props.isThemeLight} />
     </div>

app/src/components/left/CreatePanel.tsx

@@ -201,6 +201,7 @@ const CreatePanel = (props): JSX.Element => {
             textAlign: 'center',
             marginBottom: '6px'
           }}
+          key={name + idx}
         >
           <Button component="label" id={name + '-button'} key={name + idx}>
             {name}
@@ -225,7 +226,7 @@ const CreatePanel = (props): JSX.Element => {
         aria-label="Custom Elements"
         id="customElements"
         key="customElements-header"
-        textAlign="center"
+        sx={{ textAlign: 'center' }}
       >
         Custom Elements
       </Button>
@@ -254,12 +255,11 @@ const CreatePanel = (props): JSX.Element => {
             inputProps={{ 'aria-label': 'HTML + MUI switch' }}
             sx={{ margin: '0 10px' }} // Adjust spacing between text and switch
           />
-          <p className="smallerText">
-            <HeaderButton
-              headerName="HTML + MUI"
-              infoText="Material UI (or MUI) is a customizable library of React components. Toggle this switch on to see both HTML elements and MUI components that you can drag onto your canvas. For more about MUI, see https://mui.com for more details."
-            />
-          </p>
+
+          <HeaderButton
+            headerName="HTML + MUI"
+            infoText="Material UI (or MUI) is a customizable library of React components. Toggle this switch on to see both HTML elements and MUI components that you can drag onto your canvas. For more about MUI, ee https://mui.com for more details."
+          />
         </Box>
       </FormGroup>
       {MUIMode

app/src/components/left/HTMLPanel.tsx

@@ -98,7 +98,8 @@ const HTMLPanel = (props): JSX.Element => {
       style: {},
       placeHolderShort: name,
       placeHolderLong: '',
-      icon: null
+      icon: null,
+      nestable: true
     };
 
     dispatch(addElement(newElement));
@@ -118,7 +119,6 @@ const HTMLPanel = (props): JSX.Element => {
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    console.log('did submit');
     if (tag.trim() === '' || name.trim() === '') return triggerError('empty');
     if (!tag.charAt(0).match(/[a-zA-Z]/) || !name.charAt(0).match(/[a-zA-Z]/))
       return triggerError('letters');
@@ -216,11 +216,11 @@ const HTMLPanel = (props): JSX.Element => {
                 <HelpIcon id={id} size="small" />
               </div>
               <div>
-                Each HTML element created will become part of the DOM, the
-                document model for displaying the page in the browser. The tag
-                will begin or end the element in source code. For example, you
-                could create an HTML element named 'paragraph' and it will
-                appear in its tag 'p' in your HTML markup -- as {`<p> </p>`}.
+                Each custom HTML element you create can be added using
+                drag-and-drop to the DOM. Its HTML tag will begin or end the
+                element in source code. For example, you could create an element
+                named 'navigation' and use the tag 'nav' in your HTML markup so
+                that it appears as {`<nav> </nav>`}.
               </div>
             </div>
           </Popover>
@@ -263,7 +263,7 @@ const HTMLPanel = (props): JSX.Element => {
           severity="success"
           sx={{ width: '100%', color: 'white', backgroundColor: '#f88e16' }}
         >
-          HTML Tag Created!
+          HTML Element Created!
         </Alert>
       </Snackbar>
     </>

app/src/components/left/ModulePanel.tsx

@@ -60,7 +60,7 @@ const ModulePanel: React.FC<ModulePanelProps> = ({ isThemeLight }) => {
             textAlign: 'center'
           }}
         >
-          <CreatePanel />
+          <CreatePanel key="createPanel2" />
         </div>
       ) : (
         <div

app/src/components/right/ComponentPanel.tsx

@@ -63,24 +63,25 @@ const ComponentPanel = ({ setIsCreatingModule, isThemeLight }): JSX.Element => {
     }
   };
 
-  const handleCreateElement = useCallback((e) => {
-    if (
-      e.key === 'Enter' &&
-      e.target.tagName === 'INPUT' &&
-      e.target.type !== 'checkbox' &&
-      e.target.id !== 'filled-hidden-label-small'
-    ) {
-      e.preventDefault();
-      document.getElementById('submitButton').click();
-    }
-  }, []);
+  // const handleCreateElement = useCallback((e) => {
+  //   if (
+  //     e.key === 'Enter' &&
+  //     e.target.tagName === 'INPUT' &&
+  //     e.target.type !== 'checkbox' &&
+  //     e.target.id !== 'filled-hidden-label-small'
+  //   ) {
+  //     e.preventDefault();
+  //     document.getElementById('submitButton').click();
+  //   }
+  // }, []);
 
-  useEffect(() => {
-    document.addEventListener('keydown', handleCreateElement);
-    return () => {
-      document.removeEventListener('keydown', handleCreateElement);
-    };
-  }, []);
+  // useEffect(() => {
+  //   document.addEventListener('keydown', handleCreateElement);
+  //   console.log('what event', event);
+  //   return () => {
+  //     document.removeEventListener('keydown', handleCreateElement);
+  //   };
+  // }, []);
 
   const handleNameInput = (e: React.ChangeEvent<HTMLInputElement>) => {
     setErrorStatus(false);
@@ -155,24 +156,6 @@ const ComponentPanel = ({ setIsCreatingModule, isThemeLight }): JSX.Element => {
     triggerError(error);
   };
 
-  const keyBindCreateComponent = useCallback((e) => {
-    if (
-      e.key === 'Enter' &&
-      e.target.tagName === 'INPUT' &&
-      e.target.type !== 'checkbox'
-    ) {
-      e.preventDefault();
-      document.getElementById('addComponentButton').click();
-    }
-  }, []);
-
-  useEffect(() => {
-    document.addEventListener('keydown', keyBindCreateComponent);
-    return () => {
-      document.removeEventListener('keydown', keyBindCreateComponent);
-    };
-  }, []);
-
   const handleAlertClose = (
     event: React.SyntheticEvent | Event,
     reason?: string
@@ -204,6 +187,12 @@ const ComponentPanel = ({ setIsCreatingModule, isThemeLight }): JSX.Element => {
             error={errorStatus}
             helperText={errorStatus ? errorMsg : ''}
             onChange={handleNameInput}
+            // onKeyDown={(e) => {
+            //   if (e.key === 'Enter') {
+            //     e.preventDefault();
+            //     handleNameSubmit;
+            //   }
+            // }}
             size="small"
             sx={{ width: '80%' }}
           />

app/src/containers/MainContainer.tsx

@@ -42,7 +42,6 @@ const MainContainer = (props): JSX.Element => {
   const id: string = useSelector((store: RootState) => store.appState._id);
 
   const appState = useSelector((store: RootState) => store.appState);
-  console.log(appState.canvasFocus);
 
   // const { style } = useSelector((store: RootState) => ({
   //   style: store.styleSlice
@@ -100,7 +99,6 @@ const MainContainer = (props): JSX.Element => {
   // use effect for contextMenu listeners
   useEffect(() => {
     document.addEventListener('contextmenu', (e) => {
-      console.log(e.target);
       if (
         ContextMenuRef.current != null &&
         ContextMenuRef.current.contains(e.target)

app/src/helperFunctions/generateCode.ts

@@ -121,7 +121,6 @@ const generateUnformattedCode = (
 
     currentComponent.children.forEach((child) => {
       const newChild = { ...child };
-      console.log({ newChild });
       switch (child.type) {
         case 'Component':
           const component = components.find((c) => c.id === child.typeId);

app/src/redux/reducers/slice/appStateSlice.ts

@@ -268,6 +268,7 @@ const appStateSlice = createSlice({
         useStateCodes: [],
         passedInProps: []
       };
+
       state.components.push(newComponent);
       // functionality if the new component will become the root component
       if (action.payload.root) state.rootComponents.push(newComponent.id);