added profile display

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(){
-    //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 ? (
+      <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>
-            <CardMedia image="./no-img-png" />
-            <CardContent>Username</CardContent>
-          </PostCard>
+          <img src={noImage}/>
+          {profileMarkup}
         </Grid>
       </Grid>
     );
   }
 }
 
+Userline.PropTypes = {
+  handle: PropTypes.object.isRequired
+};
 
+const mapStateToProps = (state) => ({
+  user: state.user
+});
 
 export default user;