Routing and State Management - mini/git-brunching GitHub Wiki

Web-Front Setup

Project Structure and Conventions

Future developers should look at Issues for existing issues to see the most direct initial items that can be worked on.
Being aware of the frontend directory's structure is also important. If you want to add a new feature, make a new directory within /frontend/src. For seeing how individual members of the front-end team should be adding to the project, refer to the git workflow). App.js, index.js, serviceWorker.js, and setupTests.js are all just in frontend/src. However, going a bit further, the directories for the respective pages will come up. booking, general, store, restaurant, and landing. Each contains the necessary files for those respective webpages/features. If you wanted to add to those pages, it would be advised to work within those directories. Adding content for the ordering system would necessitate new folders for that.
For consistency, future developments should keep in line with the coding conventions that the project has been made with thus far. Airbnb was followed, with some exceptions, such as double quotes as opposed to single. We ensured we were following coding conventions through the use of ESLint.

Route

To set up the website itself, React Router was used. You can learn more about it here. When it comes to contributions, the practice is that you add Route components to the Router. When it comes to contributing, the current host URL can be maintained. When future developers would like to add to the project, they can add new pages by adding a Route. The Router can be located in App.js, as well as the Routes that it redirects to. For further reading, refer to the Router API.

Redux

We used Actions, Reducers, and Epics from Redux. . Epics were used for the majority of the API calls, so that it would be easier to manage our states.
If the developer's intent is to store items in a State, it's advised that you would make a subdirectory within this store directory, which will include both Actions and a Reducer. An Epic can also be included, but that would typically be if directly concerning API calls. Not necessarily an epic, that's more if you wanna do API calls. Usually, the API calls have three different types of actions. Default, Success, Fail. All Reducers need to get added to the React Router.

Currently, only one booking is ever stored in State at one time. So any booking actions refer to the booking that is currently the focus. I.e. the booking that is being created or edited.