forgeplus-react/src/exchange/ExchangeItem.js

import React, { Component, memo } from 'react';
import { Dropdown , Menu } from 'antd';
import {Link} from 'react-router-dom'
import { getImageUrl } from 'educoder';

import Tags from './TagComponent/Index';
import Infos from './InfoComponent/Index';
import Custom from './CustomComponent/Index';
import "./exchange.css"
import axios from 'axios';


class ExchangeItem extends Component {

  // 右侧dropdown
  InitItemMenu = (id,sticky,is_fine,memo_watched) => {
    const { current_user , detail }= this.props;
    if(current_user){
      if(current_user.admin || current_user.banned_permission){
        return(
          <Dropdown className="fr c_point" overlay={ this.InitlistMenu(id,sticky,is_fine,memo_watched) } placement="bottomCenter">
            <span className="addheight"></span>
          </Dropdown>
        )
      }else if(detail){
        return(
          <span className="fr c_point color-blue" style={{lineHeight:'16px'}} onClick={()=>this.enShrineEvent(id,memo_watched)}>
            { memo_watched ? '取消收藏' : '收藏' }
          </span>
        )
      }
    }
  }
  
  // 右侧dropdown的选项
  InitlistMenu = (id,sticky,is_fine,memo_watched) => (
    <Menu className="edu-txt-center" style={{minWidth:"100px"}}>
      <Menu.Item onClick={()=>this.topEvent(sticky,id)} > { sticky ? '取消置顶' : '置顶' } </Menu.Item>
      <Menu.Item onClick={()=>this.bestEvent(is_fine,id)}> { is_fine ? '取消推荐' : '推荐' } </Menu.Item>
      <Menu.Item onClick={()=>this.enShrineEvent(id,memo_watched)}> { memo_watched ? '取消收藏' : '收藏' } </Menu.Item>
      <Menu.Item onClick={()=>this.editEvent(id)}> 编辑 </Menu.Item>
      <Menu.Item onClick={()=>this.deleteEvent(id)}> 删除 </Menu.Item>
    </Menu>
  )


  // 取消收藏+收藏
  enShrineEvent=(id,memo_watched)=>{
    const { refresh } = this.props;
    const url = `/memos/${id}/watch_memo`;
    // is_watch:1为添加关注
    axios.post(url,{
      is_watch:memo_watched ? 0 : 1
    }).then((result)=>{
      if(result){
          this.props.showNotification(result.data.message);
          refresh();
      }
    }).catch((error)=>{

    })
  }


  // 取消置顶+置顶
  topEvent = (sticky,id) =>{
    const { refresh } = this.props;
    const url =`/memos/${id}/set_top_or_down.json`;

    axios.get(url,{params:{
      sticky:sticky ? 0 : 1
    }}).then((result)=>{
      if(result){
          // 调用父级方法刷新
          this.props.showNotification(result.data.message);
          refresh();
      }
    }).catch((error)=>{

    })
  }

  // 取消推荐+推荐
  bestEvent = (is_fine,id) =>{
    const { refresh } = this.props;
    const url =`/memos/${id}/is_fine.json`;

    axios.post(url,{
      is_fine:is_fine ? 0 : 1
    }).then((result)=>{
      if(result){
          // 调用父级方法刷新
          this.props.showNotification(result.data.message);
          refresh();
      }
    }).catch((error)=>{

    })
  }
  // 编辑
  editEvent=(id)=>{
    this.props.history.push(`/forums/${id}/edit`);
  }

  // 删除
  deleteEvent = (id) =>{
    this.props.confirm({
      content: '确认删除帖子?',

      onOk: () => {
        const url =`/memos/${id}/destroy.json`;
        axios.post(url).then((result)=>{
          if(result){
            if(result.data.status === 0){
              this.props.showNotification(result.data.message);
              const { page , refresh } = this.props;
              if(page){
                refresh(page);
              }else{
                this.props.history.push("/forums");
              }
            }
          }
        }).catch((error)=>{

        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
    
  }

  // 跳转页面
  turnToEvent=(id,detail)=>{
      {/*传了enshine就代表底部右侧操作按钮只有收藏或者取消收藏，否则就是置顶、推荐等 */}
    const { enShrine} = this.props;
    if(enShrine){return}
    if(detail!=true){
      const w= window.open('about:blank');
      w.location.href=`/forums/${id}`;
    }
    
  }

  render(){  
    /**detail:true为详情，否则为列表 */
    const { memos , current_user , detail} = this.props;
    console.log(memos)
    const ListItem = memos && memos.map(item=>{
      return(
        <li>
          <div>
            <div className="tabulation_infos flex-align-top mb15 ">
              <Tags bestClass={item.is_fine ? "mr15" : undefined } topClass={item.sticky ? "mr15" : undefined}></Tags>
              <p onClick={()=>this.turnToEvent(item.id,detail)} className={ detail ? "exchangeItem-subject task-hide justify  color_black" : "exchangeItem-subject task-hide justify c_point is_onclick" }>           
                 {item.subject}
                </p>
              {/* 右侧的下拉操作菜单项:登录后才能有右侧信息 */}
              { current_user && this.InitItemMenu(item.id,item.sticky,item.is_fine,item.memo_watched) }
            </div>
          </div>
          <div className="flex-align-center">
            {/* 判断用户是否登录 */} 
            <Custom className="custom-wrap fl" hrefUrl={`/users/${item.user_login}`} img_url = {getImageUrl(`images/${item.image_url}`)} name={item.username}></Custom>
            { item.forum_section_title && <span className="sendPoint">发表在<Link className="color-blue c_point" to={`/forums/theme/${item.forum_section_id}`}>{item.forum_section_title}</Link></span> }
            { item.time && <span className="sendPoint">{item.time}</span> }

            {
              item.new_reply && item.new_reply.username &&
              <span className="fl ml30 pl10 sendPoint">
                <span className="color-grey-9 font-14">最新回复：
                  <span className="color-grey-3">{item.new_reply.username}</span>
                  <span className="ml10 font-12">{item.new_reply.time}</span>
                </span>
              </span>
            }
            <span className="flex1"></span>
            {/* 论坛首页和论坛详情公用，不同情况下左浮动或者有浮动 */}
            <span className="fr">
              <Infos className="icon-wrap" icon={"iconfont icon-liulan font-16"} count={item.viewed_count} />
              <Infos className="icon-wrap" icon={"iconfont icon-dianzan font-16"} count={item.praises_count} />
              <Infos className="icon-wrap" icon={"iconfont icon-pinglun font-16"} count={item.replies_count} />
            </span>
            
          </div>
        </li>
      )
    })
    return(
      <div className="plateTabulation">
        { ListItem }
      </div>
    )
  }
}
export default ExchangeItem;