forgeplus-react/src/forums/Theme.js

//主题页
import React, { useState, useEffect } from "react";
import { Breadcrumb, Menu, Spin } from "antd";
import { Link } from "react-router-dom";
import ListSearch from './Component/ListSearch';
import { Box, Long, Short, Gap, WhiteBack, LeftLine, FlexAJ, AlignCenter } from './css/layout';
import axios from 'axios';
import Tops from './Component/Top';
import ListItem from './Component/ListItem';
import Paginations from './Component/Paginations';
import ThemeRight from './ThemeRight';
import Nodata from './Nodata';
import './css/Theme.scss';

function theme(props) {
    const [ operation , setOperation ]= useState(undefined);
    const [menuKey, setMenuKey] = useState("all");//tab
    const [search, setSearch] = useState(undefined);//搜索内容
    const [listSpin, setListSpin] = useState(true);
    const [sort, setSort] = useState("published_at");//排序
    const [pageSize, setPageSize] = useState(0);//每页条数
    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);
    const [memos, setMemos] = useState(undefined);//帖子列表
    const [ breadCrumb , setBreadCrumb ] = useState(undefined);
    const [ headData , setHeadData] = useState(undefined);// 头部信息

    let plateMainId = props.match.params.plateMainId;
    let current_user = props.current_user;
    
    // 获取列表
    useEffect(() => {
        if (plateMainId) {
            InitList();
        }
    }, [plateMainId, page, search, menuKey, sort])

    async function InitList() {
        setListSpin(true);
        const url = `/memos/forum_memos/${plateMainId}.json`;
        axios.get(url, {
            params: {
                page, search, sort, select_type: menuKey
            }
        }).then(result => {
            if (result) {
                setMemos(result.data.memos);
                setTotal(result.data.memos_count);
                setListSpin(false);
                setPageSize(result.data.limit);
            }
        }).catch(error => {
            console.log(error);
        })
    }
    
    useEffect(()=>{
        async function getTopInfo(){
            const url =  `/memos/forum_memos_head/${plateMainId}.json`;
            axios.get(url).then(result=>{
            if(result && result.data){
                setBreadCrumb(result.data.bread_crumb.forum_tag);
                setHeadData(result.data);
                filterUsers(current_user,result.data.forum_moders,result.data.forum_section_user);
            }
            }).catch(error=>{
                console.log(error);
            })
        }
        if(plateMainId && current_user) getTopInfo();
    },[plateMainId, current_user])

    let pathname = props.location.pathname;
    useEffect(() => {
        if (pathname) {
            if (pathname === "/forums/involvedTopics") {
                setMenuKey("my_topics");
            } else if (pathname === "/forums/topic") {
                setMenuKey("my_memos");
            } else if (pathname === "/forums/recommend") {
                setMenuKey("is_fine");
            } else {
                setMenuKey("all");
            }
        }
    }, [pathname])
    // 判断当前用户是否是版主或者管理员
    function filterUsers(currentUser,moders,users){
        if(currentUser){
            let admin = moders && moders.filter(item=>item.user_login === current_user.login);//管理员
            let creater = users && users.user_login === current_user.login;//版主
            setOperation((admin && admin.length>0)|| creater);
        }
    }
    // 搜索
    function onSearch(e) {
        setSearch(e);
    }
    // 翻页
    function changePage(page) {
        setPage(page);
    }

    function changeMenu(e) {
        setMenuKey(e.key);
    }
    return (
        <div className="clearfix educontent pt20" >
            <Breadcrumb separator=">" style={{ marginBottom: "10px" }}>
                <Breadcrumb.Item><Link to={`/forums`}>论坛交流</Link></Breadcrumb.Item>
                { breadCrumb && breadCrumb.title ? <Breadcrumb.Item><Link to={`/forums/theme/${breadCrumb.id}`}>{breadCrumb.title}</Link></Breadcrumb.Item>:"" }
                { breadCrumb && breadCrumb.children_bread_crumb ?<Breadcrumb.Item>{breadCrumb.children_bread_crumb && breadCrumb.children_bread_crumb.title}</Breadcrumb.Item>:""}
            </Breadcrumb>
            <Tops operation={operation} plateMainId={plateMainId} headData = {headData} title={breadCrumb && breadCrumb.title} history={props.history}/>
            <Box>
                <Long>
                    <WhiteBack>
                        <FlexAJ style={{ borderBottom: "1px solid #eee" }}>
                            <Menu className="unlow newMenu" selectedKeys={[menuKey]} onClick={changeMenu} mode="horizontal">
                                <Menu.Item key="all">全部</Menu.Item>
                                <Menu.Item key="is_fine">推荐精华</Menu.Item>
                                <Menu.Item key="my_memos">我的话题</Menu.Item>
                                <Menu.Item key="my_topics">我参与的话题</Menu.Item>
                            </Menu>
                            <AlignCenter style={{ marginRight: "30px" }}>
                                <span onClick={() => setSort("published_at")} className={sort === "published_at" ? "green cPointer" : "cPointer"}>最新</span>
                                <LeftLine onClick={() => setSort("replies_count")} className={sort === "published_at" ? "cPointer" : "green cPointer"} style={{ fontSize: '14px' }}>最热</LeftLine>
                            </AlignCenter>
                        </FlexAJ>
                        <Spin spinning={listSpin}>
                            {
                                memos && memos.length > 0 ?
                                <div style={{ minHeight: "400px" }}>
                                    <ListItem memos={memos}  current_user={current_user} calbackFunc={InitList} confirm = {props.confirm}/>
                                </div>
                                :
                                <AlignCenter style={{height:"400px"}} className="bigNoData">
                                    <Nodata _html={"暂无帖子~"} />
                                </AlignCenter>
                            }
                        </Spin>
                        <Paginations page={page} total={total} pageSize={pageSize} changePage={changePage} />
                    </WhiteBack>
                </Long>
                <Short>
                    <Gap>
                        <WhiteBack style={{ padding: "20px" }}>
                            <ListSearch onSearch={onSearch} current_user={current_user}/>
                        </WhiteBack>
                        <ThemeRight  operation={operation} plateId={plateMainId}/>
                    </Gap>
                </Short>
            </Box>
        </div>
    )
} export default theme