add reply form

src/Common.js

@@ -9,6 +9,8 @@ import './Common.css';
 
 const chinese_format=buildFormatter(chineseStrings);
 
+export const API_BASE=window.location.protocol==='https:' ? '/api_proxy' : 'http://www.pkuhelper.com/services/pkuhole';
+
 const PID_RE=/(^|[^\d])([1-9]\d{4,5})(?!\d)/g;
 const NICKNAME_RE=/(^|[^A-Za-z])((?:(?: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|洞主)(?![A-Za-z])/gi;
 
@@ -54,3 +56,42 @@ export class HighlightedText extends PureComponent {
         )
     }
 }
+
+window.TEXTAREA_BACKUP={};
+
+export class SafeTextarea extends Component {
+    constructor(props) {
+        super(props);
+        this.state={
+            text: window.TEXTAREA_BACKUP[props.id]||'',
+        };
+        this.on_change_bound=this.on_change.bind(this);
+        this.clear=this.clear.bind(this);
+        this.area_ref=React.createRef();
+        this.change_callback=props.on_change;
+    }
+
+    componentWillUnmount() {
+        window.TEXTAREA_BACKUP[this.props.id]=this.state.text;
+        this.change_callback(this.state.text);
+    }
+
+    on_change(event) {
+        this.setState({
+            text: event.target.value,
+        });
+        this.change_callback(event.target.value);
+    }
+
+    clear() {
+        this.setState({
+            text: '',
+        });
+    }
+
+    render() {
+        return (
+            <textarea ref={this.area_ref} onChange={this.on_change_bound} value={this.state.text} />
+        )
+    }
+}