card remove

Author: seraphimrose

app/action/entity.js

@@ -3,4 +3,6 @@ import { createAction } from 'redux-act'
 
 export const addList = createAction("Add a new list", data => fromJS(data))
 
-export const addCard = createAction("Add a new card", data => fromJS(data))
+export const addCard = createAction("Add a new card", data => fromJS(data))
+
+export const removeCard = createAction("Remove a card", data => fromJS(data))

app/component/app/app.css

@@ -1,5 +1,5 @@
 body {
-	background: url('/COTO/static/img/bg1.jpg')  no-repeat;
+	background: url('/COTO/static/img/bg3.jpg')  no-repeat;
 	background-size: 100% 100%;
 }
 

app/component/card/card.css

@@ -1,4 +1,5 @@
 :local(.card) {
+	position: relative;
 	width: 260px;
 	padding: 5px;
 	margin-bottom: 8px;
@@ -34,6 +35,19 @@
 		}
 	}
 
+	:local(.control) {
+		position: absolute;
+		top: 3px;
+		right: 5px;
+		color: #ccc;
+		i {
+			cursor: pointer;
+			&:hover {
+				color: #aaa;
+			}
+		}
+	}
+
 	:local(.title) {
 		padding-left: 2px;
 	}

app/component/card/index.js

@@ -1,7 +1,9 @@
 import React, { Component } from 'react'
 import Tooltip from 'antd/lib/tooltip'
+import Icon from 'antd/lib/icon'
 import { DragSource } from 'react-dnd';
 
+import { removeCard } from 'action/entity'
 import style from './card.css'
 
 const cardSource = {
@@ -28,12 +30,20 @@ export default class Card extends Component {
 			card,
 			tag,
 			member,
+			index,
+			listIndex,
 			connectDragSource,
-			isDragging
+			isDragging,
+			dispatch
 		} = this.props
 
 		return connectDragSource(
-			<div className={style.card}>
+			<div
+				style={{
+					transform: isDragging && "rotate(10deg)"
+				}}
+				className={style.card}
+			>
 				<div className={style.tag}>
 					{card.get('tag').map(value => (
 						<Tooltip
@@ -46,6 +56,12 @@ export default class Card extends Component {
 						</Tooltip>
 					))}
 				</div>
+				<div className={style.control}>
+					<Icon
+						type="cross"
+						onClick={() => dispatch(removeCard({listIndex, index}))}
+					/>
+				</div>
 				<div className={style.title}>
 					{card.get('title')}
 				</div>

app/component/list/index.js

@@ -114,6 +114,8 @@ export default class List extends Component {
 							<Card
 								{...this.props}
 								key={value}
+								index={value}
+								listIndex={index}
 								card={card.get(value)}
 							/>
 						))}

app/reducer/entity.js

@@ -8,5 +8,10 @@ const initialState = fromJS(entity)
 
 export default createReducer({
 	[actions.addList]: (state, data) => state.mergeDeep(data),
-	[actions.addCard]: (state, data) => state.mergeDeep(data)
+	[actions.addCard]: (state, data) => state.mergeDeep(data),
+	[actions.removeCard]: (state, key) => (
+		state//.deleteIn(['card', key.get('index')]) // <-- unnecessary?
+			.deleteIn(['list', key.get('listIndex'), 'card',
+					state.getIn(['list', key.get('listIndex'), 'card']).indexOf(key.get('index'))])
+	)
 }, initialState)