Loading a questionnaire

This section illustrates how the data flows within Pogues. For this, it looks at what happens when a user selects a questionnaire.

When a user selects a questionnaire from the questionnaire list, there are many elementary steps to process, from sending the request to updating the UI. Here is a global picture:

1. The application shows the QuestionnairePicker component.
2. The user selects a questionnaire in the questionnaire list.
3. The switchQuestionnaire action creator is called.
4. The SWITCH_TO_QUESTIONNAIRE action is dispatched. It contains the questionnaire id in its payload.
5. The switchToQuestionnaire handler from the appState reducer updates the view entry and set it to QUESTIONNAIRE.
6. The application re-renders.
7. When rendering the main PoguesApp component, the view entry is checked, and the QuestionnaireContainer component is rendered, in place of the previous QuestionnairePicker component.
8. In its componentWillMount method, the loadQuestionnaireIfNeeded function is called. It takes the questionnaire id as an argument.
9. Assuming the questionnaire has not been already loaded, the loadQuestionnaire action creator is called.
10. The component renders a spinner to indicate that the questionnaire is loading.
11. The LOAD_QUESTIONNAIRE action will be dispatched, with the questionnaire id in its payload.
12. The getQuestionnaire function is called. The browser tries to fetch the given resource and returns a Promise. . The fetch call succeeds and the Promise resolves to a JSON representation of the questionnaire.
13. The then handler in the action creators file is executed.
14. It calls the toSate function and dispatches the LOAD_QUESTIONNAIRE_SUCCESS action with the result of this function in its payload.
15. The LOAD_QUESTIONNAIRE_SUCCESS is processed by many reducers to update the application state: to add an entry in the questionnaires-by-id reducer, to add multiple entries in the components-by-id reducer (one for each sequence and each question in the questionnaire), to add multiple entries in the code-by-id reducer (one for each code in every code list in the questionnaire)...
16. The application re renders. The questionnaire content is now visible.