Create simple POS with React.js, Node.js, and MongoDB #8: CRUD POS Machine

Create simple POS with React.js, Node.js, and MongoDB #8: CRUD POS Machine

Create simple POS with React.js, Node.js, and MongoDB #8: CRUD POS Machine

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 tutorial, we completed the implementation of the redux mechanism in our register and Forgot Password components. This is the continuation of the same tutorial from where we left off.

In this tutorial, we move forward to CRUD operations for POS machine data. CRUD stands for Create, Read, Update, and Delete operations. Here, we are going to implement the CRUD operations for POS machine data.

So, let’s get started!!

Preparing States

Frontend

In this section, we are going to add a new redux function that we want to use.

First, we start with the preparation of the redux component with the new redux state in constant.js. Then, we add a new state for Delete operation. First, we export the states as shown in the code snippet below;

Next, we are going to create new reducer name posmachine.reducer.js and handle the state dispatches with the following piece of code:

Then, we import the new register configuration and combine the reducers with other reducers that we previously implemented. The combined reducer configuration is exported as shown in the code snippet below:

Next, we are going to create a new action file name posmachine.action.js. Then, we need to import states and functions just as in previous chapters. It is similar to previous action files that we have created. But, the only difference is the presence of delete operation. The overall code for this action configuration is provided in the code snippet below:

Hence, we have completed the Front-end part of the work. Now, we move to the backend.

Backend

We need to prepare the backend section before we create a new endpoint. For backend, we are going to create a new schema name pos_machine_schema.js and a new table structure using the mongoose package. The schema and model for the table structure is provided in the code snippet below:

Next, we need to create a new file named api_pos_machine.js. Then, we need to import the following packages and libraries:

Then, we need to import the new API file to the main API and use it as a middleware as shown in the code snippet below:

Hence, we are done with the backend part as well

Create Operation

Here, we are going to implement the create operation. This operation adds new data. First, we are going to start with the frontend then the backend.

Frontend

First, we create a new action named create as shown in the code snippet below:

Then, we need to create a new folder name posmachine_create as that screenshot below:

 New Folder Name: "posmachine_create"

New Folder Name: “posmachine_create”

Next, we need to import component and function that we need to use as shown in the code snippet below:

Then, we need to create a new redux instance called Pos_machine as shown in the code snippet below:

Here, we created a dispatch and reducer.

Next, we check the user’s login state with the following piece of code:

Now, we need to create a new simple form for getting data as shown in the code snippet below:

Then, we need to create a main UI function which we can definitely copy from prev chapter. The code is provided in the code snippet below:

Next, we need to register the component to App.js. First, we need to import using the following piece of code:

Then, we need to register a new route as shown below:

Here, when we navigate to http://localhost:3000/posmachine/create, we get the following result:

Create Form

Create Form

Backend

In the backend part, we need to create a new API endpoint in order to add a new row. For that, we can use the code from the following code snippet:

Now, we can try to submit new data. Since we do not have any view in order to see the inserted data, we can open the database GUI to see the new data as shown in the code snippet below:

Database Row

Database Row

Index Operation

Now, we move on to the index i.e. read operation. First, we are going to implement the backend API endpoint then migrate to the implementation of the frontend part.

Backend

Here, we create a new API endpoint as shown in the code snippet below:

Frontend

Next, we create a new index in order to display data. As in the previous section, we create a new action for fetching data from API in pos_machine.action.js. The code for the action configuration is provided in the code snippet below:

Next, we are going to create a new component name posmachine_index as shown in the screenshot below:

New Component Name "posmachine_index" 

New Component Name “posmachine_index”

Then, we import the necessary components:

And create a new functional component called Pos_Machine_Index . Then, we create a new instance from the hook as shown in the code snippet below:

Here, we add middleware to detect login token and launch action in order to get data from API. The code for this operations is provided in the code snippet below:

In the UI part, we create a new table and use simple for loop to display data in rows. The code to do this is provided in the code snippet below:

