From e762557fe33c5f30082a720fad6506f8ce023c15 Mon Sep 17 00:00:00 2001 From: Gabriel Belgamo <19699724+belgamo@users.noreply.github.com> Date: Sat, 28 Dec 2019 04:02:08 -0300 Subject: [PATCH 1/5] feat: Sort cards before state update --- src/controllers/Lane.js | 9 +- src/helpers/LaneHelper.js | 31 +- stories/Sort.story.js | 26 +- stories/data/data-sort.json | 14 + tests/__snapshots__/Storyshots.test.js.snap | 2472 +++++++++++++++++-- 5 files changed, 2377 insertions(+), 175 deletions(-) diff --git a/src/controllers/Lane.js b/src/controllers/Lane.js index d50bb5bf0..50674e8d9 100644 --- a/src/controllers/Lane.js +++ b/src/controllers/Lane.js @@ -110,7 +110,7 @@ class Lane extends Component { return `TrelloBoard${boardId}Lane` } - onDragEnd = (laneId, result) => { + onDragEnd = (laneId, result, laneSortFunction) => { const {handleDragEnd} = this.props const {addedIndex, payload} = result this.setState({isDraggingOver: false}) @@ -122,7 +122,8 @@ class Lane extends Component { fromLaneId: payload.laneId, toLaneId: laneId, cardId: payload.id, - index: addedIndex + index: addedIndex, + laneSortFunction }) this.props.onCardMoveAcrossLanes(payload.laneId, laneId, payload.id, addedIndex) } @@ -178,7 +179,7 @@ class Lane extends Component { groupName={this.groupName} dragClass={cardDragClass} onDragStart={this.onDragStart} - onDrop={e => this.onDragEnd(id, e)} + onDrop={e => this.onDragEnd(id, e, laneSortFunction)} onDragEnter={() => this.setState({isDraggingOver: true})} onDragLeave={() => this.setState({isDraggingOver: false})} shouldAcceptDrop={this.shouldAcceptDrop} @@ -204,7 +205,7 @@ class Lane extends Component { this.props.onLaneUpdate(this.props.id, {title: value}) } - renderHeader = (pickedProps) => { + renderHeader = pickedProps => { const {components} = this.props return ( { + appendCardsToLane: (state, {laneId, newCards, index}, laneSortFunction) => { const lane = state.lanes.find(lane => lane.id === laneId) newCards = newCards .map(c => update(c, {laneId: {$set: laneId}})) .filter(c => lane.cards.find(card => card.id === c.id) == null) + return state.lanes.map(lane => { if (lane.id === laneId) { if (index !== undefined) { - return update(lane, {cards: {$splice: [[index, 0, ...newCards]]}}) + let cardsToUpdate = [...lane.cards, ...newCards] + + if (laneSortFunction) { + cardsToUpdate.sort(function(card1, card2) { + return laneSortFunction(card1, card2) + }) + } + + return update(lane, {cards: {$set: cardsToUpdate}}) } else { const cardsToUpdate = [...lane.cards, ...newCards] return update(lane, {cards: {$set: cardsToUpdate}}) @@ -36,8 +45,8 @@ const LaneHelper = { }) }, - appendCardToLane: (state, {laneId, card, index}) => { - const newLanes = LaneHelper.appendCardsToLane(state, {laneId: laneId, newCards: [card], index}) + appendCardToLane: (state, {laneId, card, index}, laneSortFunction) => { + const newLanes = LaneHelper.appendCardsToLane(state, {laneId: laneId, newCards: [card], index}, laneSortFunction) return update(state, {lanes: {$set: newLanes}}) }, @@ -48,8 +57,8 @@ const LaneHelper = { updateLane: (state, updatedLane) => { const newLanes = state.lanes.map(lane => { - if (updatedLane.id == lane.id ) { - return { ...lane, ...updatedLane } + if (updatedLane.id == lane.id) { + return {...lane, ...updatedLane} } else { return lane } @@ -69,7 +78,7 @@ const LaneHelper = { return update(state, {lanes: {$set: lanes}}) }, - moveCardAcrossLanes: (state, {fromLaneId, toLaneId, cardId, index}) => { + moveCardAcrossLanes: (state, {fromLaneId, toLaneId, cardId, index, laneSortFunction}) => { let cardToMove = null const interimLanes = state.lanes.map(lane => { if (lane.id === fromLaneId) { @@ -81,7 +90,11 @@ const LaneHelper = { } }) const updatedState = update(state, {lanes: {$set: interimLanes}}) - return LaneHelper.appendCardToLane(updatedState, {laneId: toLaneId, card: cardToMove, index: index}) + return LaneHelper.appendCardToLane( + updatedState, + {laneId: toLaneId, card: cardToMove, index: index}, + laneSortFunction + ) }, updateCardsForLane: (state, {laneId, cards}) => { @@ -101,7 +114,7 @@ const LaneHelper = { moveLane: (state, {oldIndex, newIndex}) => { const laneToMove = state.lanes[oldIndex] - const tempState = update(state, {lanes: {$splice: [[oldIndex, 1]]}}); + const tempState = update(state, {lanes: {$splice: [[oldIndex, 1]]}}) return update(tempState, {lanes: {$splice: [[newIndex, 0, laneToMove]]}}) }, diff --git a/stories/Sort.story.js b/stories/Sort.story.js index dcd3e0d42..f8455e0b0 100644 --- a/stories/Sort.story.js +++ b/stories/Sort.story.js @@ -5,14 +5,28 @@ import Board from '../src' const data = require('./data/data-sort.json') +function compare(a, b) { + if (a.title > b.title) { + return 1 + } + if (a.title < b.title) { + return -1 + } + + return 0 +} + storiesOf('Basic Functions', module) - .add( - 'Sorted Lane', - () => new Date(card1.metadata.completedAt) - new Date(card2.metadata.completedAt)} />, - {info: 'A lane sorted by completed at ascending'} - ) + .add('Sorted Lane', () => compare(card1, card2)} />, { + info: 'A lane sorted by completed at ascending' + }) .add( 'Reverse Sorted Lane', - () => new Date(card2.metadata.completedAt) - new Date(card1.metadata.completedAt)} />, + () => ( + new Date(card2.metadata.completedAt) - new Date(card1.metadata.completedAt)} + /> + ), {info: 'A lane sorted by completed at descending'} ) diff --git a/stories/data/data-sort.json b/stories/data/data-sort.json index babe22cfe..dbe0fb850 100644 --- a/stories/data/data-sort.json +++ b/stories/data/data-sort.json @@ -47,6 +47,20 @@ } } ] + }, + { + "id": "WIP", + "title": "Work In Progress", + "label": "10/20", + "style": {"width": 280}, + "cards": [ + { + "id": "Wip1", + "title": "Clean House", + "label": "30 mins", + "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses" + } + ] } ] } diff --git a/tests/__snapshots__/Storyshots.test.js.snap b/tests/__snapshots__/Storyshots.test.js.snap index 366cb474b..c3e847692 100644 --- a/tests/__snapshots__/Storyshots.test.js.snap +++ b/tests/__snapshots__/Storyshots.test.js.snap @@ -10325,6 +10325,24 @@ exports[`Storyshots Basic Functions Reverse Sorted Lane 1`] = ` "label": "20/70", "title": "Sorted Lane", }, + Object { + "cards": Array [ + Object { + "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses", + "id": "Wip1", + "label": "30 mins", + "laneId": "WIP", + "title": "Clean House", + }, + ], + "currentPage": 1, + "id": "WIP", + "label": "10/20", + "style": Object { + "width": 280, + }, + "title": "Work In Progress", + }, ], } } @@ -10535,6 +10553,87 @@ exports[`Storyshots Basic Functions Reverse Sorted Lane 1`] = ` +
+
+ + Work In Progress + + + + 10/20 + + +
+
+
+
+
+
+ + Clean House + + + 30 mins + +
+ +
+
+
+ Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses +
+
+
+
+
+
@@ -10856,6 +10955,115 @@ exports[`Storyshots Basic Functions Reverse Sorted Lane 1`] = ` } + , + + + { + + +
+ + + + + id + + + : + + 'WIP' + + , + + +
+ + + + + title + + + : + + 'Work In Progress' + + , + + +
+ + + + + label + + + : + + '10/20' + + , + + +
+ + + + … + + +
+ + + } + + ] } @@ -11179,6 +11387,24 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` "label": "20/70", "title": "Sorted Lane", }, + Object { + "cards": Array [ + Object { + "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses", + "id": "Wip1", + "label": "30 mins", + "laneId": "WIP", + "title": "Clean House", + }, + ], + "currentPage": 1, + "id": "WIP", + "label": "10/20", + "style": Object { + "width": 280, + }, + "title": "Work In Progress", + }, ], } } @@ -11227,7 +11453,7 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` >
@@ -11238,12 +11464,12 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` className="c9" draggable={true} > - Pay Rent + Buy milk - 2017-09-01 + 2017-12-01
- Transfer to bank account + 2 Gallons of milk at the Deli store
@@ -11268,7 +11494,7 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` >
@@ -11279,12 +11505,12 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` className="c9" draggable={true} > - Write Blog + Dispose Garbage - 2017-10-01 + 2017-11-01
- Can AI make memes? + Sort out recyclable and waste as needed
@@ -11309,7 +11535,7 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` >
@@ -11320,12 +11546,12 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` className="c9" draggable={true} > - Dispose Garbage + Pay Rent - 2017-11-01 + 2017-09-01
- Sort out recyclable and waste as needed + Transfer to bank account
@@ -11350,7 +11576,7 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` >
@@ -11361,12 +11587,12 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` className="c9" draggable={true} > - Buy milk + Write Blog - 2017-12-01 + 2017-10-01
- 2 Gallons of milk at the Deli store + Can AI make memes? +
+
+ + + + +
+
+ + Work In Progress + + + + 10/20 + + +
+
+
+
+
+
+ + Clean House + + + 30 mins + +
+ +
+
+
+ Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses
@@ -11710,6 +12017,115 @@ exports[`Storyshots Basic Functions Sorted Lane 1`] = ` } + , + + + { + + +
+ + + + + id + + + : + + 'WIP' + + , + + +
+ + + + + title + + + : + + 'Work In Progress' + + , + + +
+ + + + + label + + + : + + '10/20' + + , + + +
+ + + + … + + +
+ + + } + + ] } @@ -21963,6 +22379,24 @@ exports[`Storyshots Custom Components NewLaneForm 1`] = ` "label": "20/70", "title": "Sorted Lane", }, + Object { + "cards": Array [ + Object { + "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses", + "id": "Wip1", + "label": "30 mins", + "laneId": "WIP", + "title": "Clean House", + }, + ], + "currentPage": 1, + "id": "WIP", + "label": "10/20", + "style": Object { + "width": 280, + }, + "title": "Work In Progress", + }, ], } } @@ -22226,44 +22660,178 @@ exports[`Storyshots Custom Components NewLaneForm 1`] = `
- - -
-
- -
-
- - - +
+ + Work In Progress + + + + 10/20 + + +
+ + + +
+
+ + Lane actions + +
+ +
+
+
+
+ Delete lane +
+
+
+
+
+
+
+
+
+
+ + Clean House + + + 30 mins + +
+ +
+
+
+ Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses +
+
+
+
+ + Click to add card + +
+ + + +
+
+ +
+
+ + +
+ , + + + { + + +
+ + + + + id + + + : + + 'WIP' + + , + + +
+ + + + + title + + + : + + 'Work In Progress' + + , + + +
+ + + + + label + + + : + + '10/20' + + , + + +
+ + + + … + + +
+ + + } + + ] } @@ -23105,6 +23782,24 @@ exports[`Storyshots Custom Components NewLaneSection 1`] = ` "label": "20/70", "title": "Sorted Lane", }, + Object { + "cards": Array [ + Object { + "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses", + "id": "Wip1", + "label": "30 mins", + "laneId": "WIP", + "title": "Clean House", + }, + ], + "currentPage": 1, + "id": "WIP", + "label": "10/20", + "style": Object { + "width": 280, + }, + "title": "Work In Progress", + }, ], } } @@ -23323,7 +24018,141 @@ exports[`Storyshots Custom Components NewLaneSection 1`] = ` >
+
+ + Pay Rent + + + 2017-09-01 + +
+ +
+
+
+ Transfer to bank account +
+
+
+ + + Click to add card + + + +
+
+ + Work In Progress + + + + 10/20 + + +
+ + + +
+
+ + Lane actions + +
+ +
+
+
+
+ Delete lane +
+
+
+
+
+
+
+
+
@@ -23334,12 +24163,12 @@ exports[`Storyshots Custom Components NewLaneSection 1`] = ` className="c19" draggable={true} > - Pay Rent + Clean House - 2017-09-01 + 30 mins
- Transfer to bank account + Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses
@@ -23753,6 +24582,115 @@ exports[`Storyshots Custom Components NewLaneSection 1`] = ` } + , + + + { + + +
+ + + + + id + + + : + + 'WIP' + + , + + +
+ + + + + title + + + : + + 'Work In Progress' + + , + + +
+ + + + + label + + + : + + '10/20' + + , + + +
+ + + + … + + +
+ + + } + + ] } @@ -32521,6 +33459,24 @@ exports[`Storyshots Editable Board Add New Lane 1`] = ` "label": "20/70", "title": "Sorted Lane", }, + Object { + "cards": Array [ + Object { + "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses", + "id": "Wip1", + "label": "30 mins", + "laneId": "WIP", + "title": "Clean House", + }, + ], + "currentPage": 1, + "id": "WIP", + "label": "10/20", + "style": Object { + "width": 280, + }, + "title": "Work In Progress", + }, ], } } @@ -32694,52 +33650,186 @@ exports[`Storyshots Editable Board Add New Lane 1`] = `
+
+
+ + Write Blog + + + 2017-10-01 + +
+ +
+
+
+ Can AI make memes? +
+
+
+
+
+
+ + Pay Rent + + + 2017-09-01 + +
+ +
+
+
+ Transfer to bank account +
+
+
+
+ + Click to add card + + +
+
+
+ + Work In Progress + + + + 10/20 + + +
+ + + +
-
-
- - Write Blog - - - 2017-10-01 - -
+
+ -
-
+ ✖ + +
+
+
- Can AI make memes? + Delete lane
- +
+ +
+
+
@@ -32750,12 +33840,12 @@ exports[`Storyshots Editable Board Add New Lane 1`] = ` className="c19" draggable={true} > - Pay Rent + Clean House - 2017-09-01 + 30 mins
- Transfer to bank account + Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses
@@ -33120,6 +34210,115 @@ exports[`Storyshots Editable Board Add New Lane 1`] = ` } + , + + + { + + +
+ + + + + id + + + : + + 'WIP' + + , + + +
+ + + + + title + + + : + + 'Work In Progress' + + , + + +
+ + + + + label + + + : + + '10/20' + + , + + +
+ + + + … + + +
+ + + } + + ] } @@ -37567,6 +38766,24 @@ exports[`Storyshots Editable Board Inline Edit Lane Title 1`] = ` "label": "20/70", "title": "Sorted Lane", }, + Object { + "cards": Array [ + Object { + "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses", + "id": "Wip1", + "label": "30 mins", + "laneId": "WIP", + "title": "Clean House", + }, + ], + "currentPage": 1, + "id": "WIP", + "label": "10/20", + "style": Object { + "width": 280, + }, + "title": "Work In Progress", + }, ], } } @@ -37676,7 +38893,48 @@ exports[`Storyshots Editable Board Inline Edit Lane Title 1`] = ` >
+
+ + Buy milk + + + 2017-12-01 + +
+ +
+
+
+ 2 Gallons of milk at the Deli store +
+
+
+
+
@@ -37687,12 +38945,12 @@ exports[`Storyshots Editable Board Inline Edit Lane Title 1`] = ` className="c20" draggable={true} > - Buy milk + Dispose Garbage - 2017-12-01 + 2017-11-01
- 2 Gallons of milk at the Deli store + Sort out recyclable and waste as needed
@@ -37717,7 +38975,7 @@ exports[`Storyshots Editable Board Inline Edit Lane Title 1`] = ` >
@@ -37728,12 +38986,12 @@ exports[`Storyshots Editable Board Inline Edit Lane Title 1`] = ` className="c20" draggable={true} > - Dispose Garbage + Write Blog - 2017-11-01 + 2017-10-01
- Sort out recyclable and waste as needed + Can AI make memes?
@@ -37758,7 +39016,7 @@ exports[`Storyshots Editable Board Inline Edit Lane Title 1`] = ` >
@@ -37769,12 +39027,12 @@ exports[`Storyshots Editable Board Inline Edit Lane Title 1`] = ` className="c20" draggable={true} > - Write Blog + Pay Rent - 2017-10-01 + 2017-09-01
- Can AI make memes? + Transfer to bank account
+ + + Click to add card + + +
+
+
+ +