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 branch 'master' into dms

Browse Source
This commit is contained in:
Clayton Wilson 2019-12-04 15:56:42 -05:00 committed by GitHub
commit 374c4d45b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 1446 additions and 583 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

576
functions/handlers/post.js
View File

@ -1,297 +1,385 @@
/* eslint-disable prefer-arrow-callback */
/* eslint-disable promise/always-return */
const admin = require('firebase-admin');
const { db } = require('../util/admin');
const admin = require("firebase-admin");
const { db } = require("../util/admin");
exports.putPost = (req, res) => {
const newPost = {
body: req.body.body,
userHandle: req.user.handle,
userImage: req.body.userImage,
userID: req.user.uid,
microBlogTitle: req.body.microBlogTitle,
createdAt: new Date().toISOString(),
likeCount: 0,
commentCount: 0,
microBlogTopics: req.body.microBlogTopics,
quoteBody: null
};
const newPost = {
body: req.body.body,
userHandle: req.user.handle,
userImage: req.body.userImage,
userID: req.user.uid,
microBlogTitle: req.body.microBlogTitle,
createdAt: new Date().toISOString(),
likeCount: 0,
commentCount: 0,
microBlogTopics: req.body.microBlogTopics,
quoteBody: null
};
admin.firestore().collection('posts').add(newPost)
.then((doc) => {
doc.update({postId: doc.id})
const resPost = newPost;
resPost.postId = doc.id;
return res.status(200).json(resPost);
admin
.firestore()
.collection("posts")
.add(newPost)
.then(doc => {
doc.update({ postId: doc.id });
const resPost = newPost;
resPost.postId = doc.id;
return res.status(200).json(resPost);
})
.catch((err) => {
console.error(err);
return res.status(500).json({ error: 'something went wrong'});
.catch(err => {
console.error(err);
return res.status(500).json({ error: "something went wrong" });
});
};
exports.getallPostsforUser = (req, res) => {
var post_query = admin.firestore().collection("posts").where("userHandle", "==", req.user.handle);
var post_query = admin
.firestore()
.collection("posts")
.where("userHandle", "==", req.user.handle);
post_query.get()
post_query
.get()
.then(function(myPosts) {
let posts = [];
myPosts.forEach(function(doc) {
posts.push(doc.data());
});
return res.status(200).json(posts);
let posts = [];
myPosts.forEach(function(doc) {
posts.push(doc.data());
});
return res.status(200).json(posts);
})
.then(function() {
return res.status(200).json("Successfully retrieved all user's posts from database.");
return res
.status(200)
.json("Successfully retrieved all user's posts from database.");
})
.catch(function(err) {
return res.status(500).json("Failed to retrieve user's posts from database.", err);
return res
.status(500)
.json("Failed to retrieve user's posts from database.", err);
});
};
exports.getallPosts = (req, res) => {
var post_query = admin.firestore().collection("posts");
post_query.get()
.then(function(allPosts) {
let posts = [];
allPosts.forEach(function(doc) {
posts.push(doc.data());
let posts = [];
let users = {};
// Get all the posts
var postsPromise = new Promise((resolve, reject) => {
db.collection("posts").get()
.then((allPosts) => {
allPosts.forEach((post) => {
posts.push(post.data());
});
return res.status(200).json(posts);
resolve();
})
.catch((error) => {
reject(error);
})
});
// Get all users
var usersPromise = new Promise((resolve, reject) => {
db.collection("users").get()
.then((allUsers) => {
allUsers.forEach((user) => {
users[user.data().handle] = user.data();
})
resolve();
})
.catch((error) => {
reject(error);
})
});
// Wait for the two promises
Promise.all([postsPromise, usersPromise])
.then(() => {
let newPosts = []
// Add the image url of the person who made the post to all of the post objects
posts.forEach((post) => {
post.profileImage = users[post.userHandle].imageUrl ? users[post.userHandle].imageUrl : null;
newPosts.push(post);
});
return res.status(200).json(newPosts);
})
.catch((error) => {
return res.status(500).json({error});
})
};
exports.getOtherUsersPosts = (req, res) => {
var post_query = admin
.firestore()
.collection("posts")
.where("userHandle", "==", req.body.handle);
post_query
.get()
.then(function(myPosts) {
let posts = [];
myPosts.forEach(function(doc) {
posts.push(doc.data());
});
return res.status(200).json(posts);
})
.then(function() {
return res.status(200).json("Successfully retrieved every post from database.");
return res
.status(200)
.json("Successfully retrieved all user's posts from database.");
})
.catch(function(err) {
return res.status(500).json("Failed to retrieve posts from database.", err);
return res
.status(500)
.json("Failed to retrieve user's posts from database.", err);
});
};
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('postId', '==', 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'});
}
})
.then((data) => {
if(data.empty) {
return admin.firestore().collection('quote').add({
quoteId : req.params.postId,
userHandle : req.user.handle,
quoteBody : req.body.quoteBody
})
.then(() => {
const post = {
body: quoteData.body,
userHandle : req.user.handle,
quoteBody: req.body.quoteBody,
createdAt : new Date().toISOString(),
userImage: req.body.userImage,
likeCount: 0,
commentCount: 0,
userID: req.user.uid,
microBlogTitle: quoteData.microBlogTitle,
microBlogTopics: quoteData.microBlogTopics,
quoteId: req.params.postId
}
return admin.firestore().collection('posts').add(post)
.then((doc) => {
doc.update({postId: doc.id})
const resPost = post;
resPost.postId = doc.id;
return res.status(200).json(resPost);
})
})
}
else {
return res.status(400).json({ error: 'Post has already been quoted.' });
}
})
.catch((err) => {
return res.status(500).json({error: err});
})
}
exports.quoteWithoutPost = (req, res) => {
let quoteData;
const quoteDoc = admin.firestore().collection('quote').
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) {
quoteData = doc.data();
return quoteDoc.get();
}
else
{
return res.status(404).json({error: 'Post not found'});
}
})
.then((data) => {
if(data.empty) {
return admin.firestore().collection('quote').add({
quoteId : req.params.postId,
userHandle : req.user.handle,
quoteBody: null
})
.then(() => {
const post = {
userHandle : req.user.handle,
body: quoteData.body,
quoteBody: null,
createdAt : new Date().toISOString(),
likeCount: 0,
commentCount: 0,
userID: req.user.uid,
userImage: req.body.userImage,
microBlogTitle: quoteData.microBlogTitle,
microBlogTopics: quoteData.microBlogTopics,
quoteId: req.params.postId
}
return admin.firestore().collection('posts').add(post)
.then((doc) => {
doc.update({postId: doc.id})
const resPost = post;
resPost.postId = doc.id;
return res.status(200).json(resPost);
})
})
}
else {
return res.status(400).json({ error: 'Post has already been quoted.' });
postDoc
.get()
.then(doc => {
if (doc.exists) {
quoteData = doc.data();
return quoteDoc.get();
} else {
return res.status(404).json({ error: "Post not found" });
}
})
.catch((err) => {
return res.status(500).json({error: 'Something is wrong'});
.then(data => {
if (data.empty) {
return admin
.firestore()
.collection("quote")
.add({
quoteId: req.params.postId,
userHandle: req.user.handle,
quoteBody: req.body.quoteBody
})
.then(() => {
const post = {
body: quoteData.body,
userHandle: req.user.handle,
quoteBody: req.body.quoteBody,
createdAt: new Date().toISOString(),
userImage: req.body.userImage,
likeCount: 0,
commentCount: 0,
userID: req.user.uid,
microBlogTitle: quoteData.microBlogTitle,
microBlogTopics: quoteData.microBlogTopics,
quoteId: req.params.postId
};
return admin
.firestore()
.collection("posts")
.add(post)
.then(doc => {
doc.update({ postId: doc.id });
const resPost = post;
resPost.postId = doc.id;
return res.status(200).json(resPost);
});
});
} else {
return res.status(400).json({ error: "Post has already been quoted." });
}
})
}
.catch(err => {
return res.status(500).json({ error: err });
});
};
exports.quoteWithoutPost = (req, res) => {
let quoteData;
const quoteDoc = admin
.firestore()
.collection("quote")
.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) {
quoteData = doc.data();
return quoteDoc.get();
} else {
return res.status(404).json({ error: "Post not found" });
}
})
.then(data => {
if (data.empty) {
return admin
.firestore()
.collection("quote")
.add({
quoteId: req.params.postId,
userHandle: req.user.handle,
quoteBody: null
})
.then(() => {
const post = {
userHandle: req.user.handle,
body: quoteData.body,
quoteBody: null,
createdAt: new Date().toISOString(),
likeCount: 0,
commentCount: 0,
userID: req.user.uid,
userImage: req.body.userImage,
microBlogTitle: quoteData.microBlogTitle,
microBlogTopics: quoteData.microBlogTopics,
quoteId: req.params.postId
};
return admin
.firestore()
.collection("posts")
.add(post)
.then(doc => {
doc.update({ postId: doc.id });
const resPost = post;
resPost.postId = doc.id;
return res.status(200).json(resPost);
});
});
} else {
return res.status(400).json({ error: "Post has already been quoted." });
}
})
.catch(err => {
// return res.status(500).json({ error: "Something is wrong" });
return res.status(500).json({ error: err });
});
};
exports.checkforLikePost = (req, res) => {
const likedPostDoc = admin.firestore().collection('likes').where('userHandle', '==', req.user.handle)
.where('postId', '==', req.params.postId).limit(1);
let result;
const likedPostDoc = admin
.firestore()
.collection("likes")
.where("userHandle", "==", req.user.handle)
.where("postId", "==", req.params.postId)
.limit(1);
let result;
likedPostDoc.get()
.then((data) => {
if (data.empty) {
result = false;
return res.status(200).json(result);
}
else
{
result = true;
return res.status(200).json(result);
}
})
}
likedPostDoc.get().then(data => {
if (data.empty) {
result = false;
return res.status(200).json(result);
} else {
result = true;
return res.status(200).json(result);
}
})
.catch((err) => {
console.log(err);
return res.status(500).json({error: err});
})
};
exports.likePost = (req, res) => {
let postData;
const likeDoc = admin.firestore().collection('likes').where('userHandle', '==', req.user.handle)
.where('postId', '==', req.params.postId).limit(1);
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 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'});
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" });
return res.status(500).json({ error: err });
});
};
exports.unlikePost = (req, res) => {
let postData;
const likeDoc = admin
.firestore()
.collection("likes")
.where("userHandle", "==", req.user.handle)
.where("postId", "==", req.params.postId)
.limit(1);
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 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'});
}
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);
});
.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'});
})
}
.catch(err => {
console.error(err);
return res.status(500).json({ error: "Something is wrong" });
});
};
exports.getFilteredPosts = (req, res) => {
admin.firestore().collection('posts').where('userHandle', '==', 'new user').where('microBlogTopics', '==')
admin
.firestore()
.collection("posts")
.where("userHandle", "==", "new user")
.where("microBlogTopics", "==");
};

