Skip to content

Commit f413aa1

Browse files
ZackVandiverZackVandiver
authored
Merge pull request #10 from oslabs-beta/feature/MUI-tab
Feature/m UI tab
2 parents 3f77a2a + 1d3fccc commit f413aa1

File tree

4 files changed

+338
-22
lines changed

4 files changed

+338
-22
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ const DragDropPanel = (props): JSX.Element => {
102102
</Accordion>
103103

104104
{/* MUI Components */}
105-
<Accordion className={classes.accordion}>
105+
{/* <Accordion className={classes.accordion}>
106106
<AccordionSummary
107107
expandIcon={<ExpandMoreIcon />}
108108
aria-controls="panel2a-content"
@@ -126,7 +126,7 @@ const DragDropPanel = (props): JSX.Element => {
126126
})}
127127
</Grid>
128128
</AccordionDetails>
129-
</Accordion>
129+
</Accordion> */}
130130

131131
{/* React Router */}
132132
<Accordion className={classes.accordion}>

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

Lines changed: 311 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,311 @@
1+
import { useDispatch, useSelector } from 'react-redux';
2+
import Grid from '@mui/material/Grid';
3+
import MUIItem from './MUIItem';
4+
import React from 'react';
5+
import { RootState } from '../../redux/store';
6+
import { deleteElement } from '../../redux/reducers/slice/appStateSlice';
7+
import { emitEvent } from '../../helperFunctions/socket';
8+
import Accordion from '@mui/material/Accordion';
9+
import AccordionSummary from '@mui/material/AccordionSummary';
10+
import AccordionDetails from '@mui/material/AccordionDetails';
11+
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
12+
import { makeStyles } from '@mui/styles';
13+
import ComponentDrag from './ComponentDrag';
14+
import { Icon } from '@mui/material';
15+
16+
const useStyles = makeStyles({
17+
accordion: {
18+
backgroundColor: '#000000', // Set the background color to gray
19+
color: '#ffffff' // Set the text color to white
20+
},
21+
accordionSummary: {
22+
backgroundColor: '#000000', // Set the background color of the summary to gray
23+
color: '#ffffff' // Set the text color of the summary to white
24+
}
25+
});
26+
27+
const MUIDragDropPanel = (props): JSX.Element => {
28+
const classes = useStyles();
29+
const dispatch = useDispatch();
30+
31+
const state = useSelector((store: RootState) => store.appState);
32+
const contextParam = useSelector((store: RootState) => store.contextSlice);
33+
const roomCode = useSelector((store: RootState) => store.roomSlice.roomCode);
34+
35+
const handleDelete = (id: number): void => {
36+
dispatch(deleteElement({ id: id, contextParam: contextParam }));
37+
if (roomCode) {
38+
emitEvent('deleteElementAction', roomCode, {
39+
id,
40+
contextParam
41+
});
42+
}
43+
};
44+
45+
const htmlTypesToRender = state.HTMLTypes.filter(
46+
(type) => type.name !== 'separator'
47+
);
48+
49+
const muiInputToRender = state.MUITypes.filter(
50+
(type) => type.name !== 'separator' && type.id >= 21 && type.id <= 33
51+
);
52+
53+
const muiDataDisplayToRender = state.MUITypes.filter(
54+
(type) => type.name !== 'separator' && type.id >= 34 && type.id <= 43
55+
);
56+
57+
const muiFeedbackToRender = state.MUITypes.filter(
58+
(type) => type.name !== 'separator' && type.id >= 44 && type.id <= 49
59+
);
60+
61+
const muiSurfacesToRender = state.MUITypes.filter(
62+
(type) => type.name !== 'separator' && type.id >= 50 && type.id <= 53
63+
);
64+
65+
const muiNavigationToRender = state.MUITypes.filter(
66+
(type) => type.name !== 'separator' && type.id >= 54 && type.id <= 62
67+
);
68+
69+
70+
const muiLayoutToRender = state.MUITypes.filter(
71+
(type) => type.name !== 'separator' && type.id >= 63 && type.id <= 70
72+
);
73+
74+
const muiUtilsToRender = state.MUITypes.filter(
75+
(type) => type.name !== 'separator' && type.id >= 71 && type.id <= 80
76+
);
77+
78+
return (
79+
<div className={'MUIItems'}>
80+
<div id="MUIItemsPanel">
81+
82+
{/* Root Components */}
83+
<Accordion className={classes.accordion}>
84+
<AccordionSummary
85+
expandIcon={<ExpandMoreIcon />}
86+
aria-controls="panel1a-content"
87+
id="panel1a-header"
88+
className={classes.accordionSummary}
89+
>
90+
<h3>Root Components</h3>
91+
</AccordionSummary>
92+
<AccordionDetails>
93+
<ComponentDrag isVisible={true} isThemeLight={props.isThemeLight} />
94+
</AccordionDetails>
95+
</Accordion>
96+
97+
{/* Inputs Components */}
98+
<Accordion className={classes.accordion}>
99+
<AccordionSummary
100+
expandIcon={<ExpandMoreIcon />}
101+
aria-controls="panel2a-content"
102+
id="panel2a-header"
103+
className={classes.accordionSummary}
104+
>
105+
<h3>Inputs</h3>
106+
</AccordionSummary>
107+
<AccordionDetails>
108+
<Grid container justifyContent="center">
109+
{muiInputToRender.map((option) => {
110+
return (
111+
<MUIItem
112+
name={option.name}
113+
key={`mui-${option.name}`}
114+
id={option.id}
115+
icon={option.icon}
116+
handleDelete={handleDelete}
117+
/>
118+
);
119+
})}
120+
</Grid>
121+
</AccordionDetails>
122+
</Accordion>
123+
124+
{/* Data Display Component*/}
125+
<Accordion className={classes.accordion}>
126+
<AccordionSummary
127+
expandIcon={<ExpandMoreIcon />}
128+
aria-controls="panel3a-content"
129+
id="panel3a-header"
130+
className={classes.accordionSummary}
131+
>
132+
<h3>Data Display</h3>
133+
</AccordionSummary>
134+
<AccordionDetails>
135+
<Grid container justifyContent="center">
136+
{muiDataDisplayToRender.map((option) => {
137+
return (
138+
<MUIItem
139+
name={option.name}
140+
key={`mui-${option.name}`}
141+
id={option.id}
142+
icon={option.icon}
143+
handleDelete={handleDelete}
144+
/>
145+
);
146+
})}
147+
</Grid>
148+
</AccordionDetails>
149+
</Accordion>
150+
151+
{/* Feedback Component*/}
152+
<Accordion className={classes.accordion}>
153+
<AccordionSummary
154+
expandIcon={<ExpandMoreIcon />}
155+
aria-controls="panel4a-content"
156+
id="panel4a-header"
157+
className={classes.accordionSummary}
158+
>
159+
<h3>Feedback</h3>
160+
</AccordionSummary>
161+
<AccordionDetails>
162+
<Grid container justifyContent="center">
163+
{muiFeedbackToRender.map((option) => {
164+
return (
165+
<MUIItem
166+
name={option.name}
167+
key={`mui-${option.name}`}
168+
id={option.id}
169+
icon={option.icon}
170+
handleDelete={handleDelete}
171+
/>
172+
);
173+
})}
174+
</Grid>
175+
</AccordionDetails>
176+
</Accordion>
177+
178+
{/* Surfaces Component*/}
179+
<Accordion className={classes.accordion}>
180+
<AccordionSummary
181+
expandIcon={<ExpandMoreIcon />}
182+
aria-controls="panel5a-content"
183+
id="panel5a-header"
184+
className={classes.accordionSummary}
185+
>
186+
<h3>Surfaces</h3>
187+
</AccordionSummary>
188+
<AccordionDetails>
189+
<Grid container justifyContent="center">
190+
{muiSurfacesToRender.map((option) => {
191+
return (
192+
<MUIItem
193+
name={option.name}
194+
key={`mui-${option.name}`}
195+
id={option.id}
196+
icon={option.icon}
197+
handleDelete={handleDelete}
198+
/>
199+
);
200+
})}
201+
</Grid>
202+
</AccordionDetails>
203+
</Accordion>
204+
205+
{/* Navigation Component*/}
206+
<Accordion className={classes.accordion}>
207+
<AccordionSummary
208+
expandIcon={<ExpandMoreIcon />}
209+
aria-controls="panel6a-content"
210+
id="panel6a-header"
211+
className={classes.accordionSummary}
212+
>
213+
<h3>Navigation</h3>
214+
</AccordionSummary>
215+
<AccordionDetails>
216+
<Grid container justifyContent="center">
217+
{muiNavigationToRender.map((option) => {
218+
return (
219+
<MUIItem
220+
name={option.name}
221+
key={`mui-${option.name}`}
222+
id={option.id}
223+
icon={option.icon}
224+
handleDelete={handleDelete}
225+
/>
226+
);
227+
})}
228+
</Grid>
229+
</AccordionDetails>
230+
</Accordion>
231+
232+
{/* Layout Component*/}
233+
<Accordion className={classes.accordion}>
234+
<AccordionSummary
235+
expandIcon={<ExpandMoreIcon />}
236+
aria-controls="panel7a-content"
237+
id="panel7a-header"
238+
className={classes.accordionSummary}
239+
>
240+
<h3>Layout</h3>
241+
</AccordionSummary>
242+
<AccordionDetails>
243+
<Grid container justifyContent="center">
244+
{muiLayoutToRender.map((option) => {
245+
return (
246+
<MUIItem
247+
name={option.name}
248+
key={`mui-${option.name}`}
249+
id={option.id}
250+
icon={option.icon}
251+
handleDelete={handleDelete}
252+
/>
253+
);
254+
})}
255+
</Grid>
256+
</AccordionDetails>
257+
</Accordion>
258+
259+
{/* Utils Component */}
260+
<Accordion className={classes.accordion}>
261+
<AccordionSummary
262+
expandIcon={<ExpandMoreIcon />}
263+
aria-controls="panel8a-content"
264+
id="panel8a-header"
265+
className={classes.accordionSummary}
266+
>
267+
<h3>Utils</h3>
268+
</AccordionSummary>
269+
<AccordionDetails>
270+
<Grid container justifyContent="center">
271+
{muiUtilsToRender.map((option) => {
272+
return (
273+
<MUIItem
274+
name={option.name}
275+
key={`mui-${option.name}`}
276+
id={option.id}
277+
icon={option.icon}
278+
handleDelete={handleDelete}
279+
/>
280+
);
281+
})}
282+
</Grid>
283+
</AccordionDetails>
284+
</Accordion>
285+
286+
{/* Next.js */}
287+
{state.projectType === 'Next.js' ? (
288+
<h3 style={{ color: 'C6C6C6' }}>Next.js</h3>
289+
) : null}
290+
{htmlTypesToRender.map((option) => {
291+
if (
292+
option.framework === 'nextjs' &&
293+
state.projectType === 'Next.js'
294+
) {
295+
return (
296+
<HTMLItem
297+
name={option.name}
298+
key={`html-${option.name}`}
299+
id={option.id}
300+
icon={option.icon}
301+
handleDelete={handleDelete}
302+
/>
303+
);
304+
}
305+
})}
306+
</div>
307+
</div>
308+
);
309+
};
310+
311+
export default MUIDragDropPanel;

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,15 @@ import React from 'react';
22
import { RootState } from '../../redux/store';
33
import makeStyles from '@mui/styles/makeStyles';
44
import { useSelector } from 'react-redux';
5+
import MUIDragDropPanel from './MUIDragDropPanel';
56

67
const ProfilePage = () => {
78
const classes = useStyles();
89

910
return (
1011
<div>
11-
<div className={classes.panelWrapper}>
12-
<div className={classes.panelWrapperList}>
13-
<h4 className={classes.darkThemeFontColor}>Settings</h4>
14-
</div>
12+
<MUIDragDropPanel />
1513
</div>
16-
</div>
1714
);
1815
};
1916

0 commit comments

Comments
 (0)