useIndexedDb.tsとuseObserve.tsの変更をコミット

Jun-Murakami · May 22, 2024 · a58b84b · a58b84b
1 parent aaabf0c
commit a58b84b
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 48 deletions.
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
@@ -1,13 +1,24 @@
 import { useEffect } from 'react';
 import { getApp, initializeApp } from 'firebase/app';
 import {
-  getAuth, indexedDBLocalPersistence, initializeAuth, GoogleAuthProvider, OAuthProvider, signInWithPopup, signInWithCredential, signInWithEmailAndPassword, createUserWithEmailAndPassword, sendPasswordResetEmail, signOut
+  getAuth,
+  indexedDBLocalPersistence,
+  initializeAuth,
+  GoogleAuthProvider,
+  OAuthProvider,
+  signInWithPopup,
+  signInWithCredential,
+  signInWithEmailAndPassword,
+  createUserWithEmailAndPassword,
+  sendPasswordResetEmail,
+  signOut,
 } from 'firebase/auth';
 import { getDatabase, remove, ref, get, set } from 'firebase/database';
 import { getStorage, ref as storageRef, deleteObject, listAll } from 'firebase/storage';
 import { Capacitor } from '@capacitor/core';
 import { FirebaseAuthentication } from '@capacitor-firebase/authentication';
 import { useObserve } from './useObserve';
+import { useIndexedDb } from './useIndexedDb';
 import { useAppStateStore } from '../store/appStateStore';
 import { useTreeStateStore } from '../store/treeStateStore';
 import { useInputDialogStore } from '../store/dialogStore';
