Homepage: Create RecentProjects component, refactor data fetching in RecentSubjects #6125

goplayoutside3 · 2024-06-09T22:19:59Z

Package

lib-user
lib-react-components

Linked Issue and/or Talk Post

Follows #6117
The rest of the Dashboard on the signed-in homepage is in #6121

Figma Design

Describe your changes

Build a RecentProjects component based on the signed-in user's project_contributions. See more comments about it below.
Add a badge option to ProjectCard so a user's classification count can be displayed per card on the homepage.
Refactor RecentSubject's UI component to use shared ContentBox, and its data fetching now uses the shared usePanoptesProjects hook.
Add basic grid layout to UserHome (user's groups component will go in the empty space).

How to Review

You can either run lib-user locally or app-root locally to view your signed-in homepage. The links are:
- https://local.zooniverse.org:8080 (lib-user)
- https://local.zooniverse.org:3000 (app-root)
View the RecentProjects story components. I included states for empty projects array or an error.

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

General UX

Example Staging Project: i-fancy-cats

Can sign-in and sign-out
The component is accessible
- Can be used with a screen reader BBC guide to VoiceOver
- Can be used from the keyboard WebAIM guide to keyboard testing
- It is passing accessibility checks in the storybook

packages/lib-user/src/components/UserHome/UserHome.js

coveralls · 2024-06-09T22:26:33Z

coverage: 79.287% (-0.04%) from 79.323%
when pulling 8370182 on lib-user-recent-projects
into 9a7a630 on master.

goplayoutside3 · 2024-06-09T22:28:23Z

packages/lib-user/src/components/UserHome/components/RecentProjects/RecentProjectsContainer.js

+  // Returns all projects a user has classified in descending order (most classifications first)
+  const { data: statsData } = useStats({
+    sourceId: authUser.id,
+    query: { project_contributions: true }
+  })


@mcbouslog @seanmiller26 as mentioned in the Slack thread, the response from this is a list of projects in descending order from greatest number of classifications to least number of classifications by the user.

Is this "Continue Classifying" section intended to be "projects you've most recently classified"? If so, I'll need to change this fetch to a user's project preferences like PFE's homepage.

Yes, this is a recently classified section, so we can match PFE here.

Sounds good - I refactored to display projects a user has most recently classified on. The catch with relying on project_preferences is that project_preferences.updated_at is changed when a user interacts with a project beyond just classifying. For instance, closing a tutorial.

In this PR, I only fetched 1 page of project_preferences (20 items) and filtered for those where activity_count > 0 (which means a user has actually classified on a project). This means if I recently interacted with 20 projects, but only classified on 3, then only 3 projects will show in this "Continue Classifying" UI section.

It would be much smoother if the eras request for project_contributions included a sort by most recently classified, but I'll have to follow-up with Michelle after internal team testing.

A clarification - PFE's homepage recursively gets ALL pages of a user's project preferences rather than just 1 page. This is why it takes a long time for all of your ribbon classifications to load. I'd prefer not to use recursion on the new homepage because it's so data intensive - hence the note about follow-up with Michelle and eras.

I did not know the specifics here re project_preferences.updated_at Great decisions!

packages/lib-user/src/components/UserHome/components/RecentSubjects/RecentSubjects.js

goplayoutside3 · 2024-06-09T22:30:53Z

packages/lib-user/src/components/UserHome/components/RecentSubjects/RecentSubjects.js

-          ? recents.slice(0, 10).map(classification => {
-              const subjectMedia = classification.locations.map(
+          ? recents.map(recent => {
+              const subjectMedia = recent?.locations?.map(


Changing this variable name to recent instead of classification was suggested here, because the object is a Recent resource from panoptes, not a Classification resource typically sent from lib-classifier to panoptes.

coveralls · 2024-06-09T22:31:11Z

coverage: 79.324% (+0.001%) from 79.323%
when pulling 3bf726f on lib-user-recent-projects
into 9a7a630 on master.

packages/lib-user/src/components/UserHome/components/RecentSubjects/RecentSubjectsContainer.js

coveralls · 2024-06-10T17:00:33Z

coverage: 79.14% (-0.2%) from 79.323%
when pulling 1fca965 on lib-user-recent-projects
into 9a7a630 on master.

coveralls · 2024-06-10T17:13:51Z

coverage: 79.131% (-0.2%) from 79.323%
when pulling b5a5ba4 on lib-user-recent-projects
into 9a7a630 on master.

…rror

coveralls · 2024-06-14T21:24:24Z

coverage: 79.222% (-0.1%) from 79.323%
when pulling 684a196 on lib-user-recent-projects
into 9a7a630 on master.

mcbouslog

Looking good!

I made a few changes, see in-line comments. Might be helpful to review last few commits and make sure changes are ok, I might be missing some context.

mcbouslog · 2024-06-14T21:27:55Z

packages/lib-user/src/components/shared/TopProjects/TopProjects.js

@@ -30,7 +30,7 @@ function CardsRow({ children }) {
      as='ul'
      direction='row'
      gap='small'
-      pad={{ horizontal: 'xxsmall', bottom: 'xsmall' }}
+      pad={{ horizontal: 'xxsmall', bottom: 'xsmall', top: 'xxsmall' }}


Added padding top: 'xxsmall' to uls that list cards (project, subject) to leave a little room for the focus styling.

mcbouslog · 2024-06-14T21:28:34Z

packages/lib-user/src/components/UserHome/components/SubjectCard/SubjectCard.js

-      </StyledBox>
-    </StyledAnchor>
+    <StyledBox
+      forwardedAs='a'


This refactor gives the SubjectCard focus styling.

mcbouslog · 2024-06-14T21:29:46Z

packages/lib-user/src/components/UserHome/components/RecentProjects/RecentProjects.js

+      {!isLoading && error && (
+        <Box fill justify='center' align='center' pad='medium'>
+          <SpacedText>
+            There was an error fetching your recent projects


For consideration, show error.message here

mcbouslog · 2024-06-14T21:30:17Z

packages/lib-user/src/components/UserHome/components/RecentProjects/RecentProjects.js

+            margin='0'
+          >
+            {projectPreferences.map(preference => (
+              <li key={preference?.project?.id}>


Added <li>

mcbouslog · 2024-06-14T21:30:55Z

packages/lib-user/src/components/UserHome/components/RecentProjects/RecentProjects.js

+      {!isLoading &&
+        projectPreferences?.length ? (
+          <Box
+            as='ul'


Moved ul after loading/error/empty states content

mcbouslog · 2024-06-14T21:31:40Z

packages/lib-user/src/components/UserHome/components/RecentSubjects/RecentSubjects.js

+      {!isLoading && recents?.length
+        ? (
+          <Box
+            as='ul'


Moved ul after loading/error/empty states content

mcbouslog · 2024-06-14T21:31:55Z

packages/lib-user/src/components/UserHome/components/RecentSubjects/RecentSubjects.js

-                  mediaSrc={subjectMedia[0]}
-                  projectSlug={classification.slug}
-                />
+                <li key={recent?.id}>


Added <li>

mcbouslog · 2024-06-14T21:33:33Z

packages/lib-user/src/components/UserHome/components/RecentProjects/RecentProjectsContainer.js

+    return []
+  } catch (error) {
+    console.error(error)
+    throw error


Since the related components handle error states I think this fetch should throw an error if it has one so that error can be included in the error returned from useSWR on line 51?

mcbouslog · 2024-06-14T21:37:25Z

packages/lib-user/src/components/UserHome/components/RecentSubjects/RecentSubjectsContainer.js

+async function fetchUserRecents({ userId }) {
+  try {
+    const query = {
+      page_size: 10,


Refactored to page_size: 10 as I think we only need 10

mcbouslog · 2024-06-14T21:39:01Z

packages/lib-user/src/components/UserHome/components/RecentSubjects/RecentSubjectsContainer.js

+    return response.body?.recents
+  } catch (error) {
+    console.error(error)
+    throw error


Similar to RecentProjectsContainer, since the related components handle error states I think this fetch should throw an error if it has one so that error can be included in the error returned from useSWR on line 35?

coveralls · 2024-06-14T21:44:13Z

coverage: 79.18% (-0.1%) from 79.323%
when pulling b8ad896 on lib-user-recent-projects
into 9a7a630 on master.

coveralls · 2024-06-14T21:49:43Z

coverage: 79.197% (-0.1%) from 79.323%
when pulling 8c7247a on lib-user-recent-projects
into 9a7a630 on master.

coveralls · 2024-06-14T22:00:54Z

coverage: 79.189% (-0.01%) from 79.201%
when pulling 4035c12 on lib-user-recent-projects
into 1a9e6c2 on master.

goplayoutside3 added 4 commits June 8, 2024 21:06

fetch and display project cards for 'project_contributions' on hompage

40d14bf

add count badge

2fe456a

refactor RecentSubjects to fetch data like RecentProjects

c3f3899

create grid layout in UserHome

8370182

goplayoutside3 added the enhancement New feature or request label Jun 9, 2024

goplayoutside3 commented Jun 9, 2024

View reviewed changes

packages/lib-user/src/components/UserHome/UserHome.js Show resolved Hide resolved

remove edits to Dashboard

3bf726f

goplayoutside3 commented Jun 9, 2024

View reviewed changes

packages/lib-user/src/components/UserHome/components/RecentSubjects/RecentSubjects.js Show resolved Hide resolved

goplayoutside3 commented Jun 9, 2024

View reviewed changes

packages/lib-user/src/components/UserHome/components/RecentSubjects/RecentSubjectsContainer.js Show resolved Hide resolved

goplayoutside3 requested a review from mcbouslog June 9, 2024 22:32

use project_preferences for most recently classified projects

1fca965

minor fix for new users with no projectPreferences

b5a5ba4

goplayoutside3 mentioned this pull request Jun 11, 2024

Homepage: build a PreviewLayout of user groups in UserHome #6129

Merged

7 tasks

mcbouslog self-assigned this Jun 13, 2024

mcbouslog added 4 commits June 14, 2024 16:12

Refactor RecentProjects and RecentSubject containers to throw fetch e…

ad29c4e

…rror

Refactor Recent projects and subjects components ul and li's

8b9c5ce

Refactor Recent projects and subjects stories

95cf3c2

Refactor project and subject cards for improved focus styling

684a196

mcbouslog added 2 commits June 14, 2024 16:37

Refactor recents in RecentSubjectsContainer

b8ad896

Add await for checkCurrent user

8c7247a

mcbouslog approved these changes Jun 14, 2024

View reviewed changes

github-actions bot added the approved This PR is approved for merging label Jun 14, 2024

mcbouslog enabled auto-merge (squash) June 14, 2024 21:44

Merge branch 'master' into lib-user-recent-projects

4035c12

mcbouslog merged commit 37bef25 into master Jun 14, 2024
8 checks passed

mcbouslog deleted the lib-user-recent-projects branch June 14, 2024 21:58

mcbouslog mentioned this pull request Jun 19, 2024

lib-user: Refactor usePanoptesProjects hook with auth, update usage accordingly #6140

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Homepage: Create RecentProjects component, refactor data fetching in RecentSubjects #6125

Homepage: Create RecentProjects component, refactor data fetching in RecentSubjects #6125

goplayoutside3 commented Jun 9, 2024 •

edited

Loading

coveralls commented Jun 9, 2024

goplayoutside3 Jun 9, 2024

seanmiller26 Jun 10, 2024

goplayoutside3 Jun 10, 2024

goplayoutside3 Jun 10, 2024

seanmiller26 Jun 10, 2024

goplayoutside3 Jun 9, 2024

coveralls commented Jun 9, 2024

coveralls commented Jun 10, 2024

coveralls commented Jun 10, 2024

coveralls commented Jun 14, 2024

mcbouslog left a comment

mcbouslog Jun 14, 2024

mcbouslog Jun 14, 2024

mcbouslog Jun 14, 2024

mcbouslog Jun 14, 2024

mcbouslog Jun 14, 2024

mcbouslog Jun 14, 2024

mcbouslog Jun 14, 2024

mcbouslog Jun 14, 2024

mcbouslog Jun 14, 2024

mcbouslog Jun 14, 2024

coveralls commented Jun 14, 2024

coveralls commented Jun 14, 2024

coveralls commented Jun 14, 2024

Homepage: Create RecentProjects component, refactor data fetching in RecentSubjects #6125

Homepage: Create RecentProjects component, refactor data fetching in RecentSubjects #6125

Conversation

goplayoutside3 commented Jun 9, 2024 • edited Loading

Package

Linked Issue and/or Talk Post

Describe your changes

How to Review

Checklist

General

General UX

coveralls commented Jun 9, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coveralls commented Jun 9, 2024

coveralls commented Jun 10, 2024

coveralls commented Jun 10, 2024

coveralls commented Jun 14, 2024

mcbouslog left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coveralls commented Jun 14, 2024

coveralls commented Jun 14, 2024

coveralls commented Jun 14, 2024

goplayoutside3 commented Jun 9, 2024 •

edited

Loading