add reply form

src/UserAction.js

@@ -1,7 +1,9 @@
 import React, {Component, PureComponent} from 'react';
+import {SafeTextarea} from './Common';
 
 import './UserAction.css';
 
+import {API_BASE} from './Common';
 const LOGIN_BASE=window.location.protocol==='https:' ? '/login_proxy' : 'http://www.pkuhelper.com/services/login';
 
 export const TokenCtx=React.createContext({
@@ -63,7 +65,10 @@ export class LoginForm extends Component {
             <TokenCtx.Consumer>{(token)=>
                 <div className="login-form">
                     <form onSubmit={(e)=>this.do_login(e,token.set_value)} className="box">
-                        <p>Token: <code>{token.value||'(null)'}</code></p>
+                        <p>{token.value ?
+                            <span><b>您已登录。</b>Token: <code>{token.value||'(null)'}</code></span> :
+                            '登录后可以使用关注、回复等功能'
+                        }</p>
                         <p>
                             <label>
                                 学号：
@@ -95,4 +100,79 @@ export class LoginForm extends Component {
             }</TokenCtx.Consumer>
         )
     }
+}
+
+export class ReplyForm extends Component {
+    constructor(props) {
+        super(props);
+        this.state={
+            text: '',
+            loading_status: 'done',
+        };
+        this.on_change_bound=this.on_change.bind(this);
+        this.area_ref=React.createRef();
+    }
+
+    on_change(value) {
+        this.setState({
+            text: value,
+        });
+    }
+
+    on_submit(event) {
+        event.preventDefault();
+
+        if(this.state.loading_status==='loading')
+            return;
+        this.setState({
+            loading_status: 'loading',
+        });
+
+        let data=new URLSearchParams();
+        data.append('action','docomment');
+        data.append('pid',this.props.pid);
+        data.append('text',this.state.text);
+        data.append('token',this.props.token);
+        fetch(API_BASE+'/api.php', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+            },
+            body: data,
+        })
+            .then((res)=>res.json())
+            .then((json)=>{
+                if(json.code!==0)
+                    throw new Error(json);
+
+                this.setState({
+                    loading_status: 'done',
+                    text: '',
+                });
+                this.area_ref.current.clear();
+                this.props.on_complete();
+            })
+            .catch((e)=>{
+                console.trace(e);
+                alert('回复失败\n（树洞服务器经常抽风，其实有可能已经回复上了，不妨点“刷新回复”看一看）');
+                this.setState({
+                    loading_status: 'done',
+                });
+            });
+    }
+
+    render() {
+        return (
+            <div className="box">
+                <form onSubmit={this.on_submit.bind(this)} className="reply-form">
+                    <SafeTextarea ref={this.area_ref} id={this.props.pid} on_change={this.on_change_bound} />
+                    {this.state.loading_status==='loading' ?
+                        <button disabled="disabled">正在回复……</button> :
+                        <button type="submit">回复</button>
+                    }
+
+                </form>
+            </div>
+        )
+    }
 }