@@ -62,11 +73,14 @@ export const useAuth = () => {
 
   const showInputDialog = useInputDialogStore((state) => state.showDialog);
 
+  const { loadSettingsFromIdb } = useIndexedDb(); // 追加
+
   const { observeTimeStamp } = useObserve();
 
   // ログイン状態の監視
   useEffect(() => {
     const asyncFunc = async () => {
+      await loadSettingsFromIdb();
       if (Capacitor.isNativePlatform() && FirebaseAuthentication) {
         FirebaseAuthentication.addListener('authStateChange', async (result) => {
           if (result.user) {
@@ -85,10 +99,10 @@ export const useAuth = () => {
       return () => {
         unsubscribe();
         FirebaseAuthentication.removeAllListeners();
-      }
+      };
     };
     asyncFunc();
-  }, [setIsLoading, setIsLoggedIn, setUid, setEmail]);
+  }, [setIsLoading, setIsLoggedIn, setUid, setEmail, loadSettingsFromIdb]);
 
   useEffect(() => {
     const auth = getAuth();
@@ -124,13 +138,15 @@ export const useAuth = () => {
         const result = await FirebaseAuthentication.signInWithGoogle();
         // 2. Sign in on the web layer using the id token
         const credential = GoogleAuthProvider.credential(result.credential?.idToken);
-        await signInWithCredential(await auth, credential).then(async () => {
-          setIsLoggedIn(true);
-          setSystemMessage(null);
-        }).catch((error) => {
-          setSystemMessage('Googleログインに失敗しました。Code:100\n\n' + error.code);
-          setIsLoading(false);
-        });
+        await signInWithCredential(await auth, credential)
+          .then(async () => {
+            setIsLoggedIn(true);
+            setSystemMessage(null);
+          })
+          .catch((error) => {
+            setSystemMessage('Googleログインに失敗しました。Code:100\n\n' + error.code);
+            setIsLoading(false);
+          });
       } catch (error) {
         setSystemMessage('Googleログインに失敗しました。Code:101\n\n' + error);
         setIsLoading(false);
@@ -166,13 +182,15 @@ export const useAuth = () => {
           return;
         }
         const credential = provider.credential({ idToken: result.credential.idToken, rawNonce: result.credential.nonce });
-        await signInWithCredential(await auth, credential).then(async () => {
-          setIsLoggedIn(true);
-          setSystemMessage(null);
-        }).catch((error) => {
-          setSystemMessage('Appleログインに失敗しました。Code:104\n\n' + error.code);
-          setIsLoading(false);
-        })
+        await signInWithCredential(await auth, credential)
+          .then(async () => {
+            setIsLoggedIn(true);
+            setSystemMessage(null);
+          })
+          .catch((error) => {
+            setSystemMessage('Appleログインに失敗しました。Code:104\n\n' + error.code);
+            setIsLoading(false);
+          });
       } catch (error) {
         setSystemMessage('Appleログインに失敗しました。Code:105\n\n' + error);
         setIsLoading(false);
@@ -188,7 +206,7 @@ export const useAuth = () => {
         .catch((error) => {
           setSystemMessage('Appleログインに失敗しました。Code:106\n\n' + error.code);
           setIsLoading(false);
-        })
+        });
     }
   };
 
@@ -200,19 +218,25 @@ export const useAuth = () => {
     }
     setSystemMessage('ログイン中...');
     setIsLoading(true);
-    signInWithEmailAndPassword(await auth, email, password).then(() => {
-      setIsLoggedIn(true);
-      setSystemMessage(null);
-    }).catch((error) => {
-      if (error.code === 'auth/invalid-credential') {
-        setSystemMessage('ログインに失敗しました。メールアドレスとパスワードを確認してください。Googleログインで使用したメールアドレスでログインする場合は、パスワードのリセットを行ってください。');
-      } else if (error.code === 'auth/invalid-login-credentials') {
-        setSystemMessage('ログインに失敗しました。メールアドレスとパスワードを確認してください。Googleログインで使用したメールアドレスでログインする場合は、パスワードのリセットを行ってください。');
-      } else {
-        setSystemMessage('ログインに失敗しました。Code:107\n\n' + error.code);
-      }
-      setIsLoading(false);
-    });
+    signInWithEmailAndPassword(await auth, email, password)
+      .then(() => {
+        setIsLoggedIn(true);
+        setSystemMessage(null);
+      })
+      .catch((error) => {
+        if (error.code === 'auth/invalid-credential') {
+          setSystemMessage(
+            'ログインに失敗しました。メールアドレスとパスワードを確認してください。Googleログインで使用したメールアドレスでログインする場合は、パスワードのリセットを行ってください。'
+          );
+        } else if (error.code === 'auth/invalid-login-credentials') {
+          setSystemMessage(
+            'ログインに失敗しました。メールアドレスとパスワードを確認してください。Googleログインで使用したメールアドレスでログインする場合は、パスワードのリセットを行ってください。'
+          );
+        } else {
+          setSystemMessage('ログインに失敗しました。Code:107\n\n' + error.code);
+        }
+        setIsLoading(false);
+      });
   };
 
   // メールアドレスとパスワードでサインアップ
@@ -417,5 +441,13 @@ export const useAuth = () => {
     }
     setIsWaitingForDelete(false);
   };
-  return { handleGoogleLogin, handleAppleLogin, handleEmailLogin, handleSignup, handleResetPassword, handleLogout, handleDeleteAccount };
+  return {
+    handleGoogleLogin,
+    handleAppleLogin,
+    handleEmailLogin,
+    handleSignup,
+    handleResetPassword,
+    handleLogout,
+    handleDeleteAccount,
+  };
 };
