app-root, lib-user: Add ProfileHeader to UserStats, refactor related API requests

[mcbouslog]

Package

• app-root
• lib-user

Describe your changes

• refactor app-root users/[login]/stats to pass login and authClient to UserStats
• refactor UserStats component with ProfileHeader component
• refactor usePanoptesUser hook to get user from panoptes-client/lib/auth as that user includes avatar_src which is needed for ProfileHeader component (in contrast to panoptes-js JWT related user which doesn't include avatar_src at the moment, but might per Add avatar_src to the Panoptes JWT panoptes#4217)
• refactor useUserStats

How to Review

Helpful explanations that will make your reviewer happy:

• What Zooniverse project should my reviewer use to review UX?
• What user actions should my reviewer step through to review this PR?
  • see ProfileHeader working with your staging user locally in:
    • app-root: https://local.zooniverse.org:3000/users/[insert your staging user login here]/stats
    • lib-user: https://local.zooniverse.org:8080/?users=[insert your staging user login here]/stats
• Which storybook stories should be reviewed? n/a
• Are there plans for follow up PR’s to further fix this bug or develop this feature? yes, see linked GitHub Project

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

• Tests are passing locally and on Github
• Documentation is up to date and changelog has been updated if appropriate
• You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
• FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)
• FEM works in a mobile browser

New Feature

• The PR creator has listed user actions to use when testing the new feature
• Unit tests are included for the new feature

Refactoring

• The PR creator has described the reason for refactoring
• The refactored component(s) continue to work as expected

[coveralls]

coverage: 80.92% (-0.3%) from 81.183%
when pulling 99a8468 on app-root-user-stats-profile
into 2acf138 on master.

[goplayoutside3]

This is looking good! I'm able to run app-root locally and view my staging stats at: https://local.zooniverse.org:3000/users/goplayoutside3/stats while signed-in 👍 When I sign-out, the stats aren't shown.

[goplayoutside3]

In what scenario could this be NaN? I ask because the value prop passed to TitledStat is a required number, so without an inline code comment here I'm confused why these additional lines are needed.

[mcbouslog]

Yes, great question, the reason these lines I think are necessary surprised me. typeof NaN is actually 'number' (which made me lol, I had forgotten that JavaScript quirk). NaN can result from invalid arithmetic operations (as well as other reasons), and I think while loading stats or if there are no hours then the result of the equation that converts the seconds can result in NaN.