minor fix

components/CollectionListing.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import Tree, {
   mutateTree,
   moveItemOnTree,
@@ -20,33 +20,35 @@ interface ExtendedTreeItem extends TreeItem {
 }
 
 const CollectionListing = () => {
-  const [tree, setTree] = useState<TreeData>();
-
   const { collections } = useCollectionStore();
 
   const router = useRouter();
 
   const currentPath = router.asPath;
 
+  const initialTree = useMemo(() => {
+    if (collections.length > 0) {
+      return buildTreeFromCollections(collections, router);
+    }
+    return undefined;
+  }, [collections, router]);
+
+  const [tree, setTree] = useState(initialTree);
+
   useEffect(() => {
-    const initialTree = buildTreeFromCollections(collections, router);
+    setTree(initialTree);
-    collections[0] && setTree(initialTree);
+  }, [initialTree]);
-  }, [collections]);
 
   const onExpand = (itemId: ItemId) => {
-    if (tree) {
+    setTree((currentTree) =>
-      setTree((currentTree) =>
+      mutateTree(currentTree!, itemId, { isExpanded: true })
-        mutateTree(currentTree!, itemId, { isExpanded: true })
+    );
-      );
-    }
   };
 
   const onCollapse = (itemId: ItemId) => {
-    if (tree) {
+    setTree((currentTree) =>
-      setTree((currentTree) =>
+      mutateTree(currentTree as TreeData, itemId, { isExpanded: false })
-        mutateTree(currentTree as TreeData, itemId, { isExpanded: false })
+    );
-      );
-    }
   };
 
   const onDragEnd = (

components/Sidebar.tsx

@@ -98,7 +98,7 @@ export default function Sidebar({ className }: { className?: string }) {
           leaveTo="transform opacity-0 -translate-y-3"
         >
           <Disclosure.Panel>
-            <CollectionListing links={true} />
+            <CollectionListing />
           </Disclosure.Panel>
         </Transition>
       </Disclosure>

types/nav.ts

@@ -1 +0,0 @@
-declare module "@atlaskit/navigation";