refactor api

src/Common.js

@@ -46,7 +46,7 @@ export class HighlightedText extends PureComponent {
                 <pre>
                     {parts.map((p,idx)=>(
                         <span key={idx}>{
-                            PID_RE.test(p) ? <a href={'##'+p} target="_blank">{p}</a> :
+                            PID_RE.test(p) ? <a onClick={()=>{this.props.show_pid(p)}}>{p}</a> :
                             NICKNAME_RE.test(p) ? <span style={{backgroundColor: this.props.color_picker.get(p)}}>{p}</span> :
                             p
                         }</span>

src/Flows.css

@@ -93,7 +93,7 @@
     cursor: default;
 }
 
-.flow-item-row:hover::before {
+.left-container .flow-item-row:hover::before {
     content: '>>';
     position: absolute;
     left: 10px;

src/Flows.js

@@ -6,7 +6,8 @@ import LazyLoad from 'react-lazyload';
 import {AudioWidget} from './AudioWidget';
 import {TokenCtx, ReplyForm} from './UserAction';
 
-import {API_BASE} from './Common';
+import {API} from './flows_api';
+
 const IMAGE_BASE='http://www.pkuhelper.com/services/pkuhole/images/';
 const AUDIO_BASE='/audio_proxy/';
 
@@ -80,16 +81,8 @@ class FlowItemRow extends PureComponent {
         this.setState({
             reply_status: 'loading',
         });
-        const token_param=this.props.token ? '&token='+this.props.token : '';
+        API.load_replies(this.state.info.pid,this.props.token)
-        fetch(
-            API_BASE+'/api.php?action=getcomment'+
-            '&pid='+this.state.info.pid+
-            token_param
-        )
-            .then((res)=>res.json())
             .then((json)=>{
-                if(json.code!==0)
-                    throw new Error(json);
                 const replies=json.data
                     .sort((a,b)=>{
                         return parseInt(a.timestamp,10)-parseInt(b.timestamp,10);
@@ -117,28 +110,9 @@ class FlowItemRow extends PureComponent {
     }
 
     toggle_attention(callback) {
-        let data=new URLSearchParams();
         const next_attention=!this.state.attention;
-        data.append('token', this.props.token);
+        API.set_attention(this.state.info.pid,next_attention,this.props.token)
-        data.append('pid', this.state.info.pid);
-        data.append('switch', next_attention ? '1' : '0');
-        fetch(API_BASE+'/api.php?action=attention', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/x-www-form-urlencoded',
-            },
-            body: data,
-        })
-            .then((res)=>res.json())
             .then((json)=>{
-                if(json.code!==0) {
-                    if(json.msg && json.msg==='已经关注过辣') {}
-                    else {
-                        if(json.msg) alert(json.msg);
-                        throw new Error(json);
-                    }
-                }
-
                 this.setState({
                     attention: next_attention,
                 }, callback);
@@ -252,22 +226,13 @@ export class Flow extends PureComponent {
             }));
         };
 
-        const token_param=this.props.token ? '&token='+this.props.token : '';
-
         if(page>this.state.loaded_pages+1)
             throw new Error('bad page');
         if(page===this.state.loaded_pages+1) {
             console.log('fetching page',page);
             if(this.state.mode==='list') {
-                fetch(
+                API.get_list(page,this.props.token)
-                    API_BASE+'/api.php?action=getlist'+
-                    '&p='+page+
-                    token_param
-                )
-                    .then((res)=>res.json())
                     .then((json)=>{
-                        if(json.code!==0)
-                            throw new Error(json);
                         json.data.forEach((x)=>{
                             if(parseInt(x.pid,10)>(parseInt(localStorage['_LATEST_POST_ID'],10)||0))
                                 localStorage['_LATEST_POST_ID']=x.pid;
@@ -285,16 +250,8 @@ export class Flow extends PureComponent {
                     })
                     .catch(failed);
             } else if(this.state.mode==='search') {
-                fetch(
+                API.get_search(SEARCH_PAGESIZE*page,this.state.search_param,this.props.token)
-                    API_BASE+'/api.php?action=search'+
-                    '&pagesize='+SEARCH_PAGESIZE*page+
-                    '&keywords='+encodeURIComponent(this.state.search_param)+
-                    token_param
-                )
-                    .then((res)=>res.json())
                     .then((json)=>{
-                        if(json.code!==0)
-                            throw new Error(json);
                         const finished=json.data.length<SEARCH_PAGESIZE;
                         this.setState({
                             chunks: [{
@@ -308,15 +265,8 @@ export class Flow extends PureComponent {
                     .catch(failed);
             } else if(this.state.mode==='single') {
                 const pid=parseInt(this.state.search_param.substr(1),10);
-                fetch(
+                API.get_single(pid,this.props.token)
-                    API_BASE+'/api.php?action=getone'+
-                    '&pid='+pid+
-                    token_param
-                )
-                    .then((res)=>res.json())
                     .then((json)=>{
-                        if(json.code!==0)
-                            throw new Error(json);
                         this.setState({
                             chunks: [{
                                 title: 'PID = '+pid,
@@ -328,14 +278,8 @@ export class Flow extends PureComponent {
                     })
                     .catch(failed);
             } else if(this.state.mode==='attention') {
-                fetch(
+                API.get_attention(this.props.token)
-                    API_BASE+'/api.php?action=getattention'+
-                    token_param
-                )
-                    .then((res)=>res.json())
                     .then((json)=>{
-                        if(json.code!==0)
-                            throw new Error(json);
                         this.setState({
                             chunks: [{
                                 title: 'Attention List',

src/Sidebar.css

@@ -2,7 +2,7 @@
     opacity: 0;
     background-color: black;
     pointer-events: none;
-    transition: opacity 200ms ease-out;
+    transition: opacity 150ms ease-out;
     position: fixed;
     left: 0;
     top: 0;
@@ -16,7 +16,7 @@
 }
 
 .sidebar {
-    transition: left 200ms ease-out;
+    transition: left 150ms ease-out;
     position: fixed;
     left: 100%;
     top: 0;

src/flows_api.js

@@ -0,0 +1,102 @@
+import {API_BASE} from './Common';
+
+function token_param(token) {
+    return token ? ('&token='+token) : '';
+}
+
+export const API={
+    load_replies: (pid,token)=>{
+        return fetch(
+            API_BASE+'/api.php?action=getcomment'+
+            '&pid='+pid+
+            token_param(token)
+        )
+            .then((res)=>res.json())
+            .then((json)=>{
+                if(json.code!==0)
+                    throw new Error(json);
+                return json;
+            });
+    },
+
+    set_attention: (pid,attention,token)=>{
+        let data=new URLSearchParams();
+        data.append('token',token);
+        data.append('pid',pid);
+        data.append('switch',attention ? '1' : '0');
+        return fetch(API_BASE+'/api.php?action=attention', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+            },
+            body: data,
+        })
+            .then((res)=>res.json())
+            .then((json)=>{
+                if(json.code!==0) {
+                    if(json.msg && json.msg==='已经关注过辣') {}
+                    else {
+                        if(json.msg) alert(json.msg);
+                        throw new Error(json);
+                    }
+                }
+                return json;
+            });
+    },
+
+    get_list: (page,token)=>{
+        return fetch(
+            API_BASE+'/api.php?action=getlist'+
+            '&p='+page+
+            token_param(token)
+        )
+            .then((res)=>res.json())
+            .then((json)=>{
+                if(json.code!==0)
+                    throw new Error(json);
+                return json;
+            });
+    },
+
+    get_search: (pagesize,keyword,token)=>{
+        return fetch(
+            API_BASE+'/api.php?action=search'+
+            '&pagesize='+pagesize+
+            '&keywords='+encodeURIComponent(keyword)+
+            token_param(token)
+        )
+            .then((res)=>res.json())
+            .then((json)=>{
+                if(json.code!==0)
+                    throw new Error(json);
+                return json;
+            });
+    },
+
+    get_single: (pid,token)=>{
+        return fetch(
+            API_BASE+'/api.php?action=getone'+
+            '&pid='+pid+
+            token_param(token)
+        )
+            .then((res)=>res.json())
+            .then((json)=>{
+                if(json.code!==0)
+                    throw new Error(json);
+                return json;
+            });
+    },
+
+    get_attention: (token)=>{
+        return fetch(
+            API_BASE+'/api.php?action=getattention'+
+            token_param(token)
+        )
+            .then((res)=>res.json())
+            .then((json)=>{
+                if(json.code!==0)
+                    throw new Error(json);
+                return json;
+            });
+    }
+};