CA Web-App structure

code/webapp/src:

Start with App.js. Direct to LoggedInView. There a model of a whole system is rendered according to the current values of hubs, batches, violations etc. The elements (and the initialization values) that form 'the model' can be found in Model.js under data folder. The requests for fetching these elements are in requests.js under data folder. But there is also an interaction.js file under the same folder, which basically has the functions about the intereactions between these elements (such as getBatch, initViolations); however, they also fetch info. (This file can be merged with requests.js ?) api.js file is just to template the api requests in the project. 

App.js first renders LoggedInView and then renders UploadingPhotosInfo if there is a photoQueue (of whcih length is bigger than zero) of the newly fetched model by LoggedInView.

Violation.js uses react-dropzone to drag and drop files to upload area. It imports CompanySearch.js but there is not a proper usage of the import in the file ? CompanySearch.js seems like for searching among CA's clients' own customers. And then the client can mark a potential violation image as 'not a violation & this is my customer' according to the code in Violation.js. 

... registerServiceWorkers.js ...

... PhotoWithViolations.js ...

Photo.js renders a photo and its title and relevant date info. Also implements functions to remove a photo and add a violatio  related to that photo. 

NewViolationModal.js is rendered when user wants to create a new violation. When user starts the action, Model.newViolation.modelOpen gets the value 'true' (?) and NewViolationModal.js is rendered (in LoggedInView.js).

Does it really makes sense to have 2 separate files called Menu.js and Navigation.js ? Menu.js basically just imports Navigation.js on top of adding the logo ? 

List.js fetches the topics of the images retrieved by Google Vision.