help_user/src/Main.tsx

import React from "react";
import {Dropdown, Nav, Navbar} from "react-bootstrap";
import {IndexMenu} from "./sub/IndexMenu";
import {Volunteer} from "./sub/Volunteer";
import {SendHelp} from "./sub/SendHelp";
import {MyFriend} from "./my/MyFriend";
import {MyDialog} from "./ui/MyDialog";
import {MyLeaveWord} from "./my/MyLeaveWord";
import {MyMessage} from "./my/MyMessage";
import {User, UserType} from "./entity";
import {Cookies} from "react-cookie";
import {time_score, user_cookie, user_type_cookie, welcome_cookie} from "./account/PropCookie";
import {backEnd} from "./api";

/**
 * 菜单标记
 */
enum Menu {
    index,
    volunteer,
    myHelp
}

/**
 * 我的弹框菜单列表
 */
enum DialogType {
    friend="我的好友",
    leaveWord="我的留言",
    message="个人信息"
}

/**
 * 主菜单
 */
export class Main extends React.Component<
    {
        logout:Function;
        //
        cookies:Cookies;
    },
    {
        //菜单
       menu:Menu;
       //子菜单
       subMenu:JSX.Element;
       friendList:Array<User>;
       //我的菜单
       my:{
           menuName:string;
           content:JSX.Element|null;
           open:boolean;
       },
        //用户身份
        userType:string;
       //用户时间币
        timeScore:number;
        //用户id
        userId:string;
       //显示欢迎信息
        result:boolean;
        //打开个人信息变化提示
        changeTip:JSX.Element|null;
    }
>{


    constructor(props: Readonly<any>) {
        super(props);
        //默认菜单
        this.state={
            //一级菜单
            menu:Menu.index,
            //二级菜单
            subMenu:<IndexMenu cookies={this.props.cookies}/>,
            //我的好友信息
            friendList:[],
            //我的菜单
            my:{menuName: "",content:null,open:false},
            result:Boolean(this.props.cookies.get(welcome_cookie)),
            userType:this.props.cookies.get(user_type_cookie),
            userId:this.props.cookies.get(user_cookie),
            timeScore:this.props.cookies.get(time_score),
            changeTip:null
        }
    }


    //获取菜单名颜色
    getMenuColor(menu:Menu){
        if(this.state.menu===menu){
            return {
                color:"white",
                backgroundColor:"blue"
            }
        }else{
            return {
                color:"blue",
                backgroundColor: "white"
            }
        }
    }



    //切换菜单
    changeMenu(menu:Menu){
        this.setState({
            menu:menu
        })

        switch (menu) {
            case Menu.index:
                this.setState({
                    subMenu:<IndexMenu cookies={this.props.cookies}/>
                });break;
            case Menu.volunteer:
                this.setState({
                    subMenu:<Volunteer/>
                });break;
            case Menu.myHelp:
                this.setState({
                    subMenu:<SendHelp onSendActivityOK={()=>this.onSendActivityOK()}/>
                });break;

        }
    }

    //活动发布成功
    onSendActivityOK(){
        this.changeMenu(Menu.index)
    }

    /**
     * 关闭弹窗
     */
    closeDialog(){
        this.setState({ my:{...this.state.my,...{menuName:"",content:null,open:false}}})

        console.debug(this.state.my)
    }

    /**
     * 打开弹窗
     */
    openDialog(dialogType:DialogType){
        switch (dialogType) {
            case DialogType.friend:
                this.setState({
                    my:{menuName:dialogType,content:<MyFriend user={this.state.userId}/>,open:true}
                })
                break;
            case DialogType.leaveWord:
                this.setState({
                    my:{menuName:dialogType,content:<MyLeaveWord  cookies={this.props.cookies} user={this.state.userId}/>,open:true}
                })
                break;
            case DialogType.message:
                this.setState({
                    my:{menuName:dialogType,content:<MyMessage refreshFun={(value:User)=> {
                        this.refreshInfo(value)
                        }} cookies={this.props.cookies} user={this.state.userId}/>,open:true}
                })
                break;
        }
    }


    render() {
        return (
            <div>
                <Navbar bg="light">
                    <Navbar.Brand>互联网+互助平台</Navbar.Brand>
                    <Nav variant="pills" defaultActiveKey="index" className="w-100">
                        <Nav.Item className="col-2">
                            <Nav.Link eventKey="index" style={this.getMenuColor(Menu.index)} onClick={()=>this.changeMenu(Menu.index)}>首页</Nav.Link>
                        </Nav.Item>
                        <Nav.Item className="col-2">
                            <Nav.Link eventKey="volunteer" style={this.getMenuColor(Menu.volunteer)} onClick={()=>this.changeMenu(Menu.volunteer)}>志愿者</Nav.Link>
                        </Nav.Item>
                        <Nav.Item className="col-2">
                            <Nav.Link eventKey="myHelp" style={this.getMenuColor(Menu.myHelp)} onClick={()=>this.changeMenu(Menu.myHelp)}>我的求助</Nav.Link>
                        </Nav.Item>

                        <Dropdown>
                            <Dropdown.Toggle variant="secondary" id="dropdown-basic">
                                {this.state.userId}
                            </Dropdown.Toggle>

                            <Dropdown.Menu>
                                <Dropdown.Item>时间币:<span className="text-center text-info">{this.state.timeScore}</span></Dropdown.Item>
                                {[DialogType.friend,DialogType.leaveWord,DialogType.message].map((type:DialogType,index:number)=><Dropdown.Item disabled={this.state.my.open} key={"dropdown"+index} onClick={()=>this.openDialog(type)}>{type}</Dropdown.Item>)}
                                <Dropdown.Item onClick={()=>this.props.logout()}>注销登录</Dropdown.Item>
                                <Dropdown.Item onClick={()=>window.location.href=backEnd}>切换后台</Dropdown.Item>
                            </Dropdown.Menu>
                        </Dropdown>



                        {this.state.userType?<Navbar.Brand className="ml-3">{this.state.userType===UserType.help.toString()?"等待前往帮助":"等待接受帮助"}</Navbar.Brand>:null}


                        <MyDialog maxWidth={800} titleId="my-dialog" menuName={this.state.my.menuName} content={this.state.my.content} open={this.state.my.open} onClose={()=>this.closeDialog()}/>
                    </Nav>
                </Navbar>

                <MyDialog content={<h1 className="text-info text-center">欢迎用户{this.state.userId}登录本系统</h1>} open={this.state.result} titleId="login-tip" menuName="登录提示" onClose={()=>{
                    this.setState({result:false})
                    this.props.cookies.remove(welcome_cookie)
                }}/>

                <MyDialog content={this.state.changeTip} open={this.state.changeTip!==null} titleId='change-user-dialog'
                          menuName='个人信息刷新提示' onClose={()=>this.setState({
                    changeTip:null
                })}/>

                {this.state.subMenu}
            </div>
        );
    }

    /**
     * 刷新用户信息
     * @param value
     */
    private refreshInfo(value:any) {
        if('userType' in value) {
            this.props.cookies.set(user_type_cookie, value.userType)
            this.setState({
                userType:value.userType,
                changeTip:<h3 className='text-center text-info'>已刷新用户身份</h3>
            })
        }
        if('timeScore' in value){
            this.props.cookies.set(time_score,value.timeScore)
            this.setState({
                timeScore:value.timeScore,
                changeTip:<h3 className='text-center text-info'>已刷新时间币</h3>
            })
        }

    }
}