From 251f2ffd2a9e4b6c13235539932f1a77281374b9 Mon Sep 17 00:00:00 2001
From: blinko <blinkospace@gmail.com>
Date: Thu, 19 Dec 2024 08:32:52 +0800
Subject: [PATCH] fix: enhance user settings initialization and layout
 interaction

- Refactored user settings initialization in UserStore to improve language and theme management based on local storage.
- Updated the isLogin check to rely on the user's name instead of a token for better clarity.
- Enhanced the CommonLayout component by wrapping the review link in a button for improved accessibility and user interaction.
- Implemented a more robust method for handling theme and language preferences during user setup, ensuring a smoother user experience.
---
 src/components/Layout/index.tsx | 15 ++++++--
 src/store/user.ts               | 68 +++++++++++++++++++++++----------
 2 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index 2d3ac7c1..2ae011a4 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -160,9 +160,18 @@ export const CommonLayout = observer(({
                 <FilterPop />
                 {blinkoStore.dailyReviewNoteList.value?.length != 0 &&
                   <Badge size="sm" className="shrink-0" content={blinkoStore.dailyReviewNoteList.value?.length} color="warning">
-                    <Link href={'/review'}>
-                      <Button className="mt-[2px]" isIconOnly size="sm" variant="light">
-                        {/* <Icon className="text-[#8600EF] cursor-pointer" icon="bxs:message-square-detail" width="24" height="24" /> */}
+                    <Link href="/review" passHref legacyBehavior>
+                      <Button 
+                        as="a"
+                        className="mt-[2px]" 
+                        isIconOnly 
+                        size="sm" 
+                        variant="light"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          router.push('/review');
+                        }}
+                      >
                         <Icon className='cursor-pointer' icon="mingcute:message-1-line" width="24" height="24" />
                       </Button>
                     </Link>
diff --git a/src/store/user.ts b/src/store/user.ts
index 3d375b3d..c6271718 100644
--- a/src/store/user.ts
+++ b/src/store/user.ts
@@ -22,14 +22,15 @@ export class UserStore implements User, Store {
   name?: string = '';
   nickname?: string = '';
   image?: string = '';
-  token: string = '';
   role: string = '';
   theme: any = 'light';
   isSetup: boolean = false;
+  languageInitialized: boolean = false;
+  themeInitialized: boolean = false;
 
   wait() {
     return new Promise<UserStore>((res, rej) => {
-      if (this.id && this.token) {
+      if (this.id) {
         res(this);
       }
 
@@ -49,7 +50,7 @@ export class UserStore implements User, Store {
   }
 
   get isLogin() {
-    return !!this.token;
+    return !!this.name;
   }
 
   get blinko() {
@@ -77,8 +78,6 @@ export class UserStore implements User, Store {
   }
 
   clear() {
-    console.log('clear')
-    this.token = ''
     this.id = ''
     this.name = ''
     this.nickname = ''
@@ -93,15 +92,46 @@ export class UserStore implements User, Store {
     document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]')?.setAttribute('content', themeColor);
   }
 
-  async setupUserPreferences(setTheme: (theme: string) => void, i18n: any) {
-    await this.blinko.config.getOrCall();
-    const config = this.blinko.config.value
-    if (this.isSetup && RootStore.Get(BaseStore).locale.value == config?.language) return
-    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    const newTheme = config?.theme == 'system' ? systemTheme : (config?.theme ?? systemTheme);
-    setTheme(newTheme);
-    RootStore.Get(BaseStore).changeLanugage(i18n, config?.language ?? 'en');
-    this.isSetup = true
+  async initializeSettings(setTheme: (theme: string) => void, i18n: any) {
+    const savedLanguage = localStorage.getItem('userLanguage');
+    const savedTheme = localStorage.getItem('userTheme');
+    
+    if (savedLanguage && !this.languageInitialized) {
+      RootStore.Get(BaseStore).changeLanugage(i18n, savedLanguage);
+      this.languageInitialized = true;
+    }
+
+    if (savedTheme && !this.themeInitialized) {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      const themeToSet = savedTheme === 'system' ? systemTheme : savedTheme;
+      setTheme(themeToSet);
+      this.updatePWAColor(themeToSet);
+      this.themeInitialized = true;
+    }
+    console.log(this.isLogin,'isLogin')
+    if (this.isLogin) {
+      try {
+        const config = await this.blinko.config.call();
+        console.log('initializeSettings in login loaded')
+        
+        if (config) {
+          if (config.language && config.language !== savedLanguage) {
+            localStorage.setItem('userLanguage', config.language);
+            RootStore.Get(BaseStore).changeLanugage(i18n, config.language);
+          }
+
+          if (config.theme && config.theme !== savedTheme) {
+            localStorage.setItem('userTheme', config.theme);
+            const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            const newTheme = config.theme === 'system' ? systemTheme : config.theme;
+            setTheme(newTheme);
+            this.updatePWAColor(newTheme);
+          }
+        }
+      } catch (error) {
+        console.error('Failed to fetch user config:', error);
+      }
+    }
   }
 
   use() {
@@ -111,17 +141,15 @@ export class UserStore implements User, Store {
     const router = useRouter()
 
     useEffect(() => {
-      this.updatePWAColor(theme ?? 'light');
-      this.theme = theme
-    }, [theme]);
+      this.initializeSettings(setTheme, i18n);
+    }, []);
 
     useEffect(() => {
       const userStore = RootStore.Get(UserStore);
       if (!userStore.isLogin && session && session.user) {
-        console.log(session)
         //@ts-ignore
-        userStore.ready({ ...session.user, token: session.token });
-        this.setupUserPreferences(setTheme, i18n);
+        userStore.ready({ ...session.user});
+        this.initializeSettings(setTheme, i18n);
         userStore.userInfo.call(Number(this.id))
       }
     }, [session]);