diff --git a/apps/mobile/app/components/sheets/move-notebook/index.tsx b/apps/mobile/app/components/sheets/move-notebook/index.tsx index 01e927d8f..91880fe5e 100644 --- a/apps/mobile/app/components/sheets/move-notebook/index.tsx +++ b/apps/mobile/app/components/sheets/move-notebook/index.tsx @@ -16,58 +16,45 @@ GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see . */ -import { Notebook, VirtualizedGrouping } from "@notesnook/core"; +import { Notebook } from "@notesnook/core"; import { strings } from "@notesnook/intl"; import { useThemeColors } from "@notesnook/theme"; import React, { useCallback, useEffect, useState } from "react"; import { Text, View } from "react-native"; import { FlatList } from "react-native-actions-sheet"; -import create from "zustand"; import { db } from "../../../common/database"; -import { useNotebook } from "../../../hooks/use-notebook"; import { presentSheet } from "../../../services/event-manager"; import { - useNotebookStore, - useNotebooks + createNotebookTreeStores, + TreeItem +} from "../../../stores/create-notebook-tree-stores"; +import { + useNotebooks, + useNotebookStore } from "../../../stores/use-notebook-store"; import { checkParentSelected, findRootNotebookId, getParentNotebookId } from "../../../utils/notebooks"; -import { AppFontSize } from "../../../utils/size"; import { DefaultAppStyles } from "../../../utils/styles"; import { Dialog } from "../../dialog"; import DialogHeader from "../../dialog/dialog-header"; import { presentDialog } from "../../dialog/functions"; import SheetProvider from "../../sheet-provider"; -import AppIcon from "../../ui/AppIcon"; -import { Button } from "../../ui/button"; -import { IconButton } from "../../ui/icon-button"; -import { Pressable } from "../../ui/pressable"; -import Paragraph from "../../ui/typography/paragraph"; -import { AddNotebookSheet } from "../add-notebook"; +import { NotebookItem } from "../../side-menu/notebook-item"; import { useSideMenuNotebookExpandedStore, useSideMenuNotebookSelectionStore } from "../../side-menu/stores"; +import { Button } from "../../ui/button"; +import { AddNotebookSheet } from "../add-notebook"; -const useNotebookExpandedStore = create<{ - expanded: { - [id: string]: boolean; - }; - setExpanded: (id: string) => void; -}>((set, get) => ({ - expanded: {}, - setExpanded(id: string) { - set({ - expanded: { - ...get().expanded, - [id]: !get().expanded[id] - } - }); - } -})); +const { + useNotebookExpandedStore, + useNotebookTreeStore, + useNotebookSelectionStore +} = createNotebookTreeStores(false, false); export const MoveNotebookSheet = ({ selectedNotebooks, @@ -76,16 +63,55 @@ export const MoveNotebookSheet = ({ selectedNotebooks: Notebook[]; close?: () => void; }) => { - const [notebooks] = useNotebooks(); + const tree = useNotebookTreeStore((state) => state.tree); + const [notebooks, loading] = useNotebooks(); const { colors } = useThemeColors(); - const [moveToTop, setMoveToTop] = useState(false); + const lastQuery = React.useRef(); + const [filteredNotebooks, setFilteredNotebooks] = React.useState(notebooks); + const [moveToTopEnabled, setMoveToTopEnabled] = useState(false); + const loadRootNotebooks = React.useCallback(async () => { + if (!filteredNotebooks) return; + const _notebooks: Notebook[] = []; + for (let i = 0; i < filteredNotebooks.placeholders.length; i++) { + _notebooks[i] = (await filteredNotebooks?.item(i))?.item as Notebook; + } + const items = await useNotebookTreeStore + .getState() + .addNotebooks("root", _notebooks, 0); + useNotebookTreeStore.getState().setTree(items); + }, [filteredNotebooks]); + + const updateNotebooks = React.useCallback(() => { + if (lastQuery.current) { + db.lookup + .notebooks(lastQuery.current) + .sorted() + .then((filtered) => { + setFilteredNotebooks(filtered); + }); + } else { + setFilteredNotebooks(notebooks); + } + }, [notebooks]); + + useEffect(() => { + updateNotebooks(); + }, [updateNotebooks]); + + useEffect(() => { + (async () => { + if (!loading) { + loadRootNotebooks(); + } + })(); + }, [loadRootNotebooks, loading]); useEffect(() => { (async () => { for (const notebook of selectedNotebooks) { const root = await findRootNotebookId(notebook.id); if (root !== notebook.id) { - setMoveToTop(true); + setMoveToTopEnabled(true); return; } } @@ -93,14 +119,14 @@ export const MoveNotebookSheet = ({ }, [selectedNotebooks]); const renderItem = useCallback( - ({ index }: { index: number }) => { + ({ item, index }: { item: TreeItem; index: number }) => { return ( - { + index={index} + item={item} + onPress={async () => { + const selectedNotebook = item.notebook; presentDialog({ title: strings.moveNotebooks(selectedNotebooks.length), paragraph: strings.moveNotebooksConfirm( @@ -153,7 +179,7 @@ export const MoveNotebookSheet = ({ /> ); }, - [selectedNotebooks, notebooks, close] + [selectedNotebooks, close] ); return ( @@ -163,7 +189,9 @@ export const MoveNotebookSheet = ({ item.notebook.id} + windowSize={3} ListHeaderComponent={ - {moveToTop ? ( + {moveToTopEnabled ? (