forgeplus-react/src/forums/Component/Top.jsx

import React, { useEffect , useState } from "react";
import { Button , notification } from "antd";
import { WhiteBack, FlexStart, P, FlexAJ, AlignCenter } from "../css/layout";
import Radius from "../image/radius.png";
import styled from "styled-components";
import axios from "axios";
import {Link} from 'react-router-dom';

const Img = styled.img`
   {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
  }
`;
const Prag = styled.p`
   {
    color: #333;
    font-size: 14px;
    line-height: 18px;
    margin: 10px 0px;
    text-align: justify;    
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;
    max-height: 54px;
  }
`;
const Spanleft = styled.span`
   {
    margin-right: 30px;
    color: #888;
    font-size: 12px;
  }
`;
const Spanright = styled.span`
   {
    margin-left: 30px;
    color: #888;
    font-size: 12px;
    & > label {
      color: #333;
    }
  }
`;
export default ({ headData, title , operation , history }) => {
  const [section, setSection] = useState(undefined);
  const [sectionUser, setSectionUser] = useState(undefined);
  const [forumModers, setForumModers] = useState(undefined);
  const [ watched , setWacth ] = useState(headData && headData.watched);

  useEffect(() => {
    if (headData) {
      setSection(headData.forum_section);
      setSectionUser(headData.forum_section_user);
      setForumModers(headData.forum_moders);
      setWacth(headData.watched);
    }
  }, [headData]);

  // 收藏、取消收藏
  function saveForum(id){
    if(id){
      const url = `/forum_memos/${id}/is_watch.json`;
      axios.post(url,{
        is_watch:watched?0:1
      }).then(result=>{
        if(result && result.data && result.data.status!=-1){
          setWacth(!watched);
          notification.open({message:"提示",description:result.data.message});
        }
      }).catch(error=>{
        console.log(error);
      })
    }
  }

  function toManage(id){
    history.push(`/forums/manage/${section && section.id}`);
  }

  return (
    <WhiteBack style={{ marginBottom: "15px", padding: "20px 30px" }}>
      <FlexStart>
        <Img src={section && section.picture ? section.picture : Radius} />
        <div className="flex1">
          <FlexAJ>
            <P style={{ marginBottom: "0px" }}>{section && section.title}</P>
            <AlignCenter>
              {
                operation ?
                <Button onClick={()=>toManage(section && section.id)}>
                  <i className="iconfont icon-shezhi2"></i>板块管理
                </Button>
                :""
              }
              
              <Button onClick={()=>saveForum(section && section.id)} style={{ marginLeft: "30px" }}>
                <i className={watched?"iconfont icon-pingfen-xian":"iconfont icon-pingfen-xian"}></i>{watched?"取消收藏":"收藏"}
              </Button>
            </AlignCenter>
          </FlexAJ>
          {section && section.description ? (
            <Prag>{section.description}</Prag>
          ) : (
            ""
          )}
          <FlexAJ className="mt10">
            <span>
              <Spanleft>版主：<Link className="grey-9" to={`/accounts/${sectionUser && sectionUser.user_login}`}>{sectionUser && sectionUser.username}</Link></Spanleft>
              {forumModers && forumModers.length > 0 ? (
                <Spanleft>
                  管理员：
                  {forumModers.map((item, key) => {
                    return key < forumModers.length - 1
                      ? <span><Link className="grey-9" to={`/accounts/${item.user_login}`}>{item.username}</Link>、</span>
                      : <Link className="grey-9" to={`/accounts/${item.user_login}`}>{item.username}</Link>;
                  })}
                </Spanleft>
              ) : (
                ""
              )}
            </span>
            <span>
              <Spanright>
                版块主题：<label>{section && section.memos_count}</label>
              </Spanright>
              {section && section.publish_today_coun ? (
                <Spanright>
                  今日发帖：<label>{section.publish_today_count}</label>
                </Spanright>
              ) : (
                ""
              )}
              {section && section.replies_today_count ? (
                <Spanright>
                  今日回帖：<label>{section.replies_today_count}</label>
                </Spanright>
              ) : (
                ""
              )}
            </span>
          </FlexAJ>
        </div>
      </FlexStart>
    </WhiteBack>
  );
};