Skip to content

Commit f13bcc4

Browse files
rcdextarcdexta
committed
Merge branch 'prakashbalaji-sort_lane_fix'
2 parents f480b24 + 3e6937c commit f13bcc4

File tree

7 files changed

+66
-58
lines changed

7 files changed

+66
-58
lines changed

‎src/components/BoardContainer.js

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ class BoardContainer extends Component {
2626
const fromLaneId = source.dataset.id
2727
const toLaneId = target.dataset.id
2828
this.props.onDragEnd(cardId, fromLaneId, toLaneId)
29+
// TODO: This alters the state of redux as well as the DOM. Sathiya Sothanai!
2930
// this.props.actions.moveCard({fromLaneId: fromLaneId, toLaneId: toLaneId, cardId: cardId})
3031
})
3132
}

‎src/components/Lane.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,14 @@ class Lane extends Component {
2727
}
2828
}
2929

30+
sortCards (cards, sortFunction) {
31+
if (!cards) return []
32+
if (!sortFunction) return cards
33+
return cards.concat().sort(function (card1, card2) {
34+
return sortFunction(card1, card2)
35+
})
36+
}
37+
3038
componentWillReceiveProps (nextProps) {
3139
this.setState({cards: nextProps.cards})
3240
}
@@ -37,14 +45,6 @@ class Lane extends Component {
3745
}
3846
};
3947

