検索結果を表示するための変更を追加

Jun-Murakami · May 5, 2024 · a0a4ff2 · a0a4ff2
1 parent 047956d
commit a0a4ff2
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 2 deletions.
diff --git a/src/components/SortableList/SortableList.tsx b/src/components/SortableList/SortableList.tsx
@@ -17,6 +17,7 @@ interface SortableListProps {
 export const SortableList: FC<SortableListProps> = ({ handleListClick, setDrawerState }) => {
   const treesList = useTreeStateStore((state) => state.treesList);
   const setTreesList = useTreeStateStore((state) => state.setTreesList);
+  const searchResults = useTreeStateStore((state) => state.searchResults);
 
   const [activeId, setActiveId] = useState<number | null>(null);
 
@@ -48,8 +49,8 @@ export const SortableList: FC<SortableListProps> = ({ handleListClick, setDrawer
           await saveTreesListDb(newItems);
         }}
       >
-        <SortableContext items={treesList}>
-          {treesList.map((item) => (
+        <SortableContext items={searchResults}>
+          {searchResults.map((item) => (
             <SortableItem
               key={item.id}
               isPreviewMode={isPreviewMode}

diff --git a/src/hooks/useDatabase.ts b/src/hooks/useDatabase.ts
@@ -20,6 +20,8 @@ export const useDatabase = () => {
 
   const { handleError } = useError();
 
+
+
   // タイムスタンプをデータベースに保存する関数 ---------------------------------------------------------------------------
   const saveTimeStampDb = async (targetTree: UniqueIdentifier | null) => {
     if (!uid) {

diff --git a/src/hooks/useIndexedDb.ts b/src/hooks/useIndexedDb.ts
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { indexedDb as idb } from '../indexedDb';
 import { UniqueIdentifier } from '@dnd-kit/core';
 import type { TreeItems, TreesList, TreesListItemIncludingItems, MemberItems } from '../types/types';
@@ -17,11 +18,14 @@ export const useIndexedDb = () => {
   const setDarkMode = useAppStateStore((state) => state.setDarkMode);
   const hideDoneItems = useAppStateStore((state) => state.hideDoneItems);
   const setHideDoneItems = useAppStateStore((state) => state.setHideDoneItems);
+  const searchKey = useAppStateStore((state) => state.searchKey);
   const quickMemoText = useAppStateStore((state) => state.quickMemoText);
   const setQuickMemoText = useAppStateStore((state) => state.setQuickMemoText);
   const setIsLoadedMemoFromDb = useAppStateStore((state) => state.setIsLoadedMemoFromDb);
   const localTimestamp = useAppStateStore((state) => state.localTimestamp);
   const setLocalTimestamp = useAppStateStore((state) => state.setLocalTimestamp);
+  const setSearchResults = useTreeStateStore((state) => state.setSearchResults);
+  const treesList = useTreeStateStore((state) => state.treesList);
   const setTreesList = useTreeStateStore((state) => state.setTreesList);
   const showDialog = useDialogStore((state) => state.showDialog);
 
@@ -35,6 +39,23 @@ export const useIndexedDb = () => {
   } = useDatabase();
   const { handleError } = useError();
 
+  useEffect(() => {
+    if (searchKey || searchKey !== '') {
+      const asyncFunc = async () => {
+        const result = await idb.treestate
+          .filter(tree => tree.items.some(item => item.value.includes(searchKey)))
+          .toArray();
+        if (result) {
+          const ensuredResult = result.map(tree => ({ id: tree.id!, name: tree.name! }));
+          setSearchResults(ensuredResult);
+        }
+      }
+      asyncFunc();
+    } else {
+      setSearchResults(treesList);
+    }
+  }, [searchKey, setSearchResults, treesList]);
+
   // FirebaseRealtimeDatabaseとIndexedデータベースを同期する ------------------------------------------------
   const syncDb = async () => {
     if (!uid) {

diff --git a/src/store/treeStateStore.ts b/src/store/treeStateStore.ts
@@ -5,13 +5,15 @@ import { TreeItem, TreesList } from '../types/types';
 type TreeState = {
   items: TreeItem[];
   treesList: TreesList;
+  searchResults: TreesList;
   currentTree: UniqueIdentifier | null;
   currentTreeName: string | null;
   currentTreeMembers: { uid: string; email: string }[] | null;
   prevCurrentTree: UniqueIdentifier | null;
   prevItems: TreeItem[];
   setItems: (items: TreeItem[]) => void;
   setTreesList: (treesList: TreesList) => void;
+  setSearchResults: (searchResults: TreesList) => void;
   setCurrentTree: (currentTree: UniqueIdentifier | null) => void;
   setCurrentTreeName: (currentTreeName: string | null) => void;
   setCurrentTreeMembers: (currentTreeMembers: { uid: string; email: string }[] | null) => void;
@@ -22,13 +24,15 @@ type TreeState = {
 export const useTreeStateStore = create<TreeState>((set) => ({
   items: [],
   treesList: [],
+  searchResults: [],
   currentTree: null,
   currentTreeName: null,
   currentTreeMembers: null,
   prevCurrentTree: null,
   prevItems: [],
   setItems: (items) => set({ items }),
   setTreesList: (treesList) => set({ treesList }),
+  setSearchResults: (searchResults) => set({ searchResults }),
   setCurrentTree: (currentTree) => set({ currentTree }),
   setCurrentTreeName: (currentTreeName) => set({ currentTreeName }),
   setCurrentTreeMembers: (currentTreeMembers) => set({ currentTreeMembers }),