diff --git a/packages/lib-user/src/components/UserHome/components/RecentProjects/RecentProjects.js b/packages/lib-user/src/components/UserHome/components/RecentProjects/RecentProjects.js index 199acf51b7..12a5053614 100644 --- a/packages/lib-user/src/components/UserHome/components/RecentProjects/RecentProjects.js +++ b/packages/lib-user/src/components/UserHome/components/RecentProjects/RecentProjects.js @@ -1,5 +1,5 @@ import { Anchor, Box, ResponsiveContext, Text } from 'grommet' -import { arrayOf, bool, shape, string } from 'prop-types' +import { arrayOf, bool, number, shape, string } from 'prop-types' import { useContext } from 'react' import { Loader, ProjectCard, SpacedText } from '@zooniverse/react-components' @@ -44,14 +44,14 @@ export default function RecentProjects({ style={{ listStyle: 'none' }} margin='0' > - {recentProjectsStats.map(project => ( -
  • + {recentProjectsStats.map(stat => ( +
  • @@ -66,7 +66,15 @@ RecentProjects.propTypes = { isLoading: bool, recentProjectsStats: arrayOf( shape({ - id: string + count: number, + project_id: number, + projectInfo: shape({ + avatar_src: string, + description: string, + display_name: string, + id: string, + slug: string + }) }) ) } diff --git a/packages/lib-user/src/components/UserHome/components/RecentProjects/RecentProjectsContainer.js b/packages/lib-user/src/components/UserHome/components/RecentProjects/RecentProjectsContainer.js index 6593f9b797..04bc727fa2 100644 --- a/packages/lib-user/src/components/UserHome/components/RecentProjects/RecentProjectsContainer.js +++ b/packages/lib-user/src/components/UserHome/components/RecentProjects/RecentProjectsContainer.js @@ -15,28 +15,27 @@ function RecentProjectsContainer({ authUser }) { error: statsError } = useStats({ sourceId: authUser?.id, query: recentProjectsQuery }) - // Get more info about each project - const projectIds = stats?.project_contributions?.map( - project => project.project_id - ) + // limit to 20 projects fetched from panoptes + const contributionStats = stats?.project_contributions.slice(0, 20) + const projectIds = contributionStats?.map(project => project.project_id) + // Get more info about each project const { data: projects, isLoading: projectsLoading, error: projectsError } = usePanoptesProjects({ cards: true, - id: projectIds?.join(','), - page_size: 20 + id: projectIds?.join(',') }) - // Attach contributions to each project - if (projects?.length && stats.project_contributions.length) { - projects.forEach(project => { - const projectStat = stats.project_contributions.find( - stat => stat.project_id === parseInt(project.id) + // Attach project info to each contribution stat + if (projects?.length && contributionStats?.length) { + contributionStats.forEach(stat => { + const projectObj = projects.find( + project => parseInt(project.id) === stat.project_id ) - project.userContributions = projectStat.count + stat.projectInfo = projectObj }) } @@ -44,7 +43,7 @@ function RecentProjectsContainer({ authUser }) { ) }