Fix/uniquelink

package.json

@@ -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"

public/scripts/newarticle.js

@@ -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.
@@ -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(
@@ -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");
 
@@ -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",
+  });
+});

public/styling/newarticle.css

@@ -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;
 }
@@ -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;
@@ -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;
@@ -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;
@@ -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 {
@@ -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";
@@ -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;
-}