Skip to content

Commit

Permalink
Merge pull request #37 from Commentative/fix/uniquelink
Browse files Browse the repository at this point in the history 
Fix/uniquelink
  • Loading branch information
@mbanerjeepalmer
mbanerjeepalmer authored May 26, 2020
2 parents 6e7b648 + dee871a commit 756eb84
Show file tree
Hide file tree
Showing 8 changed files with 869 additions and 740 deletions.
1,262 changes: 660 additions & 602 deletions package-lock.json
View file

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,14 @@
"homepage": "https://github.com/mbanerjeepalmer/commentative#readme",
"dependencies": {
"axios": "^0.19.0",
"clipboard": "^2.0.6",
"express": "^4.17.1",
"express-handlebars": "^3.1.0",
"jsdom": "^15.1.1",
"node-fetch": "^2.6.0",
"readability": "git+https://github.com/mozilla/readability.git",
"request": "^2.88.0"
"request": "^2.88.0",
"sweetalert2": "^9.13.1"
},
"devDependencies": {
"nodemon": "^1.19.2"
Expand Down
177 changes: 103 additions & 74 deletions public/scripts/newarticle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,37 @@ addIndexToParagraphs();
function updateVisibleComments(selectedParagraphReference) {
console.log("updatingComments");
const comments = document.querySelectorAll(".comment-block");
comments.forEach((commentBlock) => {
//commentParagraphReference is the id of the paragraph that the comment has been added to
let commentParagraphReference = commentBlock.getAttribute(
"data-article-element-index"
);
//if it matches the current selected paragraph then display the comment
if (commentParagraphReference === selectedParagraphReference) {
commentBlock.style.display = "block";
}
//else hide all comments that dont relate to the current paragraph
else {
commentBlock.style.display = "none";
const prevButton = document.querySelector(".prev-comment-button");
const nextButton = document.querySelector(".next-comment-button");
let hasComments = false;
if (comments) {
comments.forEach((commentBlock) => {
//commentParagraphReference is the id of the paragraph that the comment has been added to
let commentParagraphReference = commentBlock.getAttribute(
"data-article-element-index"
);
//if it matches the current selected paragraph then display the comment
if (commentParagraphReference === selectedParagraphReference) {
commentBlock.classList.add("currentparagraph");
hasComments = true;
}
//else hide all comments that dont relate to the current paragraph
else {
commentBlock.classList.remove("currentparagraph");
commentBlock.style.display = "none";
}
});
if (hasComments && comments.length > 1) {
prevButton.style.display = "inline-block";
nextButton.style.display = "inline-block";
} else {
prevButton.style.display = "none";
nextButton.style.display = "none";
}
});
}
//display the very first comment for the current paragraph(the rest remain hidden at this point)
let firstComment = document.querySelector(".currentparagraph");
if (firstComment) firstComment.style.display = "block";
}

// This is an ongoing check to see which element is in the middle of the screen.
Expand Down Expand Up @@ -76,61 +93,29 @@ function submitComment(e) {
.getAttribute("data-article-element-index");
//body is the text content of the comment
const body = document.querySelector(".addCommentTextArea").value;
const user = "🖊️";
if (firstSubmit) {
//articleBody is a text only copy of the article(minus unnecessary html tags)
// const articleBody = document.querySelector(".articleBody").value;
const articleBody = document.querySelector(".article").textContent;

// TODO: This `firstSubmit` thing feels weird.
// Why does the user go through different journeys depending on whether they've submitted already?
// the first time the user posts a comment, the articleBody gets posted to the db, i.e, this is the first time the database creates an entry for this user
// the database then generates a unique url for this particular article(which will become our sharable link)
// the problem is that the express app is unaware of this, so currently the requests to the comment database are being done from the frontend. not ideal.
//the unique address for the database is being pulled from the address bar, but currently our app doesnt handle a refresh of this link
// ideally the "new article" process should involve submitting the article content to the comment api, and then the link that the frontend gets sent to, instead of "newarticle?=articlelink" will be the unique link generated by our api
// maybe the frontend talks only to the express app, and the express app communicates to the database - this seems to make more sense right now, may change this later
firstSubmit = false;
const params = { user, articleBody, commentData: [{ body, reference }] };

fetch(url, {
method: "POST",
body: JSON.stringify(params),
headers: {
"Content-Type": "application/json",
},
})
.then((res) => res.json())
.then((articleObj) => {
//TODO - move this step to backend, changing the url like this seems hackyyy
history.pushState(null, "", "/" + articleObj.uuid);
addNewComment(
articleObj.comments[0].body,
user,
articleObj.comments[0].reference
);
document.querySelector(".addCommentTextArea").value = "";
});
} else {
const path = window.location.pathname.split("/");
const uuid = path[path.length - 1];
const params = { user, commentData: [{ body, reference }] };
console.log("hello", url + "/" + uuid);
fetch(url + "/" + uuid, {
method: "PUT",
body: JSON.stringify(params),
headers: {
"Content-Type": "application/json",
},
})
.then((res) => res.json())
.then((commentObj) => {
//the api returns the body and the paragraph index(reference) of the newly created comment
addNewComment(commentObj[0].body, user, commentObj[0].reference);
document.querySelector(".addCommentTextArea").value = "";
});
}
//dont submit empty comment
if (body.trim() === "") return;
const user = "Anonymous User";
const path = window.location.pathname.split("/");
const uuid = path[path.length - 1];
const params = { user, commentData: [{ body, reference }] };
console.log("hello", url + "/" + uuid);
fetch(url + "/" + uuid, {
method: "PUT",
body: JSON.stringify(params),
headers: {
"Content-Type": "application/json",
},
})
.then((res) => res.json())
.then((commentObj) => {
//the api returns the body and the paragraph index(reference) of the newly created comment
addNewComment(commentObj[0].body, user, commentObj[0].reference);
updateVisibleComments(commentObj[0].reference);
document.querySelector(".addCommentTextArea").value = "";
});
}
// }

//function to add a new comment to the frontend display
function addNewComment(
Expand All @@ -143,7 +128,8 @@ function addNewComment(
const newCommentBlock = document.createElement("div");
newCommentBlock.classList.add("comment-block");
newCommentBlock.setAttribute("data-article-element-index", reference);

//initially display none, the updateComments function and the comment navigation(showNewComment) change the comments to visible as needed
newCommentBlock.style.display = "none";
const commentName = document.createElement("div");
commentName.classList.add("comment-name");

Expand Down Expand Up @@ -176,10 +162,53 @@ function keyDownUpdateSize(e) {
function keyUpUpdateSize(e) {
updateSize(e);
}
let commentInput = document.querySelector(".addCommentTextArea");

commentInput.addEventListener("keydown", keyDownUpdateSize);
commentInput.addEventListener("keyup", keyUpUpdateSize);

//The following is for comment navigation
let commentIndex = 1;

document
.querySelector(".addCommentTextArea")
.addEventListener("keydown", keyDownUpdateSize);
document
.querySelector(".addCommentTextArea")
.addEventListener("keyup", keyUpUpdateSize);
function showNewComment(index) {
let comments = document.querySelectorAll(".currentparagraph");
if (index > comments.length) {
commentIndex = 1;
}
if (index < 1) {
commentIndex = comments.length;
}
//set everything to display none
for (let i = 0; i < comments.length; i++) {
comments[i].style.display = "none";
}
//set the comment at the new index to be visible
comments[commentIndex - 1].style.display = "block";
}

let prevCommentButton = document.querySelector(".prev-comment-button");
let nextCommentButton = document.querySelector(".next-comment-button");

prevCommentButton.addEventListener("click", (e) => {
commentIndex -= 1;
showNewComment(commentIndex);
});

nextCommentButton.addEventListener("click", (e) => {
commentIndex += 1;
showNewComment(commentIndex);
});

//the following is for the invite button
inviteButton = document.querySelector(".button-invite");
//library that manages clipboard copying - doing it it with vanilla js is a bit cumbersome
new ClipboardJS(inviteButton);
inviteButton.addEventListener("click", (e) => {
Swal.fire({
title: "Success!",
text:
"The invite link has been copied to your clipboard. Send it to a friend so they can comment on this article!",
icon: "success",
confirmButtonText: "OK",
});
});
87 changes: 48 additions & 39 deletions public/styling/newarticle.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height: 1.4;
position: relative;
color: #3e444d;
margin: 0;
}
Expand All @@ -26,6 +27,18 @@ p {
background: white;
}

button {
margin: 0;
padding: 0;
border: none;
background: transparent;
}

button:active,
button:focus {
border: none;
outline: none;
}
.selected {
background: rgba(240, 59, 82, 0.1);
padding: 0.5rem;
Expand Down Expand Up @@ -84,7 +97,7 @@ footer strong {
font-weight: 600;
}

.button-share {
.button-invite {
background: #3e444d;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
padding: 0.75rem 1.5rem;
Expand Down Expand Up @@ -116,13 +129,16 @@ footer strong {

.comment-box.expanded {
display: flex;
flex-direction: column;
max-width: 38rem;
margin: 0 auto;
}

.comment-box.expanded .comment-block:first-child {
margin-top: 0.5rem;
}

.comment-inner {
/* .comment-inner {
padding: 1rem;
display: flex;
align-items: center;
Expand All @@ -133,10 +149,30 @@ footer strong {
padding-right: 1rem;
align-items: center;
color: #666;
} */
.comments {
position: relative;
}

.comment-preview:first-word {
font-weight: bold;
.prev-next {
position: absolute;
top: 1rem;
right: 1rem;
}

.navbutton {
width: 1.5rem;
height: 1.5rem;
outline: none;
background-image: url("../assets/ic-chevron.svg");
}

.navbutton:active {
opacity: 0.4;
}
.prev-comment-button {
transform: rotate(180deg);
margin-right: 1rem;
}

.comment-block {
Expand All @@ -156,17 +192,21 @@ footer strong {
margin-right: 0.5rem;
color: #f03b52;
}

.comment-content {
word-wrap: break-word;
}
.comment-input {
padding: 1rem;
font-size: 1rem;
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
height: auto;
}

.comment-input .addCommentTextArea {
width: 100%;
width: calc(100% - 48px);
border: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
Expand All @@ -181,39 +221,8 @@ footer strong {
display: block;
width: 2rem;
height: 2rem;
position: absolute;
bottom: 1rem;
right: 1rem;
}

.button-send.active {
.button-send:active {
background-image: url(../assets/ic-send-active.svg);
}

.prev-next {
position: absolute;
top: 1rem;
right: 1rem;
}

.chevron {
background-image: url(../assets/ic-chevron.svg);
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}

.chevron.prev {
transform: rotate(180deg);
margin-right: 1rem;
}

.chevron-next {
display: inline;
background-image: url(../assets/ic-chevron.svg);
transform: rotate(180deg);
}

.chevron.inactive {
opacity: 0.4;
}
Loading

0 comments on commit 756eb84

Please sign in to comment.