add color bar and better pid recognition

src/Common.js

@@ -8,14 +8,9 @@ import buildFormatter from 'react-timeago/lib/formatters/buildFormatter';
 import './Common.css';
 
 const chinese_format=buildFormatter(chineseStrings);
-const PID_RE_TEXT=/(?:^|[^\d])(\d{5,6})(?!\d)/g;
 
-linkify.add('#', {
+const PID_RE=/(^|[^\d])([1-9]\d{4,5})(?!\d)/g;
-    validate: /^(\d{5,6})/,
+const NICKNAME_RE=/((?:(?:Angry|Baby|Crazy|Diligent|Excited|Fat|Greedy|Hungry|Interesting|Japanese|Kind|Little|Magic|Naïve|Old|Powerful|Quiet|Rich|Superman|THU|Undefined|Valuable|Wifeless|Xiangbuchulai|Young|Zombie)\s)?(?:Alice|Bob|Carol|Dave|Eve|Francis|Grace|Hans|Isabella|Jason|Kate|Louis|Margaret|Nathan|Olivia|Paul|Queen|Richard|Susan|Thomas|Uma|Vivian|Winnie|Xander|Yasmine|Zach)|You Win|洞主)/gi;
-    normalize: (match) => {
-        match.url='#'+match.url;
-    },
-});
 
 function pad2(x) {
     return x<10 ? '0'+x : ''+x;
@@ -41,10 +36,19 @@ export function TitleLine(props) {
     )
 }
 
-export function AutoLink(props) {
+export function HighlightedText(props) {
+    let parts=[].concat.apply([], props.text.split(PID_RE).map((p)=>p.split(NICKNAME_RE)));
     return (
         <Linkify properties={{target: '_blank'}}>
-            <pre>{props.text.replace(new RegExp(PID_RE_TEXT,'g'),' #$1 ')}</pre>
+            <pre>
+                {parts.map((p,idx)=>(
+                    <span key={idx}>{
+                        PID_RE.test(p) ? <a href={'##'+p} target="_blank">{p}</a> :
+                        NICKNAME_RE.test(p) ? <span style={{backgroundColor: props.color_picker.get(p)}}>{p}</span> :
+                        p
+                    }</span>
+                ))}
+            </pre>
         </Linkify>
     )
 }

src/Flows.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {ColorPicker} from './color_picker';
-import {Time, TitleLine, AutoLink} from './Common.js';
+import {Time, TitleLine, HighlightedText} from './Common.js';
 import './Flows.css';
 import LazyLoad from 'react-lazyload';
 import {AudioWidget} from './AudioWidget.js';
@@ -22,7 +22,7 @@ function Reply(props) {
                 <span className="box-id">#{props.info.cid}</span>&nbsp;
                 <Time stamp={props.info.timestamp} />
             </div>
-            <AutoLink text={props.info.text} />
+            <HighlightedText text={props.info.text} color_picker={props.color_picker} />
         </div>
     );
 }
@@ -36,7 +36,7 @@ function FlowItem(props) {
                 <span className="box-id">#{props.info.pid}</span>&nbsp;
                 <Time stamp={props.info.timestamp} />
             </div>
-            <AutoLink text={props.info.text} />
+            <HighlightedText text={props.info.text} />
             {props.info.type==='image' ? <img src={IMAGE_BASE+props.info.url} /> : null}
             {props.info.type==='audio' ? <AudioWidget src={AUDIO_BASE+props.info.url} /> : null}
         </div>
@@ -49,38 +49,42 @@ class FlowItemRow extends Component {
         this.state={
             replies: [],
             reply_status: 'done',
+            info: props.info,
         };
-        this.info=props.info;
         this.color_picker=new ColorPicker();
     }
 
     componentDidMount() {
-        if(parseInt(this.info.reply,10)) {
+        if(parseInt(this.state.info.reply,10)) {
             this.load_replies();
         }
     }
 
     load_replies(callback) {
-        console.log('fetching reply',this.info.pid);
+        console.log('fetching reply',this.state.info.pid);
         this.setState({
             reply_status: 'loading',
         });
-        fetch(API_BASE+'/api.php?action=getcomment&pid='+this.info.pid)
+        fetch(API_BASE+'/api.php?action=getcomment&pid='+this.state.info.pid)
             .then((res)=>res.json())
             .then((json)=>{
                 if(json.code!==0)
                     throw new Error(json.code);
-                this.setState({
+                const replies=json.data
-                    replies: json.data
+                    .sort((a,b)=>{
-                        .sort((a,b)=>{
+                        return parseInt(a.timestamp,10)-parseInt(b.timestamp,10);
-                            return parseInt(a.timestamp,10)-parseInt(b.timestamp,10);
+                    })
-                        })
+                    .map((info)=>{
-                        .map((info)=>{
+                        info._display_color=this.color_picker.get(info.name);
-                            info._display_color=info.islz ? null : this.color_picker.get(info.name);
+                        return info;
-                            return info;
+                    });
-                        }),
+                this.setState((prev,props)=>({
+                    replies: replies,
+                    info: Object.assign({}, prev.info, {
+                        reply: ''+replies.length,
+                    }),
                     reply_status: 'done',
-                },callback);
+                }),callback);
             })
             .catch((e)=>{
                 console.trace(e);
@@ -101,8 +105,10 @@ class FlowItemRow extends Component {
                         this.load_replies(this.show_sidebar);
                     }}>更新回复</a>
                 </div>
-                <FlowItem info={this.info} />
+                <FlowItem info={this.state.info} />
-                {this.state.replies.map((reply)=><Reply info={reply} key={reply.cid} />)}
+                {this.state.replies.map((reply)=>(
+                    <Reply key={reply.cid} info={reply} color_picker={this.color_picker} />
+                ))}
             </div>
         );
     }
@@ -114,13 +120,15 @@ class FlowItemRow extends Component {
                 if(!CLICKABLE_TAGS[event.target.tagName.toLowerCase()])
                     this.show_sidebar();
             }}>
-                <FlowItem info={this.info} />
+                <FlowItem info={this.state.info} />
                 <div className="flow-reply-row">
                     {this.state.reply_status==='loading' && <div className="box box-tip">加载中</div>}
                     {this.state.reply_status==='failed' &&
                         <div className="box box-tip"><a onClick={()=>{this.load_replies()}}>重新加载</a></div>
                     }
-                    {this.state.replies.slice(0,PREVIEW_REPLY_COUNT).map((reply)=><Reply info={reply} key={reply.cid} />)}
+                    {this.state.replies.slice(0,PREVIEW_REPLY_COUNT).map((reply)=>(
+                        <Reply key={reply.cid} info={reply} color_picker={this.color_picker} />
+                    ))}
                     {this.state.replies.length>PREVIEW_REPLY_COUNT &&
                         <div className="box box-tip">还有 {this.state.replies.length-PREVIEW_REPLY_COUNT} 条</div>
                     }

src/color_picker.js

@@ -9,6 +9,9 @@ export class ColorPicker {
     }
 
     get(name) {
+        name=name.toLowerCase();
+        if(name==='洞主')
+            return 'hsl(0,0%,97%)';
         if(!this.names[name]) {
             this.current_h+=golden_ratio_conjugate;
             this.current_h%=1;