From bcaf0920a6911a188ef137f103d6f05c7e1d4ce3 Mon Sep 17 00:00:00 2001 From: Leon Liang Date: Thu, 24 Oct 2019 17:45:41 -0400 Subject: [PATCH 1/5] deleted staticProfile --- twistter-frontend/src/components/profile/StaticProfile.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 twistter-frontend/src/components/profile/StaticProfile.js diff --git a/twistter-frontend/src/components/profile/StaticProfile.js b/twistter-frontend/src/components/profile/StaticProfile.js deleted file mode 100644 index e69de29..0000000 From 4aa029c649c46b265697471b534fad186e1f8080 Mon Sep 17 00:00:00 2001 From: Leon Liang Date: Thu, 24 Oct 2019 19:34:31 -0400 Subject: [PATCH 2/5] modified getUserDetails --- functions/handlers/users.js | 34 ++++++---------------------------- 1 file changed, 6 insertions(+), 28 deletions(-) diff --git a/functions/handlers/users.js b/functions/handlers/users.js index 00d8f1c..0d9c9e9 100644 --- a/functions/handlers/users.js +++ b/functions/handlers/users.js @@ -178,37 +178,15 @@ exports.updateProfileInfo = (req, res) => { exports.getUserDetails = (req, res) => { let userData = {}; - db.doc(`/users/${req.params.handle}`) + db.doc(`/users/${req.body.handle}`) .get() .then((doc) => { if (doc.exists) { - userData.user = doc.data(); - return db - .collection("post") - .where("userHandle", "==", req.params.handle) - .orderBy("createdAt", "desc") - .get(); - } else { - return res.status(404).json({ - error: "User not found" - }); - } - }) - .then((data) => { - userData.posts = []; - data.forEach((doc) => { - userData.posts.push({ - body: doc.data().body, - createAt: doc.data().createAt, - userHandle: doc.data().userHandle, - userImage: doc.data().userImage, - likeCount: doc.data().likeCount, - commentCount: doc.data().commentCount, - postId: doc.id - }); - }); - return res.json(userData); - }) + userData = doc.data(); + return res.status(200).json({userData}); + } else { + return res.status(400).json({error: "User not found."}) + }}) .catch((err) => { console.error(err); return res.status(500).json({ error: err.code }); From 97650f6539f17f95f6bafea907e122d7760320f0 Mon Sep 17 00:00:00 2001 From: Leon Liang Date: Thu, 24 Oct 2019 22:08:09 -0400 Subject: [PATCH 3/5] added axios baseURL --- twistter-frontend/src/App.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js index b4b1aec..6306ab1 100644 --- a/twistter-frontend/src/App.js +++ b/twistter-frontend/src/App.js @@ -19,6 +19,8 @@ import { logoutUser, getUserData } from './redux/actions/userActions'; // Components import AuthRoute from "./util/AuthRoute"; +axios.defaults.baseURL = 'http://localhost:5006/twistter-e4649/us-central1/api'; + // Pages import home from './pages/Home'; import signup from './pages/Signup'; From 6e9a86e5ce32577859c8eb29f5abde204dc99fcc Mon Sep 17 00:00:00 2001 From: Leon Liang Date: Thu, 24 Oct 2019 22:08:28 -0400 Subject: [PATCH 4/5] changed getUser --- functions/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/functions/index.js b/functions/index.js index 5c728bc..a718b52 100644 --- a/functions/index.js +++ b/functions/index.js @@ -27,7 +27,7 @@ app.post("/signup", signup); // and password app.post("/login", login); -app.get("/getUser/:handle", getUserDetails); +app.get("/getUser", fbAuth, getUserDetails); // Returns all profile data of the currently logged in user app.get("/getProfileInfo", fbAuth, getProfileInfo); From 4200c05ca19315f710e80f4dc8183cc5102fd7d2 Mon Sep 17 00:00:00 2001 From: Leon Liang Date: Thu, 24 Oct 2019 22:08:49 -0400 Subject: [PATCH 5/5] added profile display --- twistter-frontend/package-lock.json | 13 +++++ twistter-frontend/package.json | 4 +- .../src/components/profile/Profile.js | 48 +++++++++++++++++++ twistter-frontend/src/pages/user.js | 44 +++++++++++++---- 4 files changed, 100 insertions(+), 9 deletions(-) create mode 100644 twistter-frontend/src/components/profile/Profile.js diff --git a/twistter-frontend/package-lock.json b/twistter-frontend/package-lock.json index 5b4b20d..c14d5b6 100644 --- a/twistter-frontend/package-lock.json +++ b/twistter-frontend/package-lock.json @@ -61,6 +61,14 @@ } } }, + "@material-ui/icons": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.5.1.tgz", + "integrity": "sha512-YZ/BgJbXX4a0gOuKWb30mBaHaoXRqPanlePam83JQPZ/y4kl+3aW0Wv9tlR70hB5EGAkEJGW5m4ktJwMgxQAeA==", + "requires": { + "@babel/runtime": "^7.4.4" + } + }, "@material-ui/styles": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.5.0.tgz", @@ -9717,6 +9725,11 @@ "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, + "typeface-roboto": { + "version": "0.0.75", + "resolved": "https://registry.npmjs.org/typeface-roboto/-/typeface-roboto-0.0.75.tgz", + "integrity": "sha512-VrR/IiH00Z1tFP4vDGfwZ1esNqTiDMchBEXYY9kilT6wRGgFoCAlgkEUMHb1E3mB0FsfZhv756IF0+R+SFPfdg==" + }, "uglify-js": { "version": "3.4.10", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz", diff --git a/twistter-frontend/package.json b/twistter-frontend/package.json index f03c528..f7dd12f 100644 --- a/twistter-frontend/package.json +++ b/twistter-frontend/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@material-ui/core": "^4.4.3", + "@material-ui/icons": "^4.5.1", "@material-ui/styles": "^4.5.0", "@material-ui/system": "^4.5.0", "axios": "^0.19.0", @@ -18,7 +19,8 @@ "react-router-dom": "^5.1.0", "react-scripts": "0.9.5", "redux": "^4.0.4", - "redux-thunk": "^2.3.0" + "redux-thunk": "^2.3.0", + "typeface-roboto": "0.0.75" }, "devDependencies": {}, "scripts": { diff --git a/twistter-frontend/src/components/profile/Profile.js b/twistter-frontend/src/components/profile/Profile.js new file mode 100644 index 0000000..6d4bd8c --- /dev/null +++ b/twistter-frontend/src/components/profile/Profile.js @@ -0,0 +1,48 @@ +import React, { Component, Fragment } from "react"; +import PropTypes from "prop-types"; +import axios from "axios"; +import { connect } from 'react-redux'; + +//MUI +import withStyles from "@material-ui/core/styles/withStyles"; +import Card from "@material-ui/core/CardMedia"; +import Typography from "@material-ui/core/Typography"; +import Button from "@material-ui/core/Button"; +import { Paper } from "@material-ui/core"; + +const styles = theme => ({ + ...theme +}); + +class Profile extends Component { + state = { + profile: null + }; + + componentDidMount() { + axios + .get("/user") + .then(res => { + console.log(res.data.userData.credentials.handle); + this.setState({ + profile: res.data.userData.credentials.handle + }); + }) + .catch(err => console.log(err)); + } + render() { + let profileMarkup = this.state.profile ? ( +

+ {this.state.profile} +

) :

loading profile...

+ + return profileMarkup; + } +} + +const mapStateToProps = state => ({ + user: state.user, + classes: PropTypes.object.isRequired +}); + +export default connect(mapStateToProps)(withStyles(styles)(Profile)); diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js index f1113a0..7ace6bc 100644 --- a/twistter-frontend/src/pages/user.js +++ b/twistter-frontend/src/pages/user.js @@ -1,5 +1,6 @@ /* eslint-disable */ import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import axios from 'axios'; //import '../App.css'; import { makeStyles, styled } from '@material-ui/core/styles'; @@ -9,6 +10,13 @@ import CardMedia from '@material-ui/core/CardMedia'; import CardContent from '@material-ui/core/CardContent'; import Chip from '@material-ui/core/Chip'; import Paper from '@material-ui/core/Paper'; +import Typography from "@material-ui/core/Typography"; + + +// component +import Profile from '../components/profile/Profile'; +import Userline from '../Userline'; +import noImage from '../images/no-img.png'; const PostCard = styled(Card)({ @@ -22,28 +30,48 @@ const PostCard = styled(Card)({ class user extends Component { - componentDidMount(){ - //TODO: get user details - //TODO: get posts - } + state = { + profile: null + }; + componentDidMount() { + axios + .get("/user") + .then(res => { + console.log(res.data.userData.credentials.handle); + this.setState({ + profile: res.data.userData.credentials.handle + }); + }) + .catch(err => console.log(err)); + } render() { + + let profileMarkup = this.state.profile ? ( +

+ {this.state.profile} +

) :

loading profile...

+ return (

Post

 - - - Username - + + {profileMarkup} ); } } +Userline.PropTypes = { + handle: PropTypes.object.isRequired +}; +const mapStateToProps = (state) => ({ + user: state.user +}); export default user;