Implementation of the list's order is more complcated, than you can expect. Let's deep into details so you will learn more, why it's a tricky task to do properly fullstack.

In our case, we will keep IDs of items in a order list. That order will be keept in a separate class called DashboardItemListOrder. There is a video made for the sub-chapter below in Version1. In that video, you will see how this all looks like in the database and cooperates, so the correct order is stored in the database.

Our next steps in order to improve the fullstack app are:

  • a) Version 1: ordered read-only list fetched from the database
  • b) Version 2: ability to add a new item to the list and save it in the database
  • c) Version 3: ability to drag-and-drop, reorder and save it permamently in the databse, so after a browser refresh the data is still in a correct order
  • d) Version 4: ability to edit an existing item
  • e) Version 5: edge cases management, so in any situation the feature will work correctly

Let's start with working on the version #1 of our ordered list feature.

React Poland 2017