GC-1325: impl RevisionLoader and RevisionRenderer

src/client/js/components/Page/RevisionLoader.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import RevisionRenderer from './RevisionRenderer';
+
+export default class RevisionLoader extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.logger = require('@alias/logger')('growi:Page:RevisionLoader');
+
+    this.state = {
+      markdown: '',
+      error: null,
+    };
+
+    this.loadData = this.loadData.bind(this);
+  }
+
+  componentWillMount() {
+    this.loadData();
+  }
+
+  loadData() {
+    const requestData = {
+      page_id: this.props.pageId,
+      revision_id: this.props.revisionId,
+    };
+
+    // load data with REST API
+    this.props.crowi.apiGet('/revisions.get', requestData)
+      .then(res => {
+        if (!res.ok) {
+          throw new Error(res.error);
+        }
+
+        this.setState({
+          markdown: res.revision.body,
+          error: null,
+        });
+      })
+      .catch(err => {
+        this.setState({ error: err });
+      });
+  }
+
+  render() {
+    let markdown = this.state.markdown;
+    if (this.state.error != null) {
+      markdown = `<span class="text-muted"><em>${this.state.error}</em></span>`;
+    }
+
+    return (
+      <RevisionRenderer
+          crowi={this.props.crowi} crowiRenderer={this.props.crowiRenderer}
+          pagePath={this.props.pagePath}
+          markdown={markdown}
+          highlightKeywords={this.props.highlightKeywords}
+      />
+    );
+  }
+}
+
+RevisionLoader.propTypes = {
+  crowi: PropTypes.object.isRequired,
+  crowiRenderer: PropTypes.object.isRequired,
+  pageId: PropTypes.string.isRequired,
+  pagePath: PropTypes.string.isRequired,
+  revisionId: PropTypes.string.isRequired,
+  lazy: PropTypes.bool.isRequired,
+  highlightKeywords: PropTypes.string,
+};

src/client/js/components/Page/RevisionRenderer.jsx

@@ -10,15 +10,16 @@ export default class RevisionRenderer extends React.Component {
 
     this.state = {
       html: '',
-      markdown: '',
     };
 
     this.renderHtml = this.renderHtml.bind(this);
     this.getHighlightedBody = this.getHighlightedBody.bind(this);
+
+    this.setMarkdown(this.props.markdown);
   }
 
-  componentWillMount() {
-    this.renderHtml(this.props.markdown, this.props.highlightKeywords);
+  componentWillReceiveProps(nextProps) {
+    this.renderHtml(nextProps.markdown, this.props.highlightKeywords);
   }
 
   setMarkdown(markdown) {
@@ -50,7 +51,6 @@ export default class RevisionRenderer extends React.Component {
   renderHtml(markdown, highlightKeywords) {
     let context = {
       markdown,
-      dom: this.revisionBodyElement,
       currentPagePath: this.props.pagePath,
     };
 
@@ -67,7 +67,7 @@ export default class RevisionRenderer extends React.Component {
       })
       .then(() => interceptorManager.process('prePostProcess', context))
       .then(() => {
-        context.parsedHTML = crowiRenderer.postProcess(context.parsedHTML, context.dom);
+        context.parsedHTML = crowiRenderer.postProcess(context.parsedHTML);
 
         // highlight
         if (highlightKeywords != null) {
@@ -91,7 +91,6 @@ export default class RevisionRenderer extends React.Component {
     return (
       <RevisionBody
           html={this.state.html}
-          inputRef={el => this.revisionBodyElement = el}
           isMathJaxEnabled={isMathJaxEnabled}
           renderMathJaxOnInit={true}
       />

src/client/js/components/SearchPage/SearchResultList.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import GrowiRenderer from '../../util/GrowiRenderer';
 
-import RevisionRenderer from '../Page/RevisionRenderer';
+import RevisionLoader from '../Page/RevisionLoader';
 
 export default class SearchResultList extends React.Component {
 
@@ -15,15 +15,16 @@ export default class SearchResultList extends React.Component {
 
   render() {
     const resultList = this.props.pages.map((page) => {
-      const pageBody = page.revision.body;
       return (
         <div id={page._id} key={page._id} className="search-result-page">
           <h2><a href={page.path}>{page.path}</a></h2>
-          <RevisionRenderer
+          <RevisionLoader
             crowi={this.props.crowi}
             crowiRenderer={this.growiRenderer}
-            markdown={pageBody}
+            pageId={page._id}
             pagePath={page.path}
+            revisionId={page.revision}
+            lazy={true}
             highlightKeywords={this.props.searchingKeyword}
           />
         </div>