diff --git a/package-lock.json b/package-lock.json index 3d8abd3..afea934 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "tasktree-s", - "version": "1.2.3", + "version": "1.2.4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "tasktree-s", - "version": "1.2.3", + "version": "1.2.4", "dependencies": { "@capacitor-firebase/authentication": "^5.4.1", "@capacitor/android": "^5.7.4", @@ -36,6 +36,7 @@ "react-dom": "^18.2.0", "react-markdown": "^9.0.1", "react-router-dom": "^6.22.3", + "upgrade": "^1.1.0", "zustand": "^4.5.2" }, "devDependencies": { @@ -10685,6 +10686,11 @@ "node": ">=8" } }, + "node_modules/upgrade": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/upgrade/-/upgrade-1.1.0.tgz", + "integrity": "sha512-NtkVvqVCqsJo5U3mYRum2Tw6uCltOxfIJ/AfTZeTmw6U39IB5X23xF+kRZ9aiPaORqeiQQ7Q209/ibhOvxzwHA==" + }, "node_modules/uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", diff --git a/package.json b/package.json index 9f75a7c..4cac789 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "tasktree-s", "private": true, - "version": "1.2.3", + "version": "1.2.4", "type": "module", "scripts": { "dev": "vite", @@ -38,6 +38,7 @@ "react-dom": "^18.2.0", "react-markdown": "^9.0.1", "react-router-dom": "^6.22.3", + "upgrade": "^1.1.0", "zustand": "^4.5.2" }, "devDependencies": { diff --git a/src/components/MenuSettings.tsx b/src/components/MenuSettings.tsx index 0d40453..c3c2366 100644 --- a/src/components/MenuSettings.tsx +++ b/src/components/MenuSettings.tsx @@ -20,6 +20,7 @@ import DownloadIcon from '@mui/icons-material/Download'; import DeleteForeverIcon from '@mui/icons-material/DeleteForever'; import { useAppStateManagement } from '../hooks/useAppStateManagement'; import { useTreeManagement } from '../hooks/useTreeManagement'; +import { useIndexedDb } from '../hooks/useIndexedDb'; import { useAppStateStore } from '../store/appStateStore'; import { useTreeStateStore } from '../store/treeStateStore'; import { Capacitor } from '@capacitor/core'; @@ -35,6 +36,7 @@ export function MenuSettings({ handleLogout }: { handleLogout: () => void }) { const currentTree = useTreeStateStore((state) => state.currentTree); const { saveAppSettingsDb } = useAppStateManagement(); + const { saveSettingsIdb } = useIndexedDb(); const { handleDownloadAllTrees, handleFileUpload, handleDownloadTreeState } = useTreeManagement(); const open = Boolean(anchorEl); @@ -237,8 +239,9 @@ export function MenuSettings({ handleLogout }: { handleLogout: () => void }) { control={ { - saveAppSettingsDb(!darkMode, hideDoneItems); + onChange={async () => { + await saveSettingsIdb(!darkMode, hideDoneItems); + await saveAppSettingsDb(!darkMode, hideDoneItems); setDarkMode(!darkMode); }} /> diff --git a/src/components/ResponsiveDrawer.tsx b/src/components/ResponsiveDrawer.tsx index 12722bb..76ebd40 100644 --- a/src/components/ResponsiveDrawer.tsx +++ b/src/components/ResponsiveDrawer.tsx @@ -24,6 +24,7 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; import ClearIcon from '@mui/icons-material/Clear'; import { UniqueIdentifier } from '@dnd-kit/core'; import { useAppStateManagement } from '../hooks/useAppStateManagement'; +import { useIndexedDb } from '../hooks/useIndexedDb'; import { useAppStateStore } from '../store/appStateStore'; import { useTreeStateStore } from '../store/treeStateStore'; import { useTreeManagement } from '../hooks/useTreeManagement'; @@ -50,6 +51,7 @@ export function ResponsiveDrawer({ handleLogout }: { handleLogout: () => void }) const treesList = useTreeStateStore((state) => state.treesList); const { saveAppSettingsDb } = useAppStateManagement(); + const { saveSettingsIdb } = useIndexedDb(); const { loadCurrentTreeData, handleCreateNewTree } = useTreeManagement(); const { handlePrevButtonClick, handleNextButtonClick } = useSearch(); @@ -174,9 +176,10 @@ export function ResponsiveDrawer({ handleLogout }: { handleLogout: () => void }) control={ ) => { + onChange={async (event: React.ChangeEvent) => { setHideDoneItems(event.target.checked); - saveAppSettingsDb(darkMode, event.target.checked); + await saveSettingsIdb(darkMode, event.target.checked); + await saveAppSettingsDb(darkMode, event.target.checked); }} /> } diff --git a/src/hooks/useIndexedDb.ts b/src/hooks/useIndexedDb.ts index 97a8d24..921cc15 100644 --- a/src/hooks/useIndexedDb.ts +++ b/src/hooks/useIndexedDb.ts @@ -129,8 +129,7 @@ export const useIndexedDb = () => { try { const appState = await idb.appstate.get(1); if (appState) { - setQuickMemoText(appState.quickMemo); - setTreesList(appState.treesList); + setIsLoadedMemoFromDb(true); setDarkMode(appState.settings.darkMode); setHideDoneItems(appState.settings.hideDoneItems); setLocalTimestamp(appState.timestamp); @@ -171,36 +170,6 @@ export const useIndexedDb = () => { } }; - // IndexedデータベースからDarkMode設定を読み込む ------------------------------------------------ - const loadDarkModeFromIdb = async () => { - if (!uid) { - return; - } - try { - const appState = await idb.appstate.get(1); - if (appState) { - setDarkMode(appState.settings.darkMode); - } - } catch (error) { - handleError(error); - } - }; - - // Indexedデータベースから完了済みアイテムの非表示設定を読み込む ------------------------------------------------ - const loadHideDoneItemsFromIdb = async () => { - if (!uid) { - return; - } - try { - const appState = await idb.appstate.get(1); - if (appState) { - setHideDoneItems(appState.settings.hideDoneItems); - } - } catch (error) { - handleError(error); - } - }; - // Indexedデータベースから指定されたツリーのデータを読み込む ------------------------------------------------ const loadCurrentTreeDataFromIdb = async (targetTree: UniqueIdentifier) => { if (!uid || !targetTree) { @@ -221,6 +190,15 @@ export const useIndexedDb = () => { } }; + // Indexedデータベースに設定を保存 ------------------------------------------------ + const saveSettingsIdb = async (darkMode: boolean, hideDoneItems: boolean) => { + try { + await idb.appstate.update(1, { settings: { darkMode, hideDoneItems } }); + } catch (error) { + handleError(error); + } + }; + // IndexedデータベースにItemsを保存 ------------------------------------------------ const saveItemsIdb = async (newItems: TreeItems, targetTree: UniqueIdentifier) => { if (!uid || !targetTree || !newItems) { @@ -462,9 +440,8 @@ export const useIndexedDb = () => { loadSettingsFromIdb, loadQuickMemoFromIdb, loadTreesListFromIdb, - loadDarkModeFromIdb, - loadHideDoneItemsFromIdb, loadCurrentTreeDataFromIdb, + saveSettingsIdb, saveItemsIdb, saveTreesListIdb, saveCurrentTreeNameIdb, diff --git a/src/hooks/useObserve.ts b/src/hooks/useObserve.ts index 84e934a..687072e 100644 --- a/src/hooks/useObserve.ts +++ b/src/hooks/useObserve.ts @@ -14,6 +14,8 @@ import { useDialogStore } from '../store/dialogStore'; import { Preferences } from '@capacitor/preferences'; export const useObserve = () => { + const darkMode = useAppStateStore((state) => state.darkMode); + const hideDoneItems = useAppStateStore((state) => state.hideDoneItems); const isOffline = useAppStateStore((state) => state.isOffline); const uid = useAppStateStore((state) => state.uid); const setLocalTimestamp = useAppStateStore((state) => state.setLocalTimestamp); @@ -40,12 +42,13 @@ export const useObserve = () => { checkAndSyncDb, loadSettingsFromIdb, loadTreesListFromIdb, + saveSettingsIdb, saveItemsIdb, saveTreesListIdb, saveQuickMemoIdb, copyTreeDataToIdbFromDb } = useIndexedDb(); - const { loadQuickMemoFromDb, saveQuickMemoDb } = useAppStateManagement(); + const { loadSettingsFromDb, loadQuickMemoFromDb, saveQuickMemoDb } = useAppStateManagement(); const { handleError } = useError(); const isConnected = useFirebaseConnection(); @@ -96,6 +99,8 @@ export const useObserve = () => { const newTreesList = await loadTreesListFromDb(uid); setTreesList(newTreesList); await saveTreesListIdb(newTreesList); + await loadSettingsFromDb(); + await saveSettingsIdb(darkMode, hideDoneItems); await loadQuickMemoFromDb(); // treesListを反復して、タイムスタンプをチェックし、最新のツリーをコピー const treeIds = newTreesList.map((tree) => tree.id);