ツリーリストの変更を保存するためのデータベース処理を追加しました

Jun-Murakami · Feb 24, 2024 · 6bc2022 · 6bc2022
1 parent 1d69689
commit 6bc2022
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 21 deletions.
diff --git a/src/components/AppEntry.tsx b/src/components/AppEntry.tsx
@@ -71,6 +71,7 @@ export default function AppEntry() {
     setCurrentTree,
     setCurrentTreeName,
     setCurrentTreeMembers,
+    treesList,
     setTreesList,
     setIsExpanded,
     setIsFocused

diff --git a/src/components/SortableList/SortableItem.module.scss b/src/components/SortableList/SortableItem.module.scss
diff --git a/src/components/SortableList/SortableSource.tsx b/src/components/SortableList/SortableSource.tsx
@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { DraggableAttributes, DraggableSyntheticListeners, UniqueIdentifier } from '@dnd-kit/core';
 import { ListItemText, ListItemButton, Button } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import DragHandleIcon from '@mui/icons-material/DragHandle';
 import { TreesListItem } from '../../types/types';
 
@@ -17,6 +18,7 @@ export type SortableSourceProps = {
 };
 
 export const SortableSource: FC<SortableSourceProps> = ({ item, handlerProps, currentTree, handleListClick, setDrawerState }) => {
+  const theme = useTheme();
   return (
     <ListItemButton
       selected={currentTree === item.id}
@@ -29,6 +31,11 @@ export const SortableSource: FC<SortableSourceProps> = ({ item, handlerProps, cu
         ref={handlerProps?.ref}
         sx={{
           cursor: handlerProps ? 'grab' : 'grabbing',
+          color: theme.palette.grey[500],
+          width: '20px',
+          minWidth: '20px',
+          height: '20px',
+          mr: '10px',
         }}
         {...handlerProps?.attributes}
         {...handlerProps?.listeners}

diff --git a/src/hooks/useTreeManagement.ts b/src/hooks/useTreeManagement.ts
@@ -19,6 +19,7 @@ export const useTreeManagement = (
   setCurrentTree: React.Dispatch<React.SetStateAction<UniqueIdentifier | null>>,
   setCurrentTreeName: React.Dispatch<React.SetStateAction<string | null>>,
   setCurrentTreeMembers: React.Dispatch<React.SetStateAction<{ uid: string; email: string }[] | null>>,
+  treesList: TreesList,
   setTreesList: React.Dispatch<React.SetStateAction<TreesList>>,
   setIsExpanded: React.Dispatch<React.SetStateAction<boolean>>,
   setIsFocused: React.Dispatch<React.SetStateAction<boolean>>
@@ -213,6 +214,27 @@ export const useTreeManagement = (
   }, [items, isLoadedItemsFromExternal, handleError]);
 
 
+  // treesListの変更をデータベースに保存
+  useEffect(() => {
+    const debounceSave = setTimeout(() => {
+      const user = getAuth().currentUser;
+      if (!user || !treesList) {
+        return;
+      }
+      try {
+        const db = getDatabase();
+        const userTreeListRef = ref(db, `users/${user.uid}/treeList`);
+        set(userTreeListRef, treesList.map((tree) => tree.id));
+      } catch (error) {
+        handleError(error);
+      }
+    }, 3000); // 3秒のデバウンス
+
+    // コンポーネントがアンマウントされるか、依存配列の値が変更された場合にタイマーをクリア
+    return () => clearTimeout(debounceSave);
+  }, [treesList, handleError]);
+
+
   // 見つからないツリーがあった場合、ユーザーに通知してデータベース側を更新
   useEffect(() => {
     const asyncFunc = async () => {