Create simple POS with React.js, Node.js, and MongoDB #9: CRUD Branch

Create simple POS with React.js, Node.js, and MongoDB #9: CRUD Branch

Create simple POS with React.js, Node.js, and MongoDB #9: CRUD Branch

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

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

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:

Next, we need to go to the action folder and create a new action file named branch.action.js. This branch action configuration will work to make changes to the state in the branch reducer store. The coding implementation required in this file is provided in the code snippet below:

For new Component structure, we use the naming convention as shown in the screenshot below:

Brach component folder

Brach component folder

Hence, we have successfully completed the configuration of redux for the branch component.

Create operation

For the create operation, we start with backend and implement the API endpoint first.

For that, we need to open our basic pos-backend project then navigate to the schema folder. Then, we need to devise a Schema for a new table using mongoose package as shown in the code snippet below:

Next, we need to create a new file named api_branch.js. First, we need to start importing everything as in the previous article. But in this chapter, we introduce new form helper package name formidable that enable us to process image. The imports are shown in the code snippet below:

Then, we need to create a new endpoint in order to create action. Here, we are going to use the formidable module in order to process incoming image data from the object then pass files object to process in other function as shown in the code snippet below:

Processing file upload

Here, we need to create a new function in order to handle file upload. The function name is uploadImage and is implementation is shown in the code snippet below:

Here, we are performing the following configurations:

  1. First, we check if the file is not null.
  2. Then, we split the file extension.
  3. Next, we create a new file name then assign it to a database object.
  4. Then, we move the file to a folder that we want.
  5. Lastly, we update the database with the new filename.

Hence, our backend API endpoint is complete and ready to be used in front. Next, we move forward to implement frontend mechanics.

First, we need to open component/branch/create.js file and import the required packages as shown in the code snippet below:

Then, we need to create a new functional component as shown in the code snippet below:

The next job is to create a form.

Preview image in React

First, we need to create a simple function in order to preview the image. For that, we check the image object for its availability. If available, we preview the image otherwise we need to keep the image placeholder in its place. The code for this is provided in the code snippet below:

Here, we need to take the image as file input as shown in the code snippet below:

Hence, we can get the preview of the image as shown in the code snippet below:

Preview image in react

Preview image in react

For the form submission process, we need to create a new form object as shown in the code snippet below:

Here, we devise the object creation function right into the onSubmit event.

Next, For the Create action, we send the form object as a parameter as shown in the code snippet below:

Hence, if we test it out we will get the following result:

create branch successfully

create branch successfully

Index Operation

Since we are successful in adding new data, we need to display the data as well. The implementation of index operation is the same as in the previous chapter.

Since the implementation is similar, what we can do is simply copy the code from the previous one and make necessary changes.

The necessary changes are highlighted in the code snippet below:

Jere, we added a new column to display image by defining a new environment variable for the image part on the backend.

Now, in the .env file, we need to add the URI path as shown in the code snippet below:

Hence, we will get the result as shown in the screenshot below:

Branch index

Branch index

Update Operation

Since the update operation is similar to the implementation in the previous chapter as well, we can simply start by copying the code from it.

Then, we need to populate the image into it.

If you remember in the previous part when the page loads the reducer data, it is still null. So, we have to wait for data from the server.

So, we can useEffect to observe when the reducer object made the changes and when the resulting key is not null, we can populate the image by calling showPreviewImage function as shown in the code snippet below:

Hence, we will get the result as shown in the code snippet below:

Update Branch Success

Update Branch Success

Delete Operation

For the delete operation, There is no new highlight to show. We can just use the same code from the implementation from the previous part. But, we must not forget to make a change in the endpoint name.

Conclusion

In this chapter, we learned how to create a CRUD operation with the Redux mechanism again. This will make our knowledge on CRUD operation in React using Redux even more clearer. The operations were similar to the previous chapter. The plus point was refactoring the old code. The highlight point of this chapter, we as the implementation of image upload in React and storing it on the Backend server using API endpoint.

In the next chapter, we will implement the CRUD operation on Supplier data. The implementation will be similar to this and the previous chapter. But, there will be a recap of all processes that will surely help you understand how redux work in more depth. The chapter will deal with database relations as well.

All code for this chapter is available on Github for Frontend and Backend.

Stay tuned for the next chapter.

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 #10: CRUD Supplier

In this chapter, we are going to continue to implement CRUD operation for the Supplier information of a grocery ...

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

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 ...

Create simple POS with React.js, Node.js, and MongoDB #7: Adding redux to other components

This tutorial part serves as a continuation of the previous tutorial. In this tutorial part, we are going to integrate the redux to Register and ...

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