## Installation guide
`git clone git@gitlab.com:2amigos/emit.to-panel.git`
`cd emit.to-panel`
`npm install`


## Run it
`npm start`
It should open a url http://localhost:3000/ in browser. If not open the URL in browser
Make sure you are in development branch

## Architecture Overview
The entire app divided in two layout one is Main layout and other is Dashboard layout. 

##### Main layout
It has all the pre auth screens like login, sign up, forgot password, not found page
##### Dashboard layout
It has all the post auth screen like people, listing, message, invoice and show on.

## Dashboard layout
#### People
Any user can add and edit people. The add people is combined of 6 tabs and in order `personal details`, `Emails`, `Phones`, `social network`, `addressess` and `urls`.

While adding new people on every go to next tab, it send the the data to redux like all the personal details form data are sent to redux. while going to next tab it validate the form data and show a notification in bottom left that the form is incomplete and won't be saved.
But notification is shown only for personal details.

* **Emails** tab is build on adding more row and fill email, it has add and delete icon for deleteing any row. And on adding every new row, it validate the previous row and then let the user to add new. On next press it will push the data in redux.
The component is built on hooks.

* **Phones** tab has same feature as to email with extra field select phone type handle the data similar to email.

* All other tab has built on same data flow.

* **Urls** the data flow of urls tab different than other tab. The data is being pushed in the redux on any changes instead on next tab, becuase there is no next tab but it's submit button.

* `How does it send to next tab` :- on next or previous button it will set the next tab index.
* `How does it push the data to server` :- when the index of tab is equal to 5 it fire the submit function. So it will get all tab data from redux then send request to add personal details using `json-api` on success the response return data including `id` of newly created people.

Now all the tab data is looped concurrently to create email, phones, social media, addresses and urls. And also link them with people by using `json-api` create relationship.

Checking if all the resource created, since all the services run concurrently there is object that is save status of every tab and so when loop end it will update the status to `true`. So when all the status is `true` the success notification will be shown and redirected to list people screen.

#### Edit People
All the component used for adding people is also being used to editing people. but data flow is completely different.

* Edit made is being saved on next tab and notified in bottom left. 
* And the question is why not save data like adding people. the reason is edit are making changes and the changes saved earlier is much better instead of going at the end. Another reason to add new email or phones we need people id. so while adding we must need to create first people then other resource.

* The data for every tab is being loaded using `json-api` except personal details because getting the data from previous list people component
* on any changes it will change the `update` to `true` or `false`, so while save we should have record either to add resource or update the resource.  


* #### Adding and edit people is little complex so I made the documentaion