able to show claimers; claim; unclaim

src/forge/Order/Detail.js

@@ -7,8 +7,11 @@ import { Form, Popconfirm, Tag, Spin } from "antd";
 import Attachments from "../Upload/attachment";
 import RenderHtml from "../../components/render-html";
 import Comments from "../comments/comments";
+import Claims from "../claims/claims"
 import "./order.css";
 
+
+
 class Detail extends Component {
   constructor(props) {
     super(props);
@@ -309,7 +312,16 @@ class Detail extends Component {
               {...this.props}
             />
           </div>
+
+
           <div className="list-left list-left-padding">
+            <div className="list-right-item-padding background-f boder-4">
+
+            <Claims issue_id={orderId}/>
+
+            {/* <h1>hello in h1</h1> */}
+            </div>
+
             <div className="list-right-item-padding background-f boder-4">
               <p className="grid-item-left pb15">
                 <span className="issue_detail_info">负责人:</span>

src/forge/claims/claims.js

@@ -0,0 +1,112 @@
+import React, { Component } from "react";
+import axios from "axios";
+import { List, Button} from "antd";
+import { Link } from "react-router-dom";
+import { getImageUrl } from "educoder";
+import "../Order/order.css";
+
+class claims extends React.Component {
+    constructor(props) {
+     super(props);
+     this.state = {
+       claimerdata: new Array(),
+       currentUserClaimed:0,
+       issue_id:this.props.issue_id
+     };
+   
+   }
+   getClaimers = ()=>{
+      const {issue_id} = this.state;
+     axios.get(`/issues/${issue_id}/claims`)
+       .then((result) => {
+         if(result){
+          console.log(result.data),
+          this.setState({
+              claimerdata: result.data.claimers,
+              currentUserClaimed: result.data.currentUserclaimed,
+            });
+         }  
+       }).catch(function (error) {
+         console.log(error);
+       });
+   }
+   
+   claimFun = (flag) => {
+       const {issue_id} = this.state;
+       axios({
+         method: flag==1? 'delete' : 'post',
+         url: `/issues/${issue_id}/claims`
+       }).then(result => {
+         this.setState({
+             claimerdata: result.data.claimers,
+             currentUserClaimed: result.data.currentUserclaimed
+          });
+       })
+         .catch(error => {
+           console.log(error);
+         });
+   }
+  
+   componentDidMount = () => {
+      this.getClaimers();
+     // this.props.bindCommentRef && this.props.bindCommentRef(this);
+   };
+   render() {
+     const {
+       claimerdata,
+       currentUserClaimed,
+       issue_id
+     } = this.state;
+     
+     const rednerlist = (item)=>{
+       return (
+         <div>
+            <Link to={`/${item && item.user_login}`} className="show-user-link">
+              <img
+                className="radius"
+                src={getImageUrl(`/${item && item.user_picture}`)}
+                alt=""
+                width="30"
+                height="30"/>
+            </Link>
+            <Link to={`/${item && item.user_login}`}
+              className="show-user-link color-black ml10 fwb">
+              {item && item.user_name}
+            </Link>
+            <span className="color-grey-8"> 声明于 {item.created_at}</span>
+            </div>
+         );
+     };
+     
+     return (
+       <div> 
+         {currentUserClaimed==1?(
+           <div><Button onClick={()=>this.claimFun(currentUserClaimed)} > 取消声明 </Button><br/>
+           <span className="color-grey-8"> 你已经声明过此易修</span></div>
+         ):(
+           <div><Button onClick={()=>this.claimFun(currentUserClaimed)} type="primary" className="mr15" > 声明 </Button><br/>
+           <span className="color-grey-8"> 声明想要解决此易修</span></div>
+         )}
+
+         <div className="ant-divider ant-divider-horizontal"> </div>
+
+         
+         {    
+           claimerdata.length>0?(
+             <div>
+             <span> {claimerdata.length} 位声明者 </span>
+           <List 
+             header=""
+             dataSource={claimerdata}
+             renderItem={item => <List.Item>{rednerlist(item)}</List.Item>} 
+           /></div>):(
+         <span> 0位声明者 </span>
+         )}
+         
+          {/* <h1>hellow ork {issue_id}</h1> */}
+       </div>
+     );
+   }
+ }
+
+ export default claims;