Merge pull request #35 from azvyae/fix/timezone-issue

Fix problem that jsonata cannot determine timezone offset

Author: azvyae

package.json

@@ -1,6 +1,6 @@
 {
   "name": "optimisticoder",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": false,
   "contributors": [
     {
@@ -24,7 +24,6 @@
     "decrypt-all": "env-decrypt local && env-decrypt production"
   },
   "dependencies": {
-    "@types/js-cookie": "^3.0.6",
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.12",
     "client-only": "^0.0.1",
@@ -54,6 +53,7 @@
     "sharp": "^0.33.5"
   },
   "devDependencies": {
+    "@types/js-cookie": "^3.0.6",
     "@tailwindcss/typography": "^0.5.15",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^20.16.11",

pnpm-lock.yaml

@@ -1,11 +1,12 @@
 import { FilteringHandler } from '@/app/stories/components';
 import { StoryCard } from '@/components/common/story-card';
 import { STORIES_URL } from '@/config/common';
-import { sfetch } from '@/helpers/common';
+import { sfetch, timezoneOffset } from '@/helpers/common';
 import type { StoriesIndexEntry, StoriesMeta } from '@/types/common';
 import type { CommonResponse } from '@/types/responses';
 import Stars from '@public/static/svg/stars.svg';
 import jsonata from 'jsonata';
+import { cookies } from 'next/headers';
 import Image from 'next/image';
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
@@ -60,9 +61,9 @@ async function listStories(
     } else if (key === 'search') {
       query = `$[$contains(title,/${value}/i) or keywords[$contains($,/${value}/i)]][]`;
     } else if (key === 'date') {
-      const timezoneOffsetMillis =
-        new Date().getTimezoneOffset() * 60 * 1000 * -1;
-      query = `$[$contains($fromMillis($toMillis(date)+${timezoneOffsetMillis}),"${value}")][]`;
+      const tz = cookies().get('tz')?.value ?? 'Asia/Jakarta';
+      const timezoneOffsetMillis = timezoneOffset(tz);
+      query = `$[$contains($fromMillis($toMillis(date)${timezoneOffsetMillis >= 0 ? '+' : ''}${timezoneOffsetMillis}),"${value}")][]`;
     }
     const expression = jsonata(query);
     const result: StoriesIndexEntry[] = await expression.evaluate(indexStories);

src/app/stories/sections.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { NavLink } from '@/components/link';
-import { links } from '@/config/common';
+import { APP_ENV, links } from '@/config/common';
 import Cookies from 'js-cookie';
 import { usePathname } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -130,10 +130,16 @@ function DarkModeSelector({
     if (!defaultTheme) {
       if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
         document.documentElement.classList.add('dark');
-        Cookies.set('theme', 'dark');
+        Cookies.set('theme', 'dark', {
+          expires: 365,
+          secure: APP_ENV === 'production',
+        });
       } else {
         document.documentElement.classList.remove('dark');
-        Cookies.set('theme', 'light');
+        Cookies.set('theme', 'light', {
+          expires: 365,
+          secure: APP_ENV === 'production',
+        });
       }
     }
     setTheme(Cookies.get('theme') as Theme);
@@ -144,7 +150,10 @@ function DarkModeSelector({
       switch (t) {
         case 'dark':
           document.documentElement.classList.remove('dark');
-          Cookies.set('theme', 'light');
+          Cookies.set('theme', 'light', {
+            expires: 365,
+            secure: APP_ENV === 'production',
+          });
           return 'light';
         case 'light':
           if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
@@ -156,7 +165,10 @@ function DarkModeSelector({
           return;
         default:
           document.documentElement.classList.add('dark');
-          Cookies.set('theme', 'dark');
+          Cookies.set('theme', 'dark', {
+            expires: 365,
+            secure: APP_ENV === 'production',
+          });
           return 'dark';
       }
     });

src/components/navigation/components.tsx

@@ -48,6 +48,30 @@ function generateFallbackImage(initials: string) {
   return `/static/fallback/${randomNum}.jpg`;
 }
 
+function timezoneOffset(ianaTimeZone: string) {
+  const now = new Date();
+  now.setSeconds(0, 0);
+
+  // Format current time in `ianaTimeZone` as `M/DD/YYYY, HH:MM:SS`:
+  const tzDateString = now.toLocaleString('en-US', {
+    timeZone: ianaTimeZone,
+    hourCycle: 'h23',
+  });
+
+  // Parse formatted date string:
+  const match = /(\d+)\/(\d+)\/(\d+), (\d+):(\d+)/.exec(tzDateString);
+  if (!match) {
+    return 25200000;
+  }
+  const [, month, day, year, hour, min] = match.map(Number);
+
+  // Change date string's time zone to UTC and get timestamp:
+  const tzTime = Date.UTC(year, month - 1, day, hour, min);
+
+  // Return the offset between UTC and target time zone:
+  return Math.floor(tzTime - now.getTime());
+}
+
 function isMobileBrowser() {
   if (!window) {
     return false;
@@ -69,4 +93,5 @@ export {
   generateFallbackImage,
   isMobileBrowser,
   sfetch,
+  timezoneOffset,
 };

src/helpers/common.ts

@@ -1,6 +1,10 @@
 'use client';
 
+import { APP_ENV } from '@/config/common';
+import Cookies from 'js-cookie';
 import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
+import { usePathname } from 'next/navigation';
+import { useEffect } from 'react';
 
 const nprogressStyle = `
 #nprogress {
@@ -45,6 +49,16 @@ const nprogressStyle = `
 }
 `;
 function ClientProvider() {
+  const pathname = usePathname();
+  useEffect(() => {
+    const tz = Cookies.get('tz');
+    if (!tz) {
+      Cookies.set('tz', Intl.DateTimeFormat().resolvedOptions().timeZone, {
+        expires: 1,
+        secure: APP_ENV === 'production',
+      });
+    }
+  }, [pathname]);
   return (
     <>
       <ProgressBar