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

filter by followed user

Browse Source
This commit is contained in:
Leon Liang 2019-12-05 12:48:26 -05:00
parent f9a45ffe07
commit 2bcf6bfcb3
1 changed files with 287 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

511
twistter-frontend/src/pages/Home.js
View File

@ -6,40 +6,50 @@ import axios from "axios";
// Material UI and React Router // Material UI and React Router
import CircularProgress from '@material-ui/core/CircularProgress'; import CircularProgress from "@material-ui/core/CircularProgress";
import Button from '@material-ui/core/Button'; import Button from "@material-ui/core/Button";
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 CardContent from "@material-ui/core/CardContent"; import CardContent from "@material-ui/core/CardContent";
import TextField from '@material-ui/core/TextField'; import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import withStyles from '@material-ui/styles/withStyles'; import withStyles from "@material-ui/styles/withStyles";
// component // component
import '../App.css'; import "../App.css";
import logo from '../images/twistter-logo.png'; import logo from "../images/twistter-logo.png";
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 ReactModal from 'react-modal'; import ReactModal from "react-modal";
// Redux // Redux
import { likePost, unlikePost, getLikes } from '../redux/actions/userActions'; import { likePost, unlikePost, getLikes } from "../redux/actions/userActions";
const styles = { const styles = {
card: { card: {
marginBottom: 5 marginBottom: 5
} }
} };
class Home extends Component { class Home extends Component {
state = { state = {
likes: [] likes: [],
following: null,
topics: null
}; };
componentDidMount() { componentDidMount() {
axios
.get("/user")
.then(res => {
this.setState({
following: res.data.credentials.following,
topics: res.data.credentials.followedTopics
});
})
.catch(err => console.log(err));
axios axios
.get("/getallPosts") .get("/getallPosts")
.then(res => { .then(res => {
@ -56,28 +66,29 @@ class Home extends Component {
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
this.setState({ this.setState({
likes: nextProps.user.likes likes: nextProps.user.likes
}) });
} }
handleClickLikeButton = (event) => { handleClickLikeButton = event => {
// Need the ternary if statement because the user can click on the text or body of the // Need the ternary if statement because the user can click on the text or body of the
// Button and they are two different html elements // Button and they are two different html elements
let postId = event.target.dataset.key ? event.target.dataset.key : event.target.parentNode.dataset.key; let postId = event.target.dataset.key
console.log(postId) ? event.target.dataset.key
: event.target.parentNode.dataset.key;
console.log(postId);
let doc = document.getElementById(postId); let doc = document.getElementById(postId);
// console.log(postId); // console.log(postId);
if (this.state.likes.includes(postId)) { if (this.state.likes.includes(postId)) {
this.props.unlikePost(postId, this.state.likes) this.props.unlikePost(postId, this.state.likes);
doc.dataset.likes--; doc.dataset.likes--;
} else { } else {
this.props.likePost(postId, this.state.likes) this.props.likePost(postId, this.state.likes);
doc.dataset.likes++; doc.dataset.likes++;
} }
doc.innerHTML = "Likes " + doc.dataset.likes; doc.innerHTML = "Likes " + doc.dataset.likes;
};
}
formatDate(dateString) { formatDate(dateString) {
let newDate = new Date(Date.parse(dateString)); let newDate = new Date(Date.parse(dateString));
@ -85,60 +96,86 @@ class Home extends Component {
} }
render() { render() {
const {
const { UI:{ loading } } = this.props; UI: { loading }
} = this.props;
let authenticated = this.props.user.authenticated; let authenticated = this.props.user.authenticated;
let {classes} = this.props; let { classes } = this.props;
let username = this.props.user.credentials.handle; let username = this.props.user.credentials.handle;
console.log(this.state.following);
let postMarkup = this.state.posts ? ( let postMarkup = this.state.posts ? (
this.state.posts.map(post => this.state.posts.map(post =>
<Card className={classes.card} key={post.postId}> this.state.following ? (
<CardContent> this.state.following.includes(post.userHandle) ? (
<Typography> <Card className={classes.card} key={post.postId}>
{/* { <CardContent>
<Typography>
{/* {
this.state.imageUrl ? (<img src={this.state.imageUrl} height="50" width="50" />) : this.state.imageUrl ? (<img src={this.state.imageUrl} height="50" width="50" />) :
(<img src={noImage} height="50" width="50"/>) (<img src={noImage} height="50" width="50"/>)
} */} } */}
{ {post.profileImage ? (
post.profileImage ? (<img src={post.profileImage} height="50" width="50" />) : <img src={post.profileImage} height="50" width="50" />
(<img src={noImage} height="50" width="50"/>) ) : (
} <img src={noImage} height="50" width="50" />
</Typography> )}
<Typography variant="h5"><b>{post.userHandle}</b></Typography> </Typography>
<Typography variant="body2" color={"textSecondary"}>{this.formatDate(post.createdAt)}</Typography> <Typography variant="h5">
<br /> <b>{post.userHandle}</b>
<Typography variant="body1"><b>{post.microBlogTitle}</b></Typography> </Typography>
<Typography variant="body2">{post.quoteBody}</Typography> <Typography variant="body2" color={"textSecondary"}>
<br /> {this.formatDate(post.createdAt)}
<Typography variant="body2">{post.body}</Typography> </Typography>
<br /> <br />
<Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography> <Typography variant="body1">
<br /> <b>{post.microBlogTitle}</b>
<Typography id={post.postId} data-likes={post.likeCount} variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography> </Typography>
{/* <Like microBlog = {post.postId} count = {post.likeCount} name = {username}></Like> */} <Typography variant="body2">{post.quoteBody}</Typography>
<Button <br />
onClick={this.handleClickLikeButton} <Typography variant="body2">{post.body}</Typography>
data-key={post.postId} <br />
disabled={loading} <Typography variant="body2">
variant="outlined" <b>Topics:</b> {post.microBlogTopics}
color="primary" </Typography>
>{ <br />
this.state.likes && this.state.likes.includes(post.postId) ? 'Unlike' : 'Like' <Typography
}</Button> id={post.postId}
<Quote microblog = {post.postId}></Quote> data-likes={post.likeCount}
variant="body2"
color={"textSecondary"}
>
Likes {post.likeCount}
</Typography>
{/* <Like microBlog = {post.postId} count = {post.likeCount} name = {username}></Like> */}
<Button
onClick={this.handleClickLikeButton}
data-key={post.postId}
disabled={loading}
variant="outlined"
color="primary"
>
{this.state.likes && this.state.likes.includes(post.postId)
? "Unlike"
: "Like"}
</Button>
<Quote microblog={post.postId}></Quote>
{/* <button>Quote</button> */} {/* <button>Quote</button> */}
</CardContent>
</CardContent> </Card>
</Card> ) : (
<p></p>
)
) : (
<p>Loading</p>
)
) )
) : ( ) : (
<p>Loading post...</p> <p>Loading post...</p>
); );
return ( return authenticated ? (
authenticated ? (
<Grid container> <Grid container>
<Grid item sm={4} xs={8}> <Grid item sm={4} xs={8}>
<Writing_Microblogs /> <Writing_Microblogs />
@ -146,35 +183,43 @@ class Home extends Component {
<Grid item sm={4} xs={8}> <Grid item sm={4} xs={8}>
{postMarkup} {postMarkup}
</Grid> </Grid>
</Grid> </Grid>
) : loading ? ) : loading ? (
(<CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>) <CircularProgress
: size={60}
( style={{ marginTop: "300px" }}
<div> ></CircularProgress>
<div> ) : (
<img src={logo} className="app-logo" alt="logo" /> <div>
<br/><br/> <div>
<b>Welcome to Twistter!</b> <img src={logo} className="app-logo" alt="logo" />
<br/><br/> <br />
<b>See the most interesting topics people are following right now.</b> <br />
</div> <b>Welcome to Twistter!</b>
<br />
<br />
<b>See the most interesting topics people are following right now.</b>
</div>
<br/><br/><br/><br/> <br />
<br />
<br />
<br />
<div> <div>
<b>Join today or sign in if you already have an account.</b> <b>Join today or sign in if you already have an account.</b>
<br/><br/> <br />
<form action="./signup"> <br />
<button className="authButtons signup">Sign up</button> <form action="./signup">
</form> <button className="authButtons signup">Sign up</button>
<br/> </form>
<form action="./login"> <br />
<button className="authButtons login">Sign in</button> <form action="./login">
</form> <button className="authButtons login">Sign in</button>
</div> </form>
</div> </div>
)); </div>
);
} }
} }
@ -185,38 +230,36 @@ class Quote extends Component {
characterCount: 250, characterCount: 250,
showModal: false, showModal: false,
value: "" value: ""
} };
this.handleSubmitWithoutPost = this.handleSubmitWithoutPost.bind(this); this.handleSubmitWithoutPost = this.handleSubmitWithoutPost.bind(this);
this.handleOpenModal = this.handleOpenModal.bind(this); this.handleOpenModal = this.handleOpenModal.bind(this);
this.handleCloseModal = this.handleCloseModal.bind(this); this.handleCloseModal = this.handleCloseModal.bind(this);
this.handleSubmit = this.handleSubmit.bind(this); this.handleSubmit = this.handleSubmit.bind(this);
} }
handleSubmitWithoutPost(event) { handleSubmitWithoutPost(event) {
const post = { const post = {
userImage: "bing-url"
userImage: "bing-url", };
}
const headers = { const headers = {
headers: { "Content-Type": "application/json" } headers: { "Content-Type": "application/json" }
}; };
axios.post(`/quoteWithoutPost/${this.props.microblog}`, post, headers) axios
.then((res) => { .post(`/quoteWithoutPost/${this.props.microblog}`, post, headers)
.then(res => {
console.log(res.data); console.log(res.data);
}) })
.catch(err => { .catch(err => {
console.error(err);
console.error(err); });
});
event.preventDefault(); event.preventDefault();
} }
handleOpenModal() { handleOpenModal() {
this.setState({ showModal: true }); this.setState({ showModal: true });
} }
handleCloseModal() { handleCloseModal() {
this.setState({ showModal: false, characterCount: 250, value: "" }); this.setState({ showModal: false, characterCount: 250, value: "" });
} }
@ -234,20 +277,19 @@ class Quote extends Component {
handleSubmit(event) { handleSubmit(event) {
const quotedPost = { const quotedPost = {
quoteBody: this.state.value, quoteBody: this.state.value,
userImage: "bing-url", userImage: "bing-url"
}; };
const headers = { const headers = {
headers: { "Content-Type": "application/json" } headers: { "Content-Type": "application/json" }
}; };
axios.post(`/quoteWithPost/${this.props.microblog}`, quotedPost, headers) axios
.then((res) => { .post(`/quoteWithPost/${this.props.microblog}`, quotedPost, headers)
.then(res => {
console.log(res.data); console.log(res.data);
}) })
.catch(err => { .catch(err => {
console.error(err);
console.error(err); });
});
event.preventDefault(); event.preventDefault();
this.setState({ showModal: false, characterCount: 250, value: "" }); this.setState({ showModal: false, characterCount: 250, value: "" });
} }
@ -255,14 +297,29 @@ class Quote extends Component {
render() { render() {
return ( return (
<div> <div>
<Button variant="outlined" color="primary" onClick={this.handleOpenModal}>Quote with Post</Button> <Button
<ReactModal variant="outlined"
isOpen={this.state.showModal} color="primary"
style={{content: {height: "50%", width: "25%", marginTop: "auto", marginLeft: "auto", marginRight: "auto", marginBottom : "auto"}}} onClick={this.handleOpenModal}
>
Quote with Post
</Button>
<ReactModal
isOpen={this.state.showModal}
style={{
content: {
height: "50%",
width: "25%",
marginTop: "auto",
marginLeft: "auto",
marginRight: "auto",
marginBottom: "auto"
}
}}
> >
<div style={{ width: "200px", marginLeft: "50px" }}> <div style={{ width: "200px", marginLeft: "50px" }}>
<form style={{ width: "350px"}}> <form style={{ width: "350px" }}>
{/* <textarea {/* <textarea
value={this.state.value} value={this.state.value}
required required
maxLength="250" maxLength="250"
@ -275,101 +332,109 @@ class Quote extends Component {
cols={40} cols={40}
rows={20} rows={20}
/> */} /> */}
<TextField <TextField
style={{width: 300}} style={{ width: 300 }}
value={this.state.value} value={this.state.value}
label="Write Quoted Post here..." label="Write Quoted Post here..."
required required
multiline multiline
color="primary" color="primary"
rows="14" rows="14"
variant="outlined" variant="outlined"
inputProps={{ inputProps={{
maxLength: 250 maxLength: 250
}} }}
onChange={e => { onChange={e => {
this.handleChangeforPost(e); this.handleChangeforPost(e);
this.handleChangeforCharacterCount(e); this.handleChangeforCharacterCount(e);
}} }}
autoComplete='off' autoComplete="off"
></TextField> ></TextField>
<div style={{ fontSize: "14px", marginRight: "-100px" }}>
<p2>Characters Left: {this.state.characterCount}</p2>
</div>
<Button variant="outlined" color="primary" onClick={this.handleSubmit}>Share Quoted Post</Button>
<Button variant="outlined" color="primary" onClick={this.handleCloseModal}>Cancel</Button>
</form> <div style={{ fontSize: "14px", marginRight: "-100px" }}>
</div> <p2>Characters Left: {this.state.characterCount}</p2>
</div>
<Button
variant="outlined"
color="primary"
onClick={this.handleSubmit}
>
Share Quoted Post
</Button>
<Button
variant="outlined"
color="primary"
onClick={this.handleCloseModal}
>
Cancel
</Button>
</form>
</div>
</ReactModal> </ReactModal>
<Button variant="outlined" color="primary" onClick={this.handleSubmitWithoutPost}>Quote without Post</Button> <Button
variant="outlined"
color="primary"
onClick={this.handleSubmitWithoutPost}
>
Quote without Post
</Button>
</div> </div>
) );
} }
} }
class Like extends Component { class Like extends Component {
constructor(props) { constructor(props) {
super(props) super(props);
this.state = { this.state = {
num : this.props.count, num: this.props.count
};
}
this.handleClick = this.handleClick.bind(this); this.handleClick = this.handleClick.bind(this);
} }
componentDidMount() { componentDidMount() {
this.setState({ this.setState({
like: localStorage.getItem(this.props.microBlog + this.props.name) === "false" like:
localStorage.getItem(this.props.microBlog + this.props.name) === "false"
}) });
} }
handleClick() {
handleClick(){
this.setState({ this.setState({
like: !this.state.like like: !this.state.like
}); });
localStorage.setItem(this.props.microBlog + this.props.name, this.state.like.toString()) localStorage.setItem(
this.props.microBlog + this.props.name,
this.state.like.toString()
);
if(this.state.like == false) if (this.state.like == false) {
{ this.setState(() => {
this.setState(() => { return { num: this.state.num + 1 };
return {num: this.state.num + 1} });
}); axios
axios.get(`/like/${this.props.microBlog}`) .get(`/like/${this.props.microBlog}`)
.then((res) => { .then(res => {
console.log(res.data); console.log(res.data);
}) })
.catch((err) => { .catch(err => {
console.log(err); console.log(err);
}) });
} } else {
else this.setState(() => {
{ return { num: this.state.num - 1 };
this.setState(() => { });
return {num: this.state.num - 1} axios
}); .get(`/unlike/${this.props.microBlog}`)
axios.get(`/unlike/${this.props.microBlog}`) .then(res => {
.then((res) => { console.log(res.data);
console.log(res.data); })
}) .catch(err => {
.catch((err) => { console.log(err);
console.log(err); });
}) }
}
} }
/* componentDidMount() { /* componentDidMount() {
@ -390,33 +455,30 @@ class Like extends Component {
}) })
} }
} */ } */
render() {
const label = this.state.like ? 'Unlike' : 'Like'
return(
<div>
<Typography variant="body2" color={"textSecondary"}>Likes {this.state.num}</Typography>
<button onClick={this.handleClick}>{label}</button>
</div>
)
}
render() {
const label = this.state.like ? "Unlike" : "Like";
return (
<div>
<Typography variant="body2" color={"textSecondary"}>
Likes {this.state.num}
</Typography>
<button onClick={this.handleClick}>{label}</button>
</div>
);
}
} }
const mapStateToProps = (state) => ({ const mapStateToProps = state => ({
user: state.user, user: state.user,
UI: state.UI UI: state.UI
}) });
const mapActionsToProps = { const mapActionsToProps = {
likePost, likePost,
unlikePost, unlikePost,
getLikes getLikes
} };
Home.propTypes = { Home.propTypes = {
user: PropTypes.object.isRequired, user: PropTypes.object.isRequired,
@ -425,16 +487,17 @@ Home.propTypes = {
getLikes: PropTypes.func.isRequired, getLikes: PropTypes.func.isRequired,
classes: PropTypes.object.isRequired, classes: PropTypes.object.isRequired,
UI: PropTypes.object.isRequired UI: PropTypes.object.isRequired
} };
Like.propTypes = { Like.propTypes = {
user: PropTypes.object.isRequired user: PropTypes.object.isRequired
} };
Quote.propTypes = { Quote.propTypes = {
user: PropTypes.object.isRequired user: PropTypes.object.isRequired
} };
export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Home, Like, Quote));
export default connect(
mapStateToProps,
mapActionsToProps
)(withStyles(styles)(Home, Like, Quote));