Timezone bugfix (#545)

Fixing bug affecting calendar and support page thanks to @paulbou who generously 
helped us in identifying these issues!!!! 🤗

Bumping project to next patch version
Starting to fix issue affecting timezone
Alter /nous-soutenir page
Revising README
Updating deps
Revising support page
Handling timezone distinct from Europe/Paris
Fixing error affecting support page

components/calendar-month/calendar-month.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="calendar-month">
+  <div
+    class="calendar-month"
+  >
     <div
       class="calendar-month__buttons"
       :style="pickItemIcon"
@@ -47,10 +49,13 @@
           </th>
         </tr>
       </thead>
-      <tbody class="calendar-month__day-numbers">
+      <tbody
+        class="calendar-month__day-numbers"
+      >
         <tr
           v-for="(rowNumber, rowIndex) in dayRows()"
           :key="rowIndex"
+          :data-key="rowIndex"
           class="calendar-month__day-row"
         >
           <td
@@ -196,24 +201,72 @@ class CalendarMonth extends mixins(ApiMixin) {
     return this.getNextMonth(this.month, this.year)
   }
 
-  dateOfFirstVisibleDay () {
-    let firstVisibleDayCandidate = this.nameOfFirstDayOfMonth()
+  get daysAfterSelectedMonth (): number {
+    let dateOfLastVisibleDay
 
-    const dateCandidate = this.setTimezone(new Date(this.year, this.month, 1))
+    try {
+      dateOfLastVisibleDay = this.dateOfLastVisibleDay()
+    } catch (e) {
+      return 0
+    }
 
-    this.guardAgainstMissingMonthOrYear(firstVisibleDayCandidate)
+    let daysAfterSelectedMonth = 0
+    if (dateOfLastVisibleDay.getMonth() !== this.month) {
+      daysAfterSelectedMonth = dateOfLastVisibleDay.getDate()
+    }
 
-    while (firstVisibleDayCandidate !== 'Lun.') {
-      dateCandidate.setDate(dateCandidate.getDate() - 1)
-      firstVisibleDayCandidate = this.whichDayOfWeek(dateCandidate.getDay())
+    return daysAfterSelectedMonth
+  }
+
+  get daysBeforeSelectedMonth (): number {
+    let dateOfFirstVisibleDay
+    try {
+      dateOfFirstVisibleDay = this.dateOfFirstVisibleDay
+    } catch (e) {
+      return 0
     }
 
-    return dateCandidate
+    let daysBeforeSelectedMonth = 0
+    if (dateOfFirstVisibleDay.getMonth() !== this.month) {
+      daysBeforeSelectedMonth = this.totalDaysInPreviousMonth() - dateOfFirstVisibleDay.getDate() + 1
+    }
+
+    return daysBeforeSelectedMonth
+  }
+
+  get totalDaysInMonth (): number {
+    return this.setTimezone(new Date(this.year, this.month + 1, 0)).getDate()
+  }
+
+  get dateOfFirstVisibleDay (): Date {
+    const firstDayOfMonth = structuredClone(this.now())
+    firstDayOfMonth.setDate(1)
+
+    let dateOfFirstVisibleDay = this.findDateOfFirstVisibleDay(firstDayOfMonth)
+
+    if (this.whichDateHasBeenPicked && (
+      dateOfFirstVisibleDay.getDay() !== this.whichDateHasBeenPicked.getDay() ||
+      dateOfFirstVisibleDay.getMonth() !== this.whichDateHasBeenPicked.getMonth() ||
+      dateOfFirstVisibleDay.getFullYear() !== this.whichDateHasBeenPicked.getFullYear()
+    )) {
+      const dateOfFirstVisibleDayCandidate = structuredClone(this.whichDateHasBeenPicked)
+      dateOfFirstVisibleDayCandidate.setDate(1)
+      dateOfFirstVisibleDayCandidate.setHours(0)
+      dateOfFirstVisibleDayCandidate.setMinutes(0)
+
+      dateOfFirstVisibleDay = this.findDateOfFirstVisibleDay(dateOfFirstVisibleDayCandidate)
+    }
+
+    return dateOfFirstVisibleDay
+  }
+
+  get nameOfFirstDayOfMonth () : string {
+    return this.daysOfWeek[this.setTimezone(new Date(this.year, this.month, 1)).getDay()]
   }
 
   dateOfLastVisibleDay () {
     let lastVisibleDayCandidate = this.nameOfLastDayOfMonth()
-    const dateCandidate = this.setTimezone(new Date(this.year, this.month, this.totalDaysInMonth()))
+    const dateCandidate = this.setTimezone(new Date(this.year, this.month, this.totalDaysInMonth))
 
     this.guardAgainstMissingMonthOrYear(lastVisibleDayCandidate)
 
@@ -231,7 +284,7 @@ class CalendarMonth extends mixins(ApiMixin) {
     return (new Array(7))
       .fill('', 0, 7)
       .map((_, index) => {
-        const dayOfWeek = this.setTimezone(new Date(this.dateOfFirstVisibleDay().getTime()))
+        const dayOfWeek = this.setTimezone(new Date(this.dateOfFirstVisibleDay.getTime()))
         dayOfWeek.setDate(dayOfWeek.getDate() + index + shift)
 
         return dayOfWeek
@@ -254,56 +307,33 @@ class CalendarMonth extends mixins(ApiMixin) {
     this.pickDate(this.nextMonth)
   }
 
-  nameOfFirstDayOfMonth () {
-    return this.daysOfWeek[this.setTimezone(new Date(this.year, this.month, 1)).getDay()]
+  findDateOfFirstVisibleDay (date: Date): Date {
+    let firstVisibleDayCandidate = this.nameOfFirstDayOfMonth
+
+    const dateCandidate = this.setTimezone(date)
+
+    this.guardAgainstMissingMonthOrYear(firstVisibleDayCandidate)
+
+    while (firstVisibleDayCandidate !== 'Lun.') {
+      dateCandidate.setDate(dateCandidate.getDate() - 1)
+      firstVisibleDayCandidate = this.whichDayOfWeek(dateCandidate.getDay())
+    }
+
+    return dateCandidate
   }
 
   nameOfLastDayOfMonth () {
-    const lastDayNumberOfMonth = this.totalDaysInMonth()
+    const lastDayNumberOfMonth = this.totalDaysInMonth
 
     return this.whichDayOfWeek(this.setTimezone(new Date(this.year, this.month, lastDayNumberOfMonth)).getDay())
   }
 
-  totalDaysInMonth (): number {
-    return this.setTimezone(new Date(this.year, this.month + 1, 0)).getDate()
-  }
-
   totalDaysInPreviousMonth (): number {
     return this.setTimezone(new Date(this.year, this.month, 0)).getDate()
   }
 
   dayRows () {
-    let dateOfFirstVisibleDay
-
-    try {
-      dateOfFirstVisibleDay = this.dateOfFirstVisibleDay()
-    } catch (e) {
-      return
-    }
-
-    let daysBeforeSelectedMonth = 0
-    if (dateOfFirstVisibleDay.getMonth() !== this.month) {
-      daysBeforeSelectedMonth = this.totalDaysInPreviousMonth() - dateOfFirstVisibleDay.getDate() + 1
-    }
-
-    let dateOfLastVisibleDay
-
-    try {
-      dateOfLastVisibleDay = this.dateOfLastVisibleDay()
-    } catch (e) {
-      return
-    }
-
-    let daysAfterSelectedMonth = 0
-    if (dateOfLastVisibleDay.getMonth() !== this.month) {
-      daysAfterSelectedMonth = dateOfLastVisibleDay.getDate()
-    }
-
-    return (
-      daysBeforeSelectedMonth +
-      this.totalDaysInMonth() +
-      daysAfterSelectedMonth
-    ) / 7
+    return Math.floor((this.daysBeforeSelectedMonth + this.totalDaysInMonth + this.daysAfterSelectedMonth) / 7)
   }
 
   getNextItemClasses () {

layouts/error.vue

@@ -1,5 +1,6 @@
 <template>
   <Highlights
+    v-if="false"
     :error="error"
     :error-message-provider="errorMessageProvider"
   >

mixins/date.ts

@@ -2,6 +2,8 @@ import { Component, Vue } from 'nuxt-property-decorator'
 import Time from '../modules/time'
 import Errors from '../modules/errors'
 
+const clientTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+
 export const formatDate = (date: Date): string => {
   return Time.formatDate(date)
 }
@@ -16,16 +18,17 @@ export const isValidDate = (day: string): boolean => {
   return Time.formatDate(new Date(day)) === day
 }
 
-export const setTimezone = (date: Date, timezone = 'Europe/Paris'): Date => {
+export const setTimezone = (date: Date, timezone = clientTimezone): Date => {
   return new Date(date.toLocaleString('en-US', { timeZone: timezone }))
 }
 
 export const getMinDate = () => {
-  return new Date(Date.parse('01 Jan 2018 00:00:00 GMT'))
+  return setTimezone(new Date(Date.parse('01 Jan 2018 00:00:00 GMT')))
 }
 
-export const now = (timezone = 'Europe/Paris'): Date => {
-  return setTimezone(new Date(), timezone)
+export const now = (timezone = clientTimezone): Date => {
+  const rightNow = new Date()
+  return setTimezone(rightNow, timezone)
 }
 
 @Component
@@ -117,15 +120,19 @@ export default class DateMixin extends Vue {
     return this.setTimezone(new Date(year, month - 1, 1))
   }
 
-  setTimezone (date: Date, timezone = 'Europe/Paris'): Date {
+  setTimezone (date: Date, timezone = clientTimezone): Date {
     return setTimezone(date, timezone)
   }
 
-  now (timezone = 'Europe/Paris'): Date {
+  now (timezone = clientTimezone): Date {
     return now(timezone)
   }
 
   whichDayOfWeek (dayNumber: number): string {
     return this.daysOfWeek[dayNumber]
   }
+
+  get whichDateHasBeenPicked (): Date|null {
+    return this.$store.getters['date-picker/datePicker']()
+  }
 }

pages/highlight/_day.vue

@@ -662,6 +662,7 @@ export default class Highlights extends mixins(SourcesMixin) {
       'homepage',
       'contact',
       'sources',
+      'support',
       'not-found'
     ].find(route => route === ctx.route.name)) {
       return true
@@ -716,6 +717,7 @@ export default class Highlights extends mixins(SourcesMixin) {
         'contact',
         'legal-notice',
         'sources',
+        'support',
         'not-found'
       ].every(r => r !== this.$route.name) || (
         this.visitingCuratedHighlightsRoute &&