FIX: improvements for download local dates (#14588)

* FIX: do not display add to calendar for past dates

There is no value in saving past dates into calendar

* FIX: remove postId and move ICS to frontend

PostId is not necessary and will make the solution more generic for dates which doesn't belong to a specific post.

Also, ICS file can be generated in JavaScript to avoid calling backend.

plugins/discourse-local-dates/assets/javascripts/initializers/discourse-local-dates.js.es6

@@ -172,54 +172,55 @@ function buildHtmlPreview(element, siteSettings) {
   previewsNode.classList.add("locale-dates-previews");
   htmlPreviews.forEach((htmlPreview) => previewsNode.appendChild(htmlPreview));
 
-  previewsNode.appendChild(_downloadCalendarNode(element));
+  const calendarNode = _downloadCalendarNode(element);
+  if (calendarNode) {
+    previewsNode.appendChild(calendarNode);
+  }
 
   return previewsNode.outerHTML;
 }
 
+function calculateStartAndEndDate(startDataset, endDataset) {
+  let startDate, endDate;
+  startDate = moment.tz(
+    `${startDataset.date} ${startDataset.time || ""}`.trim(),
+    startDataset.timezone
+  );
+  if (endDataset) {
+    endDate = moment.tz(
+      `${endDataset.date} ${endDataset.time || ""}`.trim(),
+      endDataset.timezone
+    );
+  }
+  return [startDate, endDate];
+}
+
 function _downloadCalendarNode(element) {
+  const [startDataset, endDataset] = _rangeElements(element).map(
+    (dateElement) => dateElement.dataset
+  );
+  const [startDate, endDate] = calculateStartAndEndDate(
+    startDataset,
+    endDataset
+  );
+
+  if (startDate < moment().tz(startDataset.timezone)) {
+    return false;
+  }
+
   const node = document.createElement("div");
   node.classList.add("download-calendar");
   node.innerHTML = `${renderIcon("string", "file")} ${I18n.t(
     "download_calendar.add_to_calendar"
   )}`;
-  const [startDataset, endDataset] = _rangeElements(element).map(
-    (dateElement) => dateElement.dataset
-  );
-  node.setAttribute(
-    "data-starts-at",
-    moment
-      .tz(
-        `${startDataset.date} ${startDataset.time || ""}`.trim(),
-        startDataset.timezone
-      )
-      .toISOString()
-  );
+  node.setAttribute("data-starts-at", startDate.toISOString());
   if (endDataset) {
-    node.setAttribute(
-      "data-ends-at",
-      moment
-        .tz(
-          `${endDataset.date} ${endDataset.time || ""}`.trim(),
-          endDataset.timezone
-        )
-        .toISOString()
-    );
+    node.setAttribute("data-ends-at", endDate.toISOString());
   }
   if (!startDataset.time && !endDataset) {
-    node.setAttribute(
-      "data-ends-at",
-      moment
-        .tz(`${startDataset.date}`, startDataset.timezone)
-        .add(24, "hours")
-        .toISOString()
-    );
+    node.setAttribute("data-ends-at", startDate.add(24, "hours").toISOString());
   }
   node.setAttribute("data-title", startDataset.title);
-  node.setAttribute(
-    "data-post-id",
-    element.closest("article")?.dataset?.postId
-  );
   return node;
 }
 
@@ -260,7 +261,7 @@ export default {
     } else if (event?.target?.classList?.contains("download-calendar")) {
       const dataset = event.target.dataset;
       hidePopover(event);
-      downloadCalendar(dataset.postId, dataset.title, [
+      downloadCalendar(dataset.title, [
         {
           startsAt: dataset.startsAt,
           endsAt: dataset.endsAt,

plugins/discourse-local-dates/test/javascripts/acceptance/download-calendar-test.js.es6

@@ -16,6 +16,12 @@ acceptance(
     needs.settings({ discourse_local_dates_enabled: true });
     needs.pretender((server, helper) => {
       const response = { ...fixturesByUrl["/t/281.json"] };
+      const startDate = moment
+        .tz("Africa/Cairo")
+        .add(1, "days")
+        .format("YYYY-MM-DD");
+      response.post_stream.posts[0].cooked = `<p><span data-date=\"${startDate}\" data-time=\"13:00:00\" class=\"discourse-local-date\" data-timezone=\"Africa/Cairo\" data-email-preview=\"${startDate}T11:00:00Z UTC\">${startDate}T11:00:00Z</span></p>`;
+
       server.get("/t/281.json", () => helper.response(response));
     });
 
@@ -33,6 +39,32 @@ acceptance(
   }
 );
 
+acceptance(
+  "Local Dates - Download calendar is not available for dates in the past",
+  function (needs) {
+    needs.user({ default_calendar: "none_selected" });
+    needs.settings({ discourse_local_dates_enabled: true });
+    needs.pretender((server, helper) => {
+      const response = { ...fixturesByUrl["/t/281.json"] };
+      const startDate = moment
+        .tz("Africa/Cairo")
+        .subtract(1, "days")
+        .format("YYYY-MM-DD");
+
+      response.post_stream.posts[0].cooked = `<p><span data-date=\"${startDate}\" data-time=\"13:00:00\" class=\"discourse-local-date\" data-timezone=\"Africa/Cairo\" data-email-preview=\"${startDate}T11:00:00Z UTC\">${startDate}T11:00:00Z</span></p>`;
+
+      server.get("/t/281.json", () => helper.response(response));
+    });
+
+    test("Does not show add to calendar button", async function (assert) {
+      await visit("/t/local-dates/281");
+
+      await click(".discourse-local-date");
+      assert.ok(!exists(document.querySelector(".download-calendar")));
+    });
+  }
+);
+
 acceptance(
   "Local Dates - Download calendar with default calendar option set",
   function (needs) {
@@ -40,6 +72,12 @@ acceptance(
     needs.settings({ discourse_local_dates_enabled: true });
     needs.pretender((server, helper) => {
       const response = { ...fixturesByUrl["/t/281.json"] };
+      const startDate = moment
+        .tz("Africa/Cairo")
+        .add(1, "days")
+        .format("YYYY-MM-DD");
+      response.post_stream.posts[0].cooked = `<p><span data-date=\"${startDate}\" data-time=\"13:00:00\" class=\"discourse-local-date\" data-timezone=\"Africa/Cairo\" data-email-preview=\"${startDate}T11:00:00Z UTC\">${startDate}T11:00:00Z</span></p>`;
+      response.title = "   title to trim   ";
       server.get("/t/281.json", () => helper.response(response));
     });
 
@@ -50,6 +88,10 @@ acceptance(
     });
 
     test("saves into default calendar", async function (assert) {
+      const startDate = moment
+        .tz("Africa/Cairo")
+        .add(1, "days")
+        .format("YYYYMMDD");
       await visit("/t/local-dates/281");
 
       await click(".discourse-local-date");
@@ -57,7 +99,7 @@ acceptance(
       assert.ok(!exists(document.querySelector("#discourse-modal-title")));
       assert.ok(
         window.open.calledWith(
-          "https://www.google.com/calendar/event?action=TEMPLATE&text=Local%20dates&dates=20210930T110000Z/20210930T120000Z",
+          `https://www.google.com/calendar/event?action=TEMPLATE&text=title%20to%20trim&dates=${startDate}T110000Z/${startDate}T120000Z`,
           "_blank",
           "noopener",
           "noreferrer"