diff --git a/src/hooks/useIndexedDb.ts b/src/hooks/useIndexedDb.ts
@@ -123,9 +123,6 @@ export const useIndexedDb = () => {
 
   // IndexedデータベースからAppの設定を読み込む ------------------------------------------------
   const loadSettingsFromIdb = async () => {
-    if (!uid) {
-      return;
-    }
     try {
       const appState = await idb.appstate.get(1);
       if (appState) {

diff --git a/src/hooks/useObserve.ts b/src/hooks/useObserve.ts
@@ -7,7 +7,7 @@ import { useFirebaseConnection } from './useFirebaseConnection';
 import { useError } from './useError';
 import { useDatabase } from './useDatabase';
 import { useIndexedDb } from './useIndexedDb';
-import { getDatabase, ref, onValue, } from 'firebase/database';
+import { getDatabase, ref, onValue } from 'firebase/database';
 import { useAppStateStore } from '../store/appStateStore';
 import { useTreeStateStore } from '../store/treeStateStore';
 import { useDialogStore } from '../store/dialogStore';
@@ -38,15 +38,15 @@ export const useObserve = () => {
 
   const { loadCurrentTreeData, handleLoadedContent } = useTreeManagement();
   const { loadTreesListFromDb, saveItemsDb } = useDatabase();
-  const { syncDb,
+  const {
+    syncDb,
     checkAndSyncDb,
-    loadSettingsFromIdb,
     loadTreesListFromIdb,
     saveSettingsIdb,
     saveItemsIdb,
     saveTreesListIdb,
     saveQuickMemoIdb,
-    copyTreeDataToIdbFromDb
+    copyTreeDataToIdbFromDb,
   } = useIndexedDb();
   const { loadSettingsFromDb, loadQuickMemoFromDb, saveQuickMemoDb } = useAppStateManagement();
   const { handleError } = useError();
@@ -59,7 +59,6 @@ export const useObserve = () => {
     }
     if (!isLoading) setIsLoading(true);
     await checkAndSyncDb();
-    await loadSettingsFromIdb();
     await loadTreesListFromIdb();
     await loadQuickMemoFromDb();
     setIsLoading(false);
@@ -72,15 +71,23 @@ export const useObserve = () => {
       const name = treeNameOffline ? treeNameOffline : 'オフラインツリー';
       const quickMemo = quickMemoOffline ? quickMemoOffline : '';
       const conbinedQuickMemoText = quickMemoText + '\n\n' + quickMemo;
-      const result = await showDialog('オフラインツリーが見つかりました。このツリーを読み込みますか？', 'オフラインツリーの読み込み', true);
+      const result = await showDialog(
+        'オフラインツリーが見つかりました。このツリーを読み込みますか？',
+        'オフラインツリーの読み込み',
+        true
+      );
       if (result) {
         await handleLoadedContent(JSON.stringify({ name, items }));
         setQuickMemoText(conbinedQuickMemoText);
         await Preferences.remove({ key: `items_offline` });
         await Preferences.remove({ key: `treeName_offline` });
         await Preferences.remove({ key: `quick_memo_offline` });
       } else {
-        const removeResult = await showDialog('オフラインツリーを削除しますか？削除せず、次回ログイン時に読み込むこともできます。', 'オフラインツリーの削除', true);
+        const removeResult = await showDialog(
+          'オフラインツリーを削除しますか？削除せず、次回ログイン時に読み込むこともできます。',
+          'オフラインツリーの削除',
+          true
+        );
         if (removeResult) {
           await Preferences.remove({ key: `items_offline` });
           await Preferences.remove({ key: `treeName_offline` });
@@ -136,7 +143,6 @@ export const useObserve = () => {
           setPrevCurrentTree(null);
           await loadCurrentTreeData(currentTree);
         }
-
       }
       setIsLoading(false);
     });
@@ -155,7 +161,7 @@ export const useObserve = () => {
             await saveItemsIdb(prevItems, prevCurrentTree);
             await saveItemsDb(prevItems, prevCurrentTree);
           }
-        }
+        };
         asyncFunc();
       }
       setPrevCurrentTree(currentTree);
@@ -184,7 +190,7 @@ export const useObserve = () => {
           const asyncFunc = async () => {
             await saveItemsIdb(items, targetTree);
             await saveItemsDb(items, targetTree);
-          }
+          };
           asyncFunc();
         }
         setPrevItems([]);
@@ -219,7 +225,7 @@ export const useObserve = () => {
           const asyncFunc = async () => {
             await saveQuickMemoIdb(quickMemoText);
             await saveQuickMemoDb(quickMemoText);
-          }
+          };
           asyncFunc();
         }
       } catch (error) {
@@ -233,6 +239,6 @@ export const useObserve = () => {
   }, [quickMemoText]);
 
   return {
-    observeTimeStamp
+    observeTimeStamp,
   };
-}
+};