Refactor initializeTimeFixer.js (#4416)

* refactor initializeTimeFixer.js

* apply feedback

* apply review

* fix bugs

app/assets/javascripts/initializers/initializeTimeFixer.js

@@ -1,3 +1,50 @@
+'use strict';
+
+function formatDateTime(options, value) {
+  return new Intl.DateTimeFormat('en-US', options).format(value);
+}
+
+function convertUtcTime(utcTime) {
+  var time = new Date(utcTime);
+  var options = {
+    hour: 'numeric',
+    minute: 'numeric',
+    timeZoneName: 'short',
+  };
+  return formatDateTime(options, time);
+}
+
+function convertUtcDate(utcDate) {
+  var date = new Date(utcDate);
+  var options = {
+    month: 'short',
+    day: 'numeric',
+  };
+  return formatDateTime(options, date);
+}
+
+function convertCalEvent(utc) {
+  var date = new Date(utc);
+  var options = {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+  };
+
+  return formatDateTime(options, date);
+}
+
+function updateLocalDateTime(elements, convertCallback, getUtcDateTime) {
+  var local;
+  for (var i = 0; i < elements.length; i += 1) {
+    local = convertCallback(getUtcDateTime(elements[i]));
+    // eslint-disable-next-line no-param-reassign
+    elements[i].innerHTML = local;
+  }
+}
+
 function initializeTimeFixer() {
   var utcTime = document.getElementsByClassName('utc-time');
   var utcDate = document.getElementsByClassName('utc-date');
@@ -7,65 +54,15 @@ function initializeTimeFixer() {
     return;
   }
 
-  function convertUtcTime(utcTime) {
-    var time = new Date(utcTime);
-    var options = {
-      hour: 'numeric',
-      minute: 'numeric',
-      timeZoneName: 'short'
-    };
-    time = new Intl.DateTimeFormat('en-US', options).format(time);
-    return time;
-  }
-
-  function updateLocalTime(times) {
-    var localTime;
-    for (var i = 0; i < times.length; i++) {
-      localTime = convertUtcTime(times[i].dataset.datetime);
-      times[i].innerHTML = localTime;
-    }
-  }
-
-  function convertUtcDate(utcDate) {
-    var date = new Date(utcDate);
-    var options = {
-      month: 'short',
-      day: 'numeric',
-    };
-    date = new Intl.DateTimeFormat('en-US', options).format(date);
-    return date;
-  }
-
-  function updateLocalDate(dates) {
-    var localDate;
-    for (var i = 0; i < dates.length; i++) {
-      localDate = convertUtcDate(dates[i].dataset.datetime);
-      dates[i].innerHTML = localDate;
-    }
-  }
-
-  function convertCalEvent(utc) {
-    var date = new Date(utc);
-    var options = {
-      weekday: 'long',
-      month: 'long',
-      day: 'numeric',
-      hour: 'numeric',
-      minute: 'numeric',
-    };
-    date = new Intl.DateTimeFormat('en-US', options).format(date);
-    return date;
-  }
-
-  function updateCalendarTime(utcTimes) {
-    var calTime;
-    for (var i = 0; i < utcTimes.length; i++) {
-      calTime = convertCalEvent(utcTimes[i].innerHTML);
-      utcTimes[i].innerHTML = calTime;
-    }
-  }
-
-  updateLocalTime(utcTime);
-  updateLocalDate(utcDate);
-  updateCalendarTime(utc);
+  updateLocalDateTime(
+    utcTime,
+    convertUtcTime,
+    element => element.dataset.datetime,
+  );
+  updateLocalDateTime(
+    utcDate,
+    convertUtcDate,
+    element => element.dataset.datetime,
+  );
+  updateLocalDateTime(utc, convertCalEvent, element => element.innerHTML);
 }

app/views/events/_event.html.erb

@@ -56,7 +56,7 @@
 
 <div class="event">
   <div class="event-image">
-    <img src="<%= cloudinary(event.cover_image, 500) %>" alt="event image">
+    <img src="<%= cloudinary(event.cover_image_url, 500) %>" alt="event image">
   </div>
   <div class="event-details">
     <h3><a href="/events/<%= event.slug %>"><%= event.category %>: <%= event.title %></a></h3>
@@ -70,8 +70,8 @@
     </p>
     <div title="Add to Calendar" class="addeventatc">
       Add to Calendar
-      <span class="start utc"><%= event.starts_at %></span>
-      <span class="end utc"><%= event.ends_at %></span>
+      <span class="start utc"><%= event.starts_at.strftime("%d %B %Y %H:%M UTC") %></span>
+      <span class="end utc"><%= event.ends_at.strftime("%d %B %Y %H:%M UTC") %></span>
       <span class="timezone">America/New_York</span>
       <span class="title"><%= event.title %></span>
       <span class="organizer">The DEV Community</span>