help_user/src/sub/IndexMenu.tsx

import React from "react";
import {Button, Card, Col, Container, Image, ListGroup, Row} from "react-bootstrap";

import {Page} from "../ui/Page";
import {ActivityDetail, PageProps, UserType, VolunteerStatus} from "../entity";
import {MyDialog} from "../ui/MyDialog";
import {Activity} from "../ui/Activity";
import {Input} from "../ui/InputGroup";
import {API, JSONResponse, Method, prefix, request} from "../interface";
import {
    ActivityDetailRes,
    ActivityDetailTransform,
    EmptyBodyTransform,
    FindActivityRes,
    FindActivityTransform,
    PageDataMessage,
    SimpleMessage
} from "../result";
import {Cookies} from "react-cookie";
import {user_type_cookie} from "../account/PropCookie";

/**
 * 首页
 */
export class IndexMenu extends React.Component<{ cookies:Cookies },
    {
        //活动数据
        activityList?:Array<Array<ActivityDetail>>;
        //分页信息
        page?:PageProps;
        //活动
        activity?:ActivityDetail;
        //打开活动
        openActivity:boolean;
        //检索活动标题
        title:string;
        result:JSX.Element|null;
    }>{



    constructor(props: Readonly<any>) {
        super(props);

        this.state={
            result: null,openActivity:false,
            title:""
        }
    }

    componentDidMount() {
        this.loadActivity(1)
    }

    /**
     * 报名活动
     * @param activityId 活动id
     */
    apply(activityId:number){
        console.debug("报名id"+activityId)

        let that=this

        request(API.main.activity.apply,Method.POST,{
            activityId:activityId+"",
            activityStatus:VolunteerStatus.join.toString()
        },new EmptyBodyTransform(),function (res:JSONResponse<SimpleMessage>) {
            switch (res.customResult) {
                case SimpleMessage.ok:
                    that.loadActivity(1)
                    that.setState({
                        result:<h3 className="text-info text-center">报名成功</h3>
                    });break
                case SimpleMessage.fail:
                    that.setState({
                        result:<h3 className="text-danger text-center">报名失败，请联系管理员</h3>
                    });break
            }
        })
    }

    /**
     * 查找活动
     * @param activityId
     */
    loadActivityWithId(activityId:number){
        console.debug("activityId="+activityId)

        let that=this
        request(API.main.activity.find+"/"+activityId,Method.GET,{},new ActivityDetailTransform(),function(res:ActivityDetailRes){
            switch (res.customResult) {
                case SimpleMessage.fail:
                    that.setState({
                        result:<h3 className="text-danger text-center">活动详情加载失败，请联系管理员</h3>
                    });break;
                case SimpleMessage.ok:
                    that.setState({
                        openActivity:true,
                        activity:res.activity
                    });break;
            }
        })
    }

    /**
     * 加载活动列表
     * @param page
     */
    loadActivity(page:number){
        console.debug("检索活动关键字:"+this.state.title)
        let that=this
        request(API.main.activity.find+'?title='+this.state.title+"&currentPage="+page,Method.GET, {},new FindActivityTransform(),function (res:FindActivityRes) {


            switch(res.customResult){
                case PageDataMessage.fail:
                    that.setState({
                        result:<h3 className="text-danger text-center">活动加载失败，请联系管理员</h3>
                    });break;
                case PageDataMessage.ok:
                    that.setState({
                        activityList:res.dataList,
                        page:res.page
                    });break
                case PageDataMessage.empty:
                    that.setState({
                        activityList:[],
                        page:res.page,
                        result:<h3 className="text-info text-center">当前没有活动记录！！！</h3>
                    });break;
            }
        })
    }


    render() {
        const rowList=this.state.activityList?this.state.activityList.map((activities:Array<ActivityDetail>, index:number)=>
           <Row className="p-3" key={"row"+index}>{activities.map((activity:ActivityDetail, subIndex:number)=>
               <Col className="col-4" key={"col"+subIndex}>
                   <Card>
                       <Card.Header>
                        <Image src={prefix.image+activity.activityImg} className="activityImage"/>
                       </Card.Header>
                       <Card.Body>
                          <ListGroup>
                              <ListGroup.Item className="bg-info" style={{color:"white",fontWeight:"bold"}}>
                                  {activity.title}
                              </ListGroup.Item>
                              <ListGroup.Item>
                                  <p className="activity-text-limit text-ellipsis">{activity.content}</p>
                              </ListGroup.Item>
                          </ListGroup>
                       </Card.Body>
                       <Card.Footer>
                           <Button variant={"info"} onClick={()=>this.loadActivityWithId(activity.activityId)} className="mr-2">查看活动详情</Button>
                           {this.props.cookies.get(user_type_cookie)===UserType.help?<Button variant="primary" onClick={()=>this.apply(activity.activityId)}>帮助</Button>:null}
                       </Card.Footer>
                   </Card>
               </Col>)}
           </Row>
        ):null

        return (

            <Container className="p-5">

                <Input name="keyword" desc="活动标题" onChange={(value:string)=>this.setState({title:value})}/>

                <Button className="mt-3 mb-3" variant={"info"} onClick={()=>this.loadActivity(1)}>检索活动</Button>

                {/*<Page onClick={(page:number)=>this.loadActive(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>*/}


                    {rowList}

                {this.state.page?<Page onClick={(page:number)=>this.loadActivity(page)} currentPage={this.state.page.currentPage} totalPage={this.state.page.totalPage} pageSize={this.state.page.pageSize}/>:null}

                {this.state.activity?<MyDialog content={<Activity activity={this.state.activity} showButton={true} applyFunction={(activeId:number)=>{
                    this.apply(activeId)
                    this.setState({activity:undefined,openActivity:false})
                }} />}
                                               open={this.state.openActivity} titleId="view-active" menuName="活动详情"
                                               onClose={()=>this.setState({activity:undefined,openActivity:false})}/>:null}

                <MyDialog content={this.state.result} open={this.state.result!==null} titleId="find-activity-tip" menuName="活动提示" onClose={()=>this.setState({result:null})}/>
            </Container>
        )
    }
}