Version #3: ability to drag-and-drop, reorder and save it into the database

We want to save our reorder actions permamently in the databse, so after a browser refresh the data is still in a correct order. Let's start working on that mechanism right now.


1) The diff belows, mostly shows that the logic has been moved from the actions' handler to the action handler (the function called dashboardReorderItemsAsync):

The variable name const orderListIdsArray contains the IDs that we need to update in our property (called orderListIdsArray - the same as a variable) in the scaphold's class called DashboardItemListOrder:
graphql apollo tutorial


2) The request to scaphold's server and dispatch the final newDashboardItems (line 320 on the screenshot):
graphql apollo tutorial


3) You can also find the logic deleted from the action's handler - this logic has been moved to the part from step 1 above:
graphql apollo tutorial

4) This part shall be clear to you, we just renamed the old function dashboardReorderItems to the new one dashboardReorderItemsAsync:
graphql apollo tutorial



The commit from the above sub-chapter:
https://github.com/ReactPoland/reactjs-redux-tutorial/commit/graph-chapter-5

Version 4: ability to edit an existing item

1) Preparation the dashboardEditItemAsync function. Standard GraphQL query's preparation (we have done similar stuff already in previous steps):
graphql apollo tutorial


2) Here we simply query the GraphQL server with use of the mutationDashboardItemUpdate and variablesListUpdate:
graphql apollo tutorial


3) In the Dashboard's container and view component we change (as we did before) the dashboardEditItem to dashboardEditItemAsync in order to use the new asynchronous functions:
graphql apollo tutorial


At this point, we have an app where we can:

  • 1) fetch items from the database
  • 2) add an item to the database
  • 3) reorder the items in the list in the database
  • 4) edit an item from the database
Now it's time to implement the user authentication, properly.


The commit from the above sub-chapter:
https://github.com/ReactPoland/reactjs-redux-tutorial/commit/graph-chapter-6

React Poland 2017