3

This question is a little long-winded but I want you to understand exactly what is occuring...

I'm building a task manager desktop app (Electron) for our company to use and I have a strange behavior occuring. The task manager is 6 columns (one for each employee) and contains a vertical list of tasks to be completed. It includes a drag and drop feature so you can sort the tasks.

I'm using Dragula to handle the drag and drop portion, then collect the ID number of all of the tasks, in order from top to bottom, storing them in an array.

I'm using PouchDB to update the database and sync the other running applications.

For the Dragula / PouchDB side I am using the following code:

var containers = [];
containers.push(ReactDOM.findDOMNode(this.refs.taskContainer));

var drake = Dragula(containers);
drake.on('drop', function(el, target, source, sibling) {

  // Get Desired Order of IDs
  for(i = 0; i < source.children.length; i++) {
    ids.push(source.children[i].id);
  }

  // Loop through IDs, write an "order" to tasks in PouchDB Database ("TaskData").
  // TaskData's replication is "live" so it automatically syncs to the DB.
  for(i = 0; i < ids.length; i++) {
    TaskData.get(ids[i]).then(function(doc) {   
      doc.order = ids.indexOf(doc._id);
      TaskData.put(doc).catch(function(err) {
        console.log(err);
      });
    });
  }

});

At this point, my TaskData now has a new "order" key, with the desired values. Now, I need to render the ReactJS Components -- in order.

Get tasks from props (refreshed from TaskData) and filter out what is needed:

var tasks = this.props.tasks.filter(function(task) {
  if(task.archive !== 1) {
    return true
  }
});

I then sort the tasks by the above mentioned order number (using lodash.js) and map the sorted data to React Components:

tasks = _.sortBy(tasks, 'order').map(function(task) {
  return <Task key={task.id} order={task.order} ...more props />
});

Great, my tasks are rendered in order and everything is looking good.

Now, the problem...

When I drag and drop to re-order my tasks from ["1", "2", "3", "4"] to ["4", "1", "2", "3"], I actually get ["3", "4", "1", "2"]. The tasks move and update (because of the Dragula / PouchDB code above). Weird... I type in the Dev Tools location.reload() and to my suprise, the tasks are now ordered as I initially wanted: ["4", "1", "2", "3"].

Trying again, I move the tasks from ["1", "2", "3", "4"] to ["1", "3", "2", "4"], the tasks reset back to ["1", "2", "3", "4"]. Again, location.reload() and the tasks are now ordered: ["1", "3", "2", "4"].

In trying to debug this, I found that if I disable the _.sortBy function, the tasks stay put after being dropped (although they are out of order to begin with). The tasks move to their desired location and have the desired order number.

I've also found that if I disable the PouchDB .put(), and keep the _.sortBy working, it also works, but the data is not written to the server, and the order number does not update as a result.

Perhaps I have just been staring at the code for too long, but I cannot figure out why the tasks are bouncing around. Anyone have any ideas?

Thanks for your help!

Justin
  • 524
  • 5
  • 19
  • Possibly a duplicate of http://stackoverflow.com/questions/34010410/reactjs-sorting-an-array-of-objects-in-state – Alf Dec 01 '15 at 01:32
  • Yes, it is quite similar. Hopefully one of us will get an answer as it may help the other person. – Justin Dec 01 '15 at 13:58
  • Yes this is extremely similar to the post that I had. From what I can see our consistencies are the use of dragula, sorting of items, and re-rendering our components. Question: you are not saving your re-ordered items to state are you? You are simply getting a list of tasks then sorting/mapping to new components, right? – BDUB Dec 01 '15 at 14:47
  • @BDUB I have tried numerous attempts at solving this. One method involved taking the tasks prop, modifying the order and storing that as state but I had no luck with that as well. Currently, as my code above demonstrates, I get the tasks prop passed down, I then modify the order and map the components right in the render function. Ideally, I would move these into separate functions - but I'm trying to get the components functional first. – Justin Dec 01 '15 at 15:06
  • @Phillips126 Check this out: https://github.com/bevacqua/dragula/issues/188#issuecomment-139914022. I have a pretty good hunch that dragula-react and react don't play nicely together. It may be the case that dragula reorders items after react renders your components on the drop event. Here is a lead that I am pursuing: do all of the data manipulation in the drop event and then do rendering in the dragend event, to make sure dragula no longer has it's hands in the cookie jar. I'll let you know. – BDUB Dec 01 '15 at 19:05
  • @BDUB Good find! That thread explains exactly what is happening in my application. I had a hunch that Dragula was forcing the order after my data was updated. Let me know how you make out! – Justin Dec 01 '15 at 19:16

1 Answers1

0

I managed to get mine working by implementing uuid. Heres a snippet below:

// Import the code
import uuid from 'uuid';

// My dummy component
<Messages>
  <ul>
    {messages.map(({ value, signature }) => (
      <Message 
        value={value}
        key={uuid.v4()} // use the uuid as the unique key
        from={signature}
        onMessageRecieved={this.handleMessageRecieved} />
    ))}
  </ul>
</Messages>

Check these notes for some more about the implementation. https://survivejs.com/react/getting-started/implementing-notes/

kudos to @Alf for this link. Helped me solve my issue, see @Dmitri Zaitsev's answer.

Happy coding =)

0xe1λ7r
  • 1,957
  • 22
  • 31