Integrated MUI component into more files

Author: ZackVandiver

app/src/components/left/DragDropPanel.tsx

@@ -1,6 +1,7 @@
 import { useDispatch, useSelector } from 'react-redux';
 import Grid from '@mui/material/Grid';
 import HTMLItem from './HTMLItem';
+import MUIItem from './MUI_Item';
 import React from 'react';
 import { RootState } from '../../redux/store';
 import { deleteElement } from '../../redux/reducers/slice/appStateSlice';
@@ -10,18 +11,17 @@ 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'; 
-
+import ComponentDrag from './ComponentDrag';
 
 const useStyles = makeStyles({
   accordion: {
     backgroundColor: '#000000', // Set the background color to gray
-    color: '#ffffff', // Set the text color to white
+    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
-  },
+    color: '#ffffff' // Set the text color of the summary to white
+  }
 });
 
 const DragDropPanel = (props): JSX.Element => {
@@ -46,6 +46,8 @@ const DragDropPanel = (props): JSX.Element => {
     (type) => type.name !== 'separator'
   );
 
+  const muiTypesToRender = state.MUITypes;
+
   return (
     <div className={'HTMLItems'}>
       <div id="HTMLItemsTopHalf">
@@ -93,7 +95,7 @@ const DragDropPanel = (props): JSX.Element => {
             </Grid>
           </AccordionDetails>
         </Accordion>
-  
+
         {/* MUI Components */}
         <Accordion className={classes.accordion}>
           <AccordionSummary
@@ -106,23 +108,23 @@ const DragDropPanel = (props): JSX.Element => {
           </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}
-                    />
-                  );
-                }
+              {muiTypesToRender.map((option) => {
+                // if (option.name === 'MUI') {
+                return (
+                  <HTMLItem
+                    name={option.name}
+                    key={`mui-${option.name}`}
+                    id={option.id}
+                    icon={option.icon}
+                    handleDelete={handleDelete}
+                  />
+                );
+                // }
               })}
             </Grid>
           </AccordionDetails>
         </Accordion>
-  
+
         {/* React Router */}
         <Accordion className={classes.accordion}>
           <AccordionSummary
@@ -156,7 +158,7 @@ const DragDropPanel = (props): JSX.Element => {
             </Grid>
           </AccordionDetails>
         </Accordion>
-  
+
         {/* Next.js */}
         {state.projectType === 'Next.js' ? (
           <h3 style={{ color: 'C6C6C6' }}>Next.js</h3>
@@ -183,4 +185,3 @@ const DragDropPanel = (props): JSX.Element => {
 };
 
 export default DragDropPanel;
-

app/src/interfaces/Interfaces.ts

@@ -17,6 +17,7 @@ export interface State {
   nextBottomSeparatorId?: number;
   nextChildId: number;
   HTMLTypes: HTMLType[];
+  MUITypes: MUIType[];
   tailwind: boolean;
   stylesheet: string;
   codePreview: boolean;

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

@@ -5,9 +5,11 @@ import {
   State,
   Component,
   ChildElement,
-  HTMLType
+  HTMLType,
+  MUIType
 } from '../../../interfaces/Interfaces';
 import HTMLTypes from '../../HTMLTypes';
+import MUITypes from '../../MUITypes';
 import generateCode from '../../../helperFunctions/generateCode';
 import manageSeparators from '../../../helperFunctions/manageSeparators';
 
@@ -40,6 +42,7 @@ export const initialState: State = {
   nextChildId: 1,
   nextTopSeparatorId: 1000,
   HTMLTypes: HTMLTypes, // left as is for now
+  MUITypes: MUITypes, // left as is for now
   tailwind: false,
   stylesheet: '',
   codePreview: false,