Fix timezone display issues with formatted dates

Fixes #88

Also update Deno, hoping it might help with #87, but it's unlikely

.dvmrc

@@ -1 +1 @@
-2.4.2
+2.4.4

.env.sample

@@ -1,3 +1,4 @@
+TZ="UTC" # optional, forces the server timezone to be UTC, which is the default, anyway
 PORT=8000
 
 POSTGRESQL_HOST="postgresql" # docker container name or external hostname/IP

Dockerfile

@@ -1,4 +1,4 @@
-FROM denoland/deno:ubuntu-2.4.2
+FROM denoland/deno:ubuntu-2.4.4
 
 EXPOSE 8000
 

components/expenses/ListExpenses.tsx

@@ -13,10 +13,17 @@ export default function ListExpenses(
     onClickEditExpense,
   }: ListExpensesProps,
 ) {
-  const dateFormat = new Intl.DateTimeFormat('en-US', {
+  const dateFormatOptions: Intl.DateTimeFormatOptions = {
     month: 'short',
     day: 'numeric',
-  });
+  };
+
+  // Force timeZone to UTC for the server rendering
+  if (typeof window === 'undefined') {
+    dateFormatOptions.timeZone = 'UTC';
+  }
+
+  const dateFormat = new Intl.DateTimeFormat('en-US', dateFormatOptions);
 
   return (
     <section class='mx-auto max-w-7xl my-8 mt-12'>

components/expenses/MainExpenses.tsx

@@ -63,7 +63,18 @@ export default function MainExpenses({ initialBudgets, initialExpenses, initialM
   const shouldResetBudgetModal = useSignal<boolean>(false);
   const searchTimeout = useSignal<ReturnType<typeof setTimeout>>(0);
 
-  const dateFormat = new Intl.DateTimeFormat('en-GB', { year: 'numeric', month: 'long' });
+  const dateFormatOptions: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'long',
+  };
+
+  // Force timeZone to UTC for the server rendering
+  if (typeof window === 'undefined') {
+    dateFormatOptions.timeZone = 'UTC';
+  }
+
+  const dateFormat = new Intl.DateTimeFormat('en-GB', dateFormatOptions);
+
   const thisMonth = new Date().toISOString().substring(0, 7);
 
   function onClickImportFile() {

components/files/ListFiles.tsx

@@ -44,14 +44,21 @@ export default function ListFiles(
     fileShareId,
   }: ListFilesProps,
 ) {
-  const dateFormat = new Intl.DateTimeFormat('en-GB', {
+  const dateFormatOptions: Intl.DateTimeFormatOptions = {
     year: 'numeric',
     month: 'long',
     day: 'numeric',
     hour12: false,
     hour: '2-digit',
     minute: '2-digit',
-  });
+  };
+
+  // Force timeZone to UTC for the server rendering
+  if (typeof window === 'undefined') {
+    dateFormatOptions.timeZone = 'UTC';
+  }
+
+  const dateFormat = new Intl.DateTimeFormat('en-GB', dateFormatOptions);
 
   let routePath = fileShareId ? `file-share/${fileShareId}` : 'files';
   let itemSingleLabel = 'file';

components/files/ListPhotos.tsx

@@ -26,14 +26,21 @@ export default function ListFiles(
     isShowingNotes,
   }: ListFilesProps,
 ) {
-  const dateFormat = new Intl.DateTimeFormat('en-GB', {
+  const dateFormatOptions: Intl.DateTimeFormatOptions = {
     year: 'numeric',
     month: 'long',
     day: 'numeric',
     hour12: false,
     hour: '2-digit',
     minute: '2-digit',
-  });
+  };
+
+  // Force timeZone to UTC for the server rendering
+  if (typeof window === 'undefined') {
+    dateFormatOptions.timeZone = 'UTC';
+  }
+
+  const dateFormat = new Intl.DateTimeFormat('en-GB', dateFormatOptions);
 
   const routePath = isShowingNotes ? 'notes' : 'files';
   const itemSingleLabel = isShowingNotes ? 'note' : 'file';

components/files/SearchFiles.tsx

@@ -13,13 +13,20 @@ export default function SearchFiles({}: SearchFilesProps) {
   const searchTimeout = useSignal<ReturnType<typeof setTimeout>>(0);
   const closeTimeout = useSignal<ReturnType<typeof setTimeout>>(0);
 
-  const dateFormat = new Intl.DateTimeFormat('en-GB', {
+  const dateFormatOptions: Intl.DateTimeFormatOptions = {
     year: 'numeric',
     month: 'long',
     day: 'numeric',
     hour: 'numeric',
     minute: '2-digit',
-  });
+  };
+
+  // Force timeZone to UTC for the server rendering
+  if (typeof window === 'undefined') {
+    dateFormatOptions.timeZone = 'UTC';
+  }
+
+  const dateFormat = new Intl.DateTimeFormat('en-GB', dateFormatOptions);
 
   function searchFiles(searchTerm: string) {
     if (searchTimeout.value) {

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   website:
-    image: ghcr.io/bewcloud/bewcloud:v2.4.0
+    image: ghcr.io/bewcloud/bewcloud:v2.4.1
     restart: always
     ports:
       - 127.0.0.1:8000:8000

islands/news/Articles.tsx

@@ -22,7 +22,14 @@ export default function Articles({ initialArticles }: ArticlesProps) {
   const sessionReadArticleIds = useSignal<Set<string>>(new Set());
   const isFilterDropdownOpen = useSignal<boolean>(false);
 
-  const dateFormat = new Intl.DateTimeFormat('en-GB', { dateStyle: 'medium' });
+  const dateFormatOptions: Intl.DateTimeFormatOptions = { dateStyle: 'medium' };
+
+  // Force timeZone to UTC for the server rendering
+  if (typeof window === 'undefined') {
+    dateFormatOptions.timeZone = 'UTC';
+  }
+
+  const dateFormat = new Intl.DateTimeFormat('en-GB', dateFormatOptions);
 
   async function refreshArticles() {
     if (isRefreshing.value) {

islands/news/Feeds.tsx

@@ -57,7 +57,14 @@ export default function Feeds({ initialFeeds }: FeedsProps) {
   const feeds = useSignal<NewsFeed[]>(initialFeeds);
   const isOptionsDropdownOpen = useSignal<boolean>(false);
 
-  const dateFormat = new Intl.DateTimeFormat('en-GB', { dateStyle: 'medium', timeStyle: 'short' });
+  const dateFormatOptions: Intl.DateTimeFormatOptions = { dateStyle: 'medium', timeStyle: 'short' };
+
+  // Force timeZone to UTC for the server rendering
+  if (typeof window === 'undefined') {
+    dateFormatOptions.timeZone = 'UTC';
+  }
+
+  const dateFormat = new Intl.DateTimeFormat('en-GB', dateFormatOptions);
 
   async function onClickAddFeed() {
     if (isAdding.value) {