253
functions/handlers/users.js
View File

@ -1,4 +1,6 @@
/* eslint-disable promise/catch-or-return */
/* eslint-disable promise/always-return */
const { admin, db } = require("../util/admin");
const config = require("../util/config");
const { validateUpdateProfileInfo } = require("../util/validator");
@ -211,7 +213,7 @@ exports.deleteUser = (req, res) => {
let errors = {};
function thenFunction(data) {
console.log(`${data} data for ${req.userData.handle} has been deleted.`);
console.log(`${data} for ${req.userData.handle} has been deleted.`);
}
function catchFunction(data, err) {
@ -219,14 +221,131 @@ exports.deleteUser = (req, res) => {
errors[data] = err;
}
function deleteDirectMessages() {
return new Promise((resolve, reject) => {
const deleteUsername = req.userData.handle;
db.doc(`/users/${deleteUsername}`)
.get()
.then((deleteUserDocSnap) => {
const dms = deleteUserDocSnap.data().dms;
const dmRecipients = deleteUserDocSnap.data().dmRecipients;
if (!dms) {
resolve();
return;
}
// Iterate over the list of users who this person has DM'd
let otherUsersPromises = [];
// Resolve if they don't have a dmRecipients list
if (dmRecipients === undefined || dmRecipients === null || dmRecipients.length === 0) {
resolve();
return;
}
dmRecipients.forEach((dmRecipient) => {
otherUsersPromises.push(
// Get each users data
db.doc(`/users/${dmRecipient}`).get()
.then((otherUserDocSnap) => {
// Get the index of deleteUsername so that we can remove the dangling
// reference to the DM document
let otherUserDMRecipients = otherUserDocSnap.data().dmRecipients;
let otherUserDMs = otherUserDocSnap.data().dms;
let index = -1;
otherUserDMRecipients.forEach((dmRecip, i) => {
if (dmRecip === deleteUsername) {
index = i;
}
})
if (index !== -1) {
// Remove deleteUsername from their dmRecipients list
otherUserDMRecipients.splice(index, 1);
// Remove the DM channel with deleteUsername
otherUserDMs.splice(index, 1);
// Update the users data
return otherUserDocSnap.ref.update({
dmRecipients: otherUserDMRecipients,
dms: otherUserDMs
});
}
})
)
})
// Wait for the removal of DM data stored on other users to be deleted
Promise.all(otherUsersPromises)
.then(() => {
// Iterate through DM references and delete them from the dm collection
let dmRefsPromises = [];
dms.forEach((dmRef) => {
// Create a delete queue
let batch = db.batch();
dmRefsPromises.push(
// Add the messages to the delete queue
db.collection(`/dm/${dmRef.id}/messages`).listDocuments()
.then((docs) => {
console.log("second")
console.log(docs);
docs.map((doc) => {
batch.delete(doc);
})
// Add the doc that the DM is stored in to the delete queue
batch.delete(dmRef);
// Commit the writes
return batch.commit();
})
)
})
return Promise.all(dmRefsPromises);
})
.then(() => {
resolve();
return;
})
.catch((err) => {
console.log("error " + err);
reject(err);
return;
})
})
.catch((err) => {
console.log(err);
return res.status(500).json({error: err});
})
})
}
// Deletes user from authentication
let auth = admin.auth().deleteUser(userId);
// Deletes database data
let data = db
.collection("users")
.doc(`${req.user.handle}`)
.delete();
let data = new Promise((resolve, reject) => {
deleteDirectMessages()
.then(() => {
return db
.collection("users")
.doc(`${req.user.handle}`)
.delete()
})
.then(() => {
resolve();
return;
})
.catch((err) => {
console.log(err);
reject(err);
return;
})
})
// Deletes any custom profile image
let image;
@ -300,7 +419,7 @@ exports.updateProfileInfo = (req, res) => {
// Update the database entry for this user
db.collection("users")
.doc(req.user.handle)
.set(profileData, { merge: true })
.set(profileData)
.then(() => {
console.log(`${req.user.handle}'s profile info has been updated.`);
return res.status(201).json({
@ -351,6 +470,7 @@ exports.getAllHandles = (req, res) => {
});
};
// Returns all data stored for a user
exports.getAuthenticatedUser = (req, res) => {
let credentials = {};
db.doc(`/users/${req.user.handle}`)
@ -1014,6 +1134,126 @@ exports.getSubs = (req, res) => {
});
};
// Uploads a profile image
exports.uploadProfileImage = (req, res) => {
const BusBoy = require("busboy");
const path = require("path");
const os = require("os");
const fs = require("fs");
const busboy = new BusBoy({ headers: req.headers });
let imageFileName;
let imageToBeUploaded = {};
let oldImageFileName = req.userData.imageUrl ? req.userData.imageUrl.split("/o/")[1].split("?alt")[0] : null;
// console.log(`old file: ${oldImageFileName}`);
busboy.on("file", (fieldname, file, filename, encoding, mimetype) => {
if (mimetype !== 'image/jpeg' && mimetype !== 'image/png') {
return res.status(400).json({ error: "Wrong filetype submitted" });
}
// console.log(fieldname);
// console.log(filename);
// console.log(mimetype);
const imageExtension = filename.split(".")[filename.split(".").length - 1]; // Get the image file extension
imageFileName = `${Math.round(Math.random() * 100000000000)}.${imageExtension}`; // Get a random filename
const filepath = path.join(os.tmpdir(), imageFileName);
imageToBeUploaded = { filepath, mimetype };
file.pipe(fs.createWriteStream(filepath));
});
busboy.on("finish", () => {
// Save the file to the storage bucket
admin.storage().bucket(config.storageBucket).upload(imageToBeUploaded.filepath, {
resumable: false,
metadata: {
metadata: {
contentType: imageToBeUploaded.mimetype
}
}
})
.then(() => {
// Add the new URL to the user's profile
const imageUrl = `https://firebasestorage.googleapis.com/v0/b/${config.storageBucket}/o/${imageFileName}?alt=media`;
return db.doc(`/users/${req.user.handle}`).update({ imageUrl });
})
.then(() => {
// Delete their old image if they have one
if (oldImageFileName !== null && oldImageFileName !== "no-img.png") {
admin.storage().bucket(config.storageBucket).file(oldImageFileName).delete()
.then(() => {
return res.status(201).json({ message: "Image uploaded successfully1"});
})
.catch((err) => {
console.log(err);
return res.status(201).json({ message: "Image uploaded successfully2"});
})
// return res.status(201).json({ message: "Image uploaded successfully"});
} else {
return res.status(201).json({ message: "Image uploaded successfully3"});
}
})
.catch((err) => {
console.error(err);
return res.status(500).json({ error: err.code})
})
});
busboy.end(req.rawBody);
// const BusBoy = require('busboy');
// const path = require('path');
// const os = require('os');
// const fs = require('fs');
// const busboy = new BusBoy({ headers: req.headers });
// let imageToBeUploaded = {};
// let imageFileName;
// busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
// // console.log(fieldname, file, filename, encoding, mimetype);
// if (mimetype !== 'image/jpeg' && mimetype !== 'image/png') {
// return res.status(400).json({ error: 'Wrong file type submitted' });
// }
// // my.image.png => ['my', 'image', 'png']
// const imageExtension = filename.split('.')[filename.split('.').length - 1];
// // 32756238461724837.png
// imageFileName = `${Math.round(
// Math.random() * 1000000000000
// ).toString()}.${imageExtension}`;
// const filepath = path.join(os.tmpdir(), imageFileName);
// imageToBeUploaded = { filepath, mimetype };
// file.pipe(fs.createWriteStream(filepath));
// });
// busboy.on('finish', () => {
// admin
// .storage()
// .bucket(config.storageBucket)
// .upload(imageToBeUploaded.filepath, {
// resumable: false,
// metadata: {
// metadata: {
// contentType: imageToBeUploaded.mimetype
// }
// }
// })
// .then(() => {
// const imageUrl = `https://firebasestorage.googleapis.com/v0/b/${
// config.storageBucket
// }/o/${imageFileName}?alt=media`;
// return db.doc(`/users/${req.user.handle}`).update({ imageUrl });
// })
// .then(() => {
// return res.json({ message: 'image uploaded successfully' });
// })
// .catch((err) => {
// console.error(err);
// return res.status(500).json({ error: 'something went wrong' });
// });
// });
// busboy.end(req.rawBody);
}
exports.removeSub = (req, res) => {
let new_following = [];
let userRef = db.doc(`/users/${req.userData.handle}`);
@ -1037,6 +1277,7 @@ exports.removeSub = (req, res) => {
.catch(err => {
return res.status(500).json({ err });
});
return res.status(200).json({ message: "ok" });
});
};

20
functions/index.js
View File

@ -23,6 +23,7 @@ const {
signup,
deleteUser,
updateProfileInfo,
uploadProfileImage,
verifyUser,
unverifyUser,
getUserHandles,
@ -72,9 +73,13 @@ app.get("/getProfileInfo", fbAuth, getProfileInfo);
// Updates the currently logged in user's profile information
app.post("/updateProfileInfo", fbAuth, updateProfileInfo);
// Gets all user data for the logged in user
// Returns all user data for the logged in user.
// Used when setting the state in Redux.
app.get("/user", fbAuth, getAuthenticatedUser);
// Uploads a profile image
app.post("/user/image", fbAuth, uploadProfileImage);
// Verifies the user sent to the request
// Must be run by the Admin user
app.post("/verifyUser", fbAuth, verifyUser);
@ -99,7 +104,17 @@ app.post("/removeSub", fbAuth, removeSub);
/*------------------------------------------------------------------*
* handlers/post.js *
*------------------------------------------------------------------*/
const { getallPostsforUser, getallPosts, putPost, likePost, unlikePost, quoteWithPost, quoteWithoutPost, checkforLikePost} = require("./handlers/post");
const {
getallPostsforUser,
getallPosts,
putPost,
likePost,
unlikePost,
quoteWithPost,
quoteWithoutPost,
checkforLikePost,
getOtherUsersPosts
} = require("./handlers/post");
app.get("/getallPostsforUser", fbAuth, getallPostsforUser);
@ -115,6 +130,7 @@ app.get("/checkforLikePost/:postId", fbAuth, checkforLikePost);
app.post("/quoteWithPost/:postId", fbAuth, quoteWithPost);
app.post("/quoteWithoutPost/:postId", fbAuth, quoteWithoutPost);
app.post("/getOtherUsersPosts", fbAuth, getOtherUsersPosts);
/*------------------------------------------------------------------*
* handlers/topic.js *

1
functions/package.json
View File

@ -14,6 +14,7 @@
},
"dependencies": {
"axios": "^0.19.0",
"busboy": "^0.3.1",
"firebase": "^6.6.2",
"firebase-admin": "^8.6.0",
"firebase-functions": "^3.1.0",

2
twistter-frontend/package.json
View File

@ -45,5 +45,5 @@
"last 1 safari version"
]
},
"proxy": "http://localhost:5001/twistter-e4649/us-central1/api"
"proxy": "https://us-central1-twistter-e4649.cloudfunctions.net/api"
}

2
twistter-frontend/src/App.js
View File

@ -75,7 +75,7 @@ class App extends Component {
<Route exact path="/home" component={home} />
<Route exact path="/user" component={user} />
<Route exact path="/edit" component={editProfile} />
<Route exact path="/user/edit" component={editProfile} />
<Route exact path="/verify" component={verify} />
<Route exact path="/search" component={Search} />
<Route exact path="/dm" component={directMessages} />

12
twistter-frontend/src/Userline.js
View File

@ -1,10 +1,10 @@
import React, { Component } from "react";
import { BrowserRouter as Router } from 'react-router-dom';
import Route from 'react-router-dom/Route';
// import { BrowserRouter as Router } from 'react-router-dom';
// import Route from 'react-router-dom/Route';
import axios from 'axios';
import Box from '@material-ui/core/Box'
import {borders} from '@material-ui/system';
import { sizing } from '@material-ui/system';
// import {borders} from '@material-ui/system';
// import { sizing } from '@material-ui/system';
// var moment = require('moment');
@ -41,7 +41,7 @@ class Userline extends Component {
<div style={{fontsize: "13px", textAlign: "left", marginLeft: "14px"}}>
<p>Userline</p>
</div>
<Box border={1} width="25%" flex="1" height="auto" m={2} fontSize="13px" textAlign= "left" padding="5px" flexWrap= "wrap" flexDirection= "row" >
<Box border={1} width="25%" flex="1" height="auto" m={2} fontSize="13px" textAlign="left" padding="5px" flexWrap="wrap" flexDirection="row" >
<div style={{flexWrap: "wrap", flex: "1", flexDirection: "row", wordBreak: "break-word"}}>
<p>
{sortedPosts.map((microBlog) => <p>Microblog Title: {microBlog.microBlogTitle}
@ -50,7 +50,7 @@ class Userline extends Component {
<br></br>Number of comments: {microBlog.commentCount}
<br></br>Number of likes: {microBlog.likeCount}
<br></br>Body of post: {microBlog.body}
<br></br>Tagged topics: {microBlog.microBlogTopics.join("," + " ")}
<br></br>Tagged topics: {microBlog.microBlogTopics.join(", ")}
</p>)}
</p>
</div>

140
twistter-frontend/src/Writing_Microblogs.js
View File

@ -1,8 +1,29 @@
import React, { Component } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import Route from "react-router-dom/Route";
// import { BrowserRouter as Router } from "react-router-dom";
// import Route from "react-router-dom/Route";
import axios from "axios";
// Material-UI
import TextField from '@material-ui/core/TextField';
// import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import withStyles from "@material-ui/styles/withStyles";
const styles = {
container: {
position: "fixed"
},
form: {
width: "300px",
height: "50px",
marginTop: "180px",
marginLeft: "50px"
},
textField: {
marginBottom: 15
}
}
class Writing_Microblogs extends Component {
constructor(props) {
super(props);
@ -27,7 +48,7 @@ class Writing_Microblogs extends Component {
this.setState({ topics: event.target.value });
}
handleSubmit(event) {
handleSubmit = (event) => {
// alert('A title for the microblog was inputted: ' + this.state.title + '\nA microblog was posted: ' + this.state.value);
const postData = {
body: this.state.value,
@ -67,6 +88,7 @@ class Writing_Microblogs extends Component {
}
handleChangeforPost(event) {
this.setState({ value: event.target.value });
}
@ -77,65 +99,67 @@ class Writing_Microblogs extends Component {
}
render() {
const { classes } = this.props;
return (
<div>
<div
style={{
width: "200px",
height: "50px",
marginTop: "180px",
marginLeft: "50px"
}}
>
<form>
<textarea
placeholder="Enter Microblog Title"
value={this.state.title}
required
onChange={this.handleChange}
cols={30}
rows={1}
/>
</form>
</div>
<div style={{ width: "200px", height: "50px", marginLeft: "50px" }}>
<form>
<textarea
placeholder="Enter topics seperated by a comma"
value={this.state.topics}
required
onChange={this.handleChangeforTopics}
cols={40}
rows={1}
/>
</form>
</div>
<div className={classes.container}>
<form noValidate className={classes.form}>
<TextField
id="title"
name="title"
label="Title"
className={classes.textField}
value={this.state.title}
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<div style={{ width: "200px", marginLeft: "50px" }}>
<form onSubmit={this.handleSubmit}>
<textarea
value={this.state.value}
required
maxLength="250"
placeholder="Write Microblog here..."
onChange={e => {
this.handleChangeforPost(e);
this.handleChangeforCharacterCount(e);
}}
cols={40}
rows={20}
/>
<div style={{ fontSize: "14px", marginRight: "-100px" }}>
<p2>Characters Left: {this.state.characterCount}</p2>
</div>
<div style={{ marginRight: "-100px" }}>
<button onClick>Share Post</button>
</div>
</form>
</div>
<TextField
id="topics"
name="topics"
label="Topics"
className={classes.textField}
value={this.state.topics}
variant="outlined"
onChange={this.handleChangeforTopics}
color="primary"
fullWidth
autoComplete='off'
/>
<TextField
id="content"
name="content"
label="Content"
color="primary"
className={classes.textField}
value={this.state.value}
helperText={`${this.state.characterCount} characters left`}
multiline
rows="9"
variant="outlined"
inputProps={{
maxLength: 250
}}
onChange={(e) => {
this.handleChangeforPost(e);
this.handleChangeforCharacterCount(e);
}}
fullWidth
autoComplete='off'
/>
<Button
onClick={this.handleSubmit}
// disabled={loading}
variant="outlined"
color="primary"
>
Share Post
</Button>
</form>
</div>
);
}
}
export default Writing_Microblogs;
export default withStyles(styles)(Writing_Microblogs);

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

@ -5,10 +5,12 @@ import { connect } from "react-redux";
import axios from "axios";
// Material UI and React Router
import CircularProgress from '@material-ui/core/CircularProgress';
import Grid from "@material-ui/core/Grid";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import withStyles from '@material-ui/styles/withStyles';
// component
import '../App.css';
@ -18,6 +20,12 @@ import Writing_Microblogs from '../Writing_Microblogs';
import ReactModal from 'react-modal';
const styles = {
card: {
marginBottom: 5
}
}
class Home extends Component {
state = {
@ -28,7 +36,7 @@ class Home extends Component {
axios
.get("/getallPosts")
.then(res => {
console.log(res.data);
// console.log(res.data);
this.setState({
posts: res.data
});
@ -36,27 +44,33 @@ class Home extends Component {
.catch(err => console.log(err));
}
formatDate(dateString) {
let newDate = new Date(Date.parse(dateString));
return newDate.toDateString();
}
render() {
let authenticated = this.props.user.authenticated;
let username = this.props.user.credentials.handle;
const { UI:{ loading } } = this.props;
let authenticated = this.props.user.authenticated;
let {classes} = this.props;
let username = this.props.user.credentials.handle;
let postMarkup = this.state.posts ? (
this.state.posts.map(post => (
<Card>
this.state.posts.map(post =>
<Card className={classes.card} key={post.postId}>
<CardContent>
<Typography>
{this.state.imageUrl ? (
<img src={this.state.imageUrl} height="250" width="250" />
) : (
<img src={noImage} height="50" width="50" />
)}
</Typography>
<Typography variant="h7">
<b>{post.userHandle}</b>
</Typography>
<Typography variant="body2" color={"textSecondary"}>
{post.createdAt}
{/* {
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>
@ -70,51 +84,49 @@ class Home extends Component {
<Quote microblog = {post.postId}></Quote>
</CardContent>
</Card>
))
)
) : (
<p>Loading post...</p>
);
return authenticated ? (
<Grid container spacing={16}>
return (
authenticated ? (
<Grid container>
<Grid item sm={4} xs={8}>
<Writing_Microblogs />
</Grid>
<Grid item sm={4} xs={8}>
{postMarkup}
</Grid>
</Grid>
) : (
<div>
<div>
<img src={logo} className="app-logo" alt="logo" />
<br />
<br />
<b>Welcome to Twistter!</b>
<br />
<br />
<b>See the most interesting topics people are following right now.</b>
</div>
</Grid>
) : loading ?
(<CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>)
:
(
<div>
<div>
<img src={logo} className="app-logo" alt="logo" />
<br/><br/>
<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>
<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>
));
}
}
@ -329,12 +341,15 @@ class Like extends Component {
}
const mapStateToProps = (state) => ({
user: state.user
user: state.user,
UI: state.UI
});
Home.propTypes = {
user: PropTypes.object.isRequired
};
user: PropTypes.object.isRequired,
classes: PropTypes.object.isRequired,
UI: PropTypes.object.isRequired
}
Like.propTypes = {
user: PropTypes.object.isRequired
@ -344,4 +359,4 @@ Quote.propTypes = {
user: PropTypes.object.isRequired
}
export default connect(mapStateToProps)(Home, Like, Quote);
export default connect(mapStateToProps)(withStyles(styles)(Home, Like, Quote));

6
twistter-frontend/src/pages/Login.js
View File

@ -110,7 +110,7 @@ export class Login extends Component {
<Grid item sm>
<img src={logo} className="app-logo" alt="logo" />
<br></br>
<Typography variant="p" className={classes.pageTitle} fontFamily = "Georgia, serif">
<Typography variant="h6" className={classes.pageTitle} fontFamily = "Georgia, serif">
<b>Log in to Twistter</b>
<br></br>
</Typography>
@ -119,7 +119,7 @@ export class Login extends Component {
<TextField
id="email"
name="email"
label="Email*"
label="Email or Username*"
className={classes.textField}
value={this.state.email}
helperText={errors.email}
@ -127,6 +127,7 @@ export class Login extends Component {
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<TextField
id="password"
@ -140,6 +141,7 @@ export class Login extends Component {
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<Button
type="submit"

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

@ -1,6 +1,7 @@
import React, { Component } from "react";
// import props
import { TextField, Button } from "@material-ui/core";
// import { TextField, Button } from "@material-ui/core";
import TextField from "@material-ui/core/TextField"
import Grid from "@material-ui/core/Grid";
import axios from "axios";
import Fuse from "fuse.js";
@ -38,7 +39,7 @@ export class Search extends Component {
handles: res.data,
loading: false
}, () => {
console.log(res.data);
// console.log(res.data);
fuse = new Fuse(this.state.handles, fuseOptions); // "list" is the item array
})
})
@ -65,7 +66,7 @@ export class Search extends Component {
let result = fuse.search(event.target.value);
let parsed = [];
result.forEach((res) => {
console.log(res)
// console.log(res)
parsed.push(this.state.handles[res])
})
this.setState({
@ -80,7 +81,7 @@ export class Search extends Component {
render() {
let resultMarkup = this.state.searchResult && this.state.searchResult !== "No Results" ? (
this.state.searchResult.map(res =>
<Router>
<Router key={res}>
<div>
<a href={`/user/${res}`}>
{res}

4
twistter-frontend/src/pages/Signup.js
View File

@ -122,6 +122,7 @@ export class Signup extends Component {
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<TextField
id="email"
@ -134,6 +135,7 @@ export class Signup extends Component {
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<TextField
id="password"
@ -147,6 +149,7 @@ export class Signup extends Component {
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<TextField
id="confirmPassword"
@ -160,6 +163,7 @@ export class Signup extends Component {
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<br></br>
<br></br>

582
twistter-frontend/src/pages/editProfile.js
View File

@ -1,23 +1,28 @@
import React, { Component } from "react";
import { Link } from 'react-router-dom';
import axios from "axios";
import PropTypes from "prop-types";
// TODO: Add a read-only '@' in the left side of the handle input
// TODO: Add a cancel button, that takes the user back to their profile page
// FIX: Empty bio does not update the database
import noImage from '../images/no-img.png';
// Material-UI stuff
import Box from "@material-ui/core/Box"
import Button from "@material-ui/core/Button";
import { Link } from 'react-router-dom';
import CircularProgress from "@material-ui/core/CircularProgress";
import Grid from "@material-ui/core/Grid";
import Popover from "@material-ui/core/Popover";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import withStyles from "@material-ui/core/styles/withStyles";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";
import IconButton from "@material-ui/core/IconButton";
import EditIcon from "@material-ui/icons/Edit";
import Tooltip from "@material-ui/core/Tooltip";
// Redux
import { connect } from 'react-redux';
// Redux stuff
import { connect } from "react-redux";
import { uploadImage } from "../redux/actions/userActions";
const styles = {
form: {
@ -34,35 +39,77 @@ const styles = {
positon: "relative",
marginBottom: 30
},
box: {
position: "relative"
},
back: {
float: "left",
marginLeft: 15
},
delete: {
float: "right",
marginRight: 15
},
progress: {
position: "absolute"
},
uploadProgress: {
position: "absolute",
marginLeft: -155,
marginTop: 95
},
popoverBackground: {
marginTop: "-100px",
width: "calc(100vw)",
height: 'calc(100vh + 100px)',
backgroundColor: "gray",
position: "absolute",
opacity: "70%"
}
};
export class edit extends Component {
export class editProfile extends Component {
// mapReduxToState = (credentials) => {
// this.setState({
// imageUrl: credentials.imageUrl ? credentials.imageUrl : noImage,
// firstName: credentials.firstName ? credentials.firstName : '',
// lastName: credentials.lastName ? credentials.lastName : '',
// email: credentials.email ? credentials.email : 'error, email doesn\'t exist',
// handle: credentials.handle ? credentials.handle : 'error, handle doesn\'t exist',
// bio: credentials.bio ? credentials.bio : ''
// });
// };
// Runs as soon as the page loads.
// Sets the default values of all the textboxes to the data
// that is stored in the database for the user.
componentDidMount() {
// const { credentials } = this.props;
// console.log(this.props.user);
// this.mapReduxToState(credentials);
this.setState({pageLoading: true})
axios
.get("/getProfileInfo")
.then((res) => {
// Need to have the ternary if statements, because react throws an error if
// any of the res.data keys are undefined
this.setState({
firstName: res.data.firstName,
lastName: res.data.lastName,
imageUrl: res.data.imageUrl,
firstName: res.data.firstName ? res.data.firstName : "",
lastName: res.data.lastName ? res.data.lastName : "",
email: res.data.email,
handle: res.data.handle,
bio: res.data.bio,
dmEnabled: res.data.dmEnabled === false ? false : true
bio: res.data.bio ? res.data.bio : "",
dmEnabled: res.data.dmEnabled === false ? false : true,
pageLoading: false
});
})
.catch((err) => {
console.error(err);
if (err.response.status === 403) {
alert("You are not logged in");
// TODO: Redirect them, to the profile they are trying to edit
// If they are on /itsjimmy/edit, they will be redirected to /itsjimmy
this.props.history.push('../');
// This user is not logged in
this.props.history.push('/');
}
});
}
@ -71,6 +118,7 @@ export class edit extends Component {
constructor() {
super();
this.state = {
imageUrl: "",
firstName: "",
lastName: "",
email: "",
@ -78,7 +126,9 @@ export class edit extends Component {
bio: "",
dmEnabled: false,
togglingDirectMessages: false,
anchorEl: null,
loading: false,
pageLoading: false,
errors: {}
};
}
@ -113,11 +163,11 @@ export class edit extends Component {
this.setState({
loading: false
});
// this.props.history.push('/');
// TODO: Need to redirect user to their profile page
this.props.history.push('/user');
})
.catch((err) => {
console.log(err);
// TODO: Should redirect to login page if they get a 403
this.setState({
errors: err.response.data,
loading: false
@ -160,157 +210,401 @@ export class edit extends Component {
})
}
handleImageChange = (event) => {
if (event.target.files[0]) {
const image = event.target.files[0];
const formData = new FormData();
formData.append('image', image, image.name);
this.props.uploadImage(formData);
}
}
handleEditPicture = () => {
const fileInput = document.getElementById('imageUpload');
fileInput.click();
}
// logging = () => {
// console.log(this.state);
// console.log(this.props);
// this.mapReduxToState(this.props.credentials);
// }
handleOpenConfirmDelete = (event) => {
this.setState({
// anchorEl: event.currentTarget
anchorEl: document.getElementById("container-grid")
});
};
handleCloseConfirmDelete = () => {
this.setState({
anchorEl: null,
createDMUsername: ''
});
};
render() {
const { classes } = this.props;
const uploading = this.props.UI.loading;
const { errors, loading } = this.state;
let imageMarkup = this.props.user.credentials.imageUrl ? (
<Box
// className={classes.box}
>
<img
src={this.props.user.credentials.imageUrl}
height="250"
width="250"
className={classes.box}/>
{uploading && (
<CircularProgress size={60} className={classes.uploadProgress} />
)}
</Box>
) : (
<Box
// className={classes.box}
>
<img
src={noImage}
height="250"
width="250"
className={classes.box}/>
{uploading && (
<CircularProgress size={60} className={classes.uploadProgress} />
)}
</Box>
)
// Used for the delete button
const open = Boolean(this.state.anchorEl);
const id = open ? 'simple-popover' : undefined;
return (
<Grid container className={classes.form}>
<Grid item sm />
<Grid item sm>
<Typography variant="h2" className={classes.pageTitle}>
Edit Profile
</Typography>
<form noValidate onSubmit={this.handleSubmit}>
<Grid container className={classes.form} spacing={4}>
<Grid item sm>
<TextField
id="firstName"
name="firstName"
label="First Name"
className={classes.textField}
value={this.state.firstName}
helperText={errors.firstName}
error={errors.firstName ? true : false}
variant="outlined"
onChange={this.handleChange}
fullWidth
/>
</Grid>
<Grid item sm>
<TextField
id="lastName"
name="lastName"
label="Last Name"
className={classes.textField}
value={this.state.lastName}
helperText={errors.lastname}
error={errors.lastName ? true : false}
variant="outlined"
onChange={this.handleChange}
fullWidth
/>
</Grid>
</Grid>
<TextField
id="email"
name="email"
label="Email*"
className={classes.textField}
value={this.state.email}
disabled
helperText="(disabled)"
// INFO: These will be uncommented if changing emails is allowed
// helperText={errors.email}
// error={errors.email ? true : false}
variant="outlined"
onChange={this.handleChange}
fullWidth
/>
<TextField
id="handle"
name="handle"
label="Handle*"
className={classes.textField}
value={this.state.handle}
disabled
helperText="(disabled)"
// INFO: These will be uncommented if changing usernames is allowed
// helperText={errors.handle}
// error={errors.handle ? true : false}
variant="outlined"
onChange={this.handleChange}
fullWidth
/>
<TextField
id="bio"
name="bio"
label="Bio"
className={classes.textField}
value={this.state.bio}
helperText={errors.bio}
error={errors.bio ? true : false}
multiline
rows="8"
variant="outlined"
onChange={this.handleChange}
fullWidth
/>
<FormControlLabel
control={
<Switch
color="primary"
disabled={this.state.togglingDirectMessages}
checked={this.state.dmEnabled}
onChange={this.handleDMSwitch}
/>
}
label="Enable Direct Messages"
/>
<br></br>
// <<<<<<< dms
// <Grid container className={classes.form}>
// <Grid item sm />
// <Grid item sm>
// <Typography variant="h2" className={classes.pageTitle}>
// Edit Profile
// </Typography>
// <form noValidate onSubmit={this.handleSubmit}>
// <Grid container className={classes.form} spacing={4}>
// <Grid item sm>
// <TextField
// id="firstName"
// name="firstName"
// label="First Name"
// className={classes.textField}
// value={this.state.firstName}
// helperText={errors.firstName}
// error={errors.firstName ? true : false}
// variant="outlined"
// onChange={this.handleChange}
// fullWidth
// />
// </Grid>
// <Grid item sm>
// <TextField
// id="lastName"
// name="lastName"
// label="Last Name"
// className={classes.textField}
// value={this.state.lastName}
// helperText={errors.lastname}
// error={errors.lastName ? true : false}
// variant="outlined"
// onChange={this.handleChange}
// fullWidth
// />
// </Grid>
// </Grid>
// <TextField
// id="email"
// name="email"
// label="Email*"
// className={classes.textField}
// value={this.state.email}
// disabled
// helperText="(disabled)"
// // INFO: These will be uncommented if changing emails is allowed
// // helperText={errors.email}
// // error={errors.email ? true : false}
// variant="outlined"
// onChange={this.handleChange}
// fullWidth
// />
// <TextField
// id="handle"
// name="handle"
// label="Handle*"
// className={classes.textField}
// value={this.state.handle}
// disabled
// helperText="(disabled)"
// // INFO: These will be uncommented if changing usernames is allowed
// // helperText={errors.handle}
// // error={errors.handle ? true : false}
// variant="outlined"
// onChange={this.handleChange}
// fullWidth
// />
// <TextField
// id="bio"
// name="bio"
// label="Bio"
// className={classes.textField}
// value={this.state.bio}
// helperText={errors.bio}
// error={errors.bio ? true : false}
// multiline
// rows="8"
// variant="outlined"
// onChange={this.handleChange}
// fullWidth
// />
// <FormControlLabel
// control={
// <Switch
// color="primary"
// disabled={this.state.togglingDirectMessages}
// checked={this.state.dmEnabled}
// onChange={this.handleDMSwitch}
// />
// }
// label="Enable Direct Messages"
// />
// <br></br>
// <Button
// type="submit"
// variant="contained"
// color="primary"
// className={classes.button}
// disabled={loading}
// //component={ Link }
// //to='/user'
// >
// Submit
// {loading && (
// <CircularProgress size={30} className={classes.progress} />
// )}
// </Button>
// <br />
// =======
this.state.pageLoading ?
<CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>
:
<Grid container className={classes.form} id="container-grid">
<Grid item sm >
// >>>>>>> master
<Button
type="submit"
variant="contained"
variant="outlined"
color="primary"
className={classes.button}
disabled={loading}
//component={ Link }
//to='/user'
>
Submit
{loading && (
<CircularProgress size={30} className={classes.progress} />
)}
</Button>
<br />
<Button
//variant="contained"
color="primary"
className={classes.button}
// className={classes.button}
disabled={loading || uploading}
className={classes.back}
component={ Link }
to='/user'
>
Back to Profile
</Button>
<br />
</Grid>
<Grid item sm>
<Typography variant="h2" className={classes.pageTitle}>
Edit Profile
</Typography>
<form noValidate onSubmit={this.handleSubmit}>
{imageMarkup}
<input type="file" id="imageUpload" onChange={this.handleImageChange} hidden = "hidden"/>
<Tooltip title="Edit profile picture" placement="top">
<IconButton onClick={this.handleEditPicture} className="button">
<EditIcon color="primary"/>
</IconButton></Tooltip>
<Grid container className={classes.form} spacing={4}>
<Grid item sm>
<TextField
id="firstName"
name="firstName"
label="First Name"
className={classes.textField}
value={this.state.firstName}
helperText={errors.firstName}
error={errors.firstName ? true : false}
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
</Grid>
<Grid item sm>
<TextField
id="lastName"
name="lastName"
label="Last Name"
className={classes.textField}
value={this.state.lastName}
helperText={errors.lastname}
error={errors.lastName ? true : false}
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
</Grid>
</Grid>
<TextField
id="email"
name="email"
label="Email*"
className={classes.textField}
value={this.state.email}
disabled
helperText="(disabled)"
// INFO: These will be uncommented if changing emails is allowed
// helperText={errors.email}
// error={errors.email ? true : false}
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<TextField
id="handle"
name="handle"
label="Handle*"
className={classes.textField}
value={"@" + this.state.handle}
disabled
helperText="(disabled)"
// INFO: These will be uncommented if changing usernames is allowed
// helperText={errors.handle}
// error={errors.handle ? true : false}
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<TextField
id="bio"
name="bio"
label="Bio"
className={classes.textField}
value={this.state.bio}
helperText={errors.bio}
error={errors.bio ? true : false}
multiline
rows="8"
variant="outlined"
onChange={this.handleChange}
fullWidth
autoComplete='off'
/>
<Button
type="submit"
variant="contained"
color="primary"
className={classes.button}
disabled={loading}
//component={ Link }
//to='/user'
>
Submit
{loading && (
<CircularProgress size={30} className={classes.progress} />
)}
</Button>
</form>
</Grid>
<Grid item sm>
<Button
variant="contained"
variant="outlined"
color="secondary"
className={classes.button}
component={ Link }
to='/delete'
className={classes.delete}
onClick={this.handleOpenConfirmDelete}
>
Delete Account
</Button>
</form>
</Grid>
<Box hidden={!Boolean(this.state.anchorEl)} className={classes.popoverBackground}></Box>
<Popover
id={id}
open={open}
anchorEl={this.state.anchorEl}
onClose={this.handleCloseConfirmDelete}
anchorOrigin={{
vertical: 'center',
horizontal: 'center'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center'
}}
style={{
marginTop: "-200px"
}}
>
<Box
style={{
height: 200,
width: 400
}}
>
<Grid container direction="column" spacing={3}>
<Grid item>
<Typography style={{marginTop: 30, marginLeft: 50, marginRight: 50, textAlign: "center", fontSize: 24}}>Are you sure you want to delete your account?</Typography>
</Grid>
<Grid item>
<Button
color="secondary"
variant="contained"
component={ Link }
to='/delete'
style={{
marginBottom: "-40px",
marginLeft: 10,
width: 90
}}
>
Yes
</Button>
<Button
color="primary"
variant="outlined"
onClick={this.handleCloseConfirmDelete}
style={{
marginBottom: "-40px",
marginLeft: 195
}}
>
Cancel
</Button>
</Grid>
</Grid>
</Box>
</Popover>
</Grid>
<Grid item sm />
</Grid>
);
}
}
edit.propTypes = {
const mapStateToProps = (state) => ({
user: state.user,
UI: state.UI,
// credentials: state.user.credentials
});
const mapActionsToProps = { uploadImage }
editProfile.propTypes = {
uploadImage: PropTypes.func.isRequired,
classes: PropTypes.object.isRequired,
user: PropTypes.object.isRequired,
UI: PropTypes.object.isRequired
};
const mapStateToProps = (state) => ({
user: state.user,
UI: state.UI
});
const mapActionsToProps = {};
export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(edit));
// export default withStyles(styles)(edit);
export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(editProfile));

199
twistter-frontend/src/pages/otherUser.js
View File

@ -7,6 +7,8 @@ import axios from "axios";
// Material UI and React Router
import { makeStyles, styled } from "@material-ui/core/styles";
import withStyles from "@material-ui/core/styles/withStyles";
import { Link } from "react-router-dom";
import Card from "@material-ui/core/Card";
import CardMedia from "@material-ui/core/CardMedia";
@ -19,6 +21,7 @@ import Typography from "@material-ui/core/Typography";
import AddCircle from "@material-ui/icons/AddCircle";
import TextField from "@material-ui/core/TextField";
import VerifiedIcon from "@material-ui/icons/CheckSharp";
import DoneIcon from "@material-ui/icons/Done";
// component
import "../App.css";
@ -30,14 +33,53 @@ const MyChip = styled(Chip)({
color: "primary"
});
const styles = {
button: {
positon: "relative",
float: "left",
marginLeft: 30,
marginTop: 20
},
paper: {
// marginLeft: "10%",
// marginRight: "10%"
},
card: {
marginBottom: 5
},
profileImage: {
marginTop: 20
},
topicsContainer: {
border: "lightgray solid 1px",
marginTop: 20,
paddingTop: 10,
paddingBottom: 10,
height: 300
},
addCircle: {
width: 65,
height: 65,
marginTop: 10
},
username: {
marginBottom: 100
}
};
class user extends Component {
state = {
profile: window.location.pathname.split("/").pop(),
imageUrl: null,
topics: null,
user: null,
following: null
};
constructor() {
super();
this.state = {
profile: window.location.pathname.split("/").pop(),
imageUrl: null,
topics: null,
user: null,
following: null,
posts: null,
myTopics: null
};
}
handleSub = () => {
if (this.state.following === true) {
@ -88,38 +130,29 @@ class user extends Component {
.get("/user")
.then(res => {
this.setState({
following: res.data.credentials.following.includes(this.state.profile)
following: res.data.credentials.following.includes(
this.state.profile
),
myTopics: res.data.credentials.followedTopics
});
})
.catch(err => console.log(err));
axios
.post("/getOtherUsersPosts", {
handle: this.state.profile
})
.then(res => {
// console.log(res.data);
this.setState({
posts: res.data
});
})
.catch(err => console.log(err));
}
render() {
let profileMarkup = this.state.profile ? (
<div>
<Typography variant="h5">
@{this.state.profile}{" "}
{this.state.verified ? (
<VerifiedIcon style={{ fill: "#1397D5" }} />
) : null}
</Typography>
</div>
) : (
<p>loading username...</p>
);
let topicsMarkup = this.state.topics ? (
this.state.topics.map(
topic => <MyChip label={topic} key={{ topic }.topic.id} /> // console.log({ topic }.topic.id)
)
) : (
<p> loading topics...</p>
);
let imageMarkup = this.state.imageUrl ? (
<img src={this.state.imageUrl} height="150" width="150" />
) : (
<img src={noImage} height="150" width="150" />
);
const { classes } = this.props;
let followMarkup = this.state.following ? (
<Button variant="contained" color="primary" onClick={this.handleSub}>
@ -130,18 +163,109 @@ class user extends Component {
follow
</Button>
);
let profileMarkup = this.state.profile ? (
<div>
<Typography variant="h5">
@{this.state.profile}{" "}
{this.state.verified ? (
<VerifiedIcon style={{ fill: "#1397D5" }} />
) : null}
</Typography>
{followMarkup}
</div>
) : (
<p>loading username...</p>
);
console.log(this.state.following);
console.log(this.state.topics);
console.log(this.state.myTopics);
let topicsMarkup = this.state.topics ? (
this.state.topics.map(
topic =>
this.state.myTopics ? (
this.state.myTopics.includes(topic) ? (
<MyChip
label={topic}
key={{ topic }.topic.id}
onDelete
deleteIcon={<DoneIcon />}
/>
) : (
<MyChip
label={topic}
key={{ topic }.topic.id}
color="secondary"
/>
)
) : (
<p></p>
)
// topic => <MyChip label={topic} key={{ topic }.topic.id} /> // console.log({ topic }.topic.id)
)
) : (
<p> no topic yet</p>
);
let imageMarkup = this.state.imageUrl ? (
<img src={this.state.imageUrl} height="150" width="150" />
) : (
<img src={noImage} height="150" width="150" />
);
let postMarkup = this.state.posts ? (
this.state.posts.map(post => (
<Card className={classes.card}>
<CardContent>
<Typography>
{this.state.imageUrl ? (
<img src={this.state.imageUrl} height="50" width="50" />
) : (
<img src={noImage} height="50" width="50" />
)}
</Typography>
<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.quoteBody}</Typography>
<br />
<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}
</Typography>
</CardContent>
</Card>
))
) : (
<p>Posts</p>
);
return (
<Grid container spacing={24}>
<Grid item sm={4} xs={8}>
{imageMarkup}
{profileMarkup}
{followMarkup}
{/* {followMarkup} */}
{topicsMarkup}
<br />
</Grid>
<Grid item sm={4} xs={8}>
{postMarkup}
<br />
</Grid>
</Grid>
);
}
@ -152,7 +276,8 @@ const mapStateToProps = state => ({
});
user.propTypes = {
user: PropTypes.object.isRequired
user: PropTypes.object.isRequired,
classes: PropTypes.object.isRequired
};
export default connect(mapStateToProps)(user);
export default connect(mapStateToProps)(withStyles(styles)(user));

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

@ -47,7 +47,7 @@ const styles = {
// marginRight: "10%"
},
card: {
marginBottom: 10
marginBottom: 5
},
profileImage: {
marginTop: 20
@ -76,7 +76,7 @@ class user extends Component {
profile: null,
imageUrl: null,
topics: null,
newTopic: null
newTopic: ""
};
}
@ -147,11 +147,16 @@ class user extends Component {
// console.log(res.data);
this.setState({
posts: res.data
})
});
})
.catch(err => console.log(err));
}
formatDate(dateString) {
let newDate = new Date(Date.parse(dateString));
return newDate.toDateString();
}
render() {
const { classes } = this.props;
let authenticated = this.props.user.authenticated;
@ -174,7 +179,7 @@ class user extends Component {
topic => (
<MyChip
label={topic}
key={topic.id}
key={topic}
onDelete={key => this.handleDelete(topic)}
/>
) // console.log({ topic }.topic.id)
@ -201,7 +206,7 @@ class user extends Component {
let postMarkup = this.state.posts ? (
this.state.posts.map(post => (
<Card className={classes.card}>
<Card className={classes.card} key={post.postId}>
<CardContent>
<Typography>
{this.state.imageUrl ? (
@ -210,25 +215,29 @@ class user extends Component {
<img src={noImage} height="50" width="50" />
)}
</Typography>
<Typography variant="h7">
<Typography variant="h6">
<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.quoteBody}</Typography>
<br />
<Typography variant="body2">{post.body}</Typography>
<br />
<Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>
<Typography variant="body2">
<b>Topics:</b> {post.microBlogTopics}
</Typography>
<br />
<Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount}</Typography>
<Typography variant="body2" color={"textSecondary"}>
Likes {post.likeCount}
</Typography>
</CardContent>
</Card>
))
@ -242,7 +251,7 @@ class user extends Component {
// showing the logged in users profile, instead of retreiving the
// profile based on the URL entered
let editButtonMarkup = true ? (
<Link to="/edit">
<Link to="/user/edit">
<Button className={classes.button} variant="outlined" color="primary">
Edit Profile
</Button>
@ -276,7 +285,7 @@ class user extends Component {
<TextField
id="newTopic"
label="new topic"
defaultValue=""
// defaultValue=""
margin="normal"
variant="outlined"
value={this.state.newTopic}
@ -286,7 +295,7 @@ class user extends Component {
className={classes.addCircle}
color="primary"
// iconStyle={classes.addCircle}
clickable
clickable="true"
onClick={this.handleAddCircle}
cursor="pointer"
/>
@ -311,7 +320,8 @@ const mapStateToProps = state => ({
});
user.propTypes = {
user: PropTypes.object.isRequired
user: PropTypes.object.isRequired,
classes: PropTypes.object.isRequired
};
export default connect(mapStateToProps)(withStyles(styles)(user));

2
twistter-frontend/src/pages/verify.js
View File

@ -89,7 +89,7 @@ export class verify extends Component {
render() {
const { classes } = this.props;
const { errors, loading } = this.state;
const { loading } = this.state;
return (
<Grid container className={classes.form}>

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

@ -1,18 +1,36 @@
import {SET_USER, SET_ERRORS, CLEAR_ERRORS, LOADING_UI, SET_AUTHENTICATED, SET_UNAUTHENTICATED} from '../types';
import {
SET_USER,
SET_ERRORS,
CLEAR_ERRORS,
LOADING_UI,
// SET_AUTHENTICATED,
SET_UNAUTHENTICATED,
LOADING_USER
} from '../types';
import axios from 'axios';
// Saves Authorization in browser local storage and adds it as a header to axios
const setAuthorizationHeader = (token) => {
const FBIdToken = `Bearer ${token}`;
localStorage.setItem('FBIdToken', FBIdToken);
axios.defaults.headers.common['Authorization'] = FBIdToken;
}
// Gets Database info for the logged in user and sets it in Redux
export const getUserData = () => (dispatch) => {
dispatch({ type: LOADING_USER });
axios.get('/user')
.then((res) => {
dispatch({
type: SET_USER,
payload: res.data,
})
});
dispatch({type: CLEAR_ERRORS});
})
.catch((err) => console.error(err));
}
// Sends login data to firebase and sets the user data in Redux
export const loginUser = (loginData, history) => (dispatch) => {
dispatch({ type: LOADING_UI });
axios
@ -21,7 +39,7 @@ export const loginUser = (loginData, history) => (dispatch) => {
// Save the login token
setAuthorizationHeader(res.data.token);
dispatch(getUserData());
dispatch({ type: CLEAR_ERRORS })
// dispatch({ type: CLEAR_ERRORS })
// Redirects to home page
history.push('/home');
})
@ -33,6 +51,7 @@ export const loginUser = (loginData, history) => (dispatch) => {
});
};
// Sends signup data to firebase and sets the user data in Redux
export const signupUser = (newUserData, history) => (dispatch) => {
dispatch({ type: LOADING_UI });
axios
@ -43,7 +62,7 @@ export const signupUser = (newUserData, history) => (dispatch) => {
// Save the signup token
setAuthorizationHeader(res.data.token);
dispatch(getUserData());
dispatch({ type: CLEAR_ERRORS })
// dispatch({ type: CLEAR_ERRORS })
// Redirects to home page
history.push('/home');
})
@ -55,12 +74,14 @@ export const signupUser = (newUserData, history) => (dispatch) => {
});
};
// Deletes the Authorization header and clears all user data from Redux
export const logoutUser = () => (dispatch) => {
localStorage.removeItem('FBIdToken');
delete axios.defaults.headers.common['Authorization'];
dispatch({ type: SET_UNAUTHENTICATED });
}
export const deleteUser = () => (dispatch) => {
axios
.delete("/delete")
@ -81,8 +102,15 @@ export const deleteUser = () => (dispatch) => {
dispatch({ type: SET_UNAUTHENTICATED });
}
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 });
axios.post('/user/image', formData)
.then(() => {
dispatch(getUserData());
// dispatch({ type: CLEAR_ERRORS });
})
.catch(err => {
console.log(err);
})
}

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

@ -1,4 +1,12 @@
import {SET_USER, SET_ERRORS, CLEAR_ERRORS, LOADING_UI, SET_AUTHENTICATED, SET_UNAUTHENTICATED} from '../types';
import {
SET_USER,
// SET_ERRORS,
// CLEAR_ERRORS,
// LOADING_UI,
SET_AUTHENTICATED,
SET_UNAUTHENTICATED,
LOADING_USER
} from '../types';
const initialState = {
authenticated: false,
@ -20,8 +28,14 @@ export default function(state = initialState, action) {
case SET_USER:
return {
authenticated: true,
loading: false,
...action.payload,
};
case LOADING_USER:
return {
...state,
loading: true
}
default:
return state;
}