add auto link

src/Common.js

@@ -1,10 +1,21 @@
 import React, {Component} from 'react';
+
 import TimeAgo from 'react-timeago';
+import Linkify, {linkify} from 'react-linkify';
 import chineseStrings from 'react-timeago/lib/language-strings/zh-CN';
 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('#', {
+    validate: /^(\d{5,6})/,
+    normalize: (match) => {
+        match.url='#'+match.url;
+    },
+});
 
 function pad2(x) {
     return x<10 ? '0'+x : ''+x;
@@ -28,4 +39,12 @@ export function TitleLine(props) {
             <span>{props.text}</span>
         </p>
     )
+}
+
+export function AutoLink(props) {
+    return (
+        <Linkify properties={{target: '_blank'}}>
+            <pre>{props.text.replace(new RegExp(PID_RE_TEXT,'g'),' #$1 ')}</pre>
+        </Linkify>
+    )
 }

src/Flows.css

@@ -35,7 +35,7 @@
 }
 
 .left-container .flow-item-row {
-    cursor: pointer;
+    cursor: default;
     transition: margin-left 200ms ease-out;
 }
 .left-container .flow-item-row:hover {

src/Flows.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Time, TitleLine} from './Common.js';
+import {Time, TitleLine, AutoLink} from './Common.js';
 import './Flows.css';
 import LazyLoad from 'react-lazyload';
 
@@ -14,7 +14,7 @@ function Reply(props) {
                 <span className="box-id">#{props.info.cid}</span>&nbsp;
                 <Time stamp={props.info.timestamp} />
             </div>
-            <pre>{props.info.text}</pre>
+            <AutoLink text={props.info.text} />
         </div>
     );
 }
@@ -36,7 +36,7 @@ function FlowItem(props) {
                 <span className="box-id">#{props.info.pid}</span>&nbsp;
                 <Time stamp={props.info.timestamp} />
             </div>
-            <pre>{props.info.text}</pre>
+            <AutoLink text={props.info.text} />
             {props.info.type==='image' ? <img src={IMAGE_BASE+props.info.url} /> : null}
             {props.info.type==='audio' ? <audio src={AUDIO_BASE+props.info.url} /> : null}
         </div>
@@ -79,13 +79,16 @@ class FlowItemRow extends Component {
     render() {
         // props.do_show_details
         return (
-            <div className="flow-item-row" onClick={()=>{this.props.callback(
-                '帖子详情',
-                <div className="flow-item-row sidebar-flow-item">
-                    <FlowItem info={this.info} />
-                    {this.state.replies.map((reply)=><Reply info={reply} key={reply.cid} />)}
-                </div>
-            )}}>
+            <div className="flow-item-row" onClick={(event)=>{
+                if(event.target.tagName.toLowerCase()!=='a')
+                    this.props.callback(
+                        '帖子详情',
+                        <div className="flow-item-row sidebar-flow-item">
+                            <FlowItem info={this.info} />
+                            {this.state.replies.map((reply)=><Reply info={reply} key={reply.cid} />)}
+                        </div>
+                    );
+            }}>
                 <FlowItem info={this.info} />
                 {!!this.state.reply_loading && <ReplyPlaceholder count={this.info.reply} />}
                 {this.state.replies.map((reply)=><Reply info={reply} key={reply.cid} />)}
@@ -121,7 +124,6 @@ export class Flow extends Component {
             chunks: [],
             loading: false,
         };
-        setTimeout(this.load_page.bind(this,1), 0);
     }
 
     load_page(page) {
@@ -212,6 +214,7 @@ export class Flow extends Component {
     }
 
     componentDidMount() {
+        this.load_page(1);
         window.addEventListener('scroll',this.on_scroll.bind(this));
         window.addEventListener('resize',this.on_scroll.bind(this));
     }

src/Title.css

@@ -10,6 +10,10 @@
     margin-bottom: 1em;
 }
 
+.title-bar a {
+    padding: 0 .5em;
+}
+
 .title {
     font-size: 2em;
     line-height: 3em;

src/Title.js

@@ -42,6 +42,16 @@ class ControlBar extends Component {
         this.set_search_text=props.set_search_text;
     }
 
+    componentDidMount() {
+        if(window.location.hash) {
+            const text=window.location.hash.substr(1);
+            this.setState({
+                search_text: text,
+            });
+            this.set_search_text(text);
+        }
+    }
+
     on_change(event) {
         this.setState({
             search_text: event.target.value,

src/index.css

@@ -22,7 +22,6 @@ a {
     text-decoration: none;
     color: #00c;
     cursor: pointer;
-    padding: 0 .5em;
 }
 
 input {