added profile display

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",

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": {

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 ? (
+        <p>
+        <Typography variant='h5'>{this.state.profile}</Typography>
+        </p>) : <p>loading profile...</p>
+
+    return profileMarkup;
+  }
+}
+
+const mapStateToProps = state => ({
+  user: state.user,
+  classes: PropTypes.object.isRequired
+});
+
+export default connect(mapStateToProps)(withStyles(styles)(Profile));

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(){
+  state = {
-    //TODO: get user details
+    profile: null
-    //TODO: get posts
+  };
-  }
 
+  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 ? (
+      <p>
+      <Typography variant='h5'>{this.state.profile}</Typography>
+      </p>) : <p>loading profile...</p>
+
     return (
       <Grid container spacing={16}>
         <Grid item sm={8} xs={12}>
           <p>Post</p>
         </Grid>
         <Grid item sm={4} xs={12}>
-          <PostCard>
+          <img src={noImage}/>
-            <CardMedia image="./no-img-png" />
+          {profileMarkup}
-            <CardContent>Username</CardContent>
-          </PostCard>
         </Grid>
       </Grid>
     );
   }
 }
 
+Userline.PropTypes = {
+  handle: PropTypes.object.isRequired
+};
 
+const mapStateToProps = (state) => ({
+  user: state.user
+});
 
 export default user;