ClaytonWWilson/CS307-Team24
1
0
Fork 0
mirror of https://github.com/ClaytonWWilson/CS307-Team24.git synced 2025-12-16 02:08:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fixing up profile UI

Browse Source
This commit is contained in:
Clayton Wilson 2019-10-28 23:25:12 -04:00
parent 903ea35662
commit 7cc8a3f11f
1 changed files with 125 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
twistter-frontend/src/pages/user.js
View File

@ -19,16 +19,36 @@ import Typography from "@material-ui/core/Typography";
import AddCircle from '@material-ui/icons/AddCircle';
import TextField from '@material-ui/core/TextField';
import VerifiedIcon from '@material-ui/icons/CheckSharp';
import withStyles from '@material-ui/core/styles/withStyles';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import GridListTileBar from '@material-ui/core/GridListTileBar';
import Paper from '@material-ui/core/Paper';
// component
import '../App.css';
import noImage from '../images/no-img.png';
import Writing_Microblogs from '../Writing_Microblogs';
const MyChip = styled(Chip)({
margin: 2,
color: "primary"
});
const styles = {
button: {
positon: 'relative',
float: 'left',
marginLeft: 30,
marginTop: 15
},
paper: {
// marginLeft: "10%",
// marginRight: "10%"
}
};
class user extends Component {
state = {
profile: null,
@ -70,18 +90,18 @@ class user extends Component {
componentDidMount() {
axios
.get("/user")
.then(res => {
.then((res) => {
this.setState({
profile: res.data.credentials.handle,
imageUrl: res.data.credentials.imageUrl,
verified: res.data.credentials.verified ? res.data.credentials.verified : false
});
})
.catch(err => console.log(err));
.catch((err) => console.log(err));
axios
.get("/getAllTopics")
.then(res => {
.then((res) => {
this.setState({
topics: res.data
});
@ -100,8 +120,8 @@ class user extends Component {
}
render() {
const { classes } = this.props;
let authenticated = this.props.user.authenticated;
let classes = this.props;
let profileMarkup = this.state.profile ? (
<div>
@ -149,9 +169,86 @@ class user extends Component {
)
) : (<p>My Posts</p>);
// FIX: This needs to check if user's profile page being displayed
// is the same as the user who is logged in
// Can't check for that right now, because this page is always
// showing the logged in users profile, instead of retreiving the
// profile based on the URL entered
let editButtonMarkup = true ? (
<Button className={classes.button} variant="outlined" color="primary">
Edit Profile
</Button>
) : null;
return (
<Grid container spacing={24}>
<Grid item sm={4} xs={8}>
// <Grid container spacing={24}>
// <Grid item sm={4} xs={8}>
// {imageMarkup}
// {profileMarkup}
// {topicsMarkup}
// <TextField
// id="newTopic"
// label="new topic"
// defaultValue=""
// margin="normal"
// variant="outlined"
// value={this.state.newTopic}
// onChange={(event) => this.handleChange(event)}
// />
// <AddCircle
// color="primary"
// clickable
// onClick={this.handleAddCircle}
// />
// <br />
// <Grid container direction="column">
// <Grid item>
// {
// authenticated &&
// <Button
// style={{width:150, marginBottom: 10, marginTop: 5}}
// component={ Link }
// to='/edit'
// variant="outlined"
// color="primary"
// >
// Edit Profile
// </Button>}
// </Grid>
// <Grid item>
// {
// authenticated &&
// this.state.profile === 'Admin' &&
// <Button
// style={{width:150}}
// component={ Link }
// variant="outlined"
// color="primary"
// to='/verify'
// >
// Verify Users
// </Button>}
// </Grid>
// </Grid>
// </Grid>
// <Grid item sm={4} xs={8}>
// {postMarkup}
// </Grid>
// <Grid item sm={4} xs={8}>
// <Writing_Microblogs />
// </Grid>
//       
// </Grid>
<div>
<Grid container>
<Grid item sm>
{editButtonMarkup}
</Grid>
<Grid item sm>
<Grid container direction="column">
<Grid item sm>
{imageMarkup}
{profileMarkup}
{topicsMarkup}
@ -164,51 +261,16 @@ class user extends Component {
value={this.state.newTopic}
onChange={(event) => this.handleChange(event)}
/>
<AddCircle
color="primary"
clickable
onClick={this.handleAddCircle}
/>
<br />
<Grid container direction="column">
<Grid item>
{
authenticated &&
<Button
style={{width:150, marginBottom: 10, marginTop: 5}}
component={ Link }
to='/edit'
variant="outlined"
color="primary"
>
Edit Profile
</Button>}
<AddCircle color="primary" clickable onClick={this.handleAddCircle} />
</Grid>
<Grid item>
{
authenticated &&
this.state.profile === 'Admin' &&
<Button
style={{width:150}}
component={ Link }
variant="outlined"
color="primary"
to='/verify'
>
Verify Users
</Button>}
<Grid item sm>
<p>posts here</p>
</Grid>
</Grid>
</Grid>
<Grid item sm={4} xs={8}>
{postMarkup}
</Grid>
<Grid item sm={4} xs={8}>
<Writing_Microblogs />
</Grid>
      
<Grid item sm />
</Grid>
</div>
);
}
}
@ -221,4 +283,4 @@ user.propTypes = {
user: PropTypes.object.isRequired
}
export default connect(mapStateToProps)(user);
export default connect(mapStateToProps)(withStyles(styles)(user));