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

Made the posts look prettier

Browse Source
This commit is contained in:
Aaron Sun 2019-10-30 16:12:53 -04:00
parent 1337071bec
commit a61c296ddf
2 changed files with 47 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,8 @@ import { Link } from 'react-router-dom';
import { makeStyles, styled } from '@material-ui/core/styles'; import { makeStyles, styled } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card'; import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import Chip from '@material-ui/core/Chip'; import Chip from '@material-ui/core/Chip';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
@ -17,7 +19,6 @@ import TextField from '@material-ui/core/TextField';
import Userline from '../Userline'; import Userline from '../Userline';
import noImage from '../images/no-img.png'; import noImage from '../images/no-img.png';
import Writing_Microblogs from '../Writing_Microblogs'; import Writing_Microblogs from '../Writing_Microblogs';
import PostSkeleton from '../util/PostSkeleton';
const MyChip = styled(Chip)({ const MyChip = styled(Chip)({
margin: 2, margin: 2,
@ -99,25 +100,31 @@ class user extends Component {
onDelete={ (topic) => this.handleDelete(topic)}/>) onDelete={ (topic) => this.handleDelete(topic)}/>)
) : (<p> loading topics...</p>); ) : (<p> loading topics...</p>);
let imageMarkup = this.state.imageUrl ? ( let imageMarkup = this.state.imageUrl ? (<img src={this.state.imageUrl} height="150" width="150" />) :
<img (<img src={noImage} height="150" width="150"/>);
src={this.state.imageUrl}
height="250"
width="250"
/>
) : (<img src={noImage}/>);
let postMarkup = this.state.posts ? ( let postMarkup = this.state.posts ? (
this.state.posts.map(post => this.state.posts.map(post =>
<p> <Card>
{imageMarkup} <br /> <CardContent>
{post.userHandle} <br /> <Typography>
{post.createdAt} <br /> {
{post.microBlogTitle} <br /> this.state.imageUrl ? (<img src={this.state.imageUrl} height="250" width="250" />) :
{post.body} <br /> (<img src={noImage} height="50" width="50"/>)
{post.microBlogTopics} <br /> }
Likes {post.likeCount} Comments {post.commentCount} <br /> </Typography>
</p>) <Typography variant="h7"><b>{post.userHandle}</b></Typography>
<Typography variant="body2" color={"textSecondary"}>{post.createdAt}</Typography>
<br />
<Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
<Typography variant="body2">{post.body}</Typography>
<br />
<Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>
<br />
<Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount} Comments {post.commentCount}</Typography>
</CardContent>
</Card>
)
) : (<p>My Posts</p>); ) : (<p>My Posts</p>);
return ( return (
@ -144,10 +151,10 @@ class user extends Component {
<Button component={ Link } to='/edit'>Edit Profile Info</Button> <Button component={ Link } to='/edit'>Edit Profile Info</Button>
</Grid> </Grid>
<Grid item sm={4} xs={8}> <Grid item sm={4} xs={8}>
<Writing_Microblogs /> {postMarkup}
</Grid> </Grid>
<Grid item sm={4} xs={8}> <Grid item sm={4} xs={8}>
{postMarkup} <Writing_Microblogs />
</Grid> </Grid>
</Grid> </Grid>
); );

32
twistter-frontend/src/util/PostSkeleton.js
View File

@ -1,12 +1,12 @@
/* eslint-disable */ /* eslint-disable */
import React, { Component } from 'react'; import React, { Fragment } from 'react';
import NoImg from '../images/no-img.png'; import NoImg from '../images/no-img.png';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
// MUI // MUI
import Card from '@material-ui/core/Card'; import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia'; import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent'; import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import withStyles from '@material-ui/core/styles/withStyles'; import withStyles from '@material-ui/core/styles/withStyles';
const styles = (theme) => ({ const styles = (theme) => ({
@ -50,20 +50,23 @@ const styles = (theme) => ({
} }
}); });
class PostSkeleton extends Component { const PostSkeleton = (props) => {
render() { const { classes } = props;
const { classes, post: { body, createdAt, userImage, userHandle, screamId, likeCount, commentCount } } = this.props;
return ( const content = Array.from({ length: 5 }).map((item, index) => (
<Card> <Card className={classes.card} key={index}>
<CardMedia image={userImage} /> <CardMedia className={classes.cover} image={NoImg} />
<CardContent> <CardContent className={classes.cardContent}>
<Typography variant="h5">{userHandle}</Typography> <div className={classes.handle} />
<Typography variant="body2" color="textSecondary">{createdAt}</Typography> <div className={classes.date} />
<Typography variant="body1">{body}</Typography> <div className={classes.fullLine} />
<div className={classes.fullLine} />
<div className={classes.halfLine} />
</CardContent> </CardContent>
</Card> </Card>
); ));
};
return <Fragment>{content}</Fragment>;
}; };
PostSkeleton.propTypes = { PostSkeleton.propTypes = {
@ -71,3 +74,4 @@ PostSkeleton.propTypes = {
}; };
export default withStyles(styles)(PostSkeleton); export default withStyles(styles)(PostSkeleton);