Improved the profile page format

twistter-frontend/src/components/layout/NavBar.js

@@ -41,6 +41,9 @@ export class Navbar extends Component {
                     <Button component={ Link } to='/'>
                         Home
                     </Button>
+                    {authenticated && <Button component={ Link } to='/user'>
+                        Profile
+                    </Button>}
                     {!authenticated && <Button component={ Link } to='/login'>
                         Login
                     </Button>}
@@ -50,9 +53,6 @@ export class Navbar extends Component {
                     {authenticated && <Button component={ Link } to='/logout'>
                         Logout
                     </Button>}
-                    {authenticated && <Button component={ Link } to='/delete'>
-                        Delete Account
-                    </Button>}
                 </ToolBar>
             </AppBar>
         )

twistter-frontend/src/pages/editProfile.js

@@ -6,6 +6,7 @@ import PropTypes from "prop-types";
 
 // Material-UI stuff
 import Button from "@material-ui/core/Button";
+import { Link } from 'react-router-dom';
 import CircularProgress from "@material-ui/core/CircularProgress";
 import Grid from "@material-ui/core/Grid";
 import TextField from "@material-ui/core/TextField";
@@ -220,12 +221,34 @@ export class edit extends Component {
               color="primary"
               className={classes.button}
               disabled={loading}
+              //component={ Link }
+              //to='/user'
             >
               Submit
               {loading && (
                 <CircularProgress size={30} className={classes.progress} />
               )}
             </Button>
+            <br />
+            <Button
+              //variant="contained"
+              color="primary"
+              className={classes.button}
+              component={ Link }
+              to='/user'
+            >
+              Back to Profile
+            </Button>
+            <br />
+            <Button
+              variant="contained"
+              color="secondary"
+              className={classes.button}
+              component={ Link }
+              to='/user'
+            >
+              Delete Account
+            </Button>
           </form>
         </Grid>
         <Grid item sm />

twistter-frontend/src/pages/user.js

@@ -3,10 +3,12 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import axios from 'axios';
 //import '../App.css';
+import { Link } from 'react-router-dom';
 import { makeStyles, styled } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Card from '@material-ui/core/Card';
 import Chip from '@material-ui/core/Chip';
+import Button from '@material-ui/core/Button';
 import Typography from "@material-ui/core/Typography";
 import AddCircle from '@material-ui/icons/AddCircle';
 import TextField from '@material-ui/core/TextField';
@@ -14,6 +16,7 @@ import TextField from '@material-ui/core/TextField';
 // component
 import Userline from '../Userline';
 import noImage from '../images/no-img.png';
+import Writing_Microblogs from '../Writing_Microblogs';
 
 const MyChip = styled(Chip)({
   margin: 2,
@@ -71,6 +74,7 @@ class user extends Component {
   }
   render() {
     const classes = this.props;
+    //const authenticated = this.props.user.authenticated;
     let profileMarkup = this.state.profile ? (
       <p>
       <Typography variant='h5'>{this.state.profile}</Typography>
@@ -93,11 +97,8 @@ class user extends Component {
     ) : (<img src={noImage}/>);
 
     return (
-      <Grid container spacing={16}>
+      <Grid container spacing={24}>
-        <Grid item sm={8} xs={12}>
+        <Grid item sm={4} xs={8}>
-          <p>Post</p>
-        </Grid>
-        <Grid item sm={4} xs={12}>
           {imageMarkup}
           {profileMarkup}
           {topicsMarkup}
@@ -115,6 +116,15 @@ class user extends Component {
             clickable
             onClick={this.handleAddCircle}
           />
+          <br />
+          <Button component={ Link } to='/edit'>Edit Profile Info</Button>
+          {/*authenticated && <Button component={ Link } to='/edit'>Edit Profile Info</Button>*/}
+        </Grid>
+        <Grid item sm={4} xs={8}>
+          <Writing_Microblogs />
+        </Grid>
+        <Grid item sm={4} xs={8}>
+          <p>Post</p>
         </Grid>
       </Grid>
     );