From 1ad8ac040d87af3776b2b0954c01312111eb03ec Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Thu, 20 Oct 2022 18:10:27 -0700
Subject: [PATCH] Use the i18n library for date/time formatting

---
 src/common/i18n.mjs                               | 7 +++++++
 src/common/time.js                                | 8 --------
 src/components/ScheduleBox.vue                    | 5 ++---
 src/components/ScheduleRow.vue                    | 6 +++---
 src/components/SplatfestBox.vue                   | 5 ++---
 src/components/gear/DailyDropGear.vue             | 3 +--
 src/components/salmonrun/ExpandedSalmonRunRow.vue | 6 +++---
 src/components/salmonrun/SalmonRunRow.vue         | 6 +++---
 src/components/screenshots/DailyDropGear.vue      | 1 -
 9 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/src/common/i18n.mjs b/src/common/i18n.mjs
index 89aab02..7dab580 100644
--- a/src/common/i18n.mjs
+++ b/src/common/i18n.mjs
@@ -22,6 +22,12 @@ export const locales = [
 
 export const defaultLocale = locales.find(l => l.code === 'en-US');
 
+const datetimeFormats = {
+  dateTimeShort: { month: 'numeric', day: 'numeric', hour: 'numeric', minute: '2-digit' },
+  dateTimeShortWeekday: { month: 'numeric', weekday: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' },
+  time: { hour: 'numeric', minute: '2-digit' },
+};
+
 let i18n = null;
 
 export function initializeI18n() {
@@ -30,6 +36,7 @@ export function initializeI18n() {
       locale: currentLocale().code,
       fallbackLocale: 'en-US',
       messages: { ...languages },
+      datetimeFormats: locales.reduce((result, locale) => ({ ...result, [locale.code]: datetimeFormats }), {}),
     });
 
     // Listen for local storage changes
diff --git a/src/common/time.js b/src/common/time.js
index 7e3b158..807cc3b 100644
--- a/src/common/time.js
+++ b/src/common/time.js
@@ -1,14 +1,6 @@
 import { useI18n } from 'vue-i18n';
 import { useTimeStore } from '../stores/time';
 
-export function formatDateTime(value) {
-  return (new Date(value)).toLocaleString(undefined, { month: 'numeric', day: 'numeric', hour: 'numeric', minute: '2-digit' });
-}
-
-export function formatTime(value) {
-  return (new Date(value)).toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
-}
-
 function getDurationParts(value) {
   let negative = (value < 0) ? '-' : '';
   value = Math.abs(value);
diff --git a/src/components/ScheduleBox.vue b/src/components/ScheduleBox.vue
index 11be975..8d8ce19 100644
--- a/src/components/ScheduleBox.vue
+++ b/src/components/ScheduleBox.vue
@@ -27,9 +27,9 @@
           </div>
 
           <div class="justify-end text-xs lg:text-sm bg-zinc-100 bg-opacity-80 rounded text-black px-2" v-if="store.activeSchedule">
-            {{ formatTime(store.activeSchedule.startTime) }}
+            {{ $d(store.activeSchedule.startTime, 'time') }}
             &ndash;
-            {{ formatTime(store.activeSchedule.endTime) }}
+            {{ $d(store.activeSchedule.endTime, 'time') }}
           </div>
         </div>
 
@@ -82,7 +82,6 @@ import ScheduleRow from './ScheduleRow.vue';
 import battleRegularSvg from '@/assets/img/modes/regular.svg';
 import battleBankaraSvg from '@/assets/img/modes/bankara.svg';
 import RuleIcon from './RuleIcon.vue';
-import { formatTime } from '../common/time';
 import SquidTape from './SquidTape.vue';
 
 const props = defineProps({
diff --git a/src/components/ScheduleRow.vue b/src/components/ScheduleRow.vue
index 55d52d4..53b35f1 100644
--- a/src/components/ScheduleRow.vue
+++ b/src/components/ScheduleRow.vue
@@ -32,9 +32,9 @@
             </div>
 
             <div class="text-sm text-zinc-300 text-shadow">
-              {{ formatTime(props.schedule.startTime) }}
+              {{ $d(props.schedule.startTime, 'time') }}
               &ndash;
-              {{ formatTime(props.schedule.endTime) }}
+              {{ $d(props.schedule.endTime, 'time') }}
             </div>
           </template>
 
@@ -60,7 +60,7 @@
 <script setup>
 import StageImage from './StageImage.vue';
 import RuleIcon from './RuleIcon.vue';
-import { formatTime, formatDurationFromNow } from '../common/time';
+import { formatDurationFromNow } from '../common/time';
 
 const props = defineProps({
   schedule: {
diff --git a/src/components/SplatfestBox.vue b/src/components/SplatfestBox.vue
index 3b0da1e..8608e5d 100644
--- a/src/components/SplatfestBox.vue
+++ b/src/components/SplatfestBox.vue
@@ -28,9 +28,9 @@
       </div>
 
       <div class="font-splatoon2 text-splatoon-yellow text-center mx-2 ss:hidden">
-        {{ formatDateTime(festival.startTime) }}
+        {{ $d(festival.startTime, 'dateTimeShortWeekday') }}
         &ndash;
-        {{ formatDateTime(festival.endTime) }}
+        {{ $d(festival.endTime, 'dateTimeShortWeekday') }}
       </div>
     </div>
   </ProductContainer>
@@ -41,7 +41,6 @@ import { computed } from 'vue';
 import ProductContainer from './ProductContainer.vue';
 import { STATUS_PAST, STATUS_ACTIVE, STATUS_UPCOMING } from '@/stores/splatfests';
 import SquidTape from './SquidTape.vue';
-import { formatDateTime } from '../common/time';
 
 const props = defineProps({
   festival: Object,
diff --git a/src/components/gear/DailyDropGear.vue b/src/components/gear/DailyDropGear.vue
index 06b4286..8cf75fd 100644
--- a/src/components/gear/DailyDropGear.vue
+++ b/src/components/gear/DailyDropGear.vue
@@ -26,7 +26,7 @@
 
       <template v-if="brand">
         <div class="text-center font-splatoon2 text-splatoon-yellow">
-          {{ $t('time.until') }} {{ formatDateTime(brand?.saleEndTime) }}
+          {{ $t('time.until') }} {{ $d(brand?.saleEndTime, 'dateTimeShortWeekday') }}
         </div>
         <div class="space-y-4 px-4">
           <GearCardHorizontal
@@ -52,7 +52,6 @@
 <script setup>
 import { useGearStore } from '@/stores/gear.mjs';
 import { computed } from '@vue/reactivity';
-import { formatDateTime } from '@/common/time';
 import GearCardHorizontal from './GearCardHorizontal.vue';
 import ProductContainer from '../ProductContainer.vue';
 import SquidTape from '../SquidTape.vue';
diff --git a/src/components/salmonrun/ExpandedSalmonRunRow.vue b/src/components/salmonrun/ExpandedSalmonRunRow.vue
index 6ac54c2..72eb0d7 100644
--- a/src/components/salmonrun/ExpandedSalmonRunRow.vue
+++ b/src/components/salmonrun/ExpandedSalmonRunRow.vue
@@ -2,9 +2,9 @@
   <div class="font-splatoon2 space-y-1" v-if="props.schedule">
     <div>
       <div class="text-lg text-shadow text-zinc-200 ss:hidden">
-        {{ formatDateTime(props.schedule.startTime) }}
+        {{ $d(props.schedule.startTime, 'dateTimeShort') }}
         &ndash;
-        {{ formatDateTime(props.schedule.endTime) }}
+        {{ $d(props.schedule.endTime, 'dateTimeShort') }}
       </div>
       <div class="text-shadow text-zinc-300 ss:hidden">
         {{ formatDurationFromNow(props.schedule.endTime) }} {{ $t('time.remaining') }}
@@ -34,7 +34,7 @@
 </template>
 
 <script setup>
-import { formatDateTime, formatDurationFromNow, formatDurationHoursFromNow } from '@/common/time';
+import { formatDurationFromNow, formatDurationHoursFromNow } from '@/common/time';
 import StageImage from '../StageImage.vue';
 import SalmonRunWeapons from './SalmonRunWeapons.vue';
 
diff --git a/src/components/salmonrun/SalmonRunRow.vue b/src/components/salmonrun/SalmonRunRow.vue
index d96ae54..d57c676 100644
--- a/src/components/salmonrun/SalmonRunRow.vue
+++ b/src/components/salmonrun/SalmonRunRow.vue
@@ -6,9 +6,9 @@
       </div>
 
       <div class="flex-1 text-shadow text-zinc-200">
-        {{ formatDateTime(props.schedule.startTime) }}
+        {{ $d(props.schedule.startTime, 'dateTimeShortWeekday') }}
         &ndash;
-        {{ formatDateTime(props.schedule.endTime) }}
+        {{ $d(props.schedule.endTime, 'dateTimeShort') }}
       </div>
 
       <div class="hidden sm:block text-xs bg-zinc-100 bg-opacity-80 rounded text-black px-2">
@@ -32,7 +32,7 @@
 </template>
 
 <script setup>
-import { formatDateTime, formatDurationFromNow } from '@/common/time';
+import { formatDurationFromNow } from '@/common/time';
 import StageImage from '../StageImage.vue';
 import SalmonRunWeapons from './SalmonRunWeapons.vue';
 
diff --git a/src/components/screenshots/DailyDropGear.vue b/src/components/screenshots/DailyDropGear.vue
index 9677940..ab424ac 100644
--- a/src/components/screenshots/DailyDropGear.vue
+++ b/src/components/screenshots/DailyDropGear.vue
@@ -31,7 +31,6 @@
 <script setup>
 import { useGearStore } from '@/stores/gear.mjs';
 import { computed } from '@vue/reactivity';
-import { formatDateTime } from '@/common/time';
 import GearCard from '@/components/gear/GearCard.vue';
 import ProductContainer from '@/components/ProductContainer.vue';
 import SquidTape from '@/components/SquidTape.vue';