Skip to content

Commit aaf7b18

Browse files
HM-PfeifferHM-Pfeiffer
authored
Merge pull request #6 from oslabs-beta/feature/MUI_item_component_state
Feature/m UI item component state
2 parents 10573b4 + 62d1b49 commit aaf7b18

File tree

13 files changed

+913
-189
lines changed

13 files changed

+913
-189
lines changed

‎app/src/components/left/DragDropPanel.tsx

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useDispatch, useSelector } from 'react-redux';
22
import Grid from '@mui/material/Grid';
33
import HTMLItem from './HTMLItem';
4+
import MUIItem from './MUIItem';
45
import React from 'react';
56
import { RootState } from '../../redux/store';
67
import { deleteElement } from '../../redux/reducers/slice/appStateSlice';
@@ -10,18 +11,17 @@ import AccordionSummary from '@mui/material/AccordionSummary';
1011
import AccordionDetails from '@mui/material/AccordionDetails';
1112
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
1213
import { makeStyles } from '@mui/styles';
13-
import ComponentDrag from './ComponentDrag';
14-
14+
import ComponentDrag from './ComponentDrag';
1515

1616
const useStyles = makeStyles({
1717
accordion: {
1818
backgroundColor: '#000000', // Set the background color to gray
19-
color: '#ffffff', // Set the text color to white
19+
color: '#ffffff' // Set the text color to white
2020
},
2121
accordionSummary: {
2222
backgroundColor: '#000000', // Set the background color of the summary to gray
23-
color: '#ffffff', // Set the text color of the summary to white
24-
},
23+
color: '#ffffff' // Set the text color of the summary to white
24+
}
2525
});
2626

