Reduce API call times by moving component state to React Context
Currently, most state/data are saved in corresponding components to display related stuff. And with this structure, when we navigate between pages, the whole page will be re-rendered and all API calls will be done again to get the data and save into state.
There is also another small side effect, a React warning for updating unmounted component will be raised when we navigate to another page before all API call finish.
After we move the state into Context, the pages will be re-rendered when we come back and forth, but the state in Context will remain the same as it's in a higher level which won't be re-rendered based on page change. And this can also solve the side effect mentioned above.