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

UI can now display all features of a post

Browse Source
This commit is contained in:
Aaron Sun 2019-10-30 15:07:19 -04:00
parent cd19364efc
commit 1337071bec
2 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,6 +17,7 @@ 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,
@ -107,7 +108,16 @@ class user extends Component {
) : (<img src={noImage}/>); ) : (<img src={noImage}/>);
let postMarkup = this.state.posts ? ( let postMarkup = this.state.posts ? (
this.state.posts.map(post => <p>{post.body}</p>) this.state.posts.map(post =>
<p>
{imageMarkup} <br />
{post.userHandle} <br />
{post.createdAt} <br />
{post.microBlogTitle} <br />
{post.body} <br />
{post.microBlogTopics} <br />
Likes {post.likeCount} Comments {post.commentCount} <br />
</p>)
) : (<p>My Posts</p>); ) : (<p>My Posts</p>);
return ( return (

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

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