Fix the card moving when the lane id is a non-number (#231)

assets/index.js

@@ -6,11 +6,11 @@ import getUrlParams from './services/getUrlParams'
 const board = {
   lanes: [
     {
-      id: 1,
+      id: '0206c8d7-4d48-4d97-b867-86fc2d21074d',
       title: 'Lane Backlog',
       cards: [
         {
-          id: 1,
+          id: '0206c8d7-4d48-4d97-b867-86fc2d21075d',
           title: 'Card title 1',
           description: 'Card content'
         },

src/components/Board/index.js

@@ -212,7 +212,7 @@ function BoardContainer({
   onCardDragEnd
 }) {
   function handleOnDragEnd(event) {
-    const coordinates = getCoordinates(event)
+    const coordinates = getCoordinates(event, board)
     if (!coordinates.source) return
 
     isALaneMove(event.type)

src/components/Board/services/index.js

@@ -1,4 +1,4 @@
-function getCoordinates(event) {
+function getCoordinates(event, board) {
   if (event.destination === null) return {}
 
   const laneSource = { fromPosition: event.source.index }
@@ -9,8 +9,8 @@ function getCoordinates(event) {
   }
 
   return {
-    source: { ...laneSource, fromLaneId: parseInt(event.source.droppableId) },
-    destination: { ...laneDestination, toLaneId: parseInt(event.destination.droppableId) }
+    source: { ...laneSource, fromLaneId: getLane(board, event.source.droppableId).id },
+    destination: { ...laneDestination, toLaneId: getLane(board, event.destination.droppableId).id }
   }
 }
 
@@ -23,4 +23,8 @@ function getCard(board, sourceCoordinate) {
   return lane.cards[sourceCoordinate.fromPosition]
 }
 
+function getLane(board, droppableId) {
+  return board.lanes.find(({ id }) => String(id) === droppableId)
+}
+
 export { getCard, getCoordinates, isALaneMove }

src/components/Board/services/index.spec.js

@@ -20,16 +20,23 @@ describe('#getCoordinates', () => {
   })
 
   describe('when the event is a card move', () => {
+    const board = {
+      lanes: [
+        { id: 1, cards: [{ id: 1 }] },
+        { id: '2', cards: [{ id: 2 }] }
+      ]
+    }
+
     const event = {
       type: 'CARD',
-      source: { index: 0, droppableId: 0 },
-      destination: { index: 1, droppableId: 1 }
+      source: { index: 0, droppableId: '1' },
+      destination: { index: 1, droppableId: '2' }
     }
 
     it('returns the card coordinates', () => {
-      expect(getCoordinates(event)).toEqual({
-        destination: { toLaneId: 1, toPosition: 1 },
-        source: { fromLaneId: 0, fromPosition: 0 }
+      expect(getCoordinates(event, board)).toEqual({
+        source: { fromLaneId: 1, fromPosition: 0 },
+        destination: { toLaneId: '2', toPosition: 1 }
       })
     })
   })