Defenition:_ POS – “Point of Sale”. At the point of sale, the merchant calculates the amount owed by the customer, indicates that amount, may prepare an invoice for the customer (which may be a cash register printout), and indicates the options for the customer to make payment._

In the previous chapter, we completed the implementation of CRUD operations for POS data in React. We implemented both the frontend UI and backend API endpoints for the CRUD operation.

In this chapter, we are going to continue to implement CRUD operation for the general information of a grocery store. This is going to include the manipulation of the POS machine, Branch, Supplier, Employee, and customer data. These data are required for general CRUD operation. The process is similar to the previous chapter. The idea is to help you understand the CRUD operation in more detail with improvements made in each repeated phase. Here, we are going to go a bit further by adding an image upload feature for the storefront image.

But before we continue with this, we just want to refactor some ugly pos machine folder structure so that it would look cleaner as shown in the screenshot below:

Old pos machine folder structure

Here, we just moved all the main components to a single folder. Then, we definitely need to update the imports in our App.js as shown in the code snippet below:

Now, we can use this template in this chapter.

Here, we can copy the code from the previous chapter and updates.

For branch data, we want to keep general data for the branch.

Adding the door

First, we need a link that can help us navigate to the index page. Then from the index page, we can place more links that navigate to other actions such as Create, Update, Delete.

First, we need to open src>component>sidebar component and implement the sidebar UI component using the code from the following code snippet:

Here, we basically have some Link components wrapped inside the list elements.

Hence, we will get the sidebar as shown in the following screenshot:

New sidebar UI

Redux Setup

The redux implementation and configuration are similar to the previous chapters.

We start by creating a new constant in order to define the state. For this, we need to open constant/index.js file and use the code provided in the code snippet below:

Then, we need to go to the reducer folder to create a new branch.reducer.js. In this file, we are going to define the reducer function similar to previous reducers we have defined. Here, we need to make use of the code from the following code snippet:

We should not forget to combine the reducer in our root reducer in reducer/index.reducer.js as shown in the code snippet below:

#javascript #node.js #pos tutorial #react