From 74ec2fa5c16de7883499e3783286d57fa34b64e3 Mon Sep 17 00:00:00 2001
From: Delilah <23665803+goplayoutside3@users.noreply.github.com>
Date: Mon, 21 Oct 2024 13:15:18 -0500
Subject: [PATCH] correct the ordering in RecentProjectsContainer

---
 .../RecentProjects/RecentProjects.js          | 26 ++++++++++++-------
 .../RecentProjects/RecentProjectsContainer.js | 25 +++++++++---------
 2 files changed, 29 insertions(+), 22 deletions(-)

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 => (
-            <li key={project?.id}>
+          {recentProjectsStats.map(stat => (
+            <li key={stat.project_id}>
               <ProjectCard
-                badge={project?.userContributions}
-                description={project?.description}
-                displayName={project?.display_name}
-                href={`https://www.zooniverse.org/projects/${project?.slug}`}
-                imageSrc={project?.avatar_src}
+                badge={stat.count}
+                description={stat.projectInfo?.description}
+                displayName={stat.projectInfo?.display_name}
+                href={`https://www.zooniverse.org/projects/${stat.projectInfo?.slug}`}
+                imageSrc={stat.projectInfo?.avatar_src}
                 size={size}
               />
             </li>
@@ -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 }) {
     <RecentProjects
       error={statsError || projectsError}
       isLoading={statsLoading || projectsLoading}
-      recentProjectsStats={projects}
+      recentProjectsStats={contributionStats}
     />
   )
 }