From 696b00e304ad637eed8fe1333f2c1423f04843d6 Mon Sep 17 00:00:00 2001 From: Clayton Wilson Date: Mon, 30 Sep 2019 22:30:29 -0400 Subject: [PATCH] Edit profile front-end almost finished. --- functions/package-lock.json | 50 +++++-- functions/package.json | 1 + twistter-frontend/package.json | 4 +- twistter-frontend/src/pages/edit.js | 221 +++++++++++++++++++++++++++- 4 files changed, 254 insertions(+), 22 deletions(-) diff --git a/functions/package-lock.json b/functions/package-lock.json index c1ee09a..a119731 100644 --- a/functions/package-lock.json +++ b/functions/package-lock.json @@ -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", diff --git a/functions/package.json b/functions/package.json index 8ca2723..c5049dd 100644 --- a/functions/package.json +++ b/functions/package.json @@ -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" diff --git a/twistter-frontend/package.json b/twistter-frontend/package.json index 8176b1a..0cb0dda 100644 --- a/twistter-frontend/package.json +++ b/twistter-frontend/package.json @@ -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" } diff --git a/twistter-frontend/src/pages/edit.js b/twistter-frontend/src/pages/edit.js index e4b9085..b3d0a85 100644 --- a/twistter-frontend/src/pages/edit.js +++ b/twistter-frontend/src/pages/edit.js @@ -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 ( -
- yo, this the edit profile page -
- ) + // 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 =>

{profileData}

) + //
+ + //

{this.state.profileData.firstName}

+ //

{this.state.profileData.lastName}

+ //

{this.state.profileData.email}

+ //

{this.state.profileData.bio}

+ //
+ // ) :

Loading...

+ return ( + + + + + Edit Profile + +
+ + + + + + + + + + + + + +
+ + + ); + } } -export default edit; +edit.propTypes = { + classes: PropTypes.object.isRequired +}; + +export default withStyles(styles)(edit);