yapi/client/components/ProjectCard/ProjectCard.js
2017-08-23 10:36:24 +08:00

88 lines
2.6 KiB
JavaScript

import './ProjectCard.scss';
import React, { Component } from 'react';
import { Card, Icon, Tooltip } from 'antd';
import { connect } from 'react-redux'
import { delFollow, addFollow } from '../../reducer/modules/follow';
// import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router';
import { debounce } from '../../common';
@connect(
state => {
return {
uid: state.user.uid
}
},
{
delFollow,
addFollow
}
)
@withRouter
class ProjectCard extends Component {
constructor(props) {
super(props);
this.add = debounce(this.add, 400);
this.del = debounce(this.del, 400);
}
static propTypes = {
projectData: PropTypes.object,
uid: PropTypes.number,
inFollowPage: PropTypes.bool,
callbackResult: PropTypes.func,
history: PropTypes.object,
delFollow: PropTypes.func,
addFollow: PropTypes.func
}
del = () => {
const id = this.props.projectData.projectid || this.props.projectData._id;
this.props.delFollow(id).then((res) => {
if (res.payload.data.errcode === 0) {
this.props.callbackResult();
// message.success('已取消关注!'); // 星号已做出反馈 无需重复提醒用户
}
});
}
add = () => {
const { uid, projectData } = this.props;
const param = {
uid,
projectid: projectData._id,
projectname: projectData.name,
icon: projectData.icon,
color: projectData.color
}
this.props.addFollow(param).then((res) => {
console.log(res);
if (res.payload.data.errcode === 0) {
this.props.callbackResult();
// message.success('已添加关注!'); // 星号已做出反馈 无需重复提醒用户
}
});
}
render() {
const { projectData, inFollowPage } = this.props;
return (
<div className="card-container">
<Card bordered={false} className="m-card" onClick={() => this.props.history.push('/project/' + projectData._id)}>
<Icon type={projectData.icon || 'star-o'} className="ui-logo" style={{backgroundColor: projectData.color || '#2395f1'}} />
<h4 className="ui-title">{projectData.name || projectData.projectname}</h4>
</Card>
<div className="card-btns" onClick={projectData.follow || inFollowPage ? this.del : this.add}>
<Tooltip placement="rightTop" title={projectData.follow || inFollowPage ? '取消关注' : '添加关注'}>
<Icon type={projectData.follow || inFollowPage ? 'star' : 'star-o'} className="icon"/>
</Tooltip>
</div>
</div>
)
}
}
export default ProjectCard