Demo App Checklist

## Initial Order

- [ ] Hello world
- [ ] Display hard coded data
- [ ] Display list from an API call
- [ ] Delete item from list
- [ ] Add item to list
- [ ] Refactor to separate manage page
- [ ] Add React Router
- [ ] Edit item in list

## Core features

- [ ] Display tabular list
- [ ] Add item
- [ ] Edit item
- [ ] Delete item
- [ ] Treat state as immutable
- [ ] Validate before save
- [ ] Handle numeric form value (default to empty string, use parseInt when resetting)
- [ ] Declare defaultProps for TextInput (Default disable to false)
- [ ] Implement footer
- [ ] Hide list when no records exist (conditional rendering)
- [ ] Disable save button until form is populated when adding (Use derived state)
- [ ] Show number of items in header link
- [ ] Publish list as a reusable component on npm
- [ ] Set focus on first form field via ref (yes, doable native via autofocus too)
- [ ] Handle async calls
- [ ] Use immer to handle a state transition
- [ ] Filter list
- [ ] Sort list
- [ ] Use Barrel pattern to shorten imports for components in dedicated folders
- [ ] [Avoid calling setState on unmounted components by cancelling any async work](https://codesandbox.io/s/nwwrrpvqw4)
- [ ] Implement login
- [ ] Display "Hello username" in header
- [ ] Use username when saving records

## React fundamentals

- [ ] Utilize centralized propTypes with exact shapes
- [ ] Wrap peer elements in Fragment
- [ ] Add ErrorBoundary
- [ ] Use lifecycle / hook to request data on mount
- [ ] Handle data via context
- [ ] Use class and function components with Hooks
- [ ] Use functional setState
- [ ] Use destructuring to shorten calls in render
- [ ] Use destructuring in functional component argument lists
- [ ] Use standardized event handler names (onX when passed, handleX when handled)
- [ ] Utilize all hooks

## State

- See #49

## Performance

- [ ] Load large dataset and add filters. Note that rendering gets slow as filters change
- [ ] Lazy load routes and display spinner via Suspense
- [ ] Implement shouldComponentUpdate / PureComponent / useMemo on long list of records to avoid needless re-renders
- [ ] Timeout calls using promise.race and display an error page after x seconds.
- [ ] More in #77

## Reusable components

- [ ] Consume a reusable component: Use react-toastr for notifications, React bootstrap table
- [ ] Implement reusable TextInput and document it
- [ ] Create reusable component build

## Routing

- [ ] Handle 404s
- [ ] Route between pages
- [ ] Style active link
- [ ] Set page titles
- [ ] Redirect

## Styling

- [ ] Apply at least one inline style
- [ ] Reference a dedicated CSS file for each component

## Redux

- [ ] Implement action creator, action constants, store, reducers, and connected components
- [ ] Utilize Redux thunk for async calls
- [ ] Configure Redux dev tools