forgeplus-react/src/forge/claims/claims.js

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;