oslabs-beta · ZackVandiver · Apr 23, 2024 · Apr 23, 2024 · Apr 23, 2024
diff --git a/app/src/components/left/ComponentDrag.tsx b/app/src/components/left/ComponentDrag.tsx
@@ -1,25 +1,47 @@
-import ComponentPanelItem from '../right/ComponentPanelItem';
-import Grid from '@mui/material/Grid';
 import React from 'react';
+import Grid from '@mui/material/Grid';
 import { RootState } from '../../redux/store';
 import makeStyles from '@mui/styles/makeStyles';
 import { useSelector } from 'react-redux';
+import ComponentPanelItem from '../right/ComponentPanelItem';
+
 
-const ComponentDrag = ({ isThemeLight }): JSX.Element => {
+const useStyles = makeStyles({
+  panelWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    flexGrow: 1,
+    overflow: 'auto'
+  },
+  panelWrapperList: {
+    minHeight: 'auto'
+  },
+  lightThemeFontColor: {
+    color: '#fff'
+  },
+  darkThemeFontColor: {
+    color: '#fff'
+  }
+});
+
+const ComponentDrag = ({ isVisible, isThemeLight }): JSX.Element | null => {
   const classes = useStyles();
   const state = useSelector((store: RootState) => store.appState);
 
   const isFocus = (targetId: Number) => {
     return state.canvasFocus.componentId === targetId ? true : false;
   };
 
+  if (!isVisible) return null;
+
   return (
     <div className={classes.panelWrapper}>
       <div className={classes.panelWrapperList}>
         <h4 className={classes.darkThemeFontColor}>
           {state.projectType === 'Next.js' || state.projectType === 'Gatsby.js'
             ? 'Pages'
-            : 'Root Components'}
+            : ''}
         </h4>
         <Grid
           container
@@ -47,23 +69,5 @@ const ComponentDrag = ({ isThemeLight }): JSX.Element => {
   );
 };
 
-const useStyles = makeStyles({
-  panelWrapper: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    flexGrow: 1,
-    overflow: 'auto'
-  },
-  panelWrapperList: {
-    minHeight: '120px'
-  },
-  lightThemeFontColor: {
-    color: '#fff'
-  },
-  darkThemeFontColor: {
-    color: '#fff'
-  }
-});
-
 export default ComponentDrag;
