useIndexedDbフックの変更を反映

Jun-Murakami · May 23, 2024 · 296edd9 · 296edd9
1 parent 5015f8a
commit 296edd9
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 51 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,8 +1,6 @@
-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';
@@ -11,15 +9,6 @@ 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/hooks/useIndexedDb.ts b/src/hooks/useIndexedDb.ts
@@ -144,11 +144,13 @@ export const useIndexedDb = () => {
     try {
       const appState = await idb.appstate.get(1);
       if (appState) {
-        setDarkMode(appState.settings.darkMode);
+        return appState.settings.darkMode;
       }
     } catch (error) {
-      handleError(error);
+      console.error('Failed to load dark mode from IndexedDB', error);
+      return false;
     }
+    return false; // デフォルト値
   };
 
   // Indexedデータベースからクイックメモを読み込む ------------------------------------------------

diff --git a/src/store/appStateStore.ts b/src/store/appStateStore.ts
@@ -1,4 +1,5 @@
 import { create } from 'zustand';
+import { useIndexedDb } from '../hooks/useIndexedDb';
 
 type AppState = {
   isOffline: boolean;
@@ -39,41 +40,46 @@ type AppState = {
   setIsLoadedMemoFromDb: (isLoadedMemoFromDb: boolean) => void;
 };
 
-export const useAppStateStore = create<AppState>((set) => ({
-  isOffline: false,
-  localTimestamp: 0,
-  darkMode: false,
-  hideDoneItems: false,
-  systemMessage: null,
-  isLoggedIn: true,
-  uid: null,
-  email: null,
-  isLoading: true,
-  isWaitingForDelete: false,
-  isAccordionExpanded: false,
-  isQuickMemoExpanded: false,
-  isFocusedTreeName: false,
-  containerWidth: 0,
-  searchKey: '',
-  isEditingText: false,
-  quickMemoText: '',
-  isLoadedMemoFromDb: false,
-  setIsOffline: (isOffline) => set({ isOffline }),
-  setLocalTimestamp: (localTimestamp) => set({ localTimestamp }),
-  setDarkMode: (darkMode) => set({ darkMode }),
-  setHideDoneItems: (hideDoneItems) => set({ hideDoneItems }),
-  setSystemMessage: (systemMessage) => set({ systemMessage }),
-  setIsLoggedIn: (isLoggedIn) => set({ isLoggedIn }),
-  setUid: (uid) => set({ uid }),
-  setEmail: (email) => set({ email }),
-  setIsLoading: (isLoading) => set({ isLoading }),
-  setIsWaitingForDelete: (isWaitingForDelete) => set({ isWaitingForDelete }),
-  setIsAccordionExpanded: (isAccordionExpanded) => set({ isAccordionExpanded }),
-  setIsQuickMemoExpanded: (isQuickMemoExpanded) => set({ isQuickMemoExpanded }),
-  setIsFocusedTreeName: (isFocusedTreeName) => set({ isFocusedTreeName }),
-  setContainerWidth: (containerWidth) => set({ containerWidth }),
-  setSearchKey: (searchKey) => set({ searchKey }),
-  setIsEditingText: (isEditingText) => set({ isEditingText }),
-  setQuickMemoText: (quickMemoText) => set({ quickMemoText }),
-  setIsLoadedMemoFromDb: (isLoadedMemoFromDb) => set({ isLoadedMemoFromDb }),
-}));
+export const useAppStateStore = create<AppState>((set) => {
+  const { loadDarkModeFromIdb } = useIndexedDb();
+  loadDarkModeFromIdb().then((darkMode) => set({ darkMode }));
+
+  return {
+    isOffline: false,
+    localTimestamp: 0,
+    darkMode: false,
+    hideDoneItems: false,
+    systemMessage: null,
+    isLoggedIn: true,
+    uid: null,
+    email: null,
+    isLoading: true,
+    isWaitingForDelete: false,
+    isAccordionExpanded: false,
+    isQuickMemoExpanded: false,
+    isFocusedTreeName: false,
+    containerWidth: 0,
+    searchKey: '',
+    isEditingText: false,
+    quickMemoText: '',
+    isLoadedMemoFromDb: false,
+    setIsOffline: (isOffline: boolean) => set({ isOffline }),
+    setLocalTimestamp: (localTimestamp: number) => set({ localTimestamp }),
+    setDarkMode: (darkMode: boolean) => set({ darkMode }),
+    setHideDoneItems: (hideDoneItems: boolean) => set({ hideDoneItems }),
+    setSystemMessage: (systemMessage: string | null) => set({ systemMessage }),
+    setIsLoggedIn: (isLoggedIn: boolean) => set({ isLoggedIn }),
+    setUid: (uid: string | null) => set({ uid }),
+    setEmail: (email: string | null) => set({ email }),
+    setIsLoading: (isLoading: boolean) => set({ isLoading }),
+    setIsWaitingForDelete: (isWaitingForDelete: boolean) => set({ isWaitingForDelete }),
+    setIsAccordionExpanded: (isAccordionExpanded: boolean) => set({ isAccordionExpanded }),
+    setIsQuickMemoExpanded: (isQuickMemoExpanded: boolean) => set({ isQuickMemoExpanded }),
+    setIsFocusedTreeName: (isFocusedTreeName: boolean) => set({ isFocusedTreeName }),
+    setContainerWidth: (containerWidth: number) => set({ containerWidth }),
+    setSearchKey: (searchKey: string) => set({ searchKey }),
+    setIsEditingText: (isEditingText: boolean) => set({ isEditingText }),
+    setQuickMemoText: (quickMemoText: string) => set({ quickMemoText }),
+    setIsLoadedMemoFromDb: (isLoadedMemoFromDb: boolean) => set({ isLoadedMemoFromDb }),
+  };
+});