Front-end Code Style

[noahnu]

Summary

Style

Enforce a style guide for the frontend JavaScript. We use eslint with custom rules configured in the eslint json file in the project's root. An editorconfig file is also setup to configure indentation style and line-endings.

Some files have also been broken up into smaller component files. PropTypes are enforced on all components, along with JSDoc.

In a few cases, eslint-disable rules have been employed. This is bad practice and has been used in scenarios where the changes were too extreme, too time intensive, or raised questions with the configured eslint rules. These will have to be re-evaluated at a later time.

Documentation

Quite a lot of documentation has been added. Mainly block-level/function-level documentation, rather than inline. JSDoc is required by our current eslint configuration.

Style: Fetch/Form

DataLayer has been renamed to Fetch. Form now passes itself to its children via context rather than via properties (this allows extremely nested forms).

Bug Fix

The feedback session controller failed to commit sessions due to a flaw in the session entity logic. This has been fixed. Now, if a session is seen to already exist, it'd ID will be looked up from its session code.

Loading

A "blur" loading state has been added to some of the event components (for use with Fetch/Form). This is more of an experiment in more responsive state indicators. More complex style/animation will be added in a separate PR.

New Scripts

See the README for a complete list of new npm scripts. For styling, you can run npm run lint:frontend to execute eslint on all the frontend JavaScript.

The format for the npm scripts has changed to make use of categories via :. See README.

Tests

• [x] Correct dashboard messages for: Expired company, Inactive company (not initially setup), No active stores.
• [x] Correct lazy loading behaviour for production build.
• [x] Correct behaviour for no aspects.
• [x] Correct behaviour for no events.
• [x] Add aspect
• [x] Add event
• [x] Complete event
• [x] Add aspect to event
• [x] Remove aspect from event, and remove event.

Feedback

• [x] Skip email and comment.
• [x] Enter comment, skip email.
• [x] Enter email, skip comment.
• [x] Email before.
• [x] Email after, always.
• [x] Email after, if poor.
• [x] No email.
• [x] No comment.
• [x] The above in the browser (desktop and mobile), and on device.

[noahnu]

Possible concern with Inactivity Timer for device feedback app. Must devise better test.