Date Range locale fixes (#10599)

* export time_will_tell i18n

* translate date_range function from time will tell

* use dateRange function in my competitions and competition overview

* make luxon use the I18n locale in the i18n string

* just use luxon Interval

* fix rubocop

app/controllers/api/v0/competitions_controller.rb

@@ -25,7 +25,7 @@ def competition_index
 
     competitions = competitions_scope.search(params[:q], params: params)
 
-    serial_methods = ["short_display_name", "city", "country_iso2", "event_ids", "date_range", "latitude_degrees", "longitude_degrees"]
+    serial_methods = ["short_display_name", "city", "country_iso2", "event_ids", "latitude_degrees", "longitude_degrees"]
     serial_includes = {}
 
     serial_includes["delegates"] = { only: ["id", "name"], methods: [], include: ["avatar"] } if admin_mode

app/views/competitions/my_competitions.html.erb

@@ -1,8 +1,8 @@
 <% provide(:title, t('.title')) %>
 
 <% options = {
-  only: %w[id name website start_date end_date, registration_open],
-  methods: %w[url city country_iso2 registration_status results_posted? visible? confirmed? cancelled? report_posted? date_range short_display_name],
+  only: %w[id name website start_date end_date registration_open],
+  methods: %w[url city country_iso2 registration_status results_posted? visible? confirmed? cancelled? report_posted? short_display_name],
   include: %w[championships],
 } %>
 

app/webpacker/components/CompetitionsOverview/ListViewSection.js

@@ -21,6 +21,7 @@ import {
 } from '../../lib/utils/competition-table';
 import { countries } from '../../lib/wca-data.js.erb';
 import { adminCompetitionUrl, competitionUrl } from '../../lib/requests/routes.js.erb';
+import { dateRange } from '../../lib/utils/dates';
 
 function ListViewSection({
   competitions,
@@ -154,7 +155,7 @@ export function CompetitionsTable({
                 />
               </Table.Cell>
               <Table.Cell textAlign="right" width={2}>
-                {comp.date_range}
+                {dateRange(comp.start_date, comp.end_date)}
               </Table.Cell>
               <Table.Cell width={5}>
                 <Flag name={comp.country_iso2?.toLowerCase()} />
@@ -210,7 +211,7 @@ export function CompetitionsTabletTable({
                 />
               </Table.Cell>
               <Table.Cell textAlign="right" width={3}>
-                {comp.date_range}
+                {dateRange(comp.start_date, comp.end_date)}
               </Table.Cell>
               <Table.Cell width={6}>
                 <Flag name={comp.country_iso2?.toLowerCase()} />
@@ -257,7 +258,7 @@ export function CompetitionsMobileTable({
                     isSortedByAnnouncement={isSortedByAnnouncement}
                     regStatusLoading={regStatusLoading}
                   />
-                  {comp.date_range}
+                  {dateRange(comp.start_date, comp.end_date)}
                 </Label>
                 <Flag name={comp.country_iso2?.toLowerCase()} />
                 <a href={competitionUrl(comp.id)}>{comp.short_display_name}</a>
@@ -360,7 +361,7 @@ function AdminCompetitionsTable({
                   </List>
                 </Table.Cell>
                 <Table.Cell textAlign="center" width={3}>
-                  {comp.date_range}
+                  {dateRange(comp.start_date, comp.end_date)}
                 </Table.Cell>
                 <Table.Cell
                   textAlign="center"

app/webpacker/components/CompetitionsOverview/MapView.js

@@ -11,6 +11,7 @@ import ResizeMapIFrame from '../../lib/utils/leaflet-iframe';
 import 'leaflet/dist/leaflet.css';
 import { isProbablyOver } from '../../lib/utils/competition-table';
 import { competitionUrl } from '../../lib/requests/routes.js.erb';
+import { dateRange } from '../../lib/utils/dates';
 
 // Limit number of markers on map, especially for "All Past Competitions"
 const MAP_DISPLAY_LIMIT = 500;
@@ -53,7 +54,7 @@ function MapView({
             <Popup>
               <a href={competitionUrl(comp.id)}>{comp.name}</a>
               <br />
-              {`${comp.date_range} - ${comp.city}`}
+              {`${dateRange(comp.start_date, comp.end_date)} - ${comp.city}`}
             </Popup>
           </Marker>
         ))}

app/webpacker/components/MyCompetitions/TableCells.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import I18n from '../../lib/i18n';
 import { competitionReportUrl, competitionReportEditUrl } from '../../lib/requests/routes.js.erb';
 import { countries } from '../../lib/wca-data.js.erb';
+import { dateRange } from '../../lib/utils/dates';
 
 export function NameTableCell({ competition }) {
   return (
@@ -28,7 +29,7 @@ export function LocationTableCell({ competition }) {
 export function DateTableCell({ competition }) {
   return (
     <Table.Cell>
-      {competition.date_range}
+      {dateRange(competition.start_date, competition.end_date, { separator: '-' })}
     </Table.Cell>
   );
 }

app/webpacker/components/MyCompetitions/UpcomingCompetitionTable.jsx

@@ -24,10 +24,10 @@ const competingStatusIcon = (competingStatus) => {
 
 const registrationStatusIconText = (competition) => {
   if (competition.registration_status === 'not_yet_opened') {
-    return I18n.t('competitions.index.tooltips.registration.opens_in', { duration: DateTime.fromISO(competition.registration_open).toRelative() });
+    return I18n.t('competitions.index.tooltips.registration.opens_in', { duration: DateTime.fromISO(competition.registration_open).toRelative({ locale: window.I18n.locale }) });
   }
   if (competition.registration_status === 'past') {
-    return I18n.t('competitions.index.tooltips.registration.closed', { days: DateTime.fromISO(competition.start_date).toRelative() });
+    return I18n.t('competitions.index.tooltips.registration.closed', { days: DateTime.fromISO(competition.start_date).toRelative({ locale: window.I18n.locale }) });
   }
   if (competition.registration_status === 'full') {
     return I18n.t('competitions.index.tooltips.registration.full');

app/webpacker/lib/utils/dates.js

@@ -1,5 +1,4 @@
-import { DateTime } from 'luxon';
-
+import { DateTime, Interval } from 'luxon';
 // parameter name conventions:
 // - `luxonDate` for luxon DateTime objects
 // - `date` for date-only ISO strings (no time)
@@ -120,3 +119,7 @@ export const todayWithTime = (dateTime, timeZone) => {
     millisecond: luxonDate.millisecond,
   });
 };
+
+export function dateRange(fromDate, toDate, options = {}) {
+  return Interval.fromDateTimes(DateTime.fromISO(fromDate), DateTime.fromISO(toDate)).toLocaleString({ month: 'short', day: '2-digit', year: 'numeric' }, options);
+}