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

Merge pull request #106 from ClaytonWWilson/likes

Browse Source 
Likes
This commit is contained in:
asankaran35 2019-12-04 17:42:03 -05:00 committed by GitHub
commit 35cec7abf3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 379 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

310
functions/handlers/post.js
View File

@ -136,25 +136,23 @@ exports.getOtherUsersPosts = (req, res) => {
};
exports.quoteWithPost = (req, res) => {
let quoteData;
const quoteDoc = admin
.firestore()
.collection("quote")
.where("userHandle", "==", req.user.handle)
.where("postId", "==", req.params.postId)
.limit(1);
let quoteData;
const quoteDoc = admin.firestore().collection('quote').
where('userHandle', '==', req.user.handle).
where('quoteId', '==', req.params.postId).limit(1);
const postDoc = db.doc(`/posts/${req.params.postId}`);
const postDoc = db.doc(`/posts/${req.params.postId}`);
postDoc
.get()
.then(doc => {
if (doc.exists) {
quoteData = doc.data();
return quoteDoc.get();
} else {
return res.status(404).json({ error: "Post not found" });
}
postDoc.get()
.then((doc) => {
if(doc.exists) {
quoteData = doc.data();
return quoteDoc.get();
}
else
{
return res.status(404).json({error: 'Post not found'});
}
})
.then(data => {
if (data.empty) {
@ -202,25 +200,23 @@ exports.quoteWithPost = (req, res) => {
};
exports.quoteWithoutPost = (req, res) => {
let quoteData;
const quoteDoc = admin
.firestore()
.collection("quote")
.where("userHandle", "==", req.user.handle)
.where("postId", "==", req.params.postId)
.limit(1);
let quoteData;
const quoteDoc = admin.firestore().collection('quote').
where('userHandle', '==', req.user.handle).
where('quoteId', '==', req.params.postId).limit(1);
const postDoc = db.doc(`/posts/${req.params.postId}`);
const postDoc = db.doc(`/posts/${req.params.postId}`);
postDoc
.get()
.then(doc => {
if (doc.exists) {
quoteData = doc.data();
return quoteDoc.get();
} else {
return res.status(404).json({ error: "Post not found" });
}
postDoc.get()
.then((doc) => {
if(doc.exists) {
quoteData = doc.data();
return quoteDoc.get();
}
else
{
return res.status(404).json({error: 'Post not found'});
}
})
.then(data => {
if (data.empty) {
@ -292,94 +288,186 @@ exports.checkforLikePost = (req, res) => {
};
exports.likePost = (req, res) => {
let postData;
const likeDoc = admin
.firestore()
.collection("likes")
.where("userHandle", "==", req.user.handle)
.where("postId", "==", req.params.postId)
.limit(1);
const postDoc = db.doc(`/posts/${req.params.postId}`);
const postId = req.params.postId;
let likedPostDoc;
db.doc(`/users/${req.userData.handle}`)
.get()
.then((userDoc) => {
let likes = userDoc.data().likes;
if (likes === undefined || likes === null) {
likes = [];
}
postDoc
.get()
.then(doc => {
if (doc.exists) {
postData = doc.data();
return likeDoc.get();
} else {
return res.status(404).json({ error: "Post not found" });
}
})
if (likes.includes(postId)) {
return res.status(400).json({error: "This user has already liked this post"});
}
.then(data => {
if (data.empty) {
return admin
.firestore()
.collection("likes")
.add({
postId: req.params.postId,
userHandle: req.user.handle
})
.then(() => {
postData.likeCount++;
return postDoc.update({ likeCount: postData.likeCount });
})
.then(() => {
return res.status(200).json(postData);
});
}
})
.catch(err => {
// return res.status(500).json({ error: "Something is wrong" });
return res.status(500).json({ error: err });
});
};
likes.push(postId);
exports.unlikePost = (req, res) => {
let postData;
const likeDoc = admin
.firestore()
.collection("likes")
.where("userHandle", "==", req.user.handle)
.where("postId", "==", req.params.postId)
.limit(1);
const postDoc = db.doc(`/posts/${req.params.postId}`);
postDoc
.get()
.then(doc => {
if (doc.exists) {
postData = doc.data();
return likeDoc.get();
} else {
return res.status(404).json({ error: "Post not found" });
}
})
.then(data => {
return db
.doc(`/likes/${data.docs[0].id}`)
.delete()
.then(() => {
postData.likeCount--;
return postDoc.update({ likeCount: postData.likeCount });
return userDoc.ref.update({likes})
})
.then(() => {
res.status(200).json(postData);
});
})
.catch(err => {
console.error(err);
return res.status(500).json({ error: "Something is wrong" });
});
};
return db.doc(`/posts/${postId}`).get()
})
.then((postDoc) => {
let postData = postDoc.data();
postData.likeCount++;
likedPostDoc = postData;
return postDoc.ref.update({likeCount : postData.likeCount})
})
.then(() => {
return res.status(201).json(likedPostDoc);
})
.catch((err) => {
console.log(err);
return res.status(500).json({error: err});
})
// let postData;
// const likeDoc = admin.firestore().collection('likes').where('userHandle', '==', req.user.handle)
// .where('postId', '==', req.params.postId).limit(1);
// const postDoc = db.doc(`/posts/${req.params.postId}`);
// postDoc.get()
// .then((doc) => {
// if(doc.exists) {
// postData = doc.data();
// return likeDoc.get();
// }
// else
// {
// return res.status(404).json({error: 'Post not found'});
// }
// })
// .then((data) => {
// if (data.empty) {
// return admin.firestore().collection('likes').add({
// postId : req.params.postId,
// userHandle: req.user.handle
// })
// .then(() => {
// postData.likeCount++;
// return postDoc.update({likeCount : postData.likeCount})
// })
// .then(() => {
// return res.status(200).json(postData);
// })
// }
// })
// .catch((err) => {
// return res.status(500).json({error: 'Something is wrong'});
// })
}
exports.unlikePost = (req, res) => {
const postId = req.params.postId;
let likedPostDoc;
db.doc(`/users/${req.userData.handle}`)
.get()
.then((userDoc) => {
let likes = userDoc.data().likes;
if (likes === undefined || likes === null) {
likes = [];
}
if (!likes.includes(postId)) {
return res.status(400).json({error: "This user hasn't liked this post yet"});
}
let i;
for (i = 0; i < likes.length; i++) {
if (likes[i] === postId) {
likes.splice(i, 1);
}
}
return userDoc.ref.update({likes})
})
.then(() => {
return db.doc(`/posts/${postId}`).get()
})
.then((postDoc) => {
let postData = postDoc.data();
postData.likeCount--;
likedPostDoc = postData;
return postDoc.ref.update({likeCount : postData.likeCount})
})
.then(() => {
return res.status(201).json(likedPostDoc);
})
.catch((err) => {
console.log(err);
return res.status(500).json({error: err});
})
// let postData;
// const likeDoc = admin.firestore().collection('likes').where('userHandle', '==', req.user.handle)
// .where('postId', '==', req.params.postId).limit(1);
// const postDoc = db.doc(`/posts/${req.params.postId}`);
// postDoc.get()
// .then((doc) => {
// if(doc.exists) {
// postData = doc.data();
// return likeDoc.get();
// }
// else
// {
// return res.status(404).json({error: 'Post not found'});
// }
// })
// .then((data) => {
// return db
// .doc(`/likes/${data.docs[0].id}`)
// .delete()
// .then(() => {
// postData.likeCount--;
// return postDoc.update({ likeCount: postData.likeCount });
// })
// .then(() => {
// res.status(200).json(postData);
// });
// })
// .catch((err) => {
// console.error(err);
// return res.status(500).json({error: 'Something is wrong'});
// })
}
exports.getLikes = (req, res) => {
db.doc(`/users/${req.userData.handle}`)
.get()
.then((doc) => {
let likes = doc.data().likes;
if (likes === undefined || likes === null) {
likes = [];
}
return res.status(200).json({likes});
})
.catch((err) => {
console.log(err);
return res.status(500).json({error: err});
})
}
exports.getFilteredPosts = (req, res) => {
admin
.firestore()
.collection("posts")
.where("userHandle", "==", "new user")
.where("microBlogTopics", "==");
};

15
functions/index.js
View File

@ -81,17 +81,9 @@ app.post("/removeSub", fbAuth, removeSub);
/*------------------------------------------------------------------*
* handlers/post.js *
*------------------------------------------------------------------*/
const {
getallPostsforUser,
getallPosts,
putPost,
likePost,
unlikePost,
quoteWithPost,
quoteWithoutPost,
checkforLikePost,
getOtherUsersPosts
} = require("./handlers/post");
const { getallPostsforUser, getallPosts, putPost, likePost, unlikePost, getLikes, quoteWithPost, quoteWithoutPost, checkforLikePost} = require("./handlers/post");
app.get("/getallPostsforUser", fbAuth, getallPostsforUser);
@ -100,6 +92,7 @@ app.get("/getallPosts", getallPosts);
// Adds one post to the database
app.post("/putPost", fbAuth, putPost);
app.get("/likes", fbAuth, getLikes);
app.get("/like/:postId", fbAuth, likePost);
app.get("/unlike/:postId", fbAuth, unlikePost);
app.get("/checkforLikePost/:postId", fbAuth, checkforLikePost);

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

@ -5,10 +5,14 @@ import { connect } from "react-redux";
import axios from "axios";
// Material UI and React Router
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 Typography from "@material-ui/core/Typography";
import withStyles from '@material-ui/styles/withStyles';
@ -19,6 +23,9 @@ 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';
const styles = {
card: {
@ -28,7 +35,7 @@ const styles = {
class Home extends Component {
state = {
likes: []
};
@ -42,6 +49,34 @@ class Home extends Component {
});
})
.catch(err => console.log(err));
this.props.getLikes();
}
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
// 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 doc = document.getElementById(postId);
// console.log(postId);
if (this.state.likes.includes(postId)) {
this.props.unlikePost(postId, this.state.likes)
doc.dataset.likes--;
} else {
this.props.likePost(postId, this.state.likes)
doc.dataset.likes++;
}
doc.innerHTML = "Likes " + doc.dataset.likes;
}
formatDate(dateString) {
@ -50,6 +85,7 @@ class Home extends Component {
}
render() {
const { UI:{ loading } } = this.props;
let authenticated = this.props.user.authenticated;
let {classes} = this.props;
@ -79,9 +115,21 @@ class Home extends Component {
<br />
<Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>
<br />
{/* <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography> */}
<Like microBlog = {post.postId} count = {post.likeCount} name = {username}></Like>
<Quote microblog = {post.postId}></Quote>
<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>
)
@ -207,14 +255,14 @@ class Quote extends Component {
render() {
return (
<div>
<button onClick={this.handleOpenModal}>Quote with Post</button>
<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>
<textarea
<form style={{ width: "350px"}}>
{/* <textarea
value={this.state.value}
required
maxLength="250"
@ -226,21 +274,39 @@ 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 onClick={this.handleSubmit}>Share Quoted Post</button>
<Button variant="outlined" color="primary" onClick={this.handleSubmit}>Share Quoted Post</Button>
<button onClick={this.handleCloseModal}>Cancel</button>
<Button variant="outlined" color="primary" onClick={this.handleCloseModal}>Cancel</Button>
</form>
</div>
</ReactModal>
<button onClick={this.handleSubmitWithoutPost}>Quote without Post</button>
<Button variant="outlined" color="primary" onClick={this.handleSubmitWithoutPost}>Quote without Post</Button>
</div>
)
@ -343,10 +409,20 @@ class Like extends Component {
const mapStateToProps = (state) => ({
user: state.user,
UI: state.UI
});
})
const mapActionsToProps = {
likePost,
unlikePost,
getLikes
}
Home.propTypes = {
user: PropTypes.object.isRequired,
likePost: PropTypes.func.isRequired,
unlikePost: PropTypes.func.isRequired,
getLikes: PropTypes.func.isRequired,
classes: PropTypes.object.isRequired,
UI: PropTypes.object.isRequired
}
@ -359,4 +435,6 @@ Quote.propTypes = {
user: PropTypes.object.isRequired
}
export default connect(mapStateToProps)(withStyles(styles)(Home, Like, Quote));
export default connect(mapStateToProps, mapActionsToProps)(Home, Like, Quote);

1
twistter-frontend/src/pages/Search.js
View File

@ -101,6 +101,7 @@ export class Search extends Component {
)
return (
this.state.loading
?
<CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>

59
twistter-frontend/src/redux/actions/userActions.js
View File

@ -1,3 +1,4 @@
import {
SET_USER,
SET_ERRORS,
@ -5,6 +6,9 @@ import {
LOADING_UI,
// SET_AUTHENTICATED,
SET_UNAUTHENTICATED,
LIKE_POST,
UNLIKE_POST,
SET_LIKES,
LOADING_USER
} from '../types';
import axios from 'axios';
@ -102,6 +106,60 @@ export const deleteUser = () => (dispatch) => {
dispatch({ type: SET_UNAUTHENTICATED });
}
export const getLikes = () => (dispatch) => {
axios.get('/likes')
.then((res) => {
dispatch({
type: SET_LIKES,
payload: res.data
})
})
}
export const likePost = (postId, postArray) => (dispatch) => {
postArray.push(postId);
dispatch({
type: LIKE_POST,
payload: {
likes: postArray
}
})
axios.get(`/like/${postId}`)
.then((res) => {
getLikes();
})
}
export const unlikePost = (postId, postArray) => (dispatch) => {
let i;
for (i = 0; i < postArray.length; i++) {
if (postArray[i] === postId) {
postArray.splice(i, 1);
break;
}
}
dispatch({
type: UNLIKE_POST,
payload: {
likes: postArray
}
})
axios.get(`/unlike/${postId}`)
.then((res) => {
getLikes();
})
}
const setAuthorizationHeader = (token) => {
const FBIdToken = `Bearer ${token}`;
localStorage.setItem('FBIdToken', FBIdToken);
axios.defaults.headers.common['Authorization'] = FBIdToken;
}
// Sends an image data form to firebase to be uploaded to the user profile
export const uploadImage = (formData) => (dispatch) => {
dispatch({ type: LOADING_UI });
@ -114,3 +172,4 @@ export const uploadImage = (formData) => (dispatch) => {
console.log(err);
})
}

23
twistter-frontend/src/redux/reducers/userReducer.js
View File

@ -1,3 +1,4 @@
import {
SET_USER,
// SET_ERRORS,
@ -5,9 +6,13 @@ import {
// LOADING_UI,
SET_AUTHENTICATED,
SET_UNAUTHENTICATED,
LOADING_USER
LOADING_USER,
LIKE_POST,
UNLIKE_POST,
SET_LIKES
} from '../types';
const initialState = {
authenticated: false,
credentials: {},
@ -27,10 +32,26 @@ export default function(state = initialState, action) {
return initialState;
case SET_USER:
return {
...state,
authenticated: true,
loading: false,
...action.payload,
};
case LIKE_POST:
return {
...state,
...action.payload
}
case UNLIKE_POST:
return {
...state,
...action.payload
}
case SET_LIKES:
return {
...state,
...action.payload
case LOADING_USER:
return {
...state,

3
twistter-frontend/src/redux/types.js
View File

@ -3,6 +3,9 @@ export const SET_AUTHENTICATED = 'SET_AUTHENTICATED';
export const SET_UNAUTHENTICATED = 'SET_UNAUTHENTICATED';
export const SET_USER = 'SET_USER';
export const LOADING_USER = 'LOADING_USER';
export const LIKE_POST = 'LIKE_POST';
export const UNLIKE_POST = 'UNLIKE_POST';
export const SET_LIKES = 'SET_LIKES';
// UI reducer types
export const SET_ERRORS = 'SET_ERRORS';