Merge branch 'main' into test

Jun-Murakami · May 23, 2024 · eee9acd · eee9acd
2 parents 198242c + 5015f8a
commit eee9acd
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 11 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,6 +1,8 @@
+import { useEffect } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { theme, darkTheme } from '../theme/mui_theme';
 import { CssBaseline, ThemeProvider } from '@mui/material';
+import { useIndexedDb } from '../hooks/useIndexedDb';
 import { useAppStateStore } from '../store/appStateStore';
 import { HomePage } from './HomePage';
 import { PrivacyPolicy } from './PrivacyPolicy';
@@ -9,6 +11,15 @@ import { Download } from './Download';
 export default function App() {
   const darkMode = useAppStateStore((state) => state.darkMode); // ダークモードの状態
 
+  const { loadSettingsFromIdb } = useIndexedDb();
+
+  useEffect(() => {
+    const asyncFunc = async () => {
+      await loadSettingsFromIdb();
+    };
+    asyncFunc();
+  }, [loadSettingsFromIdb]);
+
   return (
     <ThemeProvider theme={darkMode ? darkTheme : theme}>
       <CssBaseline />

diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx
@@ -1,6 +1,5 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useAuth } from '../hooks/useAuth';
-import { useIndexedDb } from '../hooks/useIndexedDb';
 import { useTreeManagement } from '../hooks/useTreeManagement';
 import { ModalDialog } from '../components/ModalDialog';
 import { InputDialog } from '../components/InputDialog';
@@ -48,21 +47,12 @@ export function HomePage() {
     handleDeleteAccount,
   } = useAuth();
 
-  const { loadSettingsFromIdb } = useIndexedDb();
-
   const { handleCreateOfflineTree } = useTreeManagement();
 
   const theme = useTheme();
 
   const drawerWidth = 300;
 
-  useEffect(() => {
-    const asyncFunc = async () => {
-      await loadSettingsFromIdb();
-    };
-    asyncFunc();
-  }, [loadSettingsFromIdb]);
-
   return (
     <>
       {isDialogVisible && <ModalDialog />}

diff --git a/src/hooks/useIndexedDb.ts b/src/hooks/useIndexedDb.ts
@@ -123,6 +123,9 @@ export const useIndexedDb = () => {
 
   // IndexedデータベースからAppの設定を読み込む ------------------------------------------------
   const loadSettingsFromIdb = async () => {
+    if (!uid) {
+      return;
+    }
     try {
       const appState = await idb.appstate.get(1);
       if (appState) {
@@ -136,6 +139,18 @@ export const useIndexedDb = () => {
     }
   };
 
+  // Indexedデータベースからダークモードの設定を読み込む ------------------------------------------------
+  const loadDarkModeFromIdb = async () => {
+    try {
+      const appState = await idb.appstate.get(1);
+      if (appState) {
+        setDarkMode(appState.settings.darkMode);
+      }
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
   // Indexedデータベースからクイックメモを読み込む ------------------------------------------------
   const loadQuickMemoFromIdb = async () => {
     if (!uid) {
@@ -435,6 +450,7 @@ export const useIndexedDb = () => {
     syncDb,
     checkAndSyncDb,
     loadSettingsFromIdb,
+    loadDarkModeFromIdb,
     loadQuickMemoFromIdb,
     loadTreesListFromIdb,
     loadCurrentTreeDataFromIdb,

diff --git a/src/hooks/useObserve.ts b/src/hooks/useObserve.ts
@@ -41,6 +41,7 @@ export const useObserve = () => {
   const {
     syncDb,
     checkAndSyncDb,
+    loadSettingsFromIdb,
     loadTreesListFromIdb,
     saveSettingsIdb,
     saveItemsIdb,
@@ -59,6 +60,7 @@ export const useObserve = () => {
     }
     if (!isLoading) setIsLoading(true);
     await checkAndSyncDb();
+    await loadSettingsFromIdb();
     await loadTreesListFromIdb();
     await loadQuickMemoFromDb();
     setIsLoading(false);