feat: 取消收藏功能

client/components/ProjectCard/ProjectCard.js

@@ -1,30 +1,68 @@
 import './ProjectCard.scss';
 import React, { Component } from 'react';
-import { Card, Icon } from 'antd';
-import { Link } from 'react-router-dom';
+import { Card, Icon, Tooltip, message } from 'antd';
+import { connect } from 'react-redux'
+import { delFollow } from  '../../reducer/modules/follow';
+// import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
+@connect(
+  () => {
+    return {}
+  },
+  {
+    delFollow
+  }
+)
 class ProjectCard extends Component {
   constructor(props) {
     super(props);
   }
 
   static propTypes = {
-    projectData: PropTypes.object
+    projectData: PropTypes.object,
+    isFollowed: PropTypes.bool,
+    callbackResult: PropTypes.func,
+    delFollow: PropTypes.func
   }
 
+  del = () => {
+    console.log('del');
+    const id = this.props.projectData.projectid;
+    this.props.delFollow(id).then((res) => {
+      if (res.payload.data.errcode === 0) {
+        this.props.callbackResult();
+        message.success('已取消关注！');
+      }
+    });
+  }
+  add() {
+    console.log('add');
+  }
+  // <Link to={`/project/${projectData._id}`} className="card-link">
+  //
+  // </Link>
+
+  // <Popconfirm placement="leftBottom" title={<Icon type="up" />} onConfirm={confirm} okText="确认" cancelText="取消">
+  //   <Icon type="star-o" className="icon" onClick={this.clickHandle}/>
+  // </Popconfirm>
   render() {
-    const { projectData } = this.props;
+    const { projectData, isFollowed } = this.props;
+    console.log(this.props);
     return (
-      <Link to={`/project/${projectData._id}`}>
+      <div className="card-container">
         <Card bordered={false} bodyStyle={{padding: 16}} className="m-card">
           <div className="m-card-logo">
             <Icon type="area-chart" className="icon" />
             <p className="name">{projectData.name || projectData.projectname}</p>
           </div>
-          <div className="m-card-btns" style={{display: 'none'}}>btns</div>
         </Card>
-      </Link>
+        <div className="card-btns">
+          <Tooltip placement="rightTop" title={isFollowed ? '取消关注' : '添加关注'}>
+            <Icon type={isFollowed ? 'star' : 'star-o'} className="icon" onClick={isFollowed ? this.del : this.add}/>
+          </Tooltip>
+        </div>
+      </div>
     )
   }
 

client/components/ProjectCard/ProjectCard.scss

@@ -1,5 +1,31 @@
 @import '../../styles/mixin.scss';
-
+.card-container {
+  position: relative;
+  &:hover {
+    .m-card{
+      background-color: #efefef;
+    }
+    .card-btns {
+      display: block;
+    }
+  }
+  // 按钮组
+  .card-btns {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    // 卡片右上角按钮
+    .icon {
+      cursor: pointer;
+      font-size: .2rem;
+      padding: .08rem;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+}
 .m-card {
   cursor: pointer;
   text-align: center;
@@ -7,9 +33,7 @@
   background-color: #fff;
   transition: all .4s;
   color: rgba(0, 0, 0, 0.65);
-  &:hover {
-    background-color: #efefef;
-  }
+  position: relative;
   .m-card-logo {
     .icon {
       font-size: .8rem;

client/containers/Follows/Follows.js

@@ -11,7 +11,8 @@ import ProjectCard from '../../components/ProjectCard/ProjectCard.js';
 @connect(
   state => {
     return {
-      data: state.follow.data
+      data: state.follow.data,
+      uid: state.user.uid
     }
   },
   {
@@ -26,11 +27,25 @@ class Follows extends Component {
     }
   }
   static propTypes = {
-    getFollowList: PropTypes.func
+    getFollowList: PropTypes.func,
+    uid: PropTypes.number
   }
 
-  componentDidMount() {
-    this.props.getFollowList(107).then((res) => {
+  receiveRes = () => {
+    console.log('receive!');
+    this.props.getFollowList(this.props.uid).then((res) => {
+      console.log(res);
+      if (res.payload.data.errcode === 0) {
+        this.setState({
+          data: res.payload.data.data.list
+        })
+      }
+    });
+  }
+
+  async componentWillMount() {
+    console.log(this.props);
+    this.props.getFollowList(this.props.uid).then((res) => {
       console.log(res);
       if (res.payload.data.errcode === 0) {
         this.setState({
@@ -42,7 +57,6 @@ class Follows extends Component {
 
   render () {
     const data = this.state.data;
-    console.log(data);
     return (
       <div>
         <Subnav
@@ -57,10 +71,9 @@ class Follows extends Component {
         <div className="g-row">
           <Row gutter={16} className="follow-box">
             {data.map((item, index) => {
-              console.log(item);
               return (
                 <Col span={6} key={index}>
-                  <ProjectCard projectData={item} />
+                  <ProjectCard projectData={item} isFollowed={true} callbackResult={this.receiveRes} />
                 </Col>);
             })}
           </Row>

client/reducer/modules/follow.js

@@ -2,6 +2,7 @@ import axios from 'axios';
 
 // Actions
 const GET_FOLLOW_LIST = 'yapi/follow/GET_FOLLOW_LIST';
+const DEL_FOLLOW = 'yapi/follow/DEL_FOLLOW';
 
 // Reducer
 const initialState = {
@@ -11,19 +12,17 @@ const initialState = {
 export default (state = initialState, action) => {
   switch (action.type) {
     case GET_FOLLOW_LIST: {
-      console.log(action);
       return {
         ...state,
         data: action.payload.data.data
       };
     }
-
     default:
       return state;
   }
 };
 
-// Action Creators
+// 获取关注列表
 export function getFollowList(uid) {
   return {
     type: GET_FOLLOW_LIST,
@@ -32,3 +31,11 @@ export function getFollowList(uid) {
     })
   }
 }
+
+//
+export function delFollow(id) {
+  return {
+    type: DEL_FOLLOW,
+    payload: axios.post('/api/follow/del', { id })
+  }
+}

client/styles/common.scss

@@ -69,3 +69,8 @@ em {
 .ant-dropdown .user-menu {
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
 }
+
+// confirm 框内边距过大
+.ant-confirm .ant-modal-body{
+  padding: .24rem !important;
+}