fix: respect the collapsed property on nested sections (#1212)

Co-authored-by: Deep Singhvi <[email protected]> Co-authored-by: Andrew Jiang <[email protected]>
fern-api · Aug 1, 2024 · 6b691e7 · 6b691e7
1 parent 5088acf
commit 6b691e7
Showing 1 changed file with 30 additions and 5 deletions.
diff --git a/packages/ui/app/src/sidebar/CollapseSidebarContext.tsx b/packages/ui/app/src/sidebar/CollapseSidebarContext.tsx
@@ -88,7 +88,6 @@ export const CollapseSidebarProvider: FC<
     const { parentIdMap, parentToChildrenMap } = useMemo(() => {
         const parentIdMap = new Map<FernNavigation.NodeId, FernNavigation.NodeId[]>();
         const parentToChildrenMap = new Map<FernNavigation.NodeId, FernNavigation.NodeId[]>();
-
         if (sidebar == null) {
             return { parentIdMap, parentToChildrenMap };
         }
@@ -113,12 +112,38 @@ export const CollapseSidebarProvider: FC<
         return { parentIdMap, parentToChildrenMap };
     }, [sidebar]);
 
-    const [expanded, setExpanded] = useState<FernNavigation.NodeId[]>(() =>
-        selectedNodeId == null ? [] : [selectedNodeId, ...(parentIdMap.get(selectedNodeId) ?? [])],
-    );
+    const initialExpandedSections = useCallback((): FernNavigation.NodeId[] => {
+        if (sidebar != null) {
+            const expandedNodes: FernNavigation.NodeId[] = [];
+            FernNavigation.utils.traverseNavigation(sidebar, (node) => {
+                if (node.type === "section" && node.collapsed === false) {
+                    expandedNodes.push(...[node.id, ...(parentIdMap.get(node.id) ?? [])]);
+                }
+            });
+            return [...expandedNodes];
+        } else {
+            return [];
+        }
+    }, [parentIdMap, sidebar]);
+
+    const defaultExpandedNodes = useMemo(() => initialExpandedSections(), [initialExpandedSections]);
+
+    const [expanded, setExpanded] = useState<FernNavigation.NodeId[]>(initialExpandedSections);
 
     useEffect(() => {
-        setExpanded(selectedNodeId == null ? [] : [selectedNodeId, ...(parentIdMap.get(selectedNodeId) ?? [])]);
+        const updatedDefaultExpanded = expanded.filter((node) => {
+            if (defaultExpandedNodes.includes(node)) {
+                return node;
+            }
+            return;
+        });
+
+        setExpanded(
+            selectedNodeId == null
+                ? updatedDefaultExpanded
+                : [selectedNodeId, ...updatedDefaultExpanded, ...(parentIdMap.get(selectedNodeId) ?? [])],
+        );
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedNodeId, parentIdMap]);
 
     const checkExpanded = useCallback(