Online Food Ordering App (6)
Tags: express, node, react, reactnative
Published: 2021-03-04 21:08:36

*<span>Photo by <a href="https://unsplash.com/@abillion?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">abillion</a> on <a href="https://unsplash.com/s/photos/food-mobile-app?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>*

<br/>
Hi, Welcome to part 6 of this series.<br/>

Today, we are going to wrap up the backend of our app *"Gourmet"* by implementing the functionality that allows the admin to update the status of an order placed by a customer.<br/>
We are also going to set up our front-end client apps namely the web app for the admin and the mobile app for customers.<br/><br/>

***
| Project Steps |
| ----------- |
| [1. Backend - Project Setup](https://dev.to/the22mastermind/online-food-ordering-app-1-594j) :heavy_check_mark: |
| [2. Backend - Authentication - Sign Up](https://dev.to/the22mastermind/online-food-ordering-app-2-28po) :heavy_check_mark: |
| [3. Backend - Authentication - Login & Logout](https://dev.to/the22mastermind/online-food-ordering-app-3-1g8h) :heavy_check_mark: |
| [4. Backend - Place Order](https://dev.to/the22mastermind/online-food-ordering-app-4-5dc5) :heavy_check_mark: |
| [5. Backend - View Orders List & View a Specific Order](https://dev.to/the22mastermind/online-food-ordering-app-5-24gg) :heavy_check_mark: |
| [6. Backend - Update Order]() :pushpin: |
| [7. Front-end - Authentication]() |
| [8. Front-end - Place Order, View Orders List, and View Order Details]() :fire: |

***

<br/>
Let us begin by writing our tests.<br/>

- Ensure the main branch is up to date with the remote main branch
- Create a new `ft-admin-update-order` branch off our main branch
- Update `tests/orders.test.js` and add the following `ADMIN UPDATE ORDER` test suite along with the new messages. Dont' forget the `conflict` status code.

![carbon](https://dev-to-uploads.s3.amazonaws.com/i/2xhtsoqboorekt6i5dht.png)

- Update `src/utils/messages.js` and add the new messages

![carbon (1)](https://dev-to-uploads.s3.amazonaws.com/i/avvn7pdtypf2ri88ym21.png)
 
- Update `src/validations/orders.js` and add the `updateOrder` function which will help us to validate the status.
![carbon (2)](https://dev-to-uploads.s3.amazonaws.com/i/y7vap1581y2ansurxmih.png)
 
`accepted`, `onthemove`, and `completed` are the only allowed values.

- Update `src/middlewares/orders.js` and add the `validateUpdateOrder` function and `checkOrderStatus` function.

![carbon (3)](https://dev-to-uploads.s3.amazonaws.com/i/6dknyiiwypw39bxw4olq.png)
 
The `checkOrderStatus` function will help us to avoid updating an order status to a value that it already has thus saving up a bit on our server resources. For example, if the admin has already accepted an order, there's no point of accepting it again.

- Update `src/controllers/orders.js` and add the `updateOrder` method

![carbon (4)](https://dev-to-uploads.s3.amazonaws.com/i/utdocolew3oflgd72ogx.png)
 
- Finally, update `src/routes/adminRoutes.js` and add the update order route. The final `adminRoutes.js` file should look like the following:

![carbon (5)](https://dev-to-uploads.s3.amazonaws.com/i/zqlxtma44a8eyz0wtk6d.png)

<br/>
And that's it!<br/>

If you run the tests again, they should all pass which means everything is working as it should.<br/>

Now, go ahead and commit the new changes to GitHub and open a PR. After a successful Travis build, merge the PR to trigger a new production build on Heroku.<br/>

*Note:* There's a bug I caught on signup. Check out the fix on this [PR](https://github.com/the22mastermind/gourmet-api/pull/11) if you had not caught it.<br/>

Our simple backend is now done. Let us now set up the front-end client apps.<br/>

***
## Admin Panel React App

This web app will help the admin of `Gourmet` restaurant to manage the orders of customers.<br/>

For now, the admin will be able to fetch all the orders, fetch a single order details, and update an order's status to let the customer know the progress of their order.<br/>

Later on, we could add more features like user management, staff management, analytics, inventory management and any other feature that would improve the processes of Gourmet as a business.<br/>

We are going to deploy this admin web app to [Netlify](https://www.netlify.com/), but you could use any other cloud service.<br/>

Going forward, I assume you are familiar with React. If not, check out [React Offical Docs](https://reactjs.org/) and [Create React App](https://create-react-app.dev/docs/getting-started/).<br/><br/>

Let's get started.<br/>

- Using [Create React App](https://create-react-app.dev/docs/getting-started/), create a new React app called `gourmet-admin`

- When done, follow the instructions on your terminal to launch your new app in the browser

- Install and configure React Testing Library. More info [here] (https://testing-library.com/docs/)

- Refactor `App.js` to remove unnecessary boilerplate code and `App.test.js` to use React Testing Library then run `yarn test` to make sure the tests are passing

- Add the project to a new GitHub repo, setup CircleCI and [Netlify](https://www.netlify.com/blog/2016/07/22/deploy-react-apps-in-less-than-30-seconds/) as our CI and CD respectively

- Configure test coverage with both coveralls and CodeCov

- Commit the changes to GitHub, open a PR to trigger a build job on CircleCI to run our tests.

- When the build is successful, go ahead and merge the PR to trigger a new deploy build on Netlify.<br/>

This is going to be our workflow for the admin app going forward.<br/>

For reference, check out [this branch](https://github.com/the22mastermind/gourmet-admin/tree/ch-circleci-config-fix)<br/>

***
## Customer React Native App

***

This mobile app will help customers to view the restaurant's menu and to place orders.<br/>

We are going to build a very simple Android React Native app but if you want an IOS version as well, it is fairly simple to configure it.<br/>

Let's get started.<br/>

- If you are not familiar with React Native, follow this [offical guide](https://reactnative.dev/docs/getting-started) to learn how to setup the dev environment and core concepts.

- Using `React Native CLI`, create a new React Native App called `Gourmet`

- Make sure you can launch it on an emulator or a physical device

- Configure ESLint, Jest, and setup React Native Testing Library

- Remove unnecessary boilerplate code from `App.js`, refactor `App.test.js`, and run tests to make sure they are passing

- Add the project to a new repo on GitHub, setup CodeCov, and GitHub actions

- Commit the changes to GitHub, open a PR, wait for the workflow to succeed then merge the PR<br/>

For reference, check out [this branch](https://github.com/the22mastermind/gourmet/tree/ch-project-setup).<br/>

The basic implementation for our front-end apps is done. In the next post we will implement authentication in the following manner:

1. Login and logout on the admin app.
2. Sign up, login, and logout on the mobile app.<br/><br/>


Thank your for reading, see you in the next one!<br/>