Create simple POS with React.js, Node.js, and MongoDB #10: CRUD Supplier

Create simple POS with React.js, Node.js, and MongoDB #10: CRUD Supplier

Create simple POS with React.js, Node.js, and MongoDB #10: CRUD Supplier

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 successfully implemented CRUD operation for the general information of a grocery store. In this chapter, we are going to continue to implement CRUD operation for the Supplier information of a grocery store.

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. Repeating Redux operation will surely make us fluent and natural is Redux mechanism use-cases.

Let’s get started!

1. Adding Constants

Similar to our previous tutorials on implementing Redux, we start by defining constants. For that, we need to open ./constants folder and add constants that are used for naming the states as shown in the code snippet below:

2. Adding Reducer

For implementing reducer, we need to go to ./reducer folder. Then, we need to create a reducer named supplier.reducer.js. The process is similar to previous reducers we have created. In the reducer file, we need to import the constants then define initial state and reducer function as shown in the code snippet below:

3. Register Reducer

Now, we need to register our reducer to our root reducer in the index.reducer.js file. For that, we need to open index.reducer.js file and include supplierReducer to combineReducers function as shown in the code snippet below:

4. Creating Action

Next, we need to create a new action file named supplier.action.js file in our ./actions folder. First, we need to import the necessary constants, components, and modules as shown in the code snippet below:

Now, we need to create a function to trigger the reducer as shown in the code snippet below:

Now, we can move to implement the CRUD operation.

4. Create Operation

First, we will implement create operation. For this, we need to create a new component folder named ./supplier and also create a file named action inside it.

One interesting thing about this action is that we will learn to use dispatch to trigger other functions that are not reducer. We are going to use dispatch to reload new data while redirecting back to the index page. The coding implementation is provided in the code snippet below:

Next, we need to create a new file named create.js and import necessary components as shown ion the code snippet below:

Then, we need to define validation schema using Yup modules as shown in the code snippet below:

Now for the initial navigation to this component, we want to check user session as shown in the code snippet below:

Next, we need to construct a form using Formik component as shown in the code snippet below:

Lastly, we need to add the main render() function that wraps all configuration from the object and sends data to the supplierActions.action.js. This will also include validation. The coding implementation inside the render() function is provided in the code snippet below:

Hence, the resultant form will appear as shown in the screenshot below:

"Supplier create" page

“Supplier create” page

5. Database Schema

Here, we need to open the backend project. For the backend part, we start by creating the new database schema using mongoose package as shown in the code snippet below:

Now, we have a new schema to store supplier data.

6. Implementing the Backend API

Next, we need to create a new file named supplier_schema.js and import necessary components for building API endpoint as shown in the code snippet below:

Then, we need to a add post method to receive data from the client and create a new row. The implementation of post function is shown in the code snippet below:

Hence, we can now try to add a new entry from our form as shown in the simulation screenshot below:

Result of creating new supplier data

Result of creating new supplier data

Thus, we have successfully implemented the Create operation. Now, we need to get started on Index Operation.

7. Index Operation

Here, what we want to do is to display all of the supplier data after adding new data. Then, we will redirect back to the index page.

We will start on the backend by creating a function that fetches all data from the database as shown in the code snippet below:

Now, we need to go back to the supplier component in our React project and create a new index.js. Then, we need to import the necessary functions and packages as shown in the code snippet below:

Next, we need to create a new supplier reducer instance. Then, we start by calling the Index function when the component initializes. The coding implementation for this is provided in the code snippet below:

For UI implementation, we are just going to create a simple table and iterate through the data to display them in the table view. The code to implement the UI portion is provided in the code snippet below:

Hence, now we can fetch the suppliers data and show it in the table format as shown in the screenshot below:

Supplier index page

Supplier index page

Hence, our Index operation is complete. Now, we move on to Update/Edit operation.

8. Update Operation

In Update operation, we are required to populate the current data to the form fields.

Re-populating the data…

In the backend project, we need to create an API endpoint for fetching data which is provided in the code snippet below:

Back to frontend React project in the supplier action, we need to add the function to fetch the previous data as shown in the code snippet below:

Next, we need to create a file named update.js. Then, in the supplier component, we need to start by importing necessary components, packages, and modules as shown in the code snippet below:

Then, we need to define a new validation schema using Yup module as shown in the code snippet below:

Now when the component is initially navigated, we need to load the data from API and create supplierReducer instance as shown in the code snippet below:

Then, we need to repopulate the data by using enableReinitialize prop and get data from reducer as shown in the code snippet below:

In index.js, we already have a link that we can use to navigate to Update page as shown in the code snippet below:

Now, when we click on Edit in the index page, we can navigate to Update page with pre-populated data as shown in the simulation screenshot below:

Updating of supplier data

Updating of supplier data

Next in order to update the data, we need to create a function which accepts PUT request on API and update data using findByIdAndUpdate function provided by mongoose module as shown in the code snippet below:

Back to the frontend React project, we need to create a new action named Update.js and implement the Update function for updating the data in the database and then navigating back to the index page as shown in the code snippet below:

Next, we go back to supplier/create.js file and add a new hidden form to receive id that we can use to find the required data as shown in the code snippet below:

Lastly, we need to add update action in Formik as well:

Hence, we can now update the data as shown in the simulation screenshot below:

"Supplier update" result

“Supplier update” result

9. Delete Operation

Last but not least is the implementation of the Delete operation. The idea is pretty simple. We just need to create an API endpoint to delete an entry from the table and call the API using the function in the delete button that can be seen in the index page entries.

For Backend API endpoint, we are going to use the delete method which will receive the entry id and delete the data from the table as shown in the code snippet below:

Then, in the supplier.action.js file, we need to add a new function that sends the delete request to the above API as shown in the code snippet below:

In the table from the index page, we need to add a new feature that displays the delete confirmation modal as shown in the code snippet below:

For Modal implementation, we are going to use sweetalert module as shown in the code snippet below:

Now, we need to create a new function that wraps sweetalert module. The function displays the modal and confirms the delete operation. So on the positive confirmation, we need to call the delete operation as shown in the code snippet below:

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

"Supplier remove" result

“Supplier remove” result

Hence, we can successfully delete an entry now. With this, we have successfully completed the implementation of CRUD operation for Supplier data along with the Redux mechanism.

Conclusion

This chapter can be deemed as a review of the last chapters where we learned how to implement CRUD operation along with Redux functionality. This will make our knowledge on CRUD operation in React using Redux even more fluent and natural. The operations were similar to the previous chapter.

In the next chapter, we will perform CRUD operation again for at least three main data in our app which are Product, Customer, and Employee data. Don’t feel frustrated or bored due to repeated implementation of the same operation and mechanism. For these three important players, we are going to add many tricks for CRUD and improve code quality 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 #11: CRUD with Relation

In this chapter, we are going to continue to implement CRUD operation for the Relation data and assign the POS machine to ...

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

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

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

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