Now, if we navigating to http://localhost:3000/posmachine, we also see data and link to other activities as shown in the screenshot below:

Index Screen

Index Screen

Thus, the index operation ends here, Now, we move on to implement edit operation that is available in the row of data as shown in the screenshot above.

Edit Operation

In the edit section, we will fetch data and populate it to form. Then we can perform the update operation.

Populate form

In order to fetch data, we will get the id when we click on index row then pass it to action and perform a request for query data from API.

In posmachine.action.js, we need to create a new function to receive id then fetch from API. If successful, we store data to the state.The coding implementation for this is provided in the code snippet below:

Next, we need to create new component name posmachine_update as shown in the screenshot below:

 New Component Name "posmachine_update"

New Component Name “posmachine_update”

Here, we can copy everything from the posmachine_create component.

in order to fetch data, we call the action when componentWillMount fires as shown in the code snippet below:

Now, we can observe that we capture params and extract id then pass to action that we created.

Next important part is to add data that we send to server from Formik as shown in the code snippet below:

enableReinitialize allows us to repopulate form again. This is because the form will load success until we send a request for getting data.

initialValues, we store data from API to state and initialize posmachineReducer.result as null. Hence, we use conditions to prevent errors.

Backend

Here, we need to create a new endpoint that captures id and use query to get data and send back to the client. The implementation is provided in the code snippet below:

Now, we can click the link and see that the data will populate the form as shown in the simulation below:

Populate Form Result

Populate Form Result

We are not done yet.

Now, we need to create a new endpoint in order to update data by receiving the id then query and update data. We can do this by using the code in the code snippet given below:

Back to the frontend, we create a new action named update in posmachine.action.js. Here we can just copy code from create function but change from post to put method as shown in the code snippet below:

Then, when the update is a success, we clear all data in the state by calling setPOSMachineStateToClear action then redirect to index.

Then, we use call index action for fetching new data again.

After that, we call update action in UI as shown in the code snippet below:

Now, we can perform the update operation as shown in the simulation screenshot below:

Performing the Update Operation

Performing the Update Operation

This completes our Edit/Update operation. Now, its time for delete operation.

Delete Operation

Delete operation is simpler than the rest. We just click the link in the index then popup the confirm dialog in order to delete the data. Then, we fetch data new again to display the remaining data.

Frontend

In posmachine.action.js, we need to add a new function called remove as shown in the code snippet below:

Here, we call the delete function of httpClient module.

Backend

Here, we need to create a new API endpoint then use findOneAndDelete option provided by the mongoose package. The coding implementation is provided in the code snippet below:

Lastly, we need to create a function as the confirmation for the deletion of data. The implementation of the function is shown in the code snippet below

Now, we need to call the function when the user clicks on delete option as shown in the code snippet below:

Hence, we can perform the delete operation now as shown in the simulation screenshot below:

Perform the Delete Pperationion

Perform the Delete Pperationion

Hence, we have successfully implemented the CRUD operation for the POS machine data.

Conclusion

In this chapter, we learned about the CRUD operations that can be performed in coordination between the frontend redux actions and the backend API endpoints. The routes and components were also created to add, display, update, and delete the POS machine data. Well, this chapter was a simple one. In the next chapter, we are going to step it up a notch by adding validations to the CRUD operations.

The code for this chapter is available in Github for Frontend and Backend.

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

Create simple POS with React.js, Node.js, and MongoDB #17: Stat screen

Now, we are going to implement the final chapter for this tutorial series where we are implementing a graphical representation section on our ...

Create simple POS with React.js, Node.js, and MongoDB #16: Order Screen

In this chapter, we are going to create an order page. The order page displays the products and the calculator to help calculate the total price. ...

Create simple POS with React.js, Node.js, and MongoDB #15: Simple RBAC

In this chapter, we are going to continue from where we left off from the previous chapter intuitive with a plethora of ...

No comments yet

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy