Revert: Refactor homepage recent projects to use ERAS

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

@@ -1,30 +1,32 @@
 import { Anchor, Box, ResponsiveContext, Text } from 'grommet'
-import { arrayOf, bool, number, shape, string } from 'prop-types'
+import { arrayOf, bool, shape, string } from 'prop-types'
 import { useContext } from 'react'
 import { Loader, ProjectCard, SpacedText } from '@zooniverse/react-components'
 
 import { ContentBox } from '@components/shared'
 
 export default function RecentProjects({
   isLoading = false,
-  recentProjects = [],
+  projectPreferences = [],
   error = undefined
 }) {
   const size = useContext(ResponsiveContext)
 
   return (
     <ContentBox title='Continue Classifying' screenSize={size}>
-      {isLoading ? (
+      {isLoading && (
         <Box fill justify='center' align='center'>
           <Loader />
         </Box>
-      ) : error ? (
+      )}
+      {!isLoading && error && (
         <Box fill justify='center' align='center' pad='medium'>
           <SpacedText>
             There was an error fetching your recent projects
           </SpacedText>
         </Box>
-      ) : !recentProjects.length ? (
+      )}
+      {!isLoading && !projectPreferences.length && !error && (
         <Box fill justify='center' align='center' pad='medium'>
           <SpacedText>No Recent Projects found</SpacedText>
           <Text>
@@ -35,44 +37,40 @@ export default function RecentProjects({
             .
           </Text>
         </Box>
-      ) : (
-        <Box
-          as='ul'
-          direction='row'
-          gap='small'
-          pad={{ horizontal: 'xxsmall', bottom: 'xsmall', top: 'xxsmall' }}
-          overflow={{ horizontal: 'auto' }}
-          style={{ listStyle: 'none' }}
-          margin='0'
-        >
-          {recentProjects.map(project => (
-            <li key={project.id}>
-              <ProjectCard
-                badge={project.count}
-                description={project?.description}
-                displayName={project?.display_name}
-                href={`https://www.zooniverse.org/projects/${project?.slug}`}
-                imageSrc={project?.avatar_src}
-                size={size}
-              />
-            </li>
-          ))}
-        </Box>
       )}
+      {!isLoading &&
+        projectPreferences?.length ? (
+          <Box
+            as='ul'
+            direction='row'
+            gap='small'
+            pad={{ horizontal: 'xxsmall', bottom: 'xsmall', top: 'xxsmall' }}
+            overflow={{ horizontal: 'auto' }}
+            style={{ listStyle: 'none' }}
+            margin='0'
+          >
+            {projectPreferences.map(preference => (
+              <li key={preference?.project?.id}>
+                <ProjectCard
+                  description={preference?.project?.description}
+                  displayName={preference?.project?.display_name}
+                  href={`https://www.zooniverse.org/projects/${preference?.project?.slug}`}
+                  imageSrc={preference?.project?.avatar_src}
+                  size={size}
+                />
+              </li>
+            ))}
+          </Box>
+        ) : null}
     </ContentBox>
   )
 }
 
 RecentProjects.propTypes = {
   isLoading: bool,
-  recentProjects: arrayOf(
+  projectPreferences: arrayOf(
     shape({
-      avatar_src: string,
-      count: number,
-      description: string,
-      display_name: string,
-      id: string,
-      slug: string
+      id: string
     })
   )
 }

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

@@ -1,56 +1,90 @@
 import { shape, string } from 'prop-types'
-import { usePanoptesProjects, useStats } from '@hooks'
+import { panoptes } from '@zooniverse/panoptes-js'
+import useSWR from 'swr'
+import auth from 'panoptes-client/lib/auth'
+
+import { usePanoptesProjects } from '@hooks'
 import RecentProjects from './RecentProjects.js'
 
-function RecentProjectsContainer({ authUser }) {
-  const recentProjectsQuery = {
-    project_contributions: true,
-    order_project_contributions_by: 'recents',
-    period: 'day'
+const SWROptions = {
+  revalidateIfStale: true,
+  revalidateOnMount: true,
+  revalidateOnFocus: true,
+  revalidateOnReconnect: true,
+  refreshInterval: 0
+}
+
+async function fetchUserProjectPreferences() {
+  const user = await auth.checkCurrent()
+  const token = await auth.checkBearerToken()
+  const authorization = `Bearer ${token}`
+  try {
+    const query = {
+      sort: '-updated_at',
+      user_id: user.id
+    }
+    const response = await panoptes.get('/project_preferences', query, { authorization })
+    if (response.ok) {
+      const projectPreferencesUserHasClassified =
+        response.body.project_preferences
+          .filter(preference => preference.activity_count > 0)
+      return projectPreferencesUserHasClassified
+    }
+    return []
+  } catch (error) {
+    console.error(error)
+    throw error
   }
+}
 
+function RecentProjectsContainer({ authUser }) {
+  // Get user's project preference.activity_count for 10 most recently classified projects
+  const cacheKey = {
+    name: 'user-project-preferences',
+    userId: authUser.id
+  }
   const {
-    data: stats,
-    isLoading: statsLoading,
-    error: statsError
-  } = useStats({ sourceId: authUser?.id, query: recentProjectsQuery })
-
-  // limit to 20 projects fetched from panoptes
-  const contributions = stats?.project_contributions.slice(0, 20)
-  const projectIds = contributions?.map(project => project.project_id)
+    data: projectPreferences,
+    isLoading: preferencesLoading,
+    error: preferencesError
+  } = useSWR(cacheKey, fetchUserProjectPreferences, SWROptions)
 
-  // Get more info about each project
+  // Get more info about each project and attach it to correct projectPreference object
+  const recentProjectIds = projectPreferences?.map(
+    preference => preference.links.project
+  )
   const {
     data: projects,
     isLoading: projectsLoading,
     error: projectsError
   } = usePanoptesProjects({
     cards: true,
-    id: projectIds?.join(',')
+    id: recentProjectIds?.join(',')
   })
 
-  // Attach project info to each contribution stat (see similar behavior in TopProjects)
-  let recentProjects = []
-
-  if (projects?.length && contributions?.length) {
-    recentProjects = contributions
-      .map(projectContribution => {
-        const projectData = projects?.find(
-          project => project.id === projectContribution.project_id.toString()
+  // Attach project object to each project preference
+  let projectPreferencesWithProjectObj
+  if (projects?.length) {
+    projectPreferencesWithProjectObj = projectPreferences
+      .map(preference => {
+        const matchedProjectObj = projects.find(
+          project => project.id === preference.links?.project
         )
-        return {
-          count: projectContribution.count,
-          ...projectData
+
+        if (matchedProjectObj) {
+          preference.project = matchedProjectObj
         }
+        return preference
       })
-      .filter(project => project?.id) // exclude private or deleted projects
+      .filter(preference => preference?.project?.slug)
+      .slice(0, 10)
   }
 
   return (
     <RecentProjects
-      error={statsError || projectsError}
-      isLoading={statsLoading || projectsLoading}
-      recentProjects={recentProjects}
+      isLoading={preferencesLoading || projectsLoading}
+      projectPreferences={projectPreferencesWithProjectObj}
+      error={preferencesError || projectsError}
     />
   )
 }