2727
const DragDropPanel = (props): JSX.Element => {
@@ -46,9 +46,14 @@ const DragDropPanel = (props): JSX.Element => {
4646
(type) => type.name !== 'separator'
4747
);
4848

49+
const muiTypesToRender = state.MUITypes.filter(
50+
(type) => type.name !== 'separator'
51+
);
52+
4953
return (
5054
<div className={'HTMLItems'}>
5155
<div id="HTMLItemsTopHalf">
56+
{/* Root Components */}
5257
<Accordion className={classes.accordion}>
5358
<AccordionSummary
5459
expandIcon={<ExpandMoreIcon />}
@@ -62,6 +67,8 @@ const DragDropPanel = (props): JSX.Element => {
6267
<ComponentDrag isVisible={true} isThemeLight={props.isThemeLight} />
6368
</AccordionDetails>
6469
</Accordion>
70+
71+
{/* HTML Components */}
6572
<Accordion className={classes.accordion}>
6673
<AccordionSummary
6774
expandIcon={<ExpandMoreIcon />}
@@ -93,7 +100,7 @@ const DragDropPanel = (props): JSX.Element => {
93100
</Grid>
94101
</AccordionDetails>
95102
</Accordion>
96-
103+
97104
{/* MUI Components */}
98105
<Accordion className={classes.accordion}>
99106
<AccordionSummary
@@ -106,23 +113,21 @@ const DragDropPanel = (props): JSX.Element => {
106113
</AccordionSummary>
107114
<AccordionDetails>
108115
<Grid container justifyContent="center">
109-
{htmlTypesToRender.map((option) => {
110-
if (option.name === 'MUI') {
111-
return (
112-
<HTMLItem
113-
name={option.name}
114-
key={`html-${option.name}`}
115-
id={option.id}
116-
icon={option.icon}
117-
handleDelete={handleDelete}
118-
/>
119-
);
120-
}
116+
{muiTypesToRender.map((option) => {
117+
return (
118+
<MUIItem
119+
name={option.name}
120+
key={`mui-${option.name}`}
121+
id={option.id}
122+
icon={option.icon}
123+
handleDelete={handleDelete}
124+
/>
125+
);
121126
})}
122127
</Grid>
123128
</AccordionDetails>
124129
</Accordion>
125-
130+
126131
{/* React Router */}
127132
<Accordion className={classes.accordion}>
128133
<AccordionSummary
@@ -156,7 +161,7 @@ const DragDropPanel = (props): JSX.Element => {
156161
</Grid>
157162
</AccordionDetails>
158163
</Accordion>
159-
164+
160165
{/* Next.js */}
161166
{state.projectType === 'Next.js' ? (
162167
<h3 style={{ color: 'C6C6C6' }}>Next.js</h3>
@@ -183,4 +188,3 @@ const DragDropPanel = (props): JSX.Element => {
183188
};
184189

185190
export default DragDropPanel;
186-

‎app/src/components/left/HTMLItem.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,14 @@ import * as Icons from '@mui/icons-material';
1212
import { useDispatch, useSelector } from 'react-redux';
1313
import { addChild } from '../../redux/reducers/slice/appStateSlice';
1414
import { emitEvent } from '../../helperFunctions/socket';
15+
import { RootState } from '../../redux/store';
1516

1617
const useStyles = makeStyles({
1718
HTMLPanelItem: {
1819
height: 'auto',
1920
width: 'auto',
2021
fontSize: 'small',
22+
alignItems: 'center',
2123
display: 'flex',
2224
flexDirection: 'row',
2325
justifyContent: 'space-evenly',
@@ -40,10 +42,8 @@ const HTMLItem: React.FC<{
4042
}> = ({ name, id, icon, handleDelete }) => {
4143
const IconComponent = Icons[icon];
4244

43-
4445
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode); // current roomCode
4546

46-
4747
const classes = useStyles();
4848
const [modal, setModal] = useState(null);
4949
const [{ isDragging }, drag] = useDrag({
@@ -113,7 +113,6 @@ const HTMLItem: React.FC<{
113113
);
114114
};
115115

116-
117116
const dispatch = useDispatch();
118117

119118
const handleClick = () => {
@@ -140,7 +139,10 @@ const HTMLItem: React.FC<{
140139
{id <= 20 && (
141140
<div
142141
ref={drag}
143-
style={{ backgroundColor: '#2D313A', backgroundImage: 'linear-gradient(160deg, #2D313A 0%, #1E2024 100%)'}}
142+
style={{
143+
backgroundColor: '#2D313A',
144+
backgroundImage: 'linear-gradient(160deg, #2D313A 0%, #1E2024 100%)'
145+
}}
144146
className={`${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`}
145147
id="HTMLItem"
146148
onClick={() => {
@@ -183,4 +185,3 @@ const HTMLItem: React.FC<{
183185
};
184186

185187
export default HTMLItem;
186-

‎app/src/components/left/MUIItem.tsx

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
import React, { useState } from 'react';
2+
import Grid from '@mui/material/Grid';
3+
import List from '@mui/material/List';
4+
import ListItem from '@mui/material/ListItem';
5+
import ListItemText from '@mui/material/ListItemText';
6+
import makeStyles from '@mui/styles/makeStyles';
7+
import { useDrag } from 'react-dnd';
8+
9+
import { ItemTypes } from '../../constants/ItemTypes';
10+
import { RootState } from '../../redux/store';
11+
import * as Icons from '@mui/icons-material'; // Assuming a collection of MUI icons
12+
import CodeIcon from '@mui/icons-material/Code'; // Default icon if specific icon not provided
13+
import { useDispatch, useSelector } from 'react-redux';
14+
import { addChild } from '../../redux/reducers/slice/appStateSlice';
15+
import createModal from '../right/createModal'; // Modal creation utility
16+
import { emitEvent } from '../../helperFunctions/socket'; // Event emission utility
17+
18+
// Define component styles using MUI styling solutions
19+
const useStyles = makeStyles({
20+
MUIPanelItem: {
21+
height: 'auto',
22+
width: 'auto',
23+
fontSize: 'small',
24+
display: 'flex',
25+
flexDirection: 'row',
26+
justifyContent: 'space-evenly',
27+
alignItems: 'center',
28+
textAlign: 'center',
29+
cursor: 'grab'
30+
},
31+
lightThemeFontColor: {
32+
color: '#8F8F8F'
33+
},
34+
darkThemeFontColor: {
35+
color: '#8F8F8F'
36+
}
37+
});
38+
39+
const MUIItem: React.FC<{
40+
name: string;
41+
id: number;
42+
icon: any;
43+
handleDelete: (id: number) => void;
44+
}> = ({ name, id, icon, handleDelete }) => {
45+
const IconComponent = Icons[icon];
46+
47+
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode); // current roomCode
48+
49+
// Use drag and drop functionality
50+
const classes = useStyles();
51+
const [modal, setModal] = useState(null);
52+
53+
const item = {
54+
type: ItemTypes.INSTANCE,
55+
newInstance: true,
56+
instanceType: 'MUI Component', // MUI Element? - we should carefully consider what we call this
57+
name,
58+
icon,
59+
instanceTypeId: id
60+
};
61+
62+
// console.log('draggable item', item);
63+
64+
const [{ isDragging }, drag] = useDrag({
65+
item,
66+
collect: (monitor: any) => ({
67+
isDragging: !!monitor.isDragging()
68+
})
69+
});
70+
71+
const closeModal = () => setModal(null);
72+
const deleteAllInstances = (deleteID: number) => {
73+
const children = (
74+
<List className="export-preference">
75+
<ListItem
76+
id="export-modal"
77+
key={`clear${deleteID}`}
78+
onClick={() => handleDelete(deleteID)}
79+
style={{
80+
border: '1px solid #C6C6C6',
81+
marginBottom: '2%',
82+
marginTop: '5%'
83+
}}
84+
>
85+
<ListItemText
86+
primary={'Yes, delete all instances'}
87+
style={{ textAlign: 'center' }}
88+
onClick={closeModal}
89+
/>
90+
</ListItem>
91+
<ListItem
92+
id="export-modal"
93+
key={`close${deleteID}`}
94+
onClick={closeModal}
95+
style={{
96+
border: '1px solid #C6C6C6',
97+
marginBottom: '2%',
98+
marginTop: '5%'
99+
}}
100+
>
101+
<ListItemText
102+
primary={'No, do not delete element'}
103+
style={{ textAlign: 'center' }}
104+
onClick={closeModal}
105+
/>
106+
</ListItem>
107+
</List>
108+
);
109+
setModal(
110+
createModal({
111+
closeModal,
112+
children,
113+
message:
114+
'Deleting this element will delete all instances of this element within the application.\nDo you still wish to proceed?',
115+
primBtnLabel: null,
116+
primBtnAction: null,
117+
secBtnAction: null,
118+
secBtnLabel: null,
119+
open: true
120+
})
121+
);
122+
};
123+
124+
const dispatch = useDispatch();
125+
126+
const handleClick = () => {
127+
const childData = {
128+
type: 'MUI Component',
129+
typeId: id,
130+
childId: null,
131+
contextParam: {
132+
allContext: []
133+
}
134+
};
135+
136+
dispatch(addChild(childData));
137+
if (roomCode) {
138+
// Emit 'addChildAction' event to the server
139+
emitEvent('addChildAction', roomCode, childData);
140+
}
141+
};
142+
143+
// id over/under 20 logic
144+
// html-g{name} - html grid name = item
145+
return (
146+
<Grid item xs={5} key={`mui-g${name}`} id="HTMLgrid">
147+
{id >= 20 && (
148+
<div
149+
ref={drag}
150+
style={{
151+
backgroundColor: '#2D313A',
152+
backgroundImage: 'linear-gradient(160deg, #2D313A 0%, #1E2024 100%)'
153+
}}
154+
className={`${classes.MUIPanelItem} ${classes.darkThemeFontColor}`}
155+
id="MUIItem"
156+
onClick={() => {
157+
handleClick();
158+
}}
159+
>
160+
{typeof IconComponent !== 'undefined' && (
161+
<IconComponent fontSize="small" align-items="center" />
162+
)}
163+
{name}
164+
</div>
165+
)}
166+
167+
{id < 20 && (
168+
<div
169+
ref={drag}
170+
style={{ borderColor: '#C6C6C6' }}
171+
className={`${classes.MUIPanelItem} ${classes.darkThemeFontColor}`}
172+
id="MUIItem"
173+
onClick={() => {
174+
handleClick();
175+
}}
176+
>
177+
{typeof CodeIcon !== 'undefined' && (
178+
<CodeIcon fontSize="small" align-items="center" />
179+
)}
180+
{name}
181+
<button
182+
id="newElement"
183+
style={{ color: '#C6C6C6' }}
184+
onClick={() => deleteAllInstances(id)}
185+
>
186+
X
187+
</button>
188+
</div>
189+
)}
190+
{modal}
191+
</Grid>
192+
);
193+
};
194+
195+
export default MUIItem;

‎app/src/components/main/Canvas.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,7 @@ const Canvas = forwardRef<HTMLDivElement, CanvasProps>(({ zoom }, ref) => {
211211
}
212212
// if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
213213
if (item.newInstance && item.instanceType !== 'Component') {
214+
console.log('inside not component check', item);
214215
dispatch(
215216
//update state
216217
addChild({

0 commit comments

Comments
 (0)