source-academy / cadet-frontend / 7531

30%

push

travis-ci

Remove accessToken from Application props and use <Route render> (#1480)

`Application` uses `accessToken` to check whether the user is logged in. This is
redundant, and it causes the entire application to re-render whenever the access
token is refreshed. Normally this would not be an issue, but many pages in
cadet-frontend refresh the data from the backend every time the page is loaded.

This means that for `AssessmentWorkspace`, if the user's access token (valid for
1 hour) has expired, when the user hits Save, the following happens:

1. frontend attempts to save the answer
2. frontend gets 401-ed
3. frontend refreshes the token
4. frontend dispatches the new token to its Redux store
5a. repeats save
5b. AssessmentWorkspace re-mounts due to (4) and requests for student's answer

When (4) happens, the entire application is re-rendered from the root component
(`Application`). Because the Academy route uses the `component` prop on the
`Route` instead of `render`, the re-render of `Application` causes the
`AssessmentWorkspace` to be re-mounted entirely. This causes (5b) to happen, and
(5a) and (5b) happen concurrently, so it is a race for which request is served
by the backend first. I suppose most of the time 5b is completed first, and the
old answer is returned to the frontend, and the editor is reset to the old
value.

Note that the save *does succeed*, but to the student it appears as if his work
has been lost. (If he proceeds to save again, it would be lost.)

The same issue happens with the grading workspace.

Remove `accessToken` from `Application`'s props so that `Application` does not
re-render when `accessToken` changes. Also change the `component` prop to
`render` for the routes that use a function instead of a component directly.

Fixes #934 and #985.

742 of 2753 branches covered (26.95%)

Branch coverage included in aggregate %.

2292 of 6405 relevant lines covered (35.78%)

12.05 hits per line