From 5015f8a20453d1d16965c4e940f943433680449c Mon Sep 17 00:00:00 2001
From: Jun Murakami <126404131+Jun-Murakami@users.noreply.github.com>
Date: Thu, 23 May 2024 16:54:21 +0900
Subject: [PATCH] =?UTF-8?q?UseIndexedDb=E3=83=95=E3=83=83=E3=82=AF?=
 =?UTF-8?q?=E3=81=ABloadDarkModeFromIdb=E9=96=A2=E6=95=B0=E3=82=92?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/App.tsx      | 11 +++++++++++
 src/components/HomePage.tsx | 12 +-----------
 src/hooks/useIndexedDb.ts   | 16 ++++++++++++++++
 src/hooks/useObserve.ts     |  2 ++
 4 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index a25b029..7e9f206 100644
--- 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
index 04f6470..ec7fa55 100644
--- 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
index c334a27..ba71edb 100644
--- 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
index 215b73b..d2cec40 100644
--- 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);