Improved the profile page format

This commit is contained in:
Aaron Sun 2019-10-29 19:39:11 -04:00
parent d3a77afe43
commit 6db14e3868
3 changed files with 41 additions and 8 deletions

View File

@ -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>
)

View File

@ -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 />

View File

@ -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 item sm={8} xs={12}>
<p>Post</p>
</Grid>
<Grid item sm={4} xs={12}>
<Grid container spacing={24}>
<Grid item sm={4} xs={8}>
{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>
);