Version #2: ability to add a new item to the list and save it in the database

At this point, you shall be able to see a fetched list in a specified order. Let's make an ability to add a new item to the end of the list.

This version contains many updated code. Let's split it on two steps.

Version #2.1: fetched list items

Here we prepare currentListId property, where we will keep the ID of the list. It is required, because each logged user of the application, will have his own list (with different dashboardItems)

NOTE: Below, we introduce a currentListId: null property.
In future, production application the list will be created on the backend before fetch request.
Below's implementation approach is just for beginners.
If you have any questions, regarding that implementation please request support at our ReactJS.co facebook community page https://www.facebook.com/groups/reactjs.co/.

OK, let's start our work so you will get even better all the 4 points above in practise.

1) First of all, we need to create a new property in our dashboard's reducer object. We will call it currentListId and it will store the ID from the databse, of our list called dashboardMainListOrder:

2) The most important part is to define the const currentListId (line 113).

Important: we updated a promise answer (was an array and now is object). You should be carefully, cause catch method also should be updated. That meant dispatch(fetchDashboardDataSuccess(dashboardItemsArray)) line 151 will invoked with object.

3) And the last one is improve our reducer (FETCH_DASHBOARD_DATA_SUCCESS action handler). It will save also the list's ID in our reducer.

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

Version #2.2: Create and save item

Plan for making the adding ability feature work is as following:

1) Add a new function called dashboardAddItemAsync in the src/routes/Dashboard/modules/dashboard.js

3) Improve the src/routes/Dashboard/containers/DashboardContainer.js codebase, so we will introduce a new function called "dashboardAddItemAsync". This function is making an async request to the GraphQL's server

1) Here we start working on the next function called dashboardAddItemAsync. First three steps (1-4) are adding the item into the DashboardItem class, the 4th step is just console logging the ID from the database:

In the steps 5 to 8, we are editing (update's mutation query) the list with use of orderListIdsArray from the scaphold's GraphQL DashboardItemListOrder class:

Below is the complete dashboardAddItemAsync function from the src/routes/Dashboard/modules/dashboard.js (screenshots from diffs of the same function are above in the point 4 and 5):

2) Next we are improving the DASHBOARD_ADD_ITEM action handler, so instead of mocked ID it will use a real ID from our database:

3) The last step is to edit container src/routes/Dashboard/containers/DashboardContainer.js and view src/routes/Dashboard/components/Dashboard.js.
So wer will use there the this.props.dashboardAddItemAsync({ newDashboardItemValue: val, dashboardState: this.props.dashboard }) instead of the old one (dashboardAddItem) function:

At this point, you will be able to see the following:

ANIMATED-GIF-TO-ADD

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