mirror of
https://github.com/YMFE/yapi.git
synced 2025-02-17 13:49:43 +08:00
feat: 添加关注与取消关注
This commit is contained in:
wenbo.dong
parent
b70bb57384
commit
8213122197
@ -2,17 +2,20 @@ import './ProjectCard.scss';
|
||||
import React, { Component } from 'react';
|
||||
import { Card, Icon, Tooltip, message } from 'antd';
|
||||
import { connect } from 'react-redux'
|
||||
import { delFollow } from '../../reducer/modules/follow';
|
||||
import { delFollow, addFollow } from '../../reducer/modules/follow';
|
||||
// import { Link } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import { withRouter } from 'react-router';
|
||||
|
||||
@connect(
|
||||
() => {
|
||||
return {}
|
||||
state => {
|
||||
return {
|
||||
uid: state.user.uid
|
||||
}
|
||||
},
|
||||
{
|
||||
delFollow
|
||||
delFollow,
|
||||
addFollow
|
||||
}
|
||||
)
|
||||
@withRouter
|
||||
@ -23,15 +26,16 @@ class ProjectCard extends Component {
|
||||
|
||||
static propTypes = {
|
||||
projectData: PropTypes.object,
|
||||
isFollowed: PropTypes.bool,
|
||||
uid: PropTypes.number,
|
||||
inFollowPage: PropTypes.bool,
|
||||
callbackResult: PropTypes.func,
|
||||
history: PropTypes.object,
|
||||
delFollow: PropTypes.func
|
||||
delFollow: PropTypes.func,
|
||||
addFollow: PropTypes.func
|
||||
}
|
||||
|
||||
del = () => {
|
||||
console.log('del');
|
||||
const id = this.props.projectData.projectid;
|
||||
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();
|
||||
@ -39,8 +43,23 @@ class ProjectCard extends Component {
|
||||
}
|
||||
});
|
||||
}
|
||||
add() {
|
||||
console.log('add');
|
||||
|
||||
add = () => {
|
||||
const { uid, projectData } = this.props;
|
||||
const param = {
|
||||
uid,
|
||||
projectid: projectData._id,
|
||||
projectname: projectData.name,
|
||||
icon: 'star',
|
||||
color: '#2395f1'
|
||||
}
|
||||
this.props.addFollow(param).then((res) => {
|
||||
console.log(res);
|
||||
if (res.payload.data.errcode === 0) {
|
||||
this.props.callbackResult();
|
||||
message.success('已添加关注！');
|
||||
}
|
||||
});
|
||||
}
|
||||
// <Link to={`/project/${projectData._id}`} className="card-link">
|
||||
//
|
||||
@ -50,7 +69,7 @@ class ProjectCard extends Component {
|
||||
// <Icon type="star-o" className="icon" onClick={this.clickHandle}/>
|
||||
// </Popconfirm>
|
||||
render() {
|
||||
const { projectData, isFollowed } = this.props;
|
||||
const { projectData, inFollowPage } = this.props;
|
||||
return (
|
||||
<div className="card-container">
|
||||
<Card bordered={false} className="m-card" onClick={() => this.props.history.push('/project/' + projectData._id)}>
|
||||
@ -58,8 +77,8 @@ class ProjectCard extends Component {
|
||||
<h4 className="ui-title">{projectData.name || projectData.projectname}</h4>
|
||||
</Card>
|
||||
<div className="card-btns">
|
||||
<Tooltip placement="rightTop" title={isFollowed ? '取消关注' : '添加关注'}>
|
||||
<Icon type={isFollowed ? 'star' : 'star-o'} className="icon" onClick={isFollowed ? this.del : this.add}/>
|
||||
<Tooltip placement="rightTop" title={projectData.follow || inFollowPage ? '取消关注' : '添加关注'}>
|
||||
<Icon type={projectData.follow || inFollowPage ? 'star' : 'star-o'} className="icon" onClick={projectData.follow || inFollowPage ? this.del : this.add}/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -66,15 +66,9 @@
|
||||
font-size: .19rem;
|
||||
margin-bottom: .08rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
.ui-desc {
|
||||
font-size: .16rem;
|
||||
height: .24rem;
|
||||
line-height: .24rem;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
color: rgba(39, 56, 72, 0.43);
|
||||
}
|
||||
.m-card-body {
|
||||
.icon {
|
||||
|
||||
@ -33,7 +33,7 @@ class Follows extends Component {
|
||||
}
|
||||
|
||||
receiveRes = () => {
|
||||
console.log('receive!');
|
||||
console.log('receive res!');
|
||||
this.props.getFollowList(this.props.uid).then((res) => {
|
||||
console.log(res);
|
||||
if (res.payload.data.errcode === 0) {
|
||||
@ -74,7 +74,7 @@ class Follows extends Component {
|
||||
{data.length ? data.map((item, index) => {
|
||||
return (
|
||||
<Col span={8} key={index}>
|
||||
<ProjectCard projectData={item} isFollowed={true} callbackResult={this.receiveRes} />
|
||||
<ProjectCard projectData={item} inFollowPage={true} callbackResult={this.receiveRes} />
|
||||
</Col>);
|
||||
}): <ErrMsg type="noFollow"/>}
|
||||
</Row>
|
||||
|
||||
@ -16,7 +16,6 @@ import './ProjectList.scss'
|
||||
userInfo: state.project.userInfo,
|
||||
tableLoading: state.project.tableLoading,
|
||||
currGroup: state.group.currGroup,
|
||||
total: state.project.total,
|
||||
currPage: state.project.currPage
|
||||
}
|
||||
},
|
||||
@ -46,7 +45,6 @@ class ProjectList extends Component {
|
||||
userInfo: PropTypes.object,
|
||||
tableLoading: PropTypes.bool,
|
||||
currGroup: PropTypes.object,
|
||||
total: PropTypes.number,
|
||||
currPage: PropTypes.number
|
||||
}
|
||||
|
||||
@ -67,6 +65,11 @@ class ProjectList extends Component {
|
||||
})
|
||||
}
|
||||
|
||||
// 获取 ProjectCard 组件的关注事件回调，收到后更新数据
|
||||
@autobind
|
||||
receiveRes() {
|
||||
this.props.fetchProjectList(this.props.currGroup._id, this.props.currPage);
|
||||
}
|
||||
// // 分页逻辑 取消分页
|
||||
// @autobind
|
||||
// paginationChange(pageNum) {
|
||||
@ -101,15 +104,15 @@ class ProjectList extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.props);
|
||||
const projectData = this.state.projectData;
|
||||
return (
|
||||
<div className="m-panel card-panel card-panel-s">
|
||||
<Row gutter={16}>
|
||||
{projectData.length ? projectData.map((item, index) => {
|
||||
console.log(item);
|
||||
return (
|
||||
<Col span={8} key={index}>
|
||||
<ProjectCard projectData={item} />
|
||||
<ProjectCard projectData={item} callbackResult={this.receiveRes} />
|
||||
</Col>);
|
||||
}) : <ErrMsg type="noProject"/>}
|
||||
</Row>
|
||||
|
||||
@ -3,6 +3,7 @@ import axios from 'axios';
|
||||
// Actions
|
||||
const GET_FOLLOW_LIST = 'yapi/follow/GET_FOLLOW_LIST';
|
||||
const DEL_FOLLOW = 'yapi/follow/DEL_FOLLOW';
|
||||
const ADD_FOLLOW = 'yapi/follow/ADD_FOLLOW';
|
||||
|
||||
// Reducer
|
||||
const initialState = {
|
||||
@ -32,10 +33,18 @@ export function getFollowList(uid) {
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// 添加关注
|
||||
export function addFollow(param) {
|
||||
return {
|
||||
type: ADD_FOLLOW,
|
||||
payload: axios.post('/api/follow/add', param)
|
||||
}
|
||||
}
|
||||
|
||||
// 删除关注
|
||||
export function delFollow(id) {
|
||||
return {
|
||||
type: DEL_FOLLOW,
|
||||
payload: axios.post('/api/follow/del', { id })
|
||||
payload: axios.post('/api/follow/del', { projectid: id })
|
||||
}
|
||||
}
|
||||
|
||||
@ -74,7 +74,7 @@ var interfaceColController = function (_baseController) {
|
||||
(0, _createClass3.default)(interfaceColController, [{
|
||||
key: 'list',
|
||||
value: function () {
|
||||
var _ref = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee(ctx) {
|
||||
var _ref = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee(ctx) {
|
||||
var id, result, i;
|
||||
return _regenerator2.default.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
@ -149,7 +149,7 @@ var interfaceColController = function (_baseController) {
|
||||
}, {
|
||||
key: 'addCol',
|
||||
value: function () {
|
||||
var _ref2 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee2(ctx) {
|
||||
var _ref2 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee2(ctx) {
|
||||
var params, result;
|
||||
return _regenerator2.default.wrap(function _callee2$(_context2) {
|
||||
while (1) {
|
||||
@ -233,7 +233,7 @@ var interfaceColController = function (_baseController) {
|
||||
}, {
|
||||
key: 'getCaseList',
|
||||
value: function () {
|
||||
var _ref3 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee3(ctx) {
|
||||
var _ref3 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee3(ctx) {
|
||||
var id, inst, result;
|
||||
return _regenerator2.default.wrap(function _callee3$(_context3) {
|
||||
while (1) {
|
||||
@ -298,7 +298,7 @@ var interfaceColController = function (_baseController) {
|
||||
}, {
|
||||
key: 'addCase',
|
||||
value: function () {
|
||||
var _ref4 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee4(ctx) {
|
||||
var _ref4 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee4(ctx) {
|
||||
var params, result;
|
||||
return _regenerator2.default.wrap(function _callee4$(_context4) {
|
||||
while (1) {
|
||||
@ -392,7 +392,7 @@ var interfaceColController = function (_baseController) {
|
||||
}, {
|
||||
key: 'getCase',
|
||||
value: function () {
|
||||
var _ref5 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee5(ctx) {
|
||||
var _ref5 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee5(ctx) {
|
||||
var id, result;
|
||||
return _regenerator2.default.wrap(function _callee5$(_context5) {
|
||||
while (1) {
|
||||
@ -446,7 +446,7 @@ var interfaceColController = function (_baseController) {
|
||||
}, {
|
||||
key: 'upCol',
|
||||
value: function () {
|
||||
var _ref6 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee6(ctx) {
|
||||
var _ref6 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee6(ctx) {
|
||||
var params, result;
|
||||
return _regenerator2.default.wrap(function _callee6$(_context6) {
|
||||
while (1) {
|
||||
@ -503,7 +503,7 @@ var interfaceColController = function (_baseController) {
|
||||
}, {
|
||||
key: 'upCaseIndex',
|
||||
value: function () {
|
||||
var _ref7 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee7(ctx) {
|
||||
var _ref7 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee7(ctx) {
|
||||
var _this2 = this;
|
||||
|
||||
var params;
|
||||
@ -562,7 +562,7 @@ var interfaceColController = function (_baseController) {
|
||||
}, {
|
||||
key: 'delCol',
|
||||
value: function () {
|
||||
var _ref8 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee8(ctx) {
|
||||
var _ref8 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee8(ctx) {
|
||||
var id, colData, auth, result;
|
||||
return _regenerator2.default.wrap(function _callee8$(_context8) {
|
||||
while (1) {
|
||||
@ -639,7 +639,7 @@ var interfaceColController = function (_baseController) {
|
||||
}, {
|
||||
key: 'delCase',
|
||||
value: function () {
|
||||
var _ref9 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee9(ctx) {
|
||||
var _ref9 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee9(ctx) {
|
||||
var caseid, caseData, auth, result;
|
||||
return _regenerator2.default.wrap(function _callee9$(_context9) {
|
||||
while (1) {
|
||||
|
||||
@ -351,7 +351,7 @@ function createAction(controller, action, path, method) {
|
||||
var _this = this;
|
||||
|
||||
router[method]("/api" + INTERFACE_CONFIG[controller].prefix + path, function () {
|
||||
var _ref = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee(ctx) {
|
||||
var _ref = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee(ctx) {
|
||||
var inst;
|
||||
return _regenerator2.default.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user