Merge pull request #6000 from weseek/fix/too-many-footstamp-icons

fix: Too many footstamps icons are shown by lsx output 3

packages/plugin-lsx/src/client/js/components/Lsx.jsx

@@ -25,13 +25,14 @@ export class Lsx extends React.Component {
       isError: false,
       isCacheExists: false,
       nodeTree: undefined,
+      basisViewersCount: undefined,
       errorMessage: '',
     };
 
     this.tagCacheManager = TagCacheManagerFactory.getInstance();
   }
 
-  async componentWillMount() {
+  async componentDidMount() {
     const { lsxContext, forceToFetchData } = this.props;
 
     // get state object cache
@@ -67,9 +68,9 @@ export class Lsx extends React.Component {
       });
 
       if (res.data.ok) {
-        lsxContext.toppageViewersCount = res.data.toppageViewersCount;
+        const basisViewersCount = res.data.toppageViewersCount;
         const nodeTree = this.generatePageNodeTree(pagePath, res.data.pages);
-        this.setState({ nodeTree });
+        this.setState({ nodeTree, basisViewersCount });
       }
     }
     catch (error) {
@@ -224,7 +225,7 @@ export class Lsx extends React.Component {
           </div>
         ) }
         { nodeTree && (
-          <LsxListView nodeTree={this.state.nodeTree} lsxContext={this.props.lsxContext} />
+          <LsxListView nodeTree={this.state.nodeTree} lsxContext={this.props.lsxContext} basisViewersCount={this.state.basisViewersCount} />
         ) }
       </div>
     );

packages/plugin-lsx/src/client/js/components/LsxPageList/LsxListView.jsx

@@ -1,6 +1,7 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
+import PropTypes from 'prop-types';
+
 import { LsxContext } from '../../util/LsxContext';
 import { PageNode } from '../PageNode';
 
@@ -16,6 +17,7 @@ export class LsxListView extends React.Component {
           depth={1}
           pageNode={pageNode}
           lsxContext={this.props.lsxContext}
+          basisViewersCount={this.props.basisViewersCount}
         />
       );
     });
@@ -46,4 +48,5 @@ export class LsxListView extends React.Component {
 LsxListView.propTypes = {
   nodeTree: PropTypes.arrayOf(PropTypes.instanceOf(PageNode)).isRequired,
   lsxContext: PropTypes.instanceOf(LsxContext).isRequired,
+  basisViewersCount: PropTypes.number,
 };

packages/plugin-lsx/src/client/js/components/LsxPageList/LsxPage.jsx

@@ -61,6 +61,7 @@ export class LsxPage extends React.Component {
             depth={this.props.depth + 1}
             pageNode={pageNode}
             lsxContext={this.props.lsxContext}
+            basisViewersCount={this.props.basisViewersCount}
           />
         );
       });
@@ -78,8 +79,7 @@ export class LsxPage extends React.Component {
   }
 
   render() {
-    const pageNode = this.props.pageNode;
-    const { toppageViewersCount } = this.props.lsxContext;
+    const { pageNode, basisViewersCount } = this.props;
 
     // create PagePath element
     let pagePathNode = <PagePathWrapper pagePath={pageNode.pagePath} isExists={this.state.isExists} />;
@@ -88,7 +88,7 @@ export class LsxPage extends React.Component {
     }
 
     // create PageListMeta element
-    const pageListMeta = (this.state.isExists) ? <PageListMeta page={pageNode.page} basisViewersCount={toppageViewersCount} /> : '';
+    const pageListMeta = (this.state.isExists) ? <PageListMeta page={pageNode.page} basisViewersCount={basisViewersCount} /> : '';
 
     return (
       <li className="page-list-li">
@@ -105,4 +105,5 @@ LsxPage.propTypes = {
   pageNode: PropTypes.instanceOf(PageNode).isRequired,
   lsxContext: PropTypes.instanceOf(LsxContext).isRequired,
   depth: PropTypes.number,
+  basisViewersCount: PropTypes.number,
 };