From 1482830131bcb7b0a9c5e666303aa9d56c34b634 Mon Sep 17 00:00:00 2001 From: Aaron Sun Date: Sun, 24 Nov 2019 17:08:13 -0800 Subject: [PATCH] Pulled latest version from master and fixed all conflicts --- functions/handlers/post.js | 20 +- functions/handlers/topic.js | 113 +++-- functions/handlers/users.js | 421 ++++++++++++----- functions/index.js | 38 +- package-lock.json | 425 +++++++++++++++++- twistter-frontend/package-lock.json | 5 + twistter-frontend/package.json | 1 + twistter-frontend/src/App.js | 47 +- twistter-frontend/src/Writing_Microblogs.js | 205 +++++---- .../src/components/layout/NavBar.js | 125 +++--- twistter-frontend/src/pages/Login.js | 14 +- twistter-frontend/src/pages/Search.js | 56 +-- twistter-frontend/src/pages/Signup.js | 23 +- twistter-frontend/src/pages/otherUser.js | 158 +++++++ twistter-frontend/src/pages/user.js | 38 +- 15 files changed, 1306 insertions(+), 383 deletions(-) create mode 100644 twistter-frontend/src/pages/otherUser.js diff --git a/functions/handlers/post.js b/functions/handlers/post.js index 2b29115..60c058e 100644 --- a/functions/handlers/post.js +++ b/functions/handlers/post.js @@ -1,3 +1,4 @@ +/* eslint-disable prefer-arrow-callback */ /* eslint-disable promise/always-return */ const admin = require('firebase-admin'); @@ -16,6 +17,7 @@ exports.putPost = (req, res) => { 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); @@ -37,11 +39,11 @@ exports.getallPostsforUser = (req, res) => { return res.status(200).json(posts); }) .then(function() { - res.status(200).send("Successfully retrieved all user's posts from database."); - return; + res.status(200).send("Successfully retrieved all user's posts from database."); + return; }) .catch(function(err) { - res.status(500).send("Failed to retrieve user's posts from database.", err); + res.status(500).send("Failed to retrieve user's posts from database.", err); }); }; @@ -56,14 +58,18 @@ exports.getallPosts = (req, res) => { return res.status(200).json(posts); }) .then(function() { - res.status(200).send("Successfully retrieved every post from database."); - return; + res.status(200).send("Successfully retrieved every post from database."); + return; }) .catch(function(err) { - res.status(500).send("Failed to retrieve posts from database.", err); + res.status(500).send("Failed to retrieve posts from database.", err); }); }; +exports.getFilteredPosts = (req, res) => { + admin.firestore().collection('posts').where('userHandle', '==', 'new user').where('microBlogTopics', '==') +}; + exports.getFollowedPosts = (req, res) => { var followers_list = admin.firestore().collection("users").doc(req.user.handle).collection("followedUsers"); var post_query = admin.firestore().collection("posts"); @@ -104,4 +110,4 @@ exports.getFollowedPosts = (req, res) => { .catch(function(err) { res.status(500).send("Failed to retrieve any posts.", err); }); -}; \ No newline at end of file +}; diff --git a/functions/handlers/topic.js b/functions/handlers/topic.js index 4d3dc3d..88e014e 100644 --- a/functions/handlers/topic.js +++ b/functions/handlers/topic.js @@ -1,52 +1,93 @@ -/* eslint-disable promise/always-return */ const { admin, db } = require("../util/admin"); exports.putTopic = (req, res) => { + let new_following = []; + let userRef = db.doc(`/users/${req.userData.handle}`); + userRef + .get() + .then(doc => { + new_following = doc.data().followedTopics; + new_following.push(req.body.following); - const newTopic = { - topic: req.body.topic - }; - - admin.firestore().collection('topics').add(newTopic) - .then((doc) => { - const resTopic = newTopic; - newTopic.topicId = doc.id; - return res.status(200).json(resTopic); + // add stuff + userRef + .set({ followedTopics: new_following }, { merge: true }) + .then(doc => { + return res + .status(201) + .json({ message: `Following ${req.body.following}` }); + }) + .catch(err => { + return res.status(500).json({ err }); + }); + return res.status(200).json({ message: "OK" }); }) - .catch((err) => { - console.error(err); - return res.status(500).json({ error: 'something is wrong'}); + .catch(err => { + return res.status(500).json({ err }); }); }; exports.getAllTopics = (req, res) => { - admin.firestore().collection('topics').get() - .then((data) => { - let topics = []; - data.forEach(function(doc) { - topics.push(doc.data()); + admin + .firestore() + .collection("topics") + .get() + .then(data => { + let topics = []; + data.forEach(function(doc) { + topics.push({ + topic: doc.data().topic, + id: doc.id }); - return res.status(200).json(topics); - }) - .catch((err) => { - console.error(err); - return res.status(500).json({error: 'Failed to fetch all topics.'}) + }); + return res.status(200).json(topics); }) + .catch(err => { + console.error(err); + return res.status(500).json({ error: "Failed to fetch all topics." }); + }); }; exports.deleteTopic = (req, res) => { - const topic = db.doc(`/topics/${req.params.topicId}`); - topic.get().then((doc) => { - if (!doc.exists) { - return res.status(404).json({error: 'Topic not found'}); - } else { - return topic.delete(); + let new_following = []; + let userRef = db.doc(`/users/${req.userData.handle}`); + userRef + .get() + .then(doc => { + new_following = doc.data().followedTopics; + // remove username from array + new_following.forEach(function(follower, index) { + if (follower === `${req.body.unfollow}`) { + new_following.splice(index, 1); } + }); + + // update database + userRef + .set({ followedTopics: new_following }, { merge: true }) + .then(doc => { + return res + .status(202) + .json({ message: `Successfully unfollow ${req.body.unfollow}` }); + }) + .catch(err => { + return res.status(500).json({ err }); + }); + return res.status(200).json({ message: "ok" }); }) - .then(() => { - res.json({ message: 'Topic successfully deleted!'}); + .catch(err => { + return res.status(500).json({ err }); + }); +}; + +exports.getUserTopics = (req, res) => { + let data = []; + db.doc(`/users/${req.body.handle}`) + .get() + .then(doc => { + data = doc.data().followedTopics; + return res.status(200).json({ data }); }) - .catch((err) => { - console.error(err); - return res.status(500).json({error: 'Failed to delete topic.'}) - }) -} \ No newline at end of file + .catch(err => { + return res.status(500).json({ err }); + }); +}; diff --git a/functions/handlers/users.js b/functions/handlers/users.js index b455b02..7b6bfef 100644 --- a/functions/handlers/users.js +++ b/functions/handlers/users.js @@ -54,7 +54,7 @@ exports.signup = (req, res) => { db.doc(`/users/${newUser.handle}`) .get() - .then((doc) => { + .then(doc => { if (doc.exists) { return res .status(400) @@ -64,25 +64,28 @@ exports.signup = (req, res) => { .auth() .createUserWithEmailAndPassword(newUser.email, newUser.password); }) - .then((data) => { + .then(data => { userId = data.user.uid; return data.user.getIdToken(); }) - .then((idToken) => { + .then(idToken => { token = idToken; + const defaultImageUrl = `https://firebasestorage.googleapis.com/v0/b/${config.storageBucket}/o/no-img.png?alt=media`; const userCred = { email: newUser.email, handle: newUser.handle, createdAt: newUser.createdAt, userId, - followedTopics: [] + followedTopics: [], + imageUrl: defaultImageUrl, + verified: false }; return db.doc(`/users/${newUser.handle}`).set(userCred); }) .then(() => { return res.status(201).json({ token }); }) - .catch((err) => { + .catch(err => { console.error(err); if (err.code === "auth/email-already-in-use") { return res.status(500).json({ email: "This email is already taken." }); @@ -120,116 +123,156 @@ exports.login = (req, res) => { // Email/username field is username since it's not in email format if (!user.email.match(emailRegEx)) { var userDoc = db.collection("users").doc(`${user.email}`); - userDoc.get() - .then(function(doc) { + userDoc + .get() + .then(function(doc) { if (doc.exists) { user.email = doc.data().email; - } - else { - return res.status(403).json({ general: "Invalid credentials. Please try again." }); + } else { + return res + .status(403) + .json({ general: "Invalid credentials. Please try again." }); } return; - }) - .then(function() { - firebase - .auth() - .signInWithEmailAndPassword(user.email, user.password) - .then((data) => { - return data.user.getIdToken(); }) - .then((token) => { - return res.status(200).json({ token }); + .then(function() { + firebase + .auth() + .signInWithEmailAndPassword(user.email, user.password) + .then(data => { + return data.user.getIdToken(); + }) + .then(token => { + return res.status(200).json({ token }); + }) + .catch(err => { + console.error(err); + if ( + err.code === "auth/user-not-found" || + err.code === "auth/invalid-email" || + err.code === "auth/wrong-password" + ) { + return res + .status(403) + .json({ general: "Invalid credentials. Please try again." }); + } + return res.status(500).json({ error: err.code }); + }); + return; }) - .catch((err) => { - console.error(err); - if (err.code === "auth/user-not-found" || err.code === "auth/invalid-email" || err.code === "auth/wrong-password") { - return res.status(403).json({ general: "Invalid credentials. Please try again." }); + .catch(function(err) { + if (!doc.exists) { + return res + .status(403) + .json({ general: "Invalid credentials. Please try again." }); } - return res.status(500).json({ error: err.code }); + return res.status(500).send(err); }); - return; - }) - .catch(function(err) { - if(!doc.exists) { - return res.status(403).json({ general: "Invalid credentials. Please try again." }); - } - return res.status(500).send(err); - }); } // Email/username field is username else { firebase - .auth() - .signInWithEmailAndPassword(user.email, user.password) - .then((data) => { - return data.user.getIdToken(); - }) - .then((token) => { - return res.status(200).json({ token }); - }) - .catch((err) => { - console.error(err); - if (err.code === "auth/user-not-found" || err.code === "auth/invalid-email" || err.code === "auth/wrong-password") { - return res - .status(403) - .json({ general: "Invalid credentials. Please try again." }); - } - return res.status(500).json({ error: err.code }); - }); + .auth() + .signInWithEmailAndPassword(user.email, user.password) + .then(data => { + return data.user.getIdToken(); + }) + .then(token => { + return res.status(200).json({ token }); + }) + .catch(err => { + console.error(err); + if ( + err.code === "auth/user-not-found" || + err.code === "auth/invalid-email" || + err.code === "auth/wrong-password" + ) { + return res + .status(403) + .json({ general: "Invalid credentials. Please try again." }); + } + return res.status(500).json({ error: err.code }); + }); } }; -//Deletes user account +//Deletes user account and all associated data exports.deleteUser = (req, res) => { - var currentUser; - firebase.auth().onAuthStateChanged(function(user) { - currentUser = user; - if (currentUser) { - var post_query = db.collection("posts").where("userHandle", "==", req.user.handle); - post_query.get() - .then(function(myPosts) { - myPosts.forEach(function(doc) { - doc.ref.delete(); + // Get the profile image filename + // `https://firebasestorage.googleapis.com/v0/b/${config.storageBucket}/o/${imageFileName}?alt=media` + let imageFileName; + req.userData.imageUrl + ? (imageFileName = req.userData.imageUrl.split("/o/")[1].split("?alt=")[0]) + : (imageFileName = "no-img.png"); + + const userId = req.userData.userId; + let errors = {}; + + function thenFunction(data) { + console.log(`${data} data for ${req.userData.handle} has been deleted.`); + } + + function catchFunction(data, err) { + console.error(err); + errors[data] = err; + } + + // Deletes user from authentication + let auth = admin.auth().deleteUser(userId); + + // Deletes database data + let data = db + .collection("users") + .doc(`${req.user.handle}`) + .delete(); + + // Deletes any custom profile image + let image; + if (imageFileName !== "no-img.png") { + image = admin + .storage() + .bucket() + .file(imageFileName) + .delete(); + } else { + image = Promise.resolve(); + } + + // Deletes all users posts + let posts = db + .collection("posts") + .where("userHandle", "==", req.user.handle) + .get() + .then(query => { + query.forEach(snap => { + snap.ref.delete(); + }); + return; + }); + + let promises = [ + auth.then(thenFunction("auth")).catch(err => catchFunction("auth", err)), + data.then(thenFunction("data")).catch(err => catchFunction("data", err)), + image.then(thenFunction("image")).catch(err => catchFunction("image", err)), + posts.then(thenFunction("posts")).catch(err => catchFunction("image", err)) + ]; + + // Wait for all promises to resolve + let waitPromise = Promise.all(promises); + + waitPromise + .then(() => { + if (Object.keys(errors) > 0) { + return res.status(500).json(errors); + } else { + return res.status(200).json({ + message: `All data for ${req.userData.handle} has been deleted.` }); - return; - }) - .then(function() { - res.status(200).send("Successfully removed all user's posts from database."); - return; - }) - .catch(function(err) { - res.status(500).send("Failed to remove all user's posts from database.", err); - }); - - - - db.collection("users").doc(`${req.user.handle}`).delete() - .then(function() { - res.status(200).send("Sucessfully removed user from database."); - return; - }) - .catch(function(err) { - res.status(500).send("Failed to remove user from database.", err); - }); - - - - currentUser.delete() - .then(function() { - console.log("Successfully deleted user."); - res.status(200).send("Sucessfully deleted user."); - return; - }) - .catch(function(err) { - console.log("Failed to delete user.", err); - res.status(500).send("Failed to delete user."); - }); - } - else { - console.log("Failed to deleter user or cannot get user."); - res.status(500).send("Failed to deleter user or cannot get user."); - } - }); + } + }) + .catch(err => { + return res.status(500).json({ error: err }); + }); }; // Returns all data in the database for the user who is currently signed in @@ -237,10 +280,10 @@ exports.getProfileInfo = (req, res) => { db.collection("users") .doc(req.user.handle) .get() - .then((data) => { + .then(data => { return res.status(200).json(data.data()); }) - .catch((err) => { + .catch(err => { console.error(err); return res.status(500).json(err); }); @@ -258,13 +301,11 @@ exports.updateProfileInfo = (req, res) => { .set(profileData, { merge: true }) .then(() => { console.log(`${req.user.handle}'s profile info has been updated.`); - return res - .status(201) - .json({ - general: `${req.user.handle}'s profile info has been updated.` - }); + return res.status(201).json({ + general: `${req.user.handle}'s profile info has been updated.` + }); }) - .catch((err) => { + .catch(err => { console.error(err); return res.status(500).json({ error: "Error updating profile data" @@ -276,14 +317,15 @@ exports.getUserDetails = (req, res) => { let userData = {}; db.doc(`/users/${req.body.handle}`) .get() - .then((doc) => { + .then(doc => { if (doc.exists) { userData = doc.data(); - return res.status(200).json({userData}); - } else { - return res.status(400).json({error: "User not found."}) - }}) - .catch((err) => { + return res.status(200).json({ userData }); + } else { + return res.status(400).json({ error: "User not found." }); + } + }) + .catch(err => { console.error(err); return res.status(500).json({ error: err.code }); }); @@ -293,17 +335,160 @@ exports.getAuthenticatedUser = (req, res) => { let credentials = {}; db.doc(`/users/${req.user.handle}`) .get() - .then((doc) => { + .then(doc => { if (doc.exists) { credentials = doc.data(); - return res.status(200).json({credentials}); - } else { - return res.status(400).json({error: "User not found."}) - }}) - .catch((err) => { + return res.status(200).json({ credentials }); + } else { + return res.status(400).json({ error: "User not found." }); + } + }) + .catch(err => { console.error(err); return res.status(500).json({ error: err.code }); }); }; +// Verifies the user sent to the request +// Must be run by the Admin user +exports.verifyUser = (req, res) => { + if (req.userData.handle !== "Admin") { + return res.status(403).json({ error: "This must be done as Admin" }); + } + db.doc(`/users/${req.body.user}`) + .get() + .then(doc => { + if (doc.exists) { + let verifiedUser = doc.data(); + verifiedUser.verified = true; + return db + .doc(`/users/${req.body.user}`) + .set(verifiedUser, { merge: true }); + } else { + return res + .status(400) + .json({ error: `User ${req.body.user} was not found` }); + } + }) + .then(() => { + return res + .status(201) + .json({ message: `${req.body.user} is now verified` }); + }) + .catch(err => { + console.error(err); + return res.status(500).json({ error: err.code }); + }); +}; + +// Unverifies the user sent to the request +// Must be run by admin +exports.unverifyUser = (req, res) => { + if (req.userData.handle !== "Admin") { + return res.status(403).json({ error: "This must be done as Admin" }); + } + + db.doc(`/users/${req.body.user}`) + .get() + .then(doc => { + if (doc.exists) { + let unverifiedUser = doc.data(); + unverifiedUser.verified = false; + return db + .doc(`/users/${req.body.user}`) + .set(unverifiedUser, { merge: true }); + } else { + return res + .status(400) + .json({ error: `User ${req.body.user} was not found` }); + } + }) + .then(() => { + return res + .status(201) + .json({ message: `${req.body.user} is no longer verified` }); + }) + .catch(err => { + console.error(err); + return res.status(500).json({ error: err.code }); + }); +}; +exports.getUserHandles = (req, res) => { + db.doc(`/users/${req.body.userHandle}`) + .get() + .then(doc => { + if (doc.exists) { + let userHandle = doc.data().handle; + return res.status(200).json(userHandle); + } else { + return res.status(404).json({ error: "user not found" }); + } + }) + .catch(err => { + console.error(err); + return res.status(500).json({ error: "Failed to get all user handles." }); + }); +}; + +exports.addSubscription = (req, res) => { + let new_following = []; + let userRef = db.doc(`/users/${req.userData.handle}`); + userRef.get().then(doc => { + new_following = doc.data().following; + new_following.push(req.body.following); + + // add stuff + userRef + .set({ following: new_following }, { merge: true }) + .then(doc => { + return res + .status(201) + .json({ message: `Following ${req.body.following}` }); + }) + .catch(err => { + return res.status(500).json({ err }); + }); + return res.status(200).json({ error: "Follow success!" }); + }); +}; + +exports.getSubs = (req, res) => { + let data = []; + db.doc(`/users/${req.userData.handle}`) + .get() + .then(doc => { + data = doc.data().following; + return res.status(200).json({ data }); + }) + .catch(err => { + return res.status(500).json({ err }); + }); +}; + +exports.removeSub = (req, res) => { + let new_following = []; + let userRef = db.doc(`/users/${req.userData.handle}`); + userRef.get().then(doc => { + new_following = doc.data().following; + // remove username from array + new_following.forEach(function(follower, index) { + if (follower === `${req.body.unfollow}`) { + new_following.splice(index, 1); + } + }); + + // update database + userRef + .set({ following: new_following }, { merge: true }) + .then(doc => { + return res + .status(202) + .json({ message: `Successfully unfollow ${req.body.unfollow}` }); + }) + .catch(err => { + return res.status(500).json({ err }); + }); + return res.status(500).json({ error: "shouldn't execute" }); + }); +}; diff --git a/functions/index.js b/functions/index.js index 65fbc67..c3f5947 100644 --- a/functions/index.js +++ b/functions/index.js @@ -16,7 +16,13 @@ const { login, signup, deleteUser, - updateProfileInfo + updateProfileInfo, + verifyUser, + unverifyUser, + getUserHandles, + addSubscription, + getSubs, + removeSub } = require("./handlers/users"); // Adds a user to the database and registers them in firebase with @@ -31,7 +37,7 @@ app.post("/login", login); //Deletes user account app.delete("/delete", fbAuth, deleteUser); -app.get("/getUser", fbAuth, getUserDetails); +app.post("/getUserDetails", fbAuth, getUserDetails); // Returns all profile data of the currently logged in user app.get("/getProfileInfo", fbAuth, getProfileInfo); @@ -41,6 +47,26 @@ app.post("/updateProfileInfo", fbAuth, updateProfileInfo); app.get("/user", fbAuth, getAuthenticatedUser); +// Verifies the user sent to the request +// Must be run by the Admin user +app.post("/verifyUser", fbAuth, verifyUser); + +// Unverifies the user sent to the request +// Must be run by admin +app.post("/unverifyUser", fbAuth, unverifyUser); + +// get user handles with search phase +app.post("/getUserHandles", fbAuth, getUserHandles); + +// get user's subscription +app.get("/getSubs", fbAuth, getSubs); + +// add user to another user's "following" data field +app.post("/addSubscription", fbAuth, addSubscription); + +// remove one subscription +app.post("/removeSub", fbAuth, removeSub); + /*------------------------------------------------------------------* * handlers/post.js * *------------------------------------------------------------------*/ @@ -61,7 +87,8 @@ app.post("/putPost", fbAuth, putPost); const { putTopic, getAllTopics, - deleteTopic + deleteTopic, + getUserTopics } = require("./handlers/topic"); // add topic to database @@ -71,6 +98,9 @@ app.post("/putTopic", fbAuth, putTopic); app.get("/getAllTopics", fbAuth, getAllTopics); // delete a specific topic -app.delete("/deleteTopic/:topicId", fbAuth, deleteTopic); +app.post("/deleteTopic", fbAuth, deleteTopic); + +// get topic for this user +app.post("/getUserTopics", fbAuth, getUserTopics); exports.api = functions.https.onRequest(app); diff --git a/package-lock.json b/package-lock.json index 8fda66e..c65b0ba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2,10 +2,427 @@ "requires": true, "lockfileVersion": 1, "dependencies": { - "dayjs": { - "version": "1.8.17", - "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.8.17.tgz", - "integrity": "sha512-47VY/htqYqr9GHd7HW/h56PpQzRBSJcxIQFwqL3P20bMF/3az5c3PWdVY3LmPXFl6cQCYHL7c79b9ov+2bOBbw==" + "accepts": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", + "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==", + "requires": { + "mime-types": "~2.1.24", + "negotiator": "0.6.2" + } + }, + "array-flatten": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", + "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" + }, + "axios": { + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz", + "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==", + "requires": { + "follow-redirects": "1.5.10", + "is-buffer": "^2.0.2" + } + }, + "body-parser": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz", + "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==", + "requires": { + "bytes": "3.1.0", + "content-type": "~1.0.4", + "debug": "2.6.9", + "depd": "~1.1.2", + "http-errors": "1.7.2", + "iconv-lite": "0.4.24", + "on-finished": "~2.3.0", + "qs": "6.7.0", + "raw-body": "2.4.0", + "type-is": "~1.6.17" + } + }, + "bytes": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz", + "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==" + }, + "content-disposition": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz", + "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==", + "requires": { + "safe-buffer": "5.1.2" + } + }, + "content-type": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", + "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" + }, + "cookie": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz", + "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==" + }, + "cookie-signature": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", + "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" + }, + "cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "requires": { + "object-assign": "^4", + "vary": "^1" + } + }, + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "requires": { + "ms": "2.0.0" + } + }, + "depd": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", + "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" + }, + "destroy": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", + "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" + }, + "ee-first": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", + "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" + }, + "encodeurl": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", + "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" + }, + "escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" + }, + "eslint-plugin-promise": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-4.2.1.tgz", + "integrity": "sha512-VoM09vT7bfA7D+upt+FjeBO5eHIJQBUWki1aPvB+vbNiHS3+oGIJGIeyBtKQTME6UPXXy3vV07OL1tHd3ANuDw==" + }, + "etag": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", + "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" + }, + "express": { + "version": "4.17.1", + "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz", + "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==", + "requires": { + "accepts": "~1.3.7", + "array-flatten": "1.1.1", + "body-parser": "1.19.0", + "content-disposition": "0.5.3", + "content-type": "~1.0.4", + "cookie": "0.4.0", + "cookie-signature": "1.0.6", + "debug": "2.6.9", + "depd": "~1.1.2", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "finalhandler": "~1.1.2", + "fresh": "0.5.2", + "merge-descriptors": "1.0.1", + "methods": "~1.1.2", + "on-finished": "~2.3.0", + "parseurl": "~1.3.3", + "path-to-regexp": "0.1.7", + "proxy-addr": "~2.0.5", + "qs": "6.7.0", + "range-parser": "~1.2.1", + "safe-buffer": "5.1.2", + "send": "0.17.1", + "serve-static": "1.14.1", + "setprototypeof": "1.1.1", + "statuses": "~1.5.0", + "type-is": "~1.6.18", + "utils-merge": "1.0.1", + "vary": "~1.1.2" + } + }, + "finalhandler": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", + "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==", + "requires": { + "debug": "2.6.9", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "on-finished": "~2.3.0", + "parseurl": "~1.3.3", + "statuses": "~1.5.0", + "unpipe": "~1.0.0" + } + }, + "follow-redirects": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", + "requires": { + "debug": "=3.1.0" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + } + } + }, + "forwarded": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", + "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=" + }, + "fresh": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", + "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" + }, + "http-errors": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz", + "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==", + "requires": { + "depd": "~1.1.2", + "inherits": "2.0.3", + "setprototypeof": "1.1.1", + "statuses": ">= 1.5.0 < 2", + "toidentifier": "1.0.0" + } + }, + "iconv-lite": { + "version": "0.4.24", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "requires": { + "safer-buffer": ">= 2.1.2 < 3" + } + }, + "inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" + }, + "ipaddr.js": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.0.tgz", + "integrity": "sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==" + }, + "is-buffer": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz", + "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==" + }, + "jwt-decode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz", + "integrity": "sha1-fYa9VmefWM5qhHBKZX3TkruoGnk=" + }, + "media-typer": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" + }, + "merge-descriptors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", + "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" + }, + "methods": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", + "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" + }, + "mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==" + }, + "mime-db": { + "version": "1.40.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz", + "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==" + }, + "mime-types": { + "version": "2.1.24", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz", + "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==", + "requires": { + "mime-db": "1.40.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + }, + "negotiator": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", + "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==" + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + }, + "on-finished": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", + "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", + "requires": { + "ee-first": "1.1.1" + } + }, + "parseurl": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", + "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==" + }, + "path-to-regexp": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", + "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" + }, + "proxy-addr": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz", + "integrity": "sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==", + "requires": { + "forwarded": "~0.1.2", + "ipaddr.js": "1.9.0" + } + }, + "qs": { + "version": "6.7.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz", + "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==" + }, + "range-parser": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", + "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==" + }, + "raw-body": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz", + "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==", + "requires": { + "bytes": "3.1.0", + "http-errors": "1.7.2", + "iconv-lite": "0.4.24", + "unpipe": "1.0.0" + } + }, + "safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + }, + "safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" + }, + "send": { + "version": "0.17.1", + "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz", + "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==", + "requires": { + "debug": "2.6.9", + "depd": "~1.1.2", + "destroy": "~1.0.4", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "fresh": "0.5.2", + "http-errors": "~1.7.2", + "mime": "1.6.0", + "ms": "2.1.1", + "on-finished": "~2.3.0", + "range-parser": "~1.2.1", + "statuses": "~1.5.0" + }, + "dependencies": { + "ms": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", + "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==" + } + } + }, + "serve-static": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz", + "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==", + "requires": { + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "parseurl": "~1.3.3", + "send": "0.17.1" + } + }, + "setprototypeof": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz", + "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==" + }, + "statuses": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", + "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=" + }, + "toidentifier": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", + "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==" + }, + "type-is": { + "version": "1.6.18", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", + "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", + "requires": { + "media-typer": "0.3.0", + "mime-types": "~2.1.24" + } + }, + "unpipe": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", + "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" + }, + "utils-merge": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", + "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" + }, + "vary": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", + "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" } } } diff --git a/twistter-frontend/package-lock.json b/twistter-frontend/package-lock.json index c14d5b6..385d8c1 100644 --- a/twistter-frontend/package-lock.json +++ b/twistter-frontend/package-lock.json @@ -2417,6 +2417,11 @@ "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz", "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=" }, + "dayjs": { + "version": "1.8.17", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.8.17.tgz", + "integrity": "sha512-47VY/htqYqr9GHd7HW/h56PpQzRBSJcxIQFwqL3P20bMF/3az5c3PWdVY3LmPXFl6cQCYHL7c79b9ov+2bOBbw==" + }, "debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", diff --git a/twistter-frontend/package.json b/twistter-frontend/package.json index f7dd12f..a0ec11c 100644 --- a/twistter-frontend/package.json +++ b/twistter-frontend/package.json @@ -10,6 +10,7 @@ "axios": "^0.19.0", "clsx": "^1.0.4", "create-react-app": "^3.1.2", + "dayjs": "^1.8.17", "install": "^0.13.0", "jwt-decode": "^2.2.0", "node-pre-gyp": "^0.13.0", diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js index d3a3163..9e29d2e 100644 --- a/twistter-frontend/src/App.js +++ b/twistter-frontend/src/App.js @@ -10,33 +10,33 @@ import jwtDecode from "jwt-decode"; // Redux import { Provider } from "react-redux"; import store from "./redux/store"; -import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'; -import createMuiTheme from '@material-ui/core/styles/createMuiTheme'; -import themeObject from './util/theme'; -import { SET_AUTHENTICATED } from './redux/types'; -import { logoutUser, getUserData } from './redux/actions/userActions'; +import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider"; +import createMuiTheme from "@material-ui/core/styles/createMuiTheme"; +import themeObject from "./util/theme"; +import { SET_AUTHENTICATED } from "./redux/types"; +import { logoutUser, getUserData } from "./redux/actions/userActions"; // Components import AuthRoute from "./util/AuthRoute"; -// axios.defaults.baseURL = 'http://localhost:5006/twistter-e4649/us-central1/api'; - // Pages -import home from './pages/Home'; -import signup from './pages/Signup'; -import login from './pages/Login'; -import user from './pages/user'; -import logout from './pages/Logout'; -import Delete from './pages/Delete'; -import writeMicroblog from './Writing_Microblogs.js'; -import editProfile from './pages/editProfile'; -import userLine from './Userline.js'; +import home from "./pages/Home"; +import signup from "./pages/Signup"; +import login from "./pages/Login"; +import user from "./pages/user"; +import logout from "./pages/Logout"; +import Delete from "./pages/Delete"; +import writeMicroblog from "./Writing_Microblogs.js"; +import editProfile from "./pages/editProfile"; +import userLine from "./Userline.js"; +import verify from "./pages/verify"; +import Search from "./pages/Search.js"; +import otherUser from "./pages/otherUser"; const theme = createMuiTheme(themeObject); const token = localStorage.FBIdToken; if (token) { - try { const decodedToken = jwtDecode(token); if (decodedToken.exp * 1000 < Date.now()) { @@ -44,7 +44,7 @@ if (token) { window.location.href = "/login"; } else { store.dispatch({ type: SET_AUTHENTICATED }); - axios.defaults.headers.common['Authorization'] = token; + axios.defaults.headers.common["Authorization"] = token; store.dispatch(getUserData()); } } catch (invalidTokenError) { @@ -53,21 +53,21 @@ if (token) { } } - class App extends Component { render() { return ( -
+
+ {/* AuthRoute checks if the user is logged in and if they are it redirects them to /home */} - + @@ -75,6 +75,11 @@ class App extends Component { + + + + +
diff --git a/twistter-frontend/src/Writing_Microblogs.js b/twistter-frontend/src/Writing_Microblogs.js index 0734d1c..9cac7b7 100644 --- a/twistter-frontend/src/Writing_Microblogs.js +++ b/twistter-frontend/src/Writing_Microblogs.js @@ -1,107 +1,128 @@ import React, { Component } from "react"; -import { BrowserRouter as Router } from 'react-router-dom'; -import Route from 'react-router-dom/Route'; -import axios from 'axios'; - +import { BrowserRouter as Router } from "react-router-dom"; +import Route from "react-router-dom/Route"; +import axios from "axios"; class Writing_Microblogs extends Component { + constructor(props) { + super(props); + this.state = { + value: "", + title: "", + topics: "", + characterCount: 250 + }; - constructor(props) { - super(props); - this.state = { - value: '', - title: '', - topics: '', - characterCount: 250 - - }; + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + this.handleChangeforPost = this.handleChangeforPost.bind(this); + this.handleChangeforTopics = this.handleChangeforTopics.bind(this); + } - - this.handleChange = this.handleChange.bind(this); - this.handleSubmit = this.handleSubmit.bind(this); - this.handleChangeforPost = this.handleChangeforPost.bind(this); - this.handleChangeforTopics = this.handleChangeforTopics.bind(this); - - } + handleChange(event) { + this.setState({ title: event.target.value }); + } - handleChange(event) { - this.setState( {title: event.target.value }); - } + handleChangeforTopics(event) { + this.setState({ topics: event.target.value }); + } - handleChangeforTopics(event) { - this.setState( {topics: event.target.value}); - } + 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, + userImage: "bing-url", + microBlogTitle: this.state.title, + microBlogTopics: this.state.topics.split(", ") + }; + const headers = { + headers: { "Content-Type": "application/json" } + }; - handleSubmit(event) { + axios + .post("/putPost", postData, headers) + .then(res => { + alert("Post was shared successfully!"); + console.log(res.data); + }) + .catch(err => { + alert("An error occured."); + console.error(err); + }); + event.preventDefault(); + this.setState({ value: "", title: "", characterCount: 250, topics: "" }); + } - const postData = { - body: this.state.value, - userImage: "bing-url", - microBlogTitle: this.state.title, - microBlogTopics: this.state.topics.split(', ') - } - const headers = { - headers: { 'Content-Type': 'application/json'} - } - - axios - .post("/putPost", postData, headers) - .then((res) =>{ - alert('Post was shared successfully!') - console.log(res.data); - }) - .catch((err) => { - alert('An error occured.'); - console.error(err); - }) - event.preventDefault(); - this.setState({value: '', title: '',characterCount: 250, topics: ''}) - } + handleChangeforPost(event) { + this.setState({ value: event.target.value }); + } - handleChangeforPost(event) { - this.setState({value: event.target.value }) - } + handleChangeforCharacterCount(event) { + const charCount = event.target.value.length; + const charRemaining = 250 - charCount; + this.setState({ characterCount: charRemaining }); + } - handleChangeforCharacterCount(event) { - const charCount = event.target.value.length - const charRemaining = 250 - charCount - this.setState({characterCount: charRemaining }) - - } + render() { + return ( +
+
+
+