make PageNode an interface

packages/remark-lsx/src/components/LsxPageList/LsxListView.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 
-import { PageNode } from '../PageNode';
+import type { PageNode } from '../../interfaces/page-node';
 import { LsxContext } from '../lsx-context';
 
 import { LsxPage } from './LsxPage';

packages/remark-lsx/src/components/LsxPageList/LsxPage.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import { pathUtils } from '@growi/core';
 import { PagePathLabel, PageListMeta } from '@growi/ui';
 
-import { PageNode } from '../PageNode';
+import type { PageNode } from '../../interfaces/page-node';
 import { LsxContext } from '../lsx-context';
 
 
@@ -19,7 +19,8 @@ export const LsxPage = React.memo((props: Props): JSX.Element => {
     pageNode, lsxContext, depth, basisViewersCount,
   } = props;
 
-  const isExists = pageNode.page !== undefined;
+  const pageId = pageNode.page?._id;
+  const pagePath = pageNode.pagePath;
   const isLinkable = (() => {
     // process depth option
     const optDepth = lsxContext.getOptDepth();
@@ -58,31 +59,38 @@ export const LsxPage = React.memo((props: Props): JSX.Element => {
   }, [basisViewersCount, depth, hasChildren, lsxContext, pageNode.children]);
 
   const iconElement: JSX.Element = useMemo(() => {
+    const isExists = pageId != null;
     return (isExists)
       ? <i className="ti ti-agenda" aria-hidden="true"></i>
       : <i className="ti ti-file lsx-page-not-exist" aria-hidden="true"></i>;
-  }, [isExists]);
+  }, [pageId]);
 
   const pagePathElement: JSX.Element = useMemo(() => {
+    const isExists = pageId != null;
+
     const classNames: string[] = [];
     if (!isExists) {
       classNames.push('lsx-page-not-exist');
     }
 
     // create PagePath element
-    let pagePathNode = <PagePathLabel path={pageNode.pagePath} isLatterOnly additionalClassNames={classNames} />;
+    let pagePathNode = <PagePathLabel path={pagePath} isLatterOnly additionalClassNames={classNames} />;
     if (isLinkable) {
-      pagePathNode = <a className="page-list-link" href={encodeURI(pathUtils.removeTrailingSlash(pageNode.pagePath))}>{pagePathNode}</a>;
+      const href = isExists
+        ? `/${pageId}`
+        : encodeURI(pathUtils.removeTrailingSlash(pagePath));
+
+      pagePathNode = <a className="page-list-link" href={href}>{pagePathNode}</a>;
     }
     return pagePathNode;
-  }, [isExists, isLinkable, pageNode.pagePath]);
+  }, [isLinkable, pageId, pagePath]);
 
   const pageListMetaElement: JSX.Element = useMemo(() => {
-    if (!isExists) {
+    if (pageNode.page == null) {
       return <></>;
     }
     return <PageListMeta page={pageNode.page} basisViewersCount={basisViewersCount} />;
-  }, [basisViewersCount, isExists, pageNode.page]);
+  }, [basisViewersCount, pageNode.page]);
 
   return (
     <li className="page-list-li">

packages/remark-lsx/src/components/PageNode.js

@@ -1,48 +0,0 @@
-export class PageNode {
-
-  constructor(pagePath) {
-    this.pagePath = pagePath;
-    this.children = [];
-
-    this.page = undefined;
-  }
-
-  /**
-   * calculate generations number of decendants
-   *
-   * ex:
-   *  /foo          -2
-   *  /foo/bar      -1
-   *  /foo/bar/buz   0
-   *
-   * @returns generations num of decendants
-   *
-   * @memberOf PageNode
-   */
-  /*
-   * commented out because it became unnecessary -- 2017.05.18 Yuki Takei
-   *
-  getDecendantsGenerationsNum() {
-    if (this.children.length == 0) {
-      return -1;
-    }
-
-    return -1 + Math.min.apply(null, this.children.map((child) => {
-      return child.getDecendantsGenerationsNum();
-    }))
-  }
-  */
-
-  static instanciateFrom(obj) {
-    const pageNode = new PageNode(obj.pagePath);
-    pageNode.page = obj.page;
-
-    // instanciate recursively
-    pageNode.children = obj.children.map((childObj) => {
-      return PageNode.instanciateFrom(childObj);
-    });
-
-    return pageNode;
-  }
-
-}

packages/remark-lsx/src/interfaces/page-node.ts

@@ -0,0 +1,7 @@
+import { IPageHasId } from '@growi/core';
+
+export type PageNode = {
+  pagePath: string,
+  children: PageNode[],
+  page?: IPageHasId,
+}

packages/remark-lsx/src/stores/lsx.tsx

@@ -4,8 +4,8 @@ import { IPage, pathUtils } from '@growi/core';
 import axios from 'axios';
 import useSWR, { SWRResponse } from 'swr';
 
-import { PageNode } from '../components/PageNode';
 import { LsxContext } from '../components/lsx-context';
+import type { PageNode } from '../interfaces/page-node';
 
 function isEquals(path1: string, path2: string) {
   return pathUtils.removeTrailingSlash(path1) === pathUtils.removeTrailingSlash(path2);
@@ -36,7 +36,7 @@ function generatePageNode(pathToNodeMap: Record<string, PageNode>, rootPagePath:
   }
 
   // generate node
-  const node = new PageNode(pagePath);
+  const node = { pagePath, children: [] };
   pathToNodeMap[pagePath] = node;
 
   /*