BugFix ensure to render empty page correctly

packages/growi-plugin-lsx/src/resource/js/components/Lsx.jsx

@@ -83,7 +83,7 @@ export class Lsx extends React.Component {
         return;
       }
 
-      const node = pathToNodeMap[pagePath] || new PageNode();
+      const node = pathToNodeMap[pagePath] || new PageNode(pagePath);
       node.page = page;
       pathToNodeMap[pagePath] = node;
 
@@ -93,7 +93,7 @@ export class Lsx extends React.Component {
       if (!this.isEquals(parentPath, rootPagePath)) {
         let parentNode = pathToNodeMap[parentPath];
         if (parentNode === undefined) {
-          parentNode = new PageNode();
+          parentNode = new PageNode(parentPath);
           pathToNodeMap[parentPath] = parentNode;
         }
         // associate to patent
@@ -102,10 +102,16 @@ export class Lsx extends React.Component {
     });
 
     // return root objects
-    return Object.values(pathToNodeMap).filter((node) => {
-      const parentPath = this.getParentPath(node.page.path);
-      return !(parentPath in pathToNodeMap);
+    let rootNodes = [];
+    Object.keys(pathToNodeMap).forEach((pagePath) => {
+      const parentPath = this.getParentPath(pagePath);
+      // pick up what parent doesn't exist
+      if (!(parentPath in pathToNodeMap)) {
+        rootNodes.push(pathToNodeMap[pagePath]);
+      }
     });
+
+    return rootNodes;
   }
 
   /**

packages/growi-plugin-lsx/src/resource/js/components/PageList/ListView.js

@@ -11,7 +11,7 @@ export class ListView extends React.Component {
   render() {
     const listView = this.props.nodeTree.map((pageNode) => {
       return (
-        <Page key={pageNode.page.path} depth={1}
+        <Page key={pageNode.pagePath} depth={1}
           pageNode={pageNode}
           lsxContext={this.props.lsxContext}
         />

packages/growi-plugin-lsx/src/resource/js/components/PageList/Page.js

@@ -12,58 +12,102 @@ export class Page extends React.Component {
     super(props);
 
     this.state = {
-      isVisible: true,
-      isLinkable: true,
+      isExists: false,
+      isVisible: false,
+      isLinkable: false,
+      hasChildren: false,
     };
   }
 
   componentDidMount() {
+    const pageNode = this.props.pageNode;
+
+    if (pageNode.page !== undefined) {
+      this.setState({isExists: true});
+    }
+    if (pageNode.children.length > 0) {
+      this.setState({hasChildren: true});
+    }
+
     // process depth option
     const optDepth = this.props.lsxContext.getOptDepth();
-    if (optDepth !== undefined) {
+    if (optDepth === undefined) {
+      this.setState({isVisible: true});
+      this.setState({isLinkable: true});
+    }
+    else {
       const depth = this.props.depth;
-      const decGens = this.props.pageNode.getDecendantsGenerationsNum();
+      const decGens = pageNode.getDecendantsGenerationsNum();
 
       // debug
-      // console.log(this.props.pageNode.page.path, {depth, decGens, 'optDepth.start': optDepth.start, 'optDepth.end': optDepth.end});
+      // console.log(pageNode.pagePath, {depth, decGens, 'optDepth.start': optDepth.start, 'optDepth.end': optDepth.end});
 
       if (optDepth.end !== undefined) {
         const isVisible = (optDepth.end > 0) ? (depth <= optDepth.end) : (decGens <= optDepth.end);
         this.setState({isVisible});
       }
 
-      const isLinkable = (optDepth.start > 0) ? (optDepth.start <= depth) : (optDepth.start <= decGens);
-      this.setState({isLinkable});
+      if (this.state.isExists) {
+        const isLinkable = (optDepth.start > 0) ? (optDepth.start <= depth) : (optDepth.start <= decGens);
+        this.setState({isLinkable});
+      }
     }
   }
 
+  getChildPageElement() {
+    const pageNode = this.props.pageNode;
+
+    let element = '';
+
+    // create child pages elements
+    if (this.state.hasChildren) {
+      const pages = pageNode.children.map((pageNode) => {
+        return (
+          <Page key={pageNode.pagePath} depth={this.props.depth + 1}
+            pageNode={pageNode}
+            lsxContext={this.props.lsxContext}
+          />
+        );
+      });
+
+      element = <ul className="page-list-ul">{pages}</ul>;
+    }
+
+    return element
+  }
+
+  getIconElement() {
+    const pageNode = this.props.pageNode;
+
+    let icon = <i className="fa fa-folder-o" aria-hidden="true"></i>;
+    if (this.state.isExists) {
+      icon = (pageNode.children.length > 0) ?
+        <i className="fa fa-folder" aria-hidden="true"></i>:
+        <i className="fa fa-file-text-o" aria-hidden="true"></i>;
+    }
+
+    return icon;
+  }
+
   render() {
     if (!this.state.isVisible) {
       return <div></div>;
     }
 
     const pageNode = this.props.pageNode;
-    const page = pageNode.page;
-
-    const childPages = pageNode.children.map((pageNode) => {
-      return (
-        <Page key={pageNode.page.path} depth={this.props.depth + 1}
-          pageNode={pageNode}
-          lsxContext={this.props.lsxContext}
-        />
-      );
-    });
-    const icon = (pageNode.children.length > 0) ?
-      <i className="fa fa-folder" aria-hidden="true"></i>:
-      <i className="fa fa-file-text-o" aria-hidden="true"></i>;
+
+    // create PagePath element
     const pagePathNode = (this.state.isLinkable) ?
-      <a className="page-list-link" href={page.path}><PagePath page={page}/></a>:
-      <PagePath page={page}/>;
+      <a className="page-list-link" href={pageNode.pagePath}><PagePath pagePath={pageNode.pagePath}/></a>:
+      <PagePath pagePath={pageNode.pagePath} />;
+
+    // create PageListMeta element
+    const pageListMeta = (this.state.isExists) ? <PageListMeta page={pageNode.page} /> : '';
 
     return (
       <li className="page-list-li">
-        <small>{icon}</small> {pagePathNode} <PageListMeta page={page} />
-        <ul className="page-list-ul">{childPages}</ul>
+        <small>{this.getIconElement()}</small> {pagePathNode} {pageListMeta}
+        {this.getChildPageElement()}
       </li>
     );
   }

packages/growi-plugin-lsx/src/resource/js/components/PageList/PagePath.js

@@ -26,8 +26,7 @@ export class PagePath extends React.Component {
   }
 
   render() {
-    const page = this.props.page;
-    const pagePath = page.path.replace(this.props.excludePathString.replace(/^\//, ''), '');
+    const pagePath = this.props.pagePath.replace(this.props.excludePathString.replace(/^\//, ''), '');
     const shortPath = this.getShortPath(pagePath);
     const shortPathEscaped = shortPath.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
     const pathPrefix = pagePath.replace(new RegExp(shortPathEscaped + '(/)?$'), '');
@@ -41,10 +40,9 @@ export class PagePath extends React.Component {
 }
 
 PagePath.propTypes = {
-  page: PropTypes.object.isRequired,
+  pagePath: PropTypes.string.isRequired,
 };
 
 PagePath.defaultProps = {
-  page: {},
   excludePathString: '',
 };

packages/growi-plugin-lsx/src/resource/js/components/PageNode.js

@@ -1,9 +1,11 @@
 export class PageNode {
 
+  pagePath;
   page;
   children;
 
-  constructor() {
+  constructor(pagePath) {
+    this.pagePath = pagePath;
     this.children = [];
   }