+
diff --git a/app/src/components/left/ComponentsContainer.tsx b/app/src/components/left/ComponentsContainer.tsx
@@ -48,7 +48,7 @@ const useStyles = makeStyles({
      overflow: 'auto'
   },
   panelWrapperList: {
-    minHeight: '120px'
+    minHeight: 'auto'
   },
   lightThemeFontColor: {
     color: '#fff'

diff --git a/app/src/components/left/DragDropPanel.tsx b/app/src/components/left/DragDropPanel.tsx
@@ -5,101 +5,158 @@ import React from 'react';
 import { RootState } from '../../redux/store';
 import { deleteElement } from '../../redux/reducers/slice/appStateSlice';
 import { emitEvent } from '../../helperFunctions/socket';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { makeStyles } from '@mui/styles';
+import ComponentDrag from './ComponentDrag'; 
 
-/*
-DESCRIPTION: This is the top half of the left panel, starting from the 'HTML
-  Elements' header. The boxes containing each HTML element are rendered in
-  HTMLItem, which itself is rendered by this component.
 
-Central state contains all available HTML elements (stored in the HTMLTypes property).
-  The data for HTMLTypes is stored in HTMLTypes.tsx and is added to central state in
-  initialState.tsx.
+const useStyles = makeStyles({
+  accordion: {
+    backgroundColor: '#000000', // Set the background color to gray
+    color: '#ffffff', // Set the text color to white
+  },
+  accordionSummary: {
+    backgroundColor: '#000000', // Set the background color of the summary to gray
+    color: '#ffffff', // Set the text color of the summary to white
+  },
+});
 
-Hook state:
-  -tag:
-*/
-// Extracted the drag and drop functionality from HTMLPanel to make a modular component that can hang wherever the future designers may choose.
 const DragDropPanel = (props): JSX.Element => {
+  const classes = useStyles();
   const dispatch = useDispatch();
 
-  const state = useSelector((store: RootState) => store.appState); // current state
-  const contextParam = useSelector((store: RootState) => store.contextSlice); // current contextParam
-  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode); // current roomCode
+  const state = useSelector((store: RootState) => store.appState);
+  const contextParam = useSelector((store: RootState) => store.contextSlice);
+  const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
 
-  // function for delete element
   const handleDelete = (id: number): void => {
     dispatch(deleteElement({ id: id, contextParam: contextParam }));
     if (roomCode) {
-      // send delete element to server to broadcast to all users
       emitEvent('deleteElementAction', roomCode, {
         id,
         contextParam
       });
     }
   };
 
-  // filter out separator so that it will not appear on the html panel
   const htmlTypesToRender = state.HTMLTypes.filter(
     (type) => type.name !== 'separator'
   );
+
   return (
     <div className={'HTMLItems'}>
       <div id="HTMLItemsTopHalf">
-        <h3 style={{ color: '#ffffff' }}> HTML Elements </h3>
-        <Grid
-          container
-          // spacing={{ xs: 0.5, md: 0.5 }}
-          // columns={{ xs: 4, sm: 4, md: 4 }}
-          justifyContent="center"
-        >
-          {htmlTypesToRender.map((option) => {
-            if (
-              !['Switch', 'LinkTo', 'LinkHref', 'Image', 'Route'].includes(
-                option.name
-              )
-            ) {
-              return (
-                <HTMLItem
-                  name={option.name}
-                  key={`html-${option.name}`}
-                  id={option.id}
-                  icon={option.icon}
-                  handleDelete={handleDelete}
-                />
-              );
-            }
-          })}
-        </Grid>
-
-        {state.projectType === 'Classic React' ? (
-          <h3 style={{ color: '#ffffff' }}>React Router</h3>
-        ) : null}
-        <Grid
-          container
-          // spacing={{ xs: 0.5, md: 0.5 }}
-          // columns={{ xs: 4, sm: 4, md: 4 }}
-          justifyContent="center"
-        >
-          {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>
-
+        <Accordion className={classes.accordion}>
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel1a-content"
+            id="panel1a-header"
+            className={classes.accordionSummary}
+          >
+            <h3>Root Components</h3>
+          </AccordionSummary>
+          <AccordionDetails>
+            <ComponentDrag isVisible={true} isThemeLight={props.isThemeLight} />
+          </AccordionDetails>
+        </Accordion>
+        <Accordion className={classes.accordion}>
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel1a-content"
+            id="panel1a-header"
+            className={classes.accordionSummary}
+          >
+            <h3>HTML Elements</h3>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Grid container justifyContent="center">
+              {htmlTypesToRender.map((option) => {
+                if (
+                  !['Switch', 'LinkTo', 'LinkHref', 'Image', 'Route'].includes(
+                    option.name
+                  )
+                ) {
+                  return (
+                    <HTMLItem
+                      name={option.name}
+                      key={`html-${option.name}`}
+                      id={option.id}
+                      icon={option.icon}
+                      handleDelete={handleDelete}
+                    />
+                  );
+                }
+              })}
+            </Grid>
+          </AccordionDetails>
+        </Accordion>
+
+        {/* MUI Components */}
+        <Accordion className={classes.accordion}>
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel2a-content"
+            id="panel2a-header"
+            className={classes.accordionSummary}
+          >
+            <h3>MUI Components</h3>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Grid container justifyContent="center">
+              {htmlTypesToRender.map((option) => {
+                if (option.name === 'MUI') {
+                  return (
+                    <HTMLItem
+                      name={option.name}
+                      key={`html-${option.name}`}
+                      id={option.id}
+                      icon={option.icon}
+                      handleDelete={handleDelete}
+                    />
+                  );
+                }
+              })}
+            </Grid>
+          </AccordionDetails>
+        </Accordion>
+
+        {/* React Router */}
+        <Accordion className={classes.accordion}>
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel1a-content"
+            id="panel1a-header"
+            className={classes.accordionSummary}
+          >
+            <h3>React Router</h3>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Grid container justifyContent="center">
+              {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>
+          </AccordionDetails>
+        </Accordion>
+
         {/* Next.js */}
         {state.projectType === 'Next.js' ? (
           <h3 style={{ color: 'C6C6C6' }}>Next.js</h3>
@@ -126,3 +183,4 @@ const DragDropPanel = (props): JSX.Element => {
 };
 
 export default DragDropPanel;
+
diff --git a/app/src/components/left/ElementsContainer.tsx b/app/src/components/left/ElementsContainer.tsx
@@ -55,9 +55,10 @@ const ElementsContainer = (props): JSX.Element => {
     >
       {' '}
       <DragDropPanel />
-      <div id={'CompBottomHalf'}>
+      { // moved ComponentDrag to DragDropPanel
+      /* <div id={'CompBottomHalf'}>
         <ComponentDrag isThemeLight={props.isThemeLight} />
-      </div>
+      </div> */}
     </Box>
   );
 };

diff --git a/app/src/components/left/HTMLItem.tsx b/app/src/components/left/HTMLItem.tsx
@@ -17,7 +17,7 @@ const useStyles = makeStyles({
   HTMLPanelItem: {
     height: 'auto',
     width: 'auto',
-    fontSize: 'medium',
+    fontSize: 'small',
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-evenly',