Homepage: Build avatar and profile banner into user dashboard #6117
Conversation
packages/lib-user/src/components/UserHome/components/Dashboard/Dashboard.js
Show resolved
Hide resolved
|
There's something happening when running app-root locally where a user's avatar and profile banner image aren't consistently displayed 🤔 I'm going to investigate tomorrow before I complete the rest of the Dashboard (draft PR #6121) |
|
@goplayoutside3 could that be this issue? |
packages/lib-user/src/components/UserHome/components/Dashboard/DashboardContainer.js
Outdated
Show resolved
Hide resolved
@eatyourgreens that could definitely be the case 🤔 The UserStats component uses similar prop drilling where |
|
@goplayoutside3 I thought decrypting the token, since it contains the username, display name etc., would be faster than making API requests to Panoptes to get the authenticated user, but it might not really be worth it if the token doesn't contain the avatar. I might have been better off just making the network request to get the User resource. |
An interesting point! For now, I refactored DashboardContainer to include a fetch for the user resource of the currently signed-in user, similar to UserStats. I couldn't directly use the existing I'll add a card to the Stats Pages & Homepages project board for investigating changes to app-root's authContext, and how it might affect the user prop passed to various lib components. |
| } | ||
|
|
||
| export default function DashboardContainer({ authUser }) { | ||
| const key = { authUser } |
There was a problem hiding this comment.
If authUser is empty or null, you should set the key to null. That tells SWR to skip the request.
Otherwise, your code here might inadvertently run the SWR hook when it shouldn't, and cache an unexpected value for this key in the SWR cache.
When you pass a key to useSWR, it looks up that key in its global cache and immediately returns the stored result (which is why keys must be unique.) If the stored result is stale, it revalidates the cache by fetching a new result from the remote source. Hence 'stale while revalidate.'
There was a problem hiding this comment.
Also a warning that if you've used { authUser } as the key for any other queries, elsewhere in your code, useSWR(key, fetcher, options) will returned the cached values for those queries. That can lead to some weird bugs.
You could avoid that here by passing the query object as the key. I think that's unique to this specific API request. I think that when I was writing SWR hooks for translations, I used the API endpoint and query as the key for each request, but I don't remember the details. That was where I learnt that reusing a key leads to bugs!
There was a problem hiding this comment.
DashboardContainer is in UserHome, and UserHome only renders if authUser.login exists. I don't expect authUser to ever be null in this component.
UserHome is conditionally rendered in app-root here. Do you suggest handling the homepage differently?
There was a problem hiding this comment.
If you know that authuser will always be defined, then this should be fine.
There was a problem hiding this comment.
Sounds good. Good catch with the need for a unique key too, so I'll definitely address that here!
There was a problem hiding this comment.
I think that unique key caught me out here, which is why I added the endpoint.
There was a problem hiding this comment.
Not related to this specific API request, but it can also be a good idea to invalidate the cache when an auth token is refreshed, like this example for user project preferences, which includes authorization in the key:
I think there might be some discussion of that in the SWR docs for query keys. The idea is that you don't want to accidentally show stale private data to another user, eg. on a shared browser, so always clear the cache when the auth header expires and is refreshed.
| const { body } = await panoptes.get('/users', query, { authorization }) | ||
| const user = body.users?.[0] |
There was a problem hiding this comment.
This API request runs a search across the Users table, returning all users that match query. If the user ID is undefined, it will return the first 20 users from the Users table.
When you want a single, specific resource by ID, the form of the URL to use is GET /api/users/1234?include=profile_header.
You don't need an Authorization header here either, since users are public resources.
When you add Authorization headers to a request, the browser generally won't cache the response, because auth'ed requests are seen as private and not cacheable, so you might end up generating unnecessary network traffic. That can become an important consideration when you're building a busy page with a lot of users, like the Zooniverse home page.
There was a problem hiding this comment.
Good to know! Thanks, I'll refactor this fetch.
There was a problem hiding this comment.
If I'm understanding correctly I think this means we can delete auth (lines 17 and 18), remove user_id from the query, and refactor line 22 to const { body } = await panoptes.get(/users/${authUser.id}, query)?
There was a problem hiding this comment.
Yes. A unique cache key for this URL is:
const key = {
endpoint: `/users/{authUser.id}`,
query: { include: 'profile_header' }
}With that key, the client request becomes:
panoptes.get(key.endpoint, key.query)Alternatively, you could set the key as the full URL:
const key = `/users/{authUser.id}?include=profile_header`
…
panoptes.get(key)There was a problem hiding this comment.
Sorry, one other thing. panoptes.get uses an old version of SuperAgent (I think it’s still on version 8? Version 9 came out recently, along with a couple of patches), which means that these requests aren’t using fetch.
The app router in Next.js is built on top of fetch so code like this won’t be able to take advantage of Next’s built-in data-caching. Not a big deal right now, when you’re testing with just a single visitor, but something to have in mind when you roll out and need to run the home page under load.
There was a problem hiding this comment.
How does Next.js's built-in data-caching play with SWR? This request is using SWR in a client component, which is in contrast to using fetch directly in a page.js in app-root:
front-end-monorepo/packages/app-root/src/app/page.js
Lines 22 to 24 in 9a7a630
(Linking the existing superagent Issue to this comment: #317)
There was a problem hiding this comment.
In the app router, with Next.js 13.5 and higher, Vercel replace native fetch with their own global fetch that caches the return value.
There was a problem hiding this comment.
SWR can be used with fetch, like react-query, but will work with any function that returns a Promise-like object.
This page has notes on using it with the app router.
https://swr.vercel.app/docs/with-nextjs
There was a problem hiding this comment.
Here’s some documentation on data caching with libraries that don’t use fetch, such as panoptes-js.
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-third-party-libraries
Here’s documentation for the app router data cache, which you’ll need to manage across app instances and deployments, since Zooniverse Next.js is self-hosted on Node.
https://nextjs.org/docs/app/building-your-application/caching#data-cache
I haven’t played around with app router caching, but I believe you can also cache rendered HTML across requests, similar to how the current pages router setup serves pages via a CDN, so that HTML can be served immediately, without waiting for a page build to run.
There was a problem hiding this comment.
Here’s a couple of old issues and PRs about slow page build times, for context. Worth bearing in mind for both the new home page and the user stats pages.
Since SWR caches everything that it fetches, you can avoid prop drilling by calling your custom SWR hook from within |
There was a problem hiding this comment.
Tested with a user with an avatar and profile image and with a user without and works as expected, looking good! 👍
Good conversation about SWR hooks, I agree it'd be preferable to use the usePanoptesUser hook, but as noted that hook will need refactoring to work accordingly. I'm sending an array of user IDs for TopContributors and the (full) Contributors components which complicates things, but I think this can all be revisited in subsequent PR.
@goplayoutside3 - do you intend to refactor the SWR key and user fetch in this PR?
| const { body } = await panoptes.get('/users', query, { authorization }) | ||
| const user = body.users?.[0] |
There was a problem hiding this comment.
If I'm understanding correctly I think this means we can delete auth (lines 17 and 18), remove user_id from the query, and refactor line 22 to const { body } = await panoptes.get(/users/${authUser.id}, query)?
Yes, done 👍
Also done. |
| subjectID: number.isRequired | ||
| subjectID: string.isRequired |
There was a problem hiding this comment.
Minor fix for prop type in SubjectCard
Package
lib-user
app-root
Linked Issue and/or Talk Post
Similar to #6112 this builds an isolated section of the signed-in hompage
Figma: https://www.figma.com/design/qbqbmR3t5XV6eKcpuRj7mG/Group-Stats?node-id=1981-11239&t=FXkBJkbFeX6RQhvA-4
Describe your changes
How to Review
yarn buildandyarn startand visit https://local.zooniverse.org:3000/?env=production?env=production)Checklist
General
yarn panic && yarn bootstrapordocker-compose up --buildand FEM works as expected