40-
sortedCards (cards, sortFunction) {
41-
if (!cards) return []
42-
if (!sortFunction) return cards
43-
return cards.sort(function (card1, card2) {
44-
return sortFunction(card1, card2)
45-
})
46-
}
47-
4848
render () {
4949
const {loading} = this.state
5050
const {id, title, label, cards, laneSortFunction, onCardClick, ...otherProps} = this.props
@@ -54,7 +54,7 @@ class Lane extends Component {
5454
<RightContent>{label}</RightContent>
5555
</Header>
5656
<DraggableList className='drag-inner-list' data-id={id}>
57-
{this.sortedCards(cards, laneSortFunction).map((card) => (
57+
{this.sortCards(cards, laneSortFunction).map((card) => (
5858
<Card id={card.id}
5959
key={card.id}
6060
title={card.title}

‎src/helpers/lane_helper.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
const LaneHelper = {
2+
3+
appendCardsToLane: (state, {laneId, newCards}) => {
4+
const lanes = state.lanes.map((lane) => {
5+
if (lane.id === laneId) {
6+
lane.cards = [...lane.cards, ...newCards]
7+
}
8+
return lane
9+
})
10+
return {...state, ...lanes}
11+
},
12+
13+
appendCardToLane: (state, {laneId, card}) => {
14+
return LaneHelper.appendCardsToLane(state, {laneId: laneId, newCards: [card]})
15+
},
16+
17+
removeCardFromLane: (state, {laneId, cardId}) => {
18+
const lanes = state.lanes.map((lane) => {
19+
if (lane.id === laneId) {
20+
lane.cards = lane.cards.filter((card) => card.id !== cardId)
21+
}
22+
return lane
23+
})
24+
return {...state, ...lanes}
25+
},
26+
27+
moveCardAcrossLanes: (state, {fromLaneId, toLaneId, cardId}) => {
28+
let cardToMove = null
29+
const interimLanes = state.lanes.map((lane) => {
30+
if (lane.id === fromLaneId) {
31+
cardToMove = lane.cards.find((card) => card.id === cardId)
32+
lane.cards = lane.cards.filter((card) => card.id !== cardId)
33+
}
34+
return lane
35+
})
36+
return LaneHelper.appendCardToLane({lanes: interimLanes}, {laneId: toLaneId, card: cardToMove})
37+
}
38+
}
39+
40+
export default LaneHelper

‎src/reducers/board_reducer.js

+5-39
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,17 @@
1-
const appendCardsToLane = (state, {laneId, newCards}) => {
2-
const lanes = state.lanes.map((lane) => {
3-
if (lane.id === laneId) {
4-
lane.cards = [...lane.cards, ...newCards]
5-
}
6-
return lane
7-
})
8-
return {...state, ...lanes}
9-
}
10-
11-
const appendCardToLane = (state, {laneId, card}) => {
12-
return appendCardsToLane(state, {laneId: laneId, newCards: [card]})
13-
}
14-
15-
const removeCardFromLane = (state, {laneId, cardId}) => {
16-
const lanes = state.lanes.map((lane) => {
17-
if (lane.id === laneId) {
18-
lane.cards = lane.cards.filter((card) => card.id !== cardId)
19-
}
20-
return lane
21-
})
22-
return {...state, ...lanes}
23-
}
24-
25-
const moveCardAcrossLanes = (state, {fromLaneId, toLaneId, cardId}) => {
26-
let cardToMove = null
27-
const interimLanes = state.lanes.map((lane) => {
28-
if (lane.id === fromLaneId) {
29-
cardToMove = lane.cards.find((card) => card.id === cardId)
30-
lane.cards = lane.cards.filter((card) => card.id !== cardId)
31-
}
32-
return lane
33-
})
34-
return appendCardToLane({lanes: interimLanes}, {laneId: toLaneId, card: cardToMove})
35-
}
1+
import Lh from '../helpers/lane_helper'
362

373
const boardReducer = (state = {lanes: []}, action) => {
384
switch (action.type) {
395
case 'LOAD_BOARD':
406
return action.payload
417
case 'UPDATE_LANE':
42-
return appendCardsToLane(state, action.payload)
8+
return Lh.appendCardsToLane(state, action.payload)
439
case 'ADD_CARD':
44-
return appendCardToLane(state, action.payload)
10+
return Lh.appendCardToLane(state, action.payload)
4511
case 'REMOVE_CARD':
46-
return removeCardFromLane(state, action.payload)
12+
return Lh.removeCardFromLane(state, action.payload)
4713
case 'MOVE_CARD':
48-
return moveCardAcrossLanes(state, action.payload)
14+
return Lh.moveCardAcrossLanes(state, action.payload)
4915
default:
5016
return state
5117
}

‎stories/Pagination.story.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ storiesOf('react-trello', module)
3131
let fetchedItems = (requestedPage - 1) * PER_PAGE;
3232
for (let i = fetchedItems + 1; i <= fetchedItems + PER_PAGE; i++) {
3333
cards.push({
34-
id: `Card${i}`,
34+
id: `${i}`,
3535
title: `Card${i}`,
3636
description: `Description for #${i}`
3737
})
@@ -53,6 +53,7 @@ storiesOf('react-trello', module)
5353
}
5454

5555
return <Board data={data}
56+
laneSortFunction={(card1, card2) => parseInt(card1.id) - parseInt(card2.id)}
5657
onLaneScroll={paginate}/>
5758
})
5859

‎stories/Realtime.story.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const completeMilkEvent = () => {
1717
}
1818

1919
const addBlockedEvent = () => {
20-
eventBus.publish({type: 'ADD_CARD', laneId: 'BLOCKED', card: {id: "Ec2Error", title: "EC2 Instance Down", label: "30 mins", description: "Main Ec2 instance down"}})
20+
eventBus.publish({type: 'ADD_CARD', laneId: 'BLOCKED', card: {id: "Ec2Error", title: "EC2 Instance Down", label: "30 mins", description: "Main EC2 instance down"}})
2121
}
2222

2323
storiesOf('react-trello', module)

‎stories/data-sort.json

+8-8
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
{
99
"id": "Card1",
1010
"title": "Buy milk",
11-
"label": "15 mins",
12-
"description": "2 Gallons of milk at the Deli store - 2017-12-01",
11+
"label": "2017-12-01",
12+
"description": "2 Gallons of milk at the Deli store",
1313
"metadata": {
1414
"completedAt": "2017-12-01T10:00:00Z",
1515
"shortCode": "abc"
@@ -18,8 +18,8 @@
1818
{
1919
"id": "Card2",
2020
"title": "Dispose Garbage",
21-
"label": "10 mins",
22-
"description": "Sort out recyclable and waste as needed - 2017-11-01",
21+
"label": "2017-11-01",
22+
"description": "Sort out recyclable and waste as needed",
2323
"metadata": {
2424
"completedAt": "2017-11-01T10:00:00Z",
2525
"shortCode": "aaa"
@@ -28,8 +28,8 @@
2828
{
2929
"id": "Card3",
3030
"title": "Write Blog",
31-
"label": "30 mins",
32-
"description": "Can AI make memes? - 2017-10-01",
31+
"label": "2017-10-01",
32+
"description": "Can AI make memes?",
3333
"metadata": {
3434
"completedAt": "2017-10-01T10:00:00Z",
3535
"shortCode": "fa1"
@@ -38,8 +38,8 @@
3838
{
3939
"id": "Card4",
4040
"title": "Pay Rent",
41-
"label": "5 mins",
42-
"description": "Transfer to bank account - 2017-09-01",
41+
"label": "2017-09-01",
42+
"description": "Transfer to bank account",
4343
"metadata": {
4444
"completedAt": "2017-09-01T10:00:00Z",
4545
"shortCode": "ga2"

0 commit comments

Comments
 (0)