refactor model

* LsxContext, LsxCache

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

@@ -14,8 +14,19 @@ export class Lsx extends React.Component {
   }
 
   componentDidMount() {
-    const fromPagePath = this.props.fromPagePath;
-    const args = this.props.lsxArgs;
+    if (this.props.lsxCache) {
+      this.setState({
+        isLoading: false,
+        html: this.props.lsxCache.html,
+        isError: this.props.lsxCache.isError,
+        errorMessage: this.props.lsxCache.errorMessage,
+      });
+      return;
+    }
+
+    const lsxContext = this.props.lsxContext;
+    const fromPagePath = lsxContext.fromPagePath;
+    const args = lsxContext.lsxArgs;
 
     this.props.crowi.apiGet('/plugins/lsx', {fromPagePath, args})
       .then((res) => {
@@ -40,19 +51,21 @@ export class Lsx extends React.Component {
   }
 
   render() {
+    const lsxContext = this.props.lsxContext;
+
     if (this.state.isLoading) {
       return (
         <div>
           <i className="fa fa-spinner fa-pulse fa-fw"></i>
-          <span className="lsx-blink">{this.props.tagExpression}</span>
+          <span className="lsx-blink">{lsxContext.tagExpression}</span>
         </div>
       );
     }
-    if (this.isError) {
+    if (this.state.isError) {
       return (
         <div>
           <i className="fa fa-exclamation-triangle fa-fw"></i>
-          {this.props.tagExpression} (-> <small>{this.state.message})</small>
+          {lsxContext.tagExpression} (-> <small>{this.state.message})</small>
         </div>
       )
     }
@@ -65,8 +78,7 @@ export class Lsx extends React.Component {
 
 Lsx.propTypes = {
   crowi: React.PropTypes.object.isRequired,
-  currentPagePath: React.PropTypes.string,
-  tagExpression: React.PropTypes.string.isRequired,
-  fromPagePath: React.PropTypes.string.isRequired,
-  lsxArgs: React.PropTypes.string.isRequired,
+
+  lsxContext: React.PropTypes.instanceOf(LsxContext).isRequired,
+  lsxCache: React.PropTypes.instanceOf(LsxCache),
 };

packages/growi-plugin-lsx/src/resource/js/util/Interceptor/LsxPostRenderInterceptor.js

@@ -34,33 +34,40 @@ export class LsxPostRenderInterceptor extends BasicInterceptor {
   process(contextName, ...args) {
     const context = Object.assign(args[0]);   // clone
 
-    let contexts = JSON.parse(sessionStorage.getItem('lsx-loading-contexts')) || {};
+    let lsxCacheMap = JSON.parse(sessionStorage.getItem('lsx-cache')) || {};
 
-    let keysToBeRemoved = [];
-
-    // forEach keys of contexts
+    // forEach keys of lsxContextMap
     Object.keys(context.lsxContextMap).forEach((renderId) => {
       const elem = document.getElementById(renderId);
 
       if (elem) {
-        // get LsxContext
-        const lsxContext = context.lsxContextMap[renderId];
-        // render
-        this.renderReactDOM(lsxContext, elem);
+        // get LsxContext instance from context
+        let lsxContext = context.lsxContextMap[renderId];
+
+        // get cache container obj from sessionStorage
+        const cacheKey = lsxContext.generateCacheKey();
+
+        // check cache exists
+        if (lsxCacheMap[cacheKey]) {
+          // render with cache
+          this.renderReactDOM(lsxContext, lsxCacheMap[cacheKey], elem);
+        }
+        else {
+          // render without cache
+          this.renderReactDOM(lsxContext, false, elem);
+        }
+
       }
     });
 
     return Promise.resolve();
   }
 
-  renderReactDOM(lsxContext, elem) {
+  renderReactDOM(lsxContext, lsxCache, elem) {
     ReactDOM.render(
-      <Lsx crowi={this.crowi}
-          currentPagePath={lsxContext.currentPagePath}
-          tagExpression={lsxContext.tagExpression}
-          fromPagePath={lsxContext.fromPagePath}
-          lsxArgs={lsxContext.lsxArgs} />,
+      <Lsx crowi={this.crowi} lsxContext={lsxContext} lsxCache={lsxCache} />,
       elem
     );
   }
+
 }

packages/growi-plugin-lsx/src/resource/js/util/Interceptor/LsxPreRenderInterceptor.js

@@ -55,17 +55,6 @@ export class LsxPreRenderInterceptor extends BasicInterceptor {
       lsxContext.fromPagePath = fromPagePath;
       lsxContext.lsxArgs = lsxArgs;
 
-      // get cache container obj from sessionStorage
-      // let lsxCache = JSON.parse(sessionStorage.getItem('lsx-cache'));
-      // if (lsxCache) {
-      //   lsxCache = Object.create(LsxCache, lsxCache);
-      //   const cache = lsxCache.getItem(tagExpression);
-      //   // check cache exists
-      //   if (cache) {
-      //     return cache;
-      //   }
-      // }
-
       const renderId = 'lsx-' + this.createRandomStr(8);
       lsxContext.renderId = renderId;
 

packages/growi-plugin-lsx/src/resource/js/util/LsxCache.js

@@ -0,0 +1,5 @@
+export class LsxCache {
+  isError;
+  errorMessage;
+  html;
+}

packages/growi-plugin-lsx/src/resource/js/util/LsxCacheManager.js

@@ -0,0 +1,7 @@
+class LsxCacheManager {
+
+  static retrieveFromSessionStorage() {
+    return JSON.parse(sessionStorage.getItem('lsx-cache')) || {};
+  }
+
+}

packages/growi-plugin-lsx/src/resource/js/util/LsxContext.js

@@ -1,19 +1,11 @@
 export class LsxContext {
 
   renderId;
-  isCache;
+
   currentPagePath;
   tagExpression;
   fromPagePath;
   lsxArgs;
-  html;
-
-  static fronJson(json) {
-    let context = Object.create(LsxContext, JSON.parse(json));
-    context.isCache = true;
-
-    return contest;
-  }
 
   generateCacheKey() {
     return `${this.fromPagePath}__${this.lsxArgs}`;