mirror of
https://github.com/ClaytonWWilson/CS307-Team24.git
synced 2025-12-15 18:08:46 +00:00
Merge branch 'master' into send-microblog-loading
This commit is contained in:
GitHub
commit
b007666317
@ -6,42 +6,52 @@ import axios from "axios";
|
||||
|
||||
// Material UI and React Router
|
||||
|
||||
import CircularProgress from '@material-ui/core/CircularProgress';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Card from "@material-ui/core/Card";
|
||||
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 withStyles from '@material-ui/styles/withStyles';
|
||||
import withStyles from "@material-ui/styles/withStyles";
|
||||
|
||||
// component
|
||||
import '../App.css';
|
||||
import logo from '../images/twistter-logo.png';
|
||||
import noImage from '../images/no-img.png';
|
||||
import Writing_Microblogs from '../Writing_Microblogs';
|
||||
import ReactModal from 'react-modal';
|
||||
import "../App.css";
|
||||
import logo from "../images/twistter-logo.png";
|
||||
import noImage from "../images/no-img.png";
|
||||
import Writing_Microblogs from "../Writing_Microblogs";
|
||||
import ReactModal from "react-modal";
|
||||
|
||||
// Redux
|
||||
import { likePost, unlikePost, getLikes } from '../redux/actions/userActions';
|
||||
|
||||
import { likePost, unlikePost, getLikes } from "../redux/actions/userActions";
|
||||
|
||||
const styles = {
|
||||
card: {
|
||||
marginBottom: 5
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
class Home extends Component {
|
||||
state = {
|
||||
likes: [],
|
||||
loading: false
|
||||
loading: false,
|
||||
following: null,
|
||||
topics: null
|
||||
};
|
||||
|
||||
|
||||
componentDidMount() {
|
||||
this.setState({loading: true});
|
||||
axios
|
||||
.get("/user")
|
||||
.then(res => {
|
||||
this.setState({
|
||||
following: res.data.credentials.following,
|
||||
topics: res.data.credentials.followedTopics
|
||||
});
|
||||
})
|
||||
.catch(err => console.log(err));
|
||||
|
||||
axios
|
||||
.get("/getallPosts")
|
||||
.then(res => {
|
||||
@ -59,28 +69,29 @@ class Home extends Component {
|
||||
componentWillReceiveProps(nextProps) {
|
||||
this.setState({
|
||||
likes: nextProps.user.likes
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
handleClickLikeButton = (event) => {
|
||||
// Need the ternary if statement because the user can click on the text or body of the
|
||||
handleClickLikeButton = event => {
|
||||
// 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
|
||||
let postId = event.target.dataset.key ? event.target.dataset.key : event.target.parentNode.dataset.key;
|
||||
console.log(postId)
|
||||
let postId = event.target.dataset.key
|
||||
? event.target.dataset.key
|
||||
: event.target.parentNode.dataset.key;
|
||||
console.log(postId);
|
||||
|
||||
let doc = document.getElementById(postId);
|
||||
// console.log(postId);
|
||||
if (this.state.likes.includes(postId)) {
|
||||
this.props.unlikePost(postId, this.state.likes)
|
||||
this.props.unlikePost(postId, this.state.likes);
|
||||
doc.dataset.likes--;
|
||||
} else {
|
||||
this.props.likePost(postId, this.state.likes)
|
||||
} else {
|
||||
this.props.likePost(postId, this.state.likes);
|
||||
doc.dataset.likes++;
|
||||
}
|
||||
|
||||
doc.innerHTML = "Likes " + doc.dataset.likes;
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
formatDate(dateString) {
|
||||
let newDate = new Date(Date.parse(dateString));
|
||||
@ -88,53 +99,80 @@ class Home extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const { UI:{ loading } } = this.props;
|
||||
const {
|
||||
UI: { loading }
|
||||
} = this.props;
|
||||
let authenticated = this.props.user.authenticated;
|
||||
let {classes} = this.props;
|
||||
let { classes } = this.props;
|
||||
let username = this.props.user.credentials.handle;
|
||||
console.log(this.state.following);
|
||||
|
||||
let postMarkup = this.state.posts ? (
|
||||
this.state.posts.map(post =>
|
||||
<Card className={classes.card} key={post.postId}>
|
||||
<CardContent>
|
||||
<Typography>
|
||||
{/* {
|
||||
this.state.posts.map(post =>
|
||||
this.state.following ? (
|
||||
this.state.following.includes(post.userHandle) ? (
|
||||
<Card className={classes.card} key={post.postId}>
|
||||
<CardContent>
|
||||
<Typography>
|
||||
{/* {
|
||||
this.state.imageUrl ? (<img src={this.state.imageUrl} height="50" width="50" />) :
|
||||
(<img src={noImage} height="50" width="50"/>)
|
||||
} */}
|
||||
{
|
||||
post.profileImage ? (<img src={post.profileImage} height="50" width="50" />) :
|
||||
(<img src={noImage} height="50" width="50"/>)
|
||||
}
|
||||
</Typography>
|
||||
<Typography variant="h5"><b>{post.userHandle}</b></Typography>
|
||||
<Typography variant="body2" color={"textSecondary"}>{this.formatDate(post.createdAt)}</Typography>
|
||||
<br />
|
||||
<Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
|
||||
<Typography variant="body2">{post.quoteBody}</Typography>
|
||||
<br />
|
||||
<Typography variant="body2">{post.body}</Typography>
|
||||
<br />
|
||||
<Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>
|
||||
<br />
|
||||
<Typography id={post.postId} 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>
|
||||
{post.profileImage ? (
|
||||
<img src={post.profileImage} height="50" width="50" />
|
||||
) : (
|
||||
<img src={noImage} height="50" width="50" />
|
||||
)}
|
||||
</Typography>
|
||||
<Typography variant="h5">
|
||||
<b>{post.userHandle}</b>
|
||||
</Typography>
|
||||
<Typography variant="body2" color={"textSecondary"}>
|
||||
{this.formatDate(post.createdAt)}
|
||||
</Typography>
|
||||
<br />
|
||||
<Typography variant="body1">
|
||||
<b>{post.microBlogTitle}</b>
|
||||
</Typography>
|
||||
<Typography variant="body2">{post.quoteBody}</Typography>
|
||||
<br />
|
||||
<Typography variant="body2">{post.body}</Typography>
|
||||
<br />
|
||||
<Typography variant="body2">
|
||||
<b>Topics:</b> {post.microBlogTopics}
|
||||
</Typography>
|
||||
<br />
|
||||
<Typography
|
||||
id={post.postId}
|
||||
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> */}
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* <button>Quote</button> */}
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<p></p>
|
||||
)
|
||||
) : (
|
||||
<p>Loading</p>
|
||||
)
|
||||
)
|
||||
) : (
|
||||
<p>Loading post...</p>
|
||||
@ -164,21 +202,25 @@ class Home extends Component {
|
||||
<b>See the most interesting topics people are following right now.</b>
|
||||
</div>
|
||||
|
||||
<br/><br/><br/><br/>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<div>
|
||||
<b>Join today or sign in if you already have an account.</b>
|
||||
<br/><br/>
|
||||
<form action="./signup">
|
||||
<button className="authButtons signup">Sign up</button>
|
||||
</form>
|
||||
<br/>
|
||||
<form action="./login">
|
||||
<button className="authButtons login">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
<div>
|
||||
<b>Join today or sign in if you already have an account.</b>
|
||||
<br />
|
||||
<br />
|
||||
<form action="./signup">
|
||||
<button className="authButtons signup">Sign up</button>
|
||||
</form>
|
||||
<br />
|
||||
<form action="./login">
|
||||
<button className="authButtons login">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -189,38 +231,36 @@ class Quote extends Component {
|
||||
characterCount: 250,
|
||||
showModal: false,
|
||||
value: ""
|
||||
}
|
||||
};
|
||||
|
||||
this.handleSubmitWithoutPost = this.handleSubmitWithoutPost.bind(this);
|
||||
this.handleOpenModal = this.handleOpenModal.bind(this);
|
||||
this.handleCloseModal = this.handleCloseModal.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.handleSubmitWithoutPost = this.handleSubmitWithoutPost.bind(this);
|
||||
this.handleOpenModal = this.handleOpenModal.bind(this);
|
||||
this.handleCloseModal = this.handleCloseModal.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
handleSubmitWithoutPost(event) {
|
||||
const post = {
|
||||
|
||||
userImage: "bing-url",
|
||||
}
|
||||
userImage: "bing-url"
|
||||
};
|
||||
const headers = {
|
||||
headers: { "Content-Type": "application/json" }
|
||||
};
|
||||
axios.post(`/quoteWithoutPost/${this.props.microblog}`, post, headers)
|
||||
.then((res) => {
|
||||
|
||||
console.log(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
|
||||
console.error(err);
|
||||
});
|
||||
axios
|
||||
.post(`/quoteWithoutPost/${this.props.microblog}`, post, headers)
|
||||
.then(res => {
|
||||
console.log(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
});
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
handleOpenModal() {
|
||||
this.setState({ showModal: true });
|
||||
}
|
||||
|
||||
|
||||
handleCloseModal() {
|
||||
this.setState({ showModal: false, characterCount: 250, value: "" });
|
||||
}
|
||||
@ -238,20 +278,19 @@ class Quote extends Component {
|
||||
handleSubmit(event) {
|
||||
const quotedPost = {
|
||||
quoteBody: this.state.value,
|
||||
userImage: "bing-url",
|
||||
userImage: "bing-url"
|
||||
};
|
||||
const headers = {
|
||||
headers: { "Content-Type": "application/json" }
|
||||
};
|
||||
axios.post(`/quoteWithPost/${this.props.microblog}`, quotedPost, headers)
|
||||
.then((res) => {
|
||||
|
||||
console.log(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
|
||||
console.error(err);
|
||||
});
|
||||
axios
|
||||
.post(`/quoteWithPost/${this.props.microblog}`, quotedPost, headers)
|
||||
.then(res => {
|
||||
console.log(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
});
|
||||
event.preventDefault();
|
||||
this.setState({ showModal: false, characterCount: 250, value: "" });
|
||||
}
|
||||
@ -259,14 +298,29 @@ class Quote extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Button variant="outlined" color="primary" 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"}}}
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
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" }}>
|
||||
<form style={{ width: "350px"}}>
|
||||
{/* <textarea
|
||||
<form style={{ width: "350px" }}>
|
||||
{/* <textarea
|
||||
value={this.state.value}
|
||||
required
|
||||
maxLength="250"
|
||||
@ -279,101 +333,109 @@ class Quote extends Component {
|
||||
cols={40}
|
||||
rows={20}
|
||||
/> */}
|
||||
<TextField
|
||||
style={{width: 300}}
|
||||
value={this.state.value}
|
||||
label="Write Quoted Post here..."
|
||||
required
|
||||
multiline
|
||||
color="primary"
|
||||
rows="14"
|
||||
variant="outlined"
|
||||
inputProps={{
|
||||
maxLength: 250
|
||||
}}
|
||||
onChange={e => {
|
||||
this.handleChangeforPost(e);
|
||||
this.handleChangeforCharacterCount(e);
|
||||
}}
|
||||
autoComplete='off'
|
||||
></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>
|
||||
<TextField
|
||||
style={{ width: 300 }}
|
||||
value={this.state.value}
|
||||
label="Write Quoted Post here..."
|
||||
required
|
||||
multiline
|
||||
color="primary"
|
||||
rows="14"
|
||||
variant="outlined"
|
||||
inputProps={{
|
||||
maxLength: 250
|
||||
}}
|
||||
onChange={e => {
|
||||
this.handleChangeforPost(e);
|
||||
this.handleChangeforCharacterCount(e);
|
||||
}}
|
||||
autoComplete="off"
|
||||
></TextField>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
</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>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Like extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
super(props);
|
||||
this.state = {
|
||||
num : this.props.count,
|
||||
|
||||
}
|
||||
num: this.props.count
|
||||
};
|
||||
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
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({
|
||||
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)
|
||||
{
|
||||
this.setState(() => {
|
||||
return {num: this.state.num + 1}
|
||||
});
|
||||
axios.get(`/like/${this.props.microBlog}`)
|
||||
.then((res) => {
|
||||
console.log(res.data);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
})
|
||||
}
|
||||
else
|
||||
{
|
||||
this.setState(() => {
|
||||
return {num: this.state.num - 1}
|
||||
});
|
||||
axios.get(`/unlike/${this.props.microBlog}`)
|
||||
.then((res) => {
|
||||
console.log(res.data);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
if (this.state.like == false) {
|
||||
this.setState(() => {
|
||||
return { num: this.state.num + 1 };
|
||||
});
|
||||
axios
|
||||
.get(`/like/${this.props.microBlog}`)
|
||||
.then(res => {
|
||||
console.log(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
} else {
|
||||
this.setState(() => {
|
||||
return { num: this.state.num - 1 };
|
||||
});
|
||||
axios
|
||||
.get(`/unlike/${this.props.microBlog}`)
|
||||
.then(res => {
|
||||
console.log(res.data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/* componentDidMount() {
|
||||
@ -394,33 +456,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,
|
||||
UI: state.UI
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
const mapActionsToProps = {
|
||||
likePost,
|
||||
unlikePost,
|
||||
getLikes
|
||||
}
|
||||
};
|
||||
|
||||
Home.propTypes = {
|
||||
user: PropTypes.object.isRequired,
|
||||
@ -429,16 +488,17 @@ Home.propTypes = {
|
||||
getLikes: PropTypes.func.isRequired,
|
||||
classes: PropTypes.object.isRequired,
|
||||
UI: PropTypes.object.isRequired
|
||||
}
|
||||
};
|
||||
|
||||
Like.propTypes = {
|
||||
user: PropTypes.object.isRequired
|
||||
}
|
||||
};
|
||||
|
||||
Quote.propTypes = {
|
||||
user: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
|
||||
export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Home, Like, Quote));
|
||||
};
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapActionsToProps
|
||||
)(withStyles(styles)(Home, Like, Quote));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user