From 47fdc0328586f1be771d62659a7c933f37f31cf4 Mon Sep 17 00:00:00 2001
From: marlon-erler <viridian035@gmail.com>
Date: Fri, 19 Jul 2024 00:33:55 +0200
Subject: [PATCH] fix timezones in calendar

---
 dist/index.js                          | 39 ++++++++++++++++----------
 src/Views/Objects/calendarView.tsx     | 31 ++++++++++++--------
 src/Views/Objects/miniatureDayView.tsx | 12 +++++---
 3 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/dist/index.js b/dist/index.js
index 45d5fa94..26f9a8dd 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -2133,9 +2133,9 @@
   }
 
   // src/Views/Objects/miniatureDayView.tsx
-  function MiniatureDayView(chat, messageObjects, dayToShow) {
+  function MiniatureDayView(chat, messageObjects, dateObject) {
     const objectsForDayView = new ListState();
-    const dateString = dayToShow.toISOString().split("T")[0];
+    const dateString = dateObject.toISOString().split("T")[0];
     function processObject(messageObject) {
       const latest = chat.getMostRecentContent(messageObject);
       if (!latest.date || latest.date != dateString) return;
@@ -2151,7 +2151,8 @@
       [dayInCalendar],
       () => dayInCalendar.value == dateString
     );
-    const isToday = (/* @__PURE__ */ new Date()).toDateString() == dayToShow.toDateString();
+    const today = /* @__PURE__ */ new Date();
+    const isToday = today.getDate() == dateObject.getUTCDate() && today.getMonth() == dateObject.getUTCMonth() && today.getFullYear() == dateObject.getUTCFullYear();
     messageObjects.handleAddition(processObject);
     const objectConverter = (messageObject) => {
       const latest = chat.getMostRecentContent(messageObject);
@@ -2172,7 +2173,7 @@
         class: "day-miniature tile flex-column align-start",
         style: "aspect-ratio: 1/1; overflow: hidden"
       },
-      /* @__PURE__ */ createElement("h3", { class: "margin-0" }, dayToShow.getDate()),
+      /* @__PURE__ */ createElement("h3", { class: "margin-0" }, dateObject.getUTCDate()),
       /* @__PURE__ */ createElement(
         "div",
         {
@@ -2185,14 +2186,20 @@
 
   // src/Views/Objects/calendarView.tsx
   function CalendarView(chat, messageObjects, selectedObject, isShowingObjectModal) {
-    const selectedDate = new Date(dayInCalendar.value);
-    const selectedMonth = new State(selectedDate.getMonth() + 1);
-    const selectedYear = new State(selectedDate.getFullYear());
-    bulkSubscribe([selectedMonth, selectedYear], () => updateSelectedDate());
+    let selectedDate = new Date(dayInCalendar.value);
+    const selectedMonth = new State(selectedDate.getUTCMonth() + 1);
+    const selectedYear = new State(selectedDate.getUTCFullYear());
+    bulkSubscribe(
+      [selectedMonth, selectedYear],
+      () => updateSelectedDate()
+    );
+    dayInCalendar.subscribeSilent(() => {
+      selectedDate = new Date(dayInCalendar.value);
+    });
     updateSelectedDate();
     function updateSelectedDate() {
-      selectedDate.setMonth(selectedMonth.value - 1);
-      selectedDate.setFullYear(selectedYear.value);
+      selectedDate.setUTCMonth(selectedMonth.value - 1);
+      selectedDate.setUTCFullYear(selectedYear.value);
       dayInCalendar.value = selectedDate.toISOString().split("T")[0];
     }
     function previousMonth() {
@@ -2214,22 +2221,24 @@
     let monthGridCells = new State([]);
     dayInCalendar.subscribe((newValue) => {
       const newSelectedDate = new Date(newValue);
+      newSelectedDate.setHours(0);
+      newSelectedDate.setMinutes(0);
       const currentDate = /* @__PURE__ */ new Date();
       monthGridCells.value = [];
-      currentDate.setDate(1);
-      currentDate.setMonth(newSelectedDate.getMonth());
+      currentDate.setUTCDate(1);
+      currentDate.setUTCMonth(newSelectedDate.getMonth());
       for (let i = 0; i < 7; i++) {
         monthGridCells.value.push(
           /* @__PURE__ */ createElement("b", { class: "secondary ellipsis width-100" }, translation.weekdays[i])
         );
       }
-      const monthOffset = currentDate.getDay();
+      const monthOffset = currentDate.getDay() - 1;
       for (let i = 0; i < monthOffset; i++) {
         monthGridCells.value.push(/* @__PURE__ */ createElement("div", null));
       }
-      while (currentDate.getMonth() == newSelectedDate.getMonth()) {
+      while (currentDate.getUTCMonth() == newSelectedDate.getUTCMonth()) {
         monthGridCells.value.push(
-          MiniatureDayView(chat, messageObjects, new Date(currentDate))
+          MiniatureDayView(chat, messageObjects, currentDate)
         );
         currentDate.setDate(currentDate.getDate() + 1);
       }
diff --git a/src/Views/Objects/calendarView.tsx b/src/Views/Objects/calendarView.tsx
index b5a5fc79..611cc43b 100644
--- a/src/Views/Objects/calendarView.tsx
+++ b/src/Views/Objects/calendarView.tsx
@@ -13,16 +13,21 @@ export function CalendarView(
   selectedObject: React.State<MessageObject | undefined>,
   isShowingObjectModal: React.State<boolean>
 ) {
-  const selectedDate = new Date(dayInCalendar.value);
-  const selectedMonth = new React.State(selectedDate.getMonth() + 1);
-  const selectedYear = new React.State(selectedDate.getFullYear());
-  
-  React.bulkSubscribe([selectedMonth, selectedYear], () => updateSelectedDate());
+  let selectedDate = new Date(dayInCalendar.value);
+  const selectedMonth = new React.State(selectedDate.getUTCMonth() + 1);
+  const selectedYear = new React.State(selectedDate.getUTCFullYear());
+
+  React.bulkSubscribe([selectedMonth, selectedYear], () =>
+    updateSelectedDate()
+  );
+  dayInCalendar.subscribeSilent(() => {
+    selectedDate = new Date(dayInCalendar.value);
+  })
   updateSelectedDate();
 
   function updateSelectedDate() {
-    selectedDate.setMonth(selectedMonth.value - 1);
-    selectedDate.setFullYear(selectedYear.value);
+    selectedDate.setUTCMonth(selectedMonth.value - 1);
+    selectedDate.setUTCFullYear(selectedYear.value);
     dayInCalendar.value = selectedDate.toISOString().split("T")[0];
   }
 
@@ -47,13 +52,15 @@ export function CalendarView(
   let monthGridCells = new React.State<HTMLElement[]>([]);
   dayInCalendar.subscribe((newValue) => {
     const newSelectedDate = new Date(newValue);
+    newSelectedDate.setHours(0);
+    newSelectedDate.setMinutes(0);
 
     const currentDate = new Date();
     monthGridCells.value = [];
 
     // initialize to first day of month
-    currentDate.setDate(1);
-    currentDate.setMonth(newSelectedDate.getMonth());
+    currentDate.setUTCDate(1);
+    currentDate.setUTCMonth(newSelectedDate.getMonth());
 
     // labels
     for (let i = 0; i < 7; i++) {
@@ -63,15 +70,15 @@ export function CalendarView(
     }
 
     // create blank dates starting sunday
-    const monthOffset = currentDate.getDay();
+    const monthOffset = currentDate.getDay() - 1;
     for (let i = 0; i < monthOffset; i++) {
       monthGridCells.value.push(<div></div>);
     }
 
     // add day views
-    while (currentDate.getMonth() == newSelectedDate.getMonth()) {
+    while (currentDate.getUTCMonth() == newSelectedDate.getUTCMonth()) {
       monthGridCells.value.push(
-        MiniatureDayView(chat, messageObjects, new Date(currentDate))
+        MiniatureDayView(chat, messageObjects, currentDate)
       );
       currentDate.setDate(currentDate.getDate() + 1);
     }
diff --git a/src/Views/Objects/miniatureDayView.tsx b/src/Views/Objects/miniatureDayView.tsx
index e7c53f8e..3c0c6d78 100644
--- a/src/Views/Objects/miniatureDayView.tsx
+++ b/src/Views/Objects/miniatureDayView.tsx
@@ -9,11 +9,11 @@ export function MiniatureDayView(
   messageObjects:
     | React.ListState<MessageObject>
     | React.MapState<MessageObject>,
-  dayToShow: Date
+  dateObject: Date
 ) {
   const objectsForDayView = new React.ListState<MessageObject>();
 
-  const dateString = dayToShow.toISOString().split("T")[0];
+  const dateString = dateObject.toISOString().split("T")[0];
 
   function processObject(messageObject: MessageObject) {
     const latest = chat.getMostRecentContent(messageObject);
@@ -33,7 +33,11 @@ export function MiniatureDayView(
     [dayInCalendar],
     () => dayInCalendar.value == dateString
   );
-  const isToday = new Date().toDateString() == dayToShow.toDateString();
+  const today = new Date();
+  const isToday =
+    today.getDate() == dateObject.getUTCDate() &&
+    today.getMonth() == dateObject.getUTCMonth() &&
+    today.getFullYear() == dateObject.getUTCFullYear();
 
   messageObjects.handleAddition(processObject);
 
@@ -63,7 +67,7 @@ export function MiniatureDayView(
       class="day-miniature tile flex-column align-start"
       style="aspect-ratio: 1/1; overflow: hidden"
     >
-      <h3 class="margin-0">{dayToShow.getDate()}</h3>
+      <h3 class="margin-0">{dateObject.getUTCDate()}</h3>
       <div
         class="flex-column gap"
         children:append={[objectsForDayView, objectConverter]}