ClaytonWWilson/CS307-Team24
1
0
Fork 0
mirror of https://github.com/ClaytonWWilson/CS307-Team24.git synced 2025-12-16 18:28:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Circular progress when the editProfile page is loading

Browse Source
This commit is contained in:
Clayton Wilson 2019-12-03 16:26:54 -05:00
parent 825c126c6c
commit a4cce0b75e
1 changed files with 180 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

352
twistter-frontend/src/pages/editProfile.js
View File

@ -56,6 +56,7 @@ export class editProfile extends Component {
// Sets the default values of all the textboxes to the data // Sets the default values of all the textboxes to the data
// that is stored in the database for the user. // that is stored in the database for the user.
componentDidMount() { componentDidMount() {
this.setState({pageLoading: true})
axios axios
.get("/getProfileInfo") .get("/getProfileInfo")
.then((res) => { .then((res) => {
@ -64,7 +65,8 @@ export class editProfile extends Component {
lastName: res.data.lastName, lastName: res.data.lastName,
email: res.data.email, email: res.data.email,
handle: res.data.handle, handle: res.data.handle,
bio: res.data.bio bio: res.data.bio,
pageLoading: false
}); });
}) })
.catch((err) => { .catch((err) => {
@ -89,6 +91,7 @@ export class editProfile extends Component {
bio: "", bio: "",
anchorEl: null, anchorEl: null,
loading: false, loading: false,
pageLoading: false,
errors: {} errors: {}
}; };
} }
@ -171,187 +174,190 @@ export class editProfile extends Component {
const id = open ? 'simple-popover' : undefined; const id = open ? 'simple-popover' : undefined;
return ( return (
<Grid container className={classes.form} id="container-grid"> this.state.pageLoading ?
<Grid item sm > <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>
<Button :
variant="outlined" <Grid container className={classes.form} id="container-grid">
color="primary" <Grid item sm >
className={classes.back}
component={ Link }
to='/user'
>
Back to Profile
</Button>
</Grid>
<Grid item sm>
<Typography variant="h2" className={classes.pageTitle}>
Edit Profile
</Typography>
<form noValidate onSubmit={this.handleSubmit}>
<Grid container className={classes.form} spacing={4}>
<Grid item sm>
<TextField
id="firstName"
name="firstName"
label="First Name"
className={classes.textField}
value={this.state.firstName}
helperText={errors.firstName}
error={errors.firstName ? true : false}
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
</Grid>
<Grid item sm>
<TextField
id="lastName"
name="lastName"
label="Last Name"
className={classes.textField}
value={this.state.lastName}
helperText={errors.lastname}
error={errors.lastName ? true : false}
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
</Grid>
</Grid>
<TextField
id="email"
name="email"
label="Email*"
className={classes.textField}
value={this.state.email}
disabled
helperText="(disabled)"
// INFO: These will be uncommented if changing emails is allowed
// helperText={errors.email}
// error={errors.email ? true : false}
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<TextField
id="handle"
name="handle"
label="Handle*"
className={classes.textField}
value={this.state.handle}
disabled
helperText="(disabled)"
// INFO: These will be uncommented if changing usernames is allowed
// helperText={errors.handle}
// error={errors.handle ? true : false}
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<TextField
id="bio"
name="bio"
label="Bio"
className={classes.textField}
value={this.state.bio}
helperText={errors.bio}
error={errors.bio ? true : false}
multiline
rows="8"
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<Button <Button
type="submit" variant="outlined"
variant="contained"
color="primary" color="primary"
className={classes.button} className={classes.back}
disabled={loading} component={ Link }
//component={ Link } to='/user'
//to='/user'
> >
Submit Back to Profile
{loading && (
<CircularProgress size={30} className={classes.progress} />
)}
</Button> </Button>
</Grid>
<Grid item sm>
<Typography variant="h2" className={classes.pageTitle}>
Edit Profile
</Typography>
<form noValidate onSubmit={this.handleSubmit}>
<Grid container className={classes.form} spacing={4}>
<Grid item sm>
<TextField
id="firstName"
name="firstName"
label="First Name"
className={classes.textField}
value={this.state.firstName}
helperText={errors.firstName}
error={errors.firstName ? true : false}
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
</Grid>
<Grid item sm>
<TextField
id="lastName"
name="lastName"
label="Last Name"
className={classes.textField}
value={this.state.lastName}
helperText={errors.lastname}
error={errors.lastName ? true : false}
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
</Grid>
</Grid>
<TextField
id="email"
name="email"
label="Email*"
className={classes.textField}
value={this.state.email}
disabled
helperText="(disabled)"
// INFO: These will be uncommented if changing emails is allowed
// helperText={errors.email}
// error={errors.email ? true : false}
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<TextField
id="handle"
name="handle"
label="Handle*"
className={classes.textField}
value={this.state.handle}
disabled
helperText="(disabled)"
// INFO: These will be uncommented if changing usernames is allowed
// helperText={errors.handle}
// error={errors.handle ? true : false}
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<TextField
id="bio"
name="bio"
label="Bio"
className={classes.textField}
value={this.state.bio}
helperText={errors.bio}
error={errors.bio ? true : false}
multiline
rows="8"
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
disabled={loading}
//component={ Link }
//to='/user'
>
Submit
{loading && (
<CircularProgress size={30} className={classes.progress} />
)}
</Button>
</form> </form>
</Grid> </Grid>
<Grid item sm> <Grid item sm>
<Button <Button
variant="outlined" variant="outlined"
color="secondary" color="secondary"
className={classes.delete} className={classes.delete}
onClick={this.handleOpenConfirmDelete} onClick={this.handleOpenConfirmDelete}
> >
Delete Account Delete Account
</Button> </Button>
</Grid> </Grid>
<Box hidden={!Boolean(this.state.anchorEl)} className={classes.popoverBackground}></Box> <Box hidden={!Boolean(this.state.anchorEl)} className={classes.popoverBackground}></Box>
<Popover <Popover
id={id} id={id}
open={open} open={open}
anchorEl={this.state.anchorEl} anchorEl={this.state.anchorEl}
onClose={this.handleCloseConfirmDelete} onClose={this.handleCloseConfirmDelete}
anchorOrigin={{ anchorOrigin={{
vertical: 'center', vertical: 'center',
horizontal: 'center' horizontal: 'center'
}} }}
transformOrigin={{ transformOrigin={{
vertical: 'top', vertical: 'top',
horizontal: 'center' horizontal: 'center'
}} }}
style={{
marginTop: "-200px"
}}
>
<Box
style={{ style={{
height: 200, marginTop: "-200px"
width: 400
}} }}
> >
<Grid container direction="column" spacing={3}> <Box
<Grid item> style={{
<Typography style={{marginTop: 30, marginLeft: 50, marginRight: 50, textAlign: "center", fontSize: 24}}>Are you sure you want to delete your account?</Typography> height: 200,
width: 400
}}
>
<Grid container direction="column" spacing={3}>
<Grid item>
<Typography style={{marginTop: 30, marginLeft: 50, marginRight: 50, textAlign: "center", fontSize: 24}}>Are you sure you want to delete your account?</Typography>
</Grid>
<Grid item>
<Button
color="secondary"
variant="contained"
component={ Link }
to='/delete'
style={{
marginBottom: "-40px",
marginLeft: 10,
width: 90
}}
>
Yes
</Button>
<Button
color="primary"
variant="outlined"
onClick={this.handleCloseConfirmDelete}
style={{
marginBottom: "-40px",
marginLeft: 195
}}
>
Cancel
</Button>
</Grid>
</Grid> </Grid>
<Grid item> </Box>
<Button </Popover>
color="secondary" </Grid>
variant="contained"
component={ Link }
to='/delete'
style={{
marginBottom: "-40px",
marginLeft: 10,
width: 90
}}
>
Yes
</Button>
<Button
color="primary"
variant="outlined"
onClick={this.handleCloseConfirmDelete}
style={{
marginBottom: "-40px",
marginLeft: 195
}}
>
Cancel
</Button>
</Grid>
</Grid>
</Box>
</Popover>
</Grid>
); );
} }
} }