From 871098200fbbfe09656e34bfeb47e3f40526fc04 Mon Sep 17 00:00:00 2001
From: Hayden Chen <hayden.chen.dev@gmail.com>
Date: Thu, 23 May 2024 11:25:12 +0800
Subject: [PATCH] fix: Update dayjs configuration after modifying the start day
 of the week.

---
 .../SettingsModal/GeneralSettingsForm.tsx     | 18 ++++++++--------
 src/Agenda3/hooks/useSettings.ts              | 21 +++++++++++--------
 src/Agenda3/index.tsx                         |  6 +++---
 src/Agenda3/models/settings.ts                |  9 ++++++--
 src/register/dayjs.ts                         |  2 +-
 5 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/src/Agenda3/components/modals/SettingsModal/GeneralSettingsForm.tsx b/src/Agenda3/components/modals/SettingsModal/GeneralSettingsForm.tsx
index f321f13..0e3d3e1 100644
--- a/src/Agenda3/components/modals/SettingsModal/GeneralSettingsForm.tsx
+++ b/src/Agenda3/components/modals/SettingsModal/GeneralSettingsForm.tsx
@@ -8,7 +8,7 @@ const GeneralSettingsForm = () => {
   const { t, i18n } = useTranslation()
   const { settings, setSettings } = useSettings()
 
-  const onChange = (key: string, value: string | boolean | undefined | Filter[] | string[]) => {
+  const onChange = (key: string, value: number | string | boolean | undefined | Filter[] | string[]) => {
     setSettings(key, value)
   }
   // 当切换语言时，更新 i18n 的语言
@@ -49,16 +49,16 @@ const GeneralSettingsForm = () => {
           <Select
             placeholder="Select Start of Week"
             className="w-[300px]"
-            value={settings.general?.startOfWeek || '1'}
+            value={settings.general?.startOfWeek}
             onChange={(e) => onChange('general.startOfWeek', e)}
             options={[
-              { label: 'Sun', value: '0' },
-              { label: 'Mon', value: '1' },
-              { label: 'Tue', value: '2' },
-              { label: 'Wed', value: '3' },
-              { label: 'Thu', value: '4' },
-              { label: 'Fri', value: '5' },
-              { label: 'Sat', value: '6' },
+              { label: 'Sun', value: 0 },
+              { label: 'Mon', value: 1 },
+              { label: 'Tue', value: 2 },
+              { label: 'Wed', value: 3 },
+              { label: 'Thu', value: 4 },
+              { label: 'Fri', value: 5 },
+              { label: 'Sat', value: 6 },
             ]}
           />
         </div>
diff --git a/src/Agenda3/hooks/useSettings.ts b/src/Agenda3/hooks/useSettings.ts
index 6eab839..8009b1b 100644
--- a/src/Agenda3/hooks/useSettings.ts
+++ b/src/Agenda3/hooks/useSettings.ts
@@ -1,15 +1,19 @@
 import { useLocalStorageValue } from '@react-hookz/web'
 import { useAtom } from 'jotai'
-import { clone, set } from 'lodash-es'
+import { clone, set, merge } from 'lodash-es'
 
-import { type Settings, settingsAtom, type Filter } from '@/Agenda3/models/settings'
+import { type Settings, settingsAtom, type Filter, DEFAULT_SETTINGS } from '@/Agenda3/models/settings'
+import initializeDayjs from '@/register/dayjs'
 
 const isPlugin = import.meta.env.VITE_MODE === 'plugin'
 const useSettings = () => {
   const [settings, setAtomSettings] = useAtom(settingsAtom)
   const { set: setLocalStorage, value: valueLocalStorage } = useLocalStorageValue<Settings>('settings')
 
-  const setSettings = (key: string, value: string | boolean | undefined | Filter[] | string[]) => {
+  const setSettings = (key: string, value: number | string | boolean | undefined | Filter[] | string[]) => {
+    if (key === 'general.startOfWeek') {
+      initializeDayjs(Number(value))
+    }
     setAtomSettings((oldSettings) => {
       const newSettings = set(clone(oldSettings), key, value)
       if (isPlugin) {
@@ -27,13 +31,12 @@ const useSettings = () => {
   }
   // initialize settings
   const initializeSettings = () => {
-    const base: Settings = { isInitialized: true }
-    if (isPlugin) {
-      const _settings = (logseq.settings as unknown as Settings) ?? {}
-      setAtomSettings(_settings ? { ..._settings, isInitialized: true } : base)
-    } else {
-      setAtomSettings(valueLocalStorage ? { ...valueLocalStorage, isInitialized: true } : base)
+    const getNewSettings = (userSettings?: Settings) => {
+      return merge({}, DEFAULT_SETTINGS, userSettings, { isInitialized: true })
     }
+    const userSettings = isPlugin ? (logseq.settings as unknown as Settings) : valueLocalStorage
+    initializeDayjs(userSettings?.general?.startOfWeek ?? DEFAULT_SETTINGS.general.startOfWeek)
+    setAtomSettings(getNewSettings(userSettings))
   }
   return {
     settings,
diff --git a/src/Agenda3/index.tsx b/src/Agenda3/index.tsx
index 923adfd..3ecd149 100644
--- a/src/Agenda3/index.tsx
+++ b/src/Agenda3/index.tsx
@@ -7,7 +7,6 @@ import useAgendaEntities from '@/Agenda3/hooks/useAgendaEntities'
 import usePages from '@/Agenda3/hooks/usePages'
 import { appAtom } from '@/Agenda3/models/app'
 import { logseqAtom } from '@/Agenda3/models/logseq'
-import initializeDayjs from '@/register/dayjs'
 import { cn } from '@/util/util'
 
 import MultipleView from './components/MainArea'
@@ -30,7 +29,6 @@ const Dashboard = () => {
   const [connectionErrorModal, setConnectionErrorModal] = useState(false)
 
   const loadData = useCallback(() => {
-    initializeDayjs(1)
     refreshEntities().catch((error) => {
       console.error('retrieve tasks failed', error)
       if (import.meta.env.VITE_MODE === 'web') {
@@ -72,7 +70,9 @@ const Dashboard = () => {
   return (
     <div
       className={cn(
-        "flex h-screen w-screen bg-gray-100 before:pointer-events-none before:absolute before:h-[180px] before:w-[240px] before:bg-gradient-conic before:from-sky-200 before:via-blue-200 before:blur-2xl before:transition-all  before:content-[''] before:dark:from-sky-900 before:dark:via-[#0141ff] before:dark:opacity-40",
+        `flex h-screen w-screen bg-gray-100 before:pointer-events-none before:absolute before:h-[180px] before:w-[240px]
+        before:bg-gradient-conic before:from-sky-200 before:via-blue-200 before:blur-2xl before:transition-all
+        before:content-[''] before:dark:from-sky-900 before:dark:via-[#0141ff] before:dark:opacity-40`,
         {
           'pt-[30px]': import.meta.env.VITE_MODE === 'plugin',
         },
diff --git a/src/Agenda3/models/settings.ts b/src/Agenda3/models/settings.ts
index 1883733..88a2c14 100644
--- a/src/Agenda3/models/settings.ts
+++ b/src/Agenda3/models/settings.ts
@@ -6,7 +6,7 @@ export type Settings = {
   general?: {
     useJournalDayAsSchedule?: boolean
     language?: Language
-    startOfWeek?: string
+    startOfWeek?: number
   }
   ics?: {
     repo?: string
@@ -23,7 +23,12 @@ export type Settings = {
     objective?: boolean
   }
 }
-export const settingsAtom = atom<Settings>({ isInitialized: false, viewOptions: { showTimeLog: false } })
+export const DEFAULT_SETTINGS = {
+  isInitialized: false,
+  general: { language: 'en', startOfWeek: 1 },
+  viewOptions: { showTimeLog: false },
+} satisfies Settings
+export const settingsAtom = atom<Settings>(DEFAULT_SETTINGS)
 
 export type Filter = {
   id: string
diff --git a/src/register/dayjs.ts b/src/register/dayjs.ts
index 391a0b3..b2b2c34 100644
--- a/src/register/dayjs.ts
+++ b/src/register/dayjs.ts
@@ -22,7 +22,7 @@ dayjs.extend(quarterOfYear)
 dayjs.extend(isoWeek)
 dayjs.extend(weekOfYear) // Use plugin
 
-const initializeDayjs = (weekStartDay: 0 | 1) => {
+const initializeDayjs = (weekStartDay: number) => {
   // dayjs.locale('zh-cn')
   dayjs.updateLocale('en', {
     weekStart: weekStartDay,