Fix/sort functionality v2

src/controllers/BoardContainer.js

@@ -49,7 +49,12 @@ class BoardContainer extends Component {
       handleLaneDragEnd(removedIndex, addedIndex, payload)
     }
   }
-  getCardDetails = (laneId, cardIndex) => {
+  getCardDetails = (laneId, cardIndex, sortLaneFunction) => {
+    if (sortLaneFunction) {
+      const toBeSorted = this.props.reducerData.lanes.find(lane => lane.id === laneId).cards;
+      toBeSorted.sort(sortLaneFunction);
+      return toBeSorted[cardIndex];
+    }
     return this.props.reducerData.lanes.find(lane => lane.id === laneId).cards[cardIndex]
   }
   getLaneDetails = index => {

src/controllers/Lane.js

@@ -117,7 +117,7 @@ class Lane extends Component {
     return `TrelloBoard${boardId}Lane`
   }
 
-  onDragEnd = (laneId, result) => {
+  onDragEnd = (laneId, result, laneSortFunction) => {
     const {handleDragEnd} = this.props
     const {addedIndex, payload} = result
 
@@ -133,7 +133,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)
       }
@@ -191,11 +192,11 @@ class Lane extends Component {
           dragClass={cardDragClass}
           dropClass={cardDropClass}
           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}
-          getChildPayload={index => this.props.getCardDetails(id, index)}>
+          getChildPayload={index => this.props.getCardDetails(id, index, laneSortFunction)}>
           {cardList}
         </Container>
         {editable && !addCardMode && <components.AddCardLink onClick={this.showEditableCard} t={t} />}
@@ -217,7 +218,7 @@ class Lane extends Component {
     this.props.onLaneUpdate(this.props.id, {title: value})
   }
 
-  renderHeader = (pickedProps) => {
+  renderHeader = pickedProps => {
     const {components} = this.props
     return (
       <components.LaneHeader

src/helpers/LaneHelper.js

@@ -17,15 +17,22 @@ const LaneHelper = {
     return update(state, {lanes: {$set: updatedLanes}})
   },
 
-  appendCardsToLane: (state, {laneId, newCards, index}) => {
+  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(laneSortFunction)
+          }
+
+          return update(lane, {cards: {$set: cardsToUpdate}})
         } else {
           const cardsToUpdate = [...lane.cards, ...newCards]
           return update(lane, {cards: {$set: cardsToUpdate}})
@@ -36,8 +43,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 +55,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
       }
@@ -91,7 +98,7 @@ const LaneHelper = {
     })
   },
 
-  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) {
@@ -103,7 +110,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}) => {
@@ -123,7 +134,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]]}})
   },
 

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',
-    () => <Board data={data} laneSortFunction={(card1, card2) => new Date(card1.metadata.completedAt) - new Date(card2.metadata.completedAt)} />,
-    {info: 'A lane sorted by completed at ascending'}
-  )
+  .add('Sorted Lane', () => <Board data={data} laneSortFunction={compare} />, {
+    info: 'A lane sorted by completed at ascending'
+  })
   .add(
     'Reverse Sorted Lane',
-    () => <Board data={data} laneSortFunction={(card1, card2) => new Date(card2.metadata.completedAt) - new Date(card1.metadata.completedAt)} />,
+    () => (
+      <Board
+        data={data}
+        laneSortFunction={(card1, card2) => new Date(card2.metadata.completedAt) - new Date(card1.metadata.completedAt)}
+      />
+    ),
     {info: 'A lane sorted by completed at descending'}
   )

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"
+        }
+      ]
     }
   ]
 }