This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
There are two components namely OrderList and OrderDetails which handles, as name suggest, order list and order details part of the application.
OrderDetails component is child of OrderList component and receive all the props from its parent.
OrderList component handles all the action performed at OrderDetails component.
All the elements of OrderDetails component are controlled and they send updates to OrderList component on change.
Axios is used to make async calls to external api i.e. http://localhost:8080/BlueBottle/api. To make the app more comprehensive axios.create is used so that we can have a central location for our api url.
Redux is used to maintain app's state. There is only one reducer called orderListReducer which handles orderList update.
RootReducer is present in store directory and its being used in index.js to createStore.
More test cases should be added to make the project more complete
Error handling can be done in a centralized way where we can use an error reducer to subscribe to all the errors generated by the app.
Date field should not except values less then current date.(As the app requirement doesn't sepcify this we will leave it for future enhancements)
There were two ways to show options for coffee type(2 options), brew method(5 options) and packets per case values(2 options): 1. Send all the options from backend and have the front end coupled with backend. 2. Have the options on front end and just send the selection to backend. In future we should store the options in database and send them from api to frontend. This way we can change the database and have new options available without unnecessary deployments.
I made CoffeeDetails component dummy as i wanted to show the component when user clicks on New Order button and view order icon in OrderList.
To do this i needed to pass props to CoffeeDetails component. I could have used getDerivedStateFromProps to work with props from parent
component but this would have created issues as all the OrderDetail components elements were controlled and this would have caused the state to
set with improper values with every input change.
Run npm run build which will create build folder containing staic html, js files for the project. This build folder can be used to deploy on any of the servers.