Replace moment with dayjs and refactor PeriodDeltaChain

Changelog.md

@@ -13,6 +13,7 @@
 ### 🔧 Internal changes
 
 - Reorganize Javascript files to separate Sprockets and Webpack compilation (#7345)
+- Replace moment.js dependency with much smaller dayjs (#7346)
 
 ## [v2.6.1]
 

app/assets/javascripts/create_assignment.js

@@ -145,10 +145,6 @@ function update_due_date(new_due_date) {
   grace_periods.set_due_date(new_due_date);
   penalty_decay_periods.set_due_date(new_due_date);
   penalty_periods.set_due_date(new_due_date);
-
-  grace_periods.refresh();
-  penalty_decay_periods.refresh();
-  penalty_periods.refresh();
 }
 
 function toggle_assessment_section_properties(section_due_dates_type) {

app/assets/javascripts/localize_date.js

@@ -1,23 +0,0 @@
-/** Convert a date/time to a nice Date object.
-    Example: 2014-08-21 14:38:00 UTC -> [Date object] */
-function convert_date_time(date) {
-  var arr_date = date.split(/[ T]/);
-  var iso_date = arr_date[0] + " " + arr_date[1] + arr_date[2];
-  return moment(iso_date);
-}
-
-/** Localize the date with a specified locale format string. */
-function localize_date(actual_date_div, date_div, format) {
-  if (actual_date_div.value !== "") {
-    var date = moment(actual_date_div.value);
-    date_div.value = date.format(format);
-  }
-}
-
-/** Localize the date/time with a specified locale format string. */
-function localize_datetime(actual_date_div, date_div, format) {
-  if (actual_date_div.value.indexOf(" ") > -1) {
-    var date = convert_date_time($(actual_date_div).attr("value"));
-    date_div.value = date.format(format);
-  }
-}

app/javascript/application_webpack.js

@@ -25,9 +25,14 @@ import "javascripts/jquery.easyModal";
 import safe_marked from "./common/safe_marked";
 window.safe_marked = safe_marked;
 
-// moment (date/times manipulation)
-import moment from "moment";
-window.moment = moment;
+// dayjs (date/times manipulation) and PeriodDeltaChain
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+dayjs.extend(customParseFormat);
+dayjs.locale(I18N_LOCALE);
+
+import PeriodDeltaChain from "./common/PeriodDeltaChain";
+window.PeriodDeltaChain = PeriodDeltaChain;
 
 // mousetrap (keybindings)
 import "mousetrap";
@@ -41,6 +46,7 @@ window.Rails = Rails;
 import {I18n} from "i18n-js";
 import translations from "translations.json";
 window.I18n = new I18n(translations);
+window.I18n.locale = I18N_LOCALE;
 
 // JCrop
 import Jcrop from "jcrop";

app/javascript/common/PeriodDeltaChain.js

@@ -0,0 +1,35 @@
+/** PeriodDeltaChain Class */
+import dayjs from "dayjs";
+
+export default class PeriodDeltaChain {
+  constructor(params) {
+    this.period_root_id = params.period_root_id;
+    this.date_format = params.date_format || "";
+    this.period_class = params.period_class || "period";
+
+    this.set_due_date(params.due_date);
+  }
+
+  refresh() {
+    let current_time = this.due_date;
+    const format = this.date_format;
+    const period_rows = document
+      .getElementById(this.period_root_id)
+      .getElementsByClassName(this.period_class);
+
+    for (let row of period_rows) {
+      const from_time_node = row.getElementsByClassName("PeriodDeltaChain_FromTime")[0];
+      from_time_node.textContent = current_time.format(format);
+
+      const hours_value = row.getElementsByClassName("PeriodDeltaChain_Hours")[0].value;
+      current_time = current_time.add(hours_value, "hours");
+      const to_time_node = row.getElementsByClassName("PeriodDeltaChain_ToTime")[0];
+      to_time_node.textContent = current_time.format(format);
+    }
+  }
+
+  set_due_date(new_due_date) {
+    this.due_date = dayjs(new_due_date, this.date_format);
+    this.refresh();
+  }
+}

app/views/assignments/_form.html.erb

@@ -1,7 +1,5 @@
 <% content_for :head do %>
-  <%= javascript_include_tag 'create_assignment',
-                             'PeriodDeltaChain/PeriodDeltaChain',
-                             'localize_date', nonce: true %>
+  <%= javascript_include_tag 'create_assignment', nonce: true %>
   <%= render partial: 'boot', formats: [:js], handlers: [:erb] %>
   <%= render partial: 'shared/navigation_warning',
              formats: [:js],

app/views/assignments/_peer_review_form.html.erb

@@ -1,7 +1,5 @@
 <% content_for :head do %>
-  <%= javascript_include_tag 'create_assignment',
-                             'PeriodDeltaChain/PeriodDeltaChain',
-                             'localize_date', nonce: true %>
+  <%= javascript_include_tag 'create_assignment', nonce: true %>
   <%= render partial: 'boot', formats: [:js], handlers: [:erb] %>
   <%= render partial: 'shared/navigation_warning',
              formats: [:js],

app/views/automated_tests/_form.html.erb

@@ -1,7 +1,4 @@
 <% content_for :head do %>
-  <%= javascript_include_tag 'PeriodDeltaChain/PeriodDeltaChain',
-                             'localize_date', nonce: true %>
-
   <%= javascript_tag nonce: true do %>
     document.addEventListener('DOMContentLoaded', () => {
       window.autotestManagerComponent = makeAutotestManager(document.getElementById('autotest-manager'),

app/views/groups/index.html.erb

@@ -1,7 +1,5 @@
 <% content_for :head do %>
   <%= javascript_include_tag 'Groups/index', nonce: true %>
-  <%= javascript_include_tag 'PeriodDeltaChain/PeriodDeltaChain',
-                             'localize_date', nonce: true %>
 
   <%= javascript_tag nonce: true do %>
     <% parts = @assignment.duration_parts

app/views/layouts/_head.html.erb

@@ -16,6 +16,7 @@
 <%= javascript_tag("const AUTH_TOKEN = document.querySelector('[name=\"csrf-token\"]').content;", nonce: true) if protect_against_forgery?%>
 <%= javascript_tag nonce: true do %>
   const MARKUS_VERSION = '<%= Rails.configuration.markus_version %>';
+  const I18N_LOCALE = '<%= I18n.locale %>';
 <% end %>
 <%= javascript_tag nonce: true do %>
   <%= render partial: 'layouts/mathjax_config', formats: :js %>

app/views/layouts/assignment_content.html.erb

@@ -9,7 +9,6 @@
     <%= javascript_include_tag 'check_timeout', nonce: true %>
   <% end %>
   <%= render partial: 'layouts/jsroutes_config' %>
-  <%= render partial: 'layouts/i18n_config' %>
   <%= render partial: 'layouts/pdfjs_config' %>
   <%= yield :head %>
 </head>

app/views/layouts/content.html.erb

@@ -9,7 +9,6 @@
     <%= javascript_include_tag 'check_timeout', nonce: true %>
   <% end %>
   <%= render partial: 'layouts/jsroutes_config' %>
-  <%= render partial: 'layouts/i18n_config' %>
   <%= render partial: 'layouts/pdfjs_config' %>
   <%= yield :head %>
 </head>

app/views/layouts/result_content.erb

@@ -9,7 +9,6 @@
     <%= javascript_include_tag 'check_timeout', nonce: true %>
   <% end %>
   <%= render partial: 'layouts/jsroutes_config' %>
-  <%= render partial: 'layouts/i18n_config' %>
   <%= render partial: 'layouts/pdfjs_config' %>
   <%= yield :head %>
 </head>

package.json

@@ -13,6 +13,7 @@
     "@rjsf/validator-ajv8": "^5.23.1",
     "chart.js": "^4.4.6",
     "core-js": "^3.39.0",
+    "dayjs": "^1.11.13",
     "dompurify": "^3.2.3",
     "flatpickr": "^4.6.13",
     "heic2any": "^0.0.4",
@@ -23,7 +24,6 @@
     "marked": "^15.0.3",
     "mathjax": "^3.2.2",
     "mime": "^4.0.4",
-    "moment": "^2.30.1",
     "mousetrap": "^1.6.5",
     "pdfjs-dist": "^4.8.69",
     "prismjs": "^1.29.0",