add copy to clipboard functionality for invite link, and success modal

public/scripts/newarticle.js

@@ -95,43 +95,7 @@ function submitComment(e) {
   const body = document.querySelector(".addCommentTextArea").value;
   //dont submit empty comment
   if (body.trim() === "") return;
-  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").innerHTML;
-  //     console.log(articleBody);
-  //     // 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
-  //         );
-  //         updateVisibleComments(articleObj.comments[0].reference);
-  //         document.querySelector(".addCommentTextArea").value = "";
-  //       });
-  //   } else {
+  const user = "Anonymous User";
   const path = window.location.pathname.split("/");
   const uuid = path[path.length - 1];
   const params = { user, commentData: [{ body, reference }] };
@@ -234,3 +198,17 @@ 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

@@ -97,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;

src/app.js

@@ -25,6 +25,7 @@ app.use(bodyParser.urlencoded({ extended: false }));
 app.set("port", process.env.PORT || 3000);
 
 app.use(express.static("public"));
+app.use(express.static("node_modules"));
 
 app.get("/", (req, res, next) => {
   res.render("home", { page: "home" });
@@ -33,7 +34,6 @@ app.get("/", (req, res, next) => {
 app.post("/newarticle", async (req, res, next) => {
   const articleUrl = req.body.contenturl;
   const articleBody = await readabilityParser(articleUrl);
-  console.log("article body after readability", articleBody);
   const backendUrl =
     "https://8rj0xswzt3.execute-api.eu-west-1.amazonaws.com/dev/commentative";
   //no user and no commentData because at this point we're just submitting the article Body
@@ -42,7 +42,6 @@ app.post("/newarticle", async (req, res, next) => {
     .post(backendUrl, params)
     .then((res) => res.data)
     .then((articleObj) => {
-      //   console.log(articleObj);
       res.redirect(`/${articleObj.uuid}`);
     })
     .catch((err) => {
@@ -53,14 +52,14 @@ app.post("/newarticle", async (req, res, next) => {
 app.get("/:uuid", async (req, res) => {
   const url = `https://8rj0xswzt3.execute-api.eu-west-1.amazonaws.com/dev/commentative/${req.params.uuid}`;
   const result = await axios(url);
+  const inviteLink = req.protocol + "://" + req.get("host") + req.originalUrl;
   const articleObj = {
-    header: "This is the actual header of the article",
+    inviteLink,
     content: result.data.articleBody.content,
     siteName: result.data.articleBody.siteName,
     title: result.data.articleBody.title,
     comments: result.data.comments,
   };
-  //   console.log(articleObj);
   res.render("newarticle", { articleObj, page: "newarticle" });
 });
 

src/views/layouts/main.hbs

@@ -8,6 +8,8 @@
   <link rel="icon" href="/assets/commentativefavicon-32.ico" sizes="32x32">
   <link rel="stylesheet" href="https://use.typekit.net/tqi6cbz.css">
   <link rel="stylesheet" href="./styling/{{page}}.css">
+  <script src="/clipboard/dist/clipboard.min.js"></script>
+  <script src="/sweetalert2/dist/sweetalert2.all.min.js"></script>
   <title>Commentative</title>
 </head>
 

src/views/newarticle.hbs

@@ -2,7 +2,7 @@
     <a href="/" title="Home" alt="Home">
         <img class="logo" src="./assets/commentative-logo-icon.svg" height="48" />
     </a>
-    <button class="button-share" data-share-link={{articleObj.shareLink}}>Invite</button>
+    <button class="button-invite" data-clipboard-text={{articleObj.inviteLink}}>Invite</button>
 </header>
 
 <div class="content">