Sean 4/23 integrated MUITypes into redux and appStateSlice; created DirectChildMUI and DirectChildMUINestable components; added MUI components to DragDropPanel component; updated MUITypes; updated associated imports

>
>
Co-author-by: Heather Pfeiffer <[email protected]>
Co-author-by: Jesse Wowczuk <[email protected]>
Co-author-by: Zack Vandiver <[email protected]>
Co-author-by: Sean Ryan <sfryan95>

Author: sfryan95

app/src/components/left/DragDropPanel.tsx

@@ -1,7 +1,7 @@
 import { useDispatch, useSelector } from 'react-redux';
 import Grid from '@mui/material/Grid';
 import HTMLItem from './HTMLItem';
-import MUIItem from './MUI_Item';
+import MUIItem from './MUIItem';
 import React from 'react';
 import { RootState } from '../../redux/store';
 import { deleteElement } from '../../redux/reducers/slice/appStateSlice';
@@ -46,11 +46,14 @@ const DragDropPanel = (props): JSX.Element => {
     (type) => type.name !== 'separator'
   );
 
-  const muiTypesToRender = state.MUITypes;
+  const muiTypesToRender = state.MUITypes.filter(
+    (type) => type.name !== 'separator'
+  );
 
   return (
     <div className={'HTMLItems'}>
       <div id="HTMLItemsTopHalf">
+        {/* Root Components */}
         <Accordion className={classes.accordion}>
           <AccordionSummary
             expandIcon={<ExpandMoreIcon />}
@@ -64,6 +67,8 @@ const DragDropPanel = (props): JSX.Element => {
             <ComponentDrag isVisible={true} isThemeLight={props.isThemeLight} />
           </AccordionDetails>
         </Accordion>
+
+        {/* HTML Components */}
         <Accordion className={classes.accordion}>
           <AccordionSummary
             expandIcon={<ExpandMoreIcon />}
@@ -109,17 +114,15 @@ const DragDropPanel = (props): JSX.Element => {
           <AccordionDetails>
             <Grid container justifyContent="center">
               {muiTypesToRender.map((option) => {
-                // if (option.name === 'MUI') {
                 return (
-                  <HTMLItem
+                  <MUIItem
                     name={option.name}
                     key={`mui-${option.name}`}
                     id={option.id}
                     icon={option.icon}
                     handleDelete={handleDelete}
                   />
                 );
-                // }
               })}
             </Grid>
           </AccordionDetails>

app/src/components/left/HTMLItem.tsx

@@ -19,6 +19,7 @@ const useStyles = makeStyles({
     height: 'auto',
     width: 'auto',
     fontSize: 'small',
+    alignItems: 'center',
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-evenly',

app/src/components/left/MUI_Item.tsx renamed to app/src/components/left/MUIItem.tsx

@@ -20,10 +20,11 @@ const useStyles = makeStyles({
   MUIPanelItem: {
     height: 'auto',
     width: 'auto',
-    fontSize: 'medium',
+    fontSize: 'small',
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-evenly',
+    alignItems: 'center',
     textAlign: 'center',
     cursor: 'grab'
   },
@@ -48,15 +49,20 @@ const MUIItem: React.FC<{
   // Use drag and drop functionality
   const classes = useStyles();
   const [modal, setModal] = useState(null);
+
+  const item = {
+    type: ItemTypes.INSTANCE,
+    newInstance: true,
+    instanceType: 'MUI Component', // MUI Element? - we should carefully consider what we call this
+    name,
+    icon,
+    instanceTypeId: id
+  };
+
+  // console.log('draggable item', item);
+
   const [{ isDragging }, drag] = useDrag({
-    item: {
-      type: ItemTypes.INSTANCE,
-      newInstance: true,
-      instanceType: 'MUI Component', // MUI Element? - we should carefully consider what we call this
-      name,
-      icon,
-      instanceTypeId: id
-    },
+    item,
     collect: (monitor: any) => ({
       isDragging: !!monitor.isDragging()
     })
@@ -137,16 +143,16 @@ const MUIItem: React.FC<{
   // id over/under 20 logic
   // html-g{name} - html grid name = item
   return (
-    <Grid item xs={5} key={`html-g${name}`} id="HTMLgrid">
-      {id <= 20 && (
+    <Grid item xs={5} key={`mui-g${name}`} id="HTMLgrid">
+      {id >= 20 && (
         <div
           ref={drag}
           style={{
             backgroundColor: '#2D313A',
             backgroundImage: 'linear-gradient(160deg, #2D313A 0%, #1E2024 100%)'
           }}
           className={`${classes.MUIPanelItem} ${classes.darkThemeFontColor}`}
-          id="HTMLItem"
+          id="MUIItem"
           onClick={() => {
             handleClick();
           }}
@@ -158,12 +164,12 @@ const MUIItem: React.FC<{
         </div>
       )}
 
-      {id > 20 && (
+      {id < 20 && (
         <div
           ref={drag}
           style={{ borderColor: '#C6C6C6' }}
           className={`${classes.MUIPanelItem} ${classes.darkThemeFontColor}`}
-          id="HTMLItem"
+          id="MUIItem"
           onClick={() => {
             handleClick();
           }}

app/src/components/main/Canvas.tsx

@@ -211,6 +211,7 @@ const Canvas = forwardRef<HTMLDivElement, CanvasProps>(({ zoom }, ref) => {
       }
       // if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
       if (item.newInstance && item.instanceType !== 'Component') {
+        console.log('inside not component check', item);
         dispatch(
           //update state
           addChild({

app/src/components/main/DirectChildMUI.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { ChildElement, MUIType } from '../../interfaces/Interfaces';
+import { useDrag } from 'react-dnd';
+import { ItemTypes } from '../../constants/ItemTypes';
+import { combineStyles } from '../../helperFunctions/combineStyles';
+import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
+import DeleteButton from './DeleteButton';
+import { useDispatch, useSelector } from 'react-redux';
+import { changeFocus } from '../../redux/reducers/slice/appStateSlice';
+import { RootState } from '../../redux/store';
+import { emitEvent } from '../../helperFunctions/socket';
+
+function DirectChildMUI({ childId, name, type, typeId, style }: ChildElement) {
+  const state = useSelector((store: RootState) => store.appState);
+
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
+
+  const dispatch = useDispatch();
+
+  // find the MUI element corresponding with this instance of an MUI element
+  // find the current component to render on the canvas
+  const MUIType: MUIType = state.MUITypes.find(
+    (type: MUIType) => type.id === typeId
+  );
+  // hook that allows component to be draggable
+  const [{ isDragging }, drag] = useDrag({
+    // setting item attributes to be referenced when updating state with new instance of dragged item
+    item: {
+      type: ItemTypes.INSTANCE,
+      newInstance: false,
+      childId: childId,
+      instanceType: type,
+      instanceTypeId: typeId
+    },
+    collect: (monitor: any) => ({
+      isDragging: !!monitor.isDragging()
+    })
+  });
+
+  const changeFocusFunction = (componentId: number, childId: number | null) => {
+    dispatch(changeFocus({ componentId, childId }));
+    if (roomCode) {
+      emitEvent('changeFocusAction', roomCode, {
+        componentId: componentId,
+        childId: childId
+      });
+      // console.log('emit focus event from DirectChildMUI');
+    }
+  };
+
+  // onClickHandler is responsible for changing the focused component and child component
+  function onClickHandler(event) {
+    event.stopPropagation();
+    changeFocusFunction(state.canvasFocus.componentId, childId);
+  }
+
+  // combine all styles so that higher priority style specifications overrule lower priority style specifications
+  // priority order is 1) style directly set for this child (style), 2) style of the referenced HTML element, and 3) default styling
+  const interactiveStyle = {
+    border:
+      state.canvasFocus.childId === childId
+        ? '2px solid #0671e3'
+        : '1px solid #31343A'
+  };
+
+  const combinedStyle = combineStyles(
+    combineStyles(combineStyles(globalDefaultStyle, MUIType.style), style),
+    interactiveStyle
+  );
+
+  return (
+    <div
+      onClick={onClickHandler}
+      style={{ ...combinedStyle, backgroundColor: '#1E2024' }}
+      ref={drag}
+      id={`canv${childId}`}
+    >
+      <span>
+        <strong style={{ color: 'white' }}>{MUIType.placeHolderShort}</strong>
+        <DeleteButton
+          id={childId}
+          name={name[0].toLowerCase() + name.slice(1)}
+          onClickHandler={onClickHandler}
+        />
+      </span>
+    </div>
+  );
+}
+
+export default DirectChildMUI;