Normalized isOpen

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -1,4 +1,7 @@
-import React, { useCallback, useState, FC } from 'react';
+import React, {
+  useCallback, useState, FC, useEffect,
+} from 'react';
+import nodePath from 'path';
 
 import { ItemNode } from './ItemNode';
 import { useSWRxPageChildren } from '../../../stores/page-listing';
@@ -28,33 +31,35 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
     setIsOpen(!isOpen);
   }, [isOpen]);
 
-  /*
-   * When swr fetch succeeded
-   */
-  if (isOpen && error == null && data != null) {
-    const { children } = data;
-    itemNode.children = ItemNode.generateNodesFromPages(children);
-  }
-
   // make sure itemNode.children and currentChildren are synced
-  if (children.length > currentChildren.length) {
-    setCurrentChildren(children);
-  }
+  useEffect(() => {
+    if (children.length > currentChildren.length) {
+      setCurrentChildren(children);
+    }
+    /*
+     * When swr fetch succeeded
+     */
+    if (isOpen && error == null && data != null) {
+      const newChildren = data.children;
+      setCurrentChildren(ItemNode.generateNodesFromPages(newChildren));
+    }
+  }, [data]);
 
   // TODO: improve style
-  const style = { margin: '10px', opacity: 1.0 };
-  if (page.isTarget) style.opacity = 0.7;
+  const opacityStyle = { opacity: 1.0 };
+  if (page.isTarget) opacityStyle.opacity = 0.7;
+  else if (isOpen) opacityStyle.opacity = 0.5;
 
   return (
-    <div style={style}>
-      <div>
-        <button type="button" className="btn btn-light p-1" onClick={onClickLoadChildren}>Load</button>
-        <a href={page._id}>
-          <p>{page.path}</p>
+    <div style={{ margin: '10px' }}>
+      <div style={opacityStyle}>
+        <button type="button" className="d-inline-block btn btn-light p-1 mr-1" onClick={onClickLoadChildren}>Load</button>
+        <a href={page._id} className="d-inline-block">
+          <p>{nodePath.basename(page.path as string) || '/'}</p>
         </a>
       </div>
       {
-        hasChildren() && currentChildren.map(node => (
+        isOpen && hasChildren() && currentChildren.map(node => (
           <Item
             key={node.page._id}
             itemNode={node}

packages/app/src/components/Sidebar/PageTree/ItemsTree.tsx

@@ -4,7 +4,7 @@ import { IPage } from '../../../interfaces/page';
 import { ItemNode } from './ItemNode';
 import Item from './Item';
 import { useSWRxPageAncestorsChildren } from '../../../stores/page-listing';
-import { useTargetAndAncestors } from '../../../stores/context';
+import { useTargetAndAncestors, useCurrentPagePath } from '../../../stores/context';
 import { HasObjectId } from '../../../interfaces/has-object-id';
 
 
@@ -47,12 +47,11 @@ const generateInitialNodeAfterResponse = (ancestorsChildren: Record<string, Part
  * ItemsTree
  */
 const ItemsTree: FC = () => {
-  // TODO: get from static SWR
-  const path = '/Sandbox';
+  const { data: currentPath } = useCurrentPagePath();
 
   const { data, error } = useTargetAndAncestors();
 
-  const { data: ancestorsChildrenData, error: error2 } = useSWRxPageAncestorsChildren(path);
+  const { data: ancestorsChildrenData, error: error2 } = useSWRxPageAncestorsChildren(currentPath == null ? null : currentPath);
 
   if (error != null || error2 != null) {
     return null;

packages/app/src/stores/page-listing.tsx

@@ -5,10 +5,10 @@ import { AncestorsChildrenResult, ChildrenResult } from '../interfaces/page-list
 
 
 export const useSWRxPageAncestorsChildren = (
-    path: string,
+    path: string | null,
 ): SWRResponse<AncestorsChildrenResult, Error> => {
   return useSWR(
-    `/page-listing/ancestors-children?path=${path}`,
+    path ? `/page-listing/ancestors-children?path=${path}` : null,
     endpoint => apiv3Get(endpoint).then((response) => {
       return {
         ancestorsChildren: response.data.ancestorsChildren,