Skip to content

Commit ae3d5f3

Browse files
trilliumtrillium
authored
Merge pull request #2017 from Simmigon-flagg/1704-update-html-components-to-mui-srccomponentsmanageprojectsaddprojectjsx
Removed unused variables and imports changed to MUI
2 parents 814395b + 24684ee commit ae3d5f3

2 files changed

Lines changed: 95 additions & 91 deletions

File tree

‎client/src/components/ChangesModal.jsx‎

Lines changed: 72 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,8 @@
1-
import React from 'react'
2-
import {
3-
Modal,
4-
Box,
5-
Typography,
6-
Grid
7-
} from '@mui/material'
8-
import { StyledButton } from './ProjectForm';
9-
import { Link } from 'react-router-dom';
10-
import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
1+
import { Modal, Box, Typography, Grid, Button } from '@mui/material';
2+
import { Link } from 'react-router-dom';
3+
import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
114

12-
13-
const style = {
5+
const style = {
146
position: 'absolute',
157
top: '50%',
168
left: '50%',
@@ -22,52 +14,73 @@ import {
2214
p: 4,
2315
};
2416

17+
export default function ChangesModal({
18+
open,
19+
onClose,
20+
handleClose,
21+
destination,
22+
}) {
23+
return (
24+
<Modal
25+
open={open}
26+
onClose={onClose}
27+
aria-labelledby="modal-modal-title"
28+
aria-describedby="modal-modal-description"
29+
>
30+
<Box sx={style}>
31+
<Typography
32+
sx={{ textAlign: 'center' }}
33+
id="modal-modal-title"
34+
variant="h4"
35+
component="h3"
36+
>
37+
<WarningAmberRoundedIcon fontSize="large" color="error" />
38+
</Typography>
2539

26-
export default function ChangesModal({open, onClose, handleClose, destination }) {
27-
return (
28-
29-
<Modal
30-
open={open}
31-
onClose={onClose}
32-
aria-labelledby="modal-modal-title"
33-
aria-describedby="modal-modal-description"
34-
>
35-
<Box sx={style}>
36-
<Typography sx={{textAlign: 'center'}} id="modal-modal-title" variant="h4" component="h3">
37-
<WarningAmberRoundedIcon fontSize="large" color="error" />
38-
</Typography>
39-
40-
<Typography sx={{textAlign: 'center'}} id="modal-modal-title" variant="h4" component="h4">
41-
Wait! You made some changes.
42-
</Typography>
43-
<Typography id="modal-modal-description" sx={{ mt: 2, textAlign: 'center' }}>
44-
Are you sure you want to exit without saving?
45-
</Typography>
46-
<Grid direction="column" spacing={3} container alignContent="center" sx={{ my: 3 }}>
47-
<Grid item xs="auto">
48-
<StyledButton
49-
component={Link}
50-
to={destination}
51-
variant="secondary"
52-
cursor="pointer"
53-
54-
>
55-
Yes
56-
</StyledButton>
57-
</Grid>
58-
<Grid item xs="auto">
59-
<StyledButton
60-
type="submit"
61-
form="project-form"
62-
cursor="pointer"
63-
variant="contained"
64-
onClick={handleClose}
65-
>
66-
No
67-
</StyledButton>
68-
</Grid>
40+
<Typography
41+
sx={{ textAlign: 'center' }}
42+
id="modal-modal-title"
43+
variant="h4"
44+
component="h4"
45+
>
46+
Wait! You made some changes.
47+
</Typography>
48+
<Typography
49+
id="modal-modal-description"
50+
sx={{ mt: 2, textAlign: 'center' }}
51+
>
52+
Are you sure you want to exit without saving?
53+
</Typography>
54+
<Grid
55+
direction="column"
56+
spacing={3}
57+
container
58+
alignContent="center"
59+
sx={{ my: 3 }}
60+
>
61+
<Grid item xs="auto">
62+
<Button
63+
component={Link}
64+
to={destination}
65+
variant="secondary"
66+
style={{ width: '150px', cursor: 'pointer' }}
67+
>
68+
Yes
69+
</Button>
70+
</Grid>
71+
<Grid item xs="auto">
72+
<Button
73+
type="submit"
74+
form="project-form"
75+
style={{ width: '150px', cursor: 'pointer' }}
76+
variant="contained"
77+
onClick={handleClose}
78+
>
79+
No
80+
</Button>
6981
</Grid>
70-
</Box>
71-
</Modal>
72-
)
73-
}
82+
</Grid>
83+
</Box>
84+
</Modal>
85+
);
86+
}

‎client/src/components/ProjectForm.jsx‎

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import { useState } from 'react';
22
import { useHistory } from 'react-router-dom';
33
import { useForm, useFormState } from 'react-hook-form';
44
import {
@@ -13,7 +13,6 @@ import {
1313
RadioGroup,
1414
Paper,
1515
} from '@mui/material';
16-
import { styled } from '@mui/material/styles';
1716

1817
import useAuth from '../hooks/useAuth';
1918
import ProjectApiService from '../api/ProjectApiService';
@@ -29,28 +28,12 @@ import ChangesModal from './ChangesModal';
2928
* -the rest are inline
3029
*/
3130

32-
export const StyledButton = styled(Button)(({ theme }) => ({
33-
width: '150px',
34-
}));
35-
36-
const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
37-
width: 'max-content',
38-
'& .MuiFormControlLabel-label': {
39-
fontSize: '14px',
40-
},
41-
}));
42-
43-
const StyledRadio = styled(Radio)(({ theme }) => ({
44-
padding: '0px 0px 0px 0px',
45-
marginRight: '.5rem',
46-
}));
47-
4831
/**Project Form Component
4932
* -renders a form for creating and updating a project
5033
5134
5235
/**
53-
36+
5437
/**
5538
* Takes Array, formData, projectToEdit, handleChage, isEdit
5639
* submitForm, handleChange, and isEdit are for the edit forms.
@@ -146,11 +129,12 @@ export default function ProjectForm({
146129

147130
// Handles the location radio button change.
148131
const handleRadioChange = (event) => {
132+
alert(event.target.value);
149133
setLocationType(event.target.value);
150134
};
151135

152136
// Toggles the project view to edit mode change.
153-
const handleEditMode = (event) => {
137+
const handleEditMode = () => {
154138
setEditMode(!editMode);
155139
// React hook form method to reset data back to original values. Triggered when Edit Mode is cancelled.
156140
reset({
@@ -212,16 +196,16 @@ export default function ProjectForm({
212196
onChange={handleRadioChange}
213197
sx={{ mb: 0.5 }}
214198
>
215-
<StyledFormControlLabel
199+
<FormControlLabel
216200
value="remote"
217-
control={<StyledRadio size="small" />}
201+
control={<Radio size="small" />}
218202
label="Remote"
219203
disabled={isEdit ? !editMode : false}
220204
/>
221205
<Box sx={{ width: '10px' }} />
222-
<StyledFormControlLabel
206+
<FormControlLabel
223207
value="in-person"
224-
control={<StyledRadio size="small" />}
208+
control={<Radio size="small" />}
225209
label="In-Person"
226210
disabled={isEdit ? !editMode : false}
227211
/>
@@ -247,7 +231,8 @@ export default function ProjectForm({
247231
badge={isEdit ? editIcon() : addIcon()}
248232
expandable={true}
249233
>
250-
<form
234+
<Box
235+
component="form"
251236
id="project-form"
252237
onSubmit={handleSubmit((data) => {
253238
isEdit ? submitEditProject(data) : submitNewProject(data);
@@ -273,33 +258,39 @@ export default function ProjectForm({
273258
aria-describedby="modal-modal-description"
274259
handleClose={handleClose}
275260
/>
276-
</form>
261+
</Box>
277262
<Grid container justifyContent="space-evenly" sx={{ my: 3 }}>
278263
<Grid item xs="auto">
279-
<StyledButton
264+
<Button
280265
type="submit"
281266
form="project-form"
282267
variant={
283268
!isEdit ? 'secondary' : !editMode ? 'contained' : 'secondary'
284269
}
285-
cursor="pointer"
270+
sx={{
271+
width: '150px',
272+
cursor: 'pointer',
273+
}}
286274
disabled={isEdit && isLoading ? !editMode : false}
287275
>
288276
{isLoading ? <CircularProgress /> : 'Save'}
289-
</StyledButton>
277+
</Button>
290278
</Grid>
291279
<Grid item xs="auto">
292-
<StyledButton
280+
<Button
293281
variant="contained"
294-
cursor="pointer"
282+
sx={{
283+
width: '150px',
284+
cursor: 'pointer',
285+
}}
295286
onClick={
296287
!editMode || Object.keys(dirtyFields).length === 0
297288
? checkFields
298289
: handleOpen
299290
}
300291
>
301292
Close
302-
</StyledButton>
293+
</Button>
303294
</Grid>
304295
</Grid>
305296
</TitledBox>

0 commit comments

Comments
 (0)