使用getlist传输大部分评论，大幅减少网络请求数量并保证attention始终是最新的

src/Flows.js

@@ -23,6 +23,8 @@ import { TokenCtx, ReplyForm } from './UserAction';
 
 import { API } from './flows_api';
 
+import { cache } from './cache';
+
 const IMAGE_BASE = 'https://thimg.yecdn.com/';
 const IMAGE_BAK_BASE = 'https://img2.thuhole.com/';
 
@@ -639,7 +641,8 @@ class FlowItemRow extends PureComponent {
   }
 
   componentDidMount() {
-    if (parseInt(this.state.info.reply, 10)) {
+    // cache from getlist, so always to this to update attention
+    if (true || parseInt(this.state.info.reply, 10)) {
       this.load_replies(null, /*update_count=*/ false);
     }
   }
@@ -649,7 +652,7 @@ class FlowItemRow extends PureComponent {
   // }
 
   load_replies(callback, update_count = true) {
-    console.log('fetching reply', this.state.info.pid);
+    //console.log('fetching reply', this.state.info.pid);
     this.setState({
       reply_status: 'loading',
       reply_error: null,
@@ -661,6 +664,7 @@ class FlowItemRow extends PureComponent {
       parseInt(this.state.info.reply),
     )
       .then(({ data: json, cached }) => {
+        //console.log('>> update', json, json.attention);
         this.setState(
           (prev, props) => ({
             replies: json.data,
@@ -1032,7 +1036,8 @@ export class Flow extends PureComponent {
 
     if (page > this.state.loaded_pages + 1) throw new Error('bad page');
     if (page === this.state.loaded_pages + 1) {
-      console.log('fetching page', page);
+      //console.log('fetching page', page);
+      cache();
       if (this.state.mode === 'list') {
         API.get_list(page, this.props.token)
           .then((json) => {
@@ -1041,6 +1046,16 @@ export class Flow extends PureComponent {
               let max_id = -1;
               json.data.forEach((x) => {
                 if (parseInt(x.pid, 10) > max_id) max_id = parseInt(x.pid, 10);
+                if (x.comments) {
+                  let comment_json = {
+                    'code': 0,
+                    'attention': x.attention,
+                    'data': x.comments
+                  }
+                  //console.log('My cache', comment_json, x.pid, x.reply)
+                  cache().put(x.pid, parseInt(x.reply, 10), comment_json);
+                }
+                
               });
               localStorage['_LATEST_POST_ID'] = '' + max_id;
             }
@@ -1087,6 +1102,17 @@ export class Flow extends PureComponent {
         const pid = parseInt(this.state.search_param.substr(1), 10);
         API.get_single(pid, this.props.token)
           .then((json) => {
+            let x = json.data;
+            if (x.comments) {
+              let comment_json = {
+                'code': 0,
+                'attention': x.attention,
+                'data': x.comments
+              }
+              //console.log('My cache', comment_json, x.pid, x.reply)
+              cache().put(x.pid, parseInt(x.reply, 10), comment_json);
+            }
+
             this.setState({
               chunks: {
                 title: 'PID = ' + pid,

src/cache.js

@@ -75,7 +75,7 @@ class Cache {
           resolve(null);
         } else if (target_version === res.version) {
           // hit
-          console.log('comment cache hit', pid);
+          //console.log('comment cache hit', pid);
           res.last_access = +new Date();
           store.put(res);
           let data = this.decrypt(pid, res.data_str);
@@ -114,7 +114,7 @@ class Cache {
         data_str: this.encrypt(pid, data),
         last_access: +new Date(),
       });
-      console.log('comment cache put', pid);
+      //console.log('comment cache put', pid);
       if (++this.added_items_since_maintenance === MAINTENANCE_STEP)
         setTimeout(this.maintenance.bind(this), 1);
     });

src/flows_api.js

@@ -38,6 +38,7 @@ export const API = {
     );
     let json = await handle_response(response);
     // Why delete then put ??
+    console.log('Put cache', json, pid, cache_version);
     cache().put(pid, cache_version, json);
     json.data = parse_replies(json.data, color_picker);
     return json;
@@ -46,10 +47,13 @@ export const API = {
   load_replies_with_cache: async (pid, token, color_picker, cache_version) => {
     pid = parseInt(pid);
     let json = await cache().get(pid, cache_version);
+    //console.log('Get Cache', json, pid, cache_version);
     if (json) {
+      //console.log('cache.data', json.data);
       json.data = parse_replies(json.data, color_picker);
       return { data: json, cached: true };
     } else {
+      //console.log('Cache fail, new fetch');
       json = await API.load_replies(pid, token, color_picker, cache_version);
       return { data: json, cached: !json };
     }