mirror of
https://github.com/ClaytonWWilson/CS307-Team24.git
synced 2025-12-16 10:18:48 +00:00
Edit profile front-end almost finished.
This commit is contained in:
parent
d255a301a3
commit
696b00e304
50
functions/package-lock.json
generated
50
functions/package-lock.json
generated
@ -180,11 +180,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.1.2.tgz",
|
||||
"integrity": "sha512-fQaWIW8hyX1XUN7+FCSPjvM1agFjGidVuF4Sxi7aFwfyh5t+4fD2VpM4wCQbWmodnx4fZLvsuQd9mkxxU+lGYQ=="
|
||||
},
|
||||
"@firebase/logger": {
|
||||
"version": "0.1.24",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.1.24.tgz",
|
||||
"integrity": "sha512-wPwhWCepEjWiTIqeC9U+7Hcw4XwezKPdXmyXbYSPiWNDcVekNgMPkntwSK+/2ufJO/1nMwAL2n6fL12oQG/PpQ=="
|
||||
},
|
||||
"@firebase/messaging": {
|
||||
"version": "0.4.11",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.4.11.tgz",
|
||||
@ -284,14 +279,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.3.3.tgz",
|
||||
"integrity": "sha512-fUp4kpbxwDiWs/aIBJqBvXgFHZvgoND2JA0gJYSEsXtWtVwfgzY/710plErgZDeQKopX5eOR1sHskZkQUy0U6w=="
|
||||
},
|
||||
"@firebase/util": {
|
||||
"version": "0.2.27",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/util/-/util-0.2.27.tgz",
|
||||
"integrity": "sha512-kFlbWNX1OuLfHrDXZ5QLmNNiLtMyxzbBgMo1DY1tXMjKK1AMYsHnyjInA8esvO0SCDp5XN3Pt9EDlhY4sRiLsw==",
|
||||
"requires": {
|
||||
"tslib": "1.10.0"
|
||||
}
|
||||
},
|
||||
"@firebase/webchannel-wrapper": {
|
||||
"version": "0.2.26",
|
||||
"resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.2.26.tgz",
|
||||
@ -660,6 +647,15 @@
|
||||
"integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==",
|
||||
"dev": true
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.19.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
|
||||
"integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
|
||||
"requires": {
|
||||
"follow-redirects": "1.5.10",
|
||||
"is-buffer": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
||||
@ -1650,6 +1646,29 @@
|
||||
"integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==",
|
||||
"dev": true
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.5.10",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
|
||||
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
|
||||
"requires": {
|
||||
"debug": "=3.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
|
||||
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
|
||||
}
|
||||
}
|
||||
},
|
||||
"forwarded": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
|
||||
@ -2470,6 +2489,11 @@
|
||||
"integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==",
|
||||
"optional": true
|
||||
},
|
||||
"is-buffer": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
|
||||
"integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
|
||||
},
|
||||
"is-date-object": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
"node": "8"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.19.0",
|
||||
"firebase": "^6.6.2",
|
||||
"firebase-admin": "^8.6.0",
|
||||
"firebase-functions": "^3.1.0"
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^4.4.3",
|
||||
"axios": "^0.19.0",
|
||||
"clsx": "^1.0.4",
|
||||
"create-react-app": "^3.1.2",
|
||||
"install": "^0.13.0",
|
||||
"node-pre-gyp": "^0.13.0",
|
||||
@ -22,5 +23,6 @@
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject"
|
||||
}
|
||||
},
|
||||
"proxy": "https://us-central1-twistter-e4649.cloudfunctions.net/api"
|
||||
}
|
||||
|
||||
@ -1,13 +1,218 @@
|
||||
import React, { Component } from 'react'
|
||||
import React, { Component } from "react";
|
||||
import axios from "axios";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
// Material-UI stuff
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import withStyles from "@material-ui/core/styles/withStyles";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Button from "@material-ui/core/Button";
|
||||
const styles = {
|
||||
form: {
|
||||
textAlign: "center"
|
||||
},
|
||||
textField: {
|
||||
marginBottom: 40
|
||||
},
|
||||
pageTitle: {
|
||||
marginTop: 40,
|
||||
marginBottom: 40
|
||||
}
|
||||
// firstName: {
|
||||
// marginRight: 10,
|
||||
// },
|
||||
// lastname: {
|
||||
// marginLeft: 10,
|
||||
// }
|
||||
// name: {
|
||||
// width: '40%'
|
||||
// }
|
||||
};
|
||||
|
||||
// const classes = useStyles();
|
||||
|
||||
export class edit extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<b>yo, this the edit profile page</b>
|
||||
</div>
|
||||
)
|
||||
// profileData = {
|
||||
// firstName: null,
|
||||
// lastName: null,
|
||||
// email: null,
|
||||
// handle: null,
|
||||
// bio: null,
|
||||
// valid: false,
|
||||
// };
|
||||
|
||||
componentDidMount() {
|
||||
axios
|
||||
.get("/getProfileInfo")
|
||||
.then(res => {
|
||||
// console.log(res.data);
|
||||
// this.state.firstName = res.data.firstName;
|
||||
// this.state.lastName = res.data.lastName;
|
||||
// this.state.email = res.data.email;
|
||||
// this.state.handle = res.data.handle;
|
||||
// this.state.bio = res.data.bio;
|
||||
// this.state.valid = true;
|
||||
this.setState({
|
||||
firstName: res.data.firstName,
|
||||
lastName: res.data.lastName,
|
||||
email: res.data.email,
|
||||
handle: res.data.handle,
|
||||
bio: res.data.bio
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
handle: "",
|
||||
bio: "",
|
||||
loading: false,
|
||||
errors: {}
|
||||
};
|
||||
}
|
||||
|
||||
handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
this.setState({
|
||||
loading: true,
|
||||
});
|
||||
const newProfileData = {
|
||||
firstName: this.state.firstName,
|
||||
lastName: this.state.lastName,
|
||||
email: this.state.email,
|
||||
handle: this.state.handle,
|
||||
bio: this.state.bio,
|
||||
}
|
||||
axios.post('updateProfileInfo', newProfileData)
|
||||
.then((res) => {
|
||||
this.setState({
|
||||
loading: false,
|
||||
});
|
||||
// this.props.history.push('/');
|
||||
})
|
||||
.catch((err) => {
|
||||
this.setState({
|
||||
errors: err.response.data,
|
||||
loading: false,
|
||||
});
|
||||
})
|
||||
};
|
||||
|
||||
handleChange = (event) => {
|
||||
this.setState({
|
||||
[event.target.name]: event.target.value
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
const { errors, loading } = this.state;
|
||||
// let editProfileMarkup = this.state.profileData ? (
|
||||
// // this.state.profileData.map(profileData => <p>{profileData}</p>)
|
||||
// <div>
|
||||
|
||||
// <p>{this.state.profileData.firstName}</p>
|
||||
// <p>{this.state.profileData.lastName}</p>
|
||||
// <p>{this.state.profileData.email}</p>
|
||||
// <p>{this.state.profileData.bio}</p>
|
||||
// </div>
|
||||
// ) : <p>Loading...</p>
|
||||
return (
|
||||
<Grid container className={classes.form}>
|
||||
<Grid item sm />
|
||||
<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}
|
||||
variant="outlined"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item sm>
|
||||
<TextField
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
label="Last Name"
|
||||
className={classes.textField}
|
||||
value={this.state.lastName}
|
||||
variant="outlined"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<TextField
|
||||
id="email"
|
||||
name="email"
|
||||
label="Email"
|
||||
className={classes.textField}
|
||||
value={this.state.email}
|
||||
disabled
|
||||
helperText="(disabled)"
|
||||
variant="outlined"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
id="handle"
|
||||
name="handle"
|
||||
label="Handle"
|
||||
className={classes.textField}
|
||||
value={this.state.handle}
|
||||
disabled
|
||||
helperText="(disabled)"
|
||||
variant="outlined"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
id="bio"
|
||||
name="bio"
|
||||
label="Bio"
|
||||
className={classes.textField}
|
||||
value={this.state.bio}
|
||||
multiline
|
||||
rows="8"
|
||||
variant="outlined"
|
||||
onChange={this.handleChange}
|
||||
fullWidth
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={classes.button}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</form>
|
||||
</Grid>
|
||||
<Grid item sm />
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default edit;
|
||||
edit.propTypes = {
|
||||
classes: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default withStyles(styles)(edit);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user