feat: improve top section trending projects (#4190)

src/components/Home/TopSection/TopSection.tsx

@@ -11,12 +11,16 @@ import { SectionHeading } from 'components/Home/SectionHeading'
 import { ProjectTag } from 'components/ProjectTags/ProjectTag'
 import { XLButton } from 'components/buttons/XLButton'
 import { HOMEPAGE } from 'constants/fathomEvents'
-import { useTrendingProjects } from 'hooks/useProjects'
+import { PV_V1 } from 'constants/pv'
+import {
+  DEFAULT_TRENDING_PROJECTS_LIMIT,
+  useDBProjectsQuery,
+  useTrendingProjects,
+} from 'hooks/useProjects'
 import { trackFathomGoal } from 'lib/fathom'
 import { ProjectTagName } from 'models/project-tags'
 import Link from 'next/link'
-
-const TRENDING_PROJECTS_LIMIT = 10
+import { getSubgraphIdForProject } from 'utils/graph'
 
 const HEADER_TAGS: ProjectTagName[] = [
   'dao',
@@ -26,10 +30,40 @@ const HEADER_TAGS: ProjectTagName[] = [
   'business',
 ]
 
+// These projects will render if there isn't enough trending projects.
+const BACKUP_PROJECTS = [
+  getSubgraphIdForProject(PV_V1, 199), // moondao
+  getSubgraphIdForProject(PV_V1, 36), // constituiondao
+  getSubgraphIdForProject(PV_V1, 323), // assange
+  // add more as needed
+]
+
 export function TopSection() {
   const { data: trendingProjects, isLoading } = useTrendingProjects(
-    TRENDING_PROJECTS_LIMIT,
+    DEFAULT_TRENDING_PROJECTS_LIMIT,
   )
+  const { data: backupProjects } = useDBProjectsQuery({
+    ids: BACKUP_PROJECTS,
+  })
+
+  const remainderProjectCount =
+    DEFAULT_TRENDING_PROJECTS_LIMIT - (trendingProjects?.length ?? 0)
+
+  const renderBackup =
+    trendingProjects && backupProjects && remainderProjectCount
+      ? backupProjects
+          .slice(0, remainderProjectCount)
+          .filter(
+            p =>
+              !trendingProjects
+                .map(proj => proj.projectId)
+                .includes(p.projectId),
+          )
+      : []
+
+  const renderProjects = trendingProjects
+    ? [...trendingProjects, ...renderBackup]
+    : undefined
 
   return (
     <SectionContainer className="pt-6 pb-24 md:px-0 md:pt-10">
@@ -87,9 +121,9 @@ export function TopSection() {
           </XLButton>
         </Link>
       </div>
-      {!isLoading && trendingProjects ? (
+      {!isLoading && renderProjects ? (
         <ProjectCarousel
-          items={trendingProjects?.map(p => (
+          items={renderProjects?.map(p => (
             <HomepageProjectCard project={p} key={p.id} />
           ))}
         />

src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/components/HistorySubPanel.tsx

@@ -22,10 +22,12 @@ import { HistoricalConfigurationPanel } from './HistoricalConfigurationPanel'
 
 export const HistorySubPanel = () => {
   const { projectId } = useProjectMetadata()
+  const { fundingCycle } = useProjectContext()
 
   const [isFetchingMore, setIsFetchingMore] = useState<boolean>()
   const { data, fetchMore, loading, error } = usePastFundingCycles({
     projectId,
+    currentFcNumber: fundingCycle?.number.toNumber() ?? 0,
   })
 
   const isLoading = loading || isFetchingMore

src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/usePastFundingCycles.ts

@@ -4,25 +4,24 @@ import {
   useFundingCyclesQuery,
 } from 'generated/graphql'
 import { client } from 'lib/apollo/client'
-import { useMemo } from 'react'
 
 const DEFAULT_PAGE_SIZE = 5
 
 export function usePastFundingCycles({
   projectId,
+  currentFcNumber,
   pageSize,
 }: {
   projectId: number | undefined
+  currentFcNumber: number | undefined
   pageSize?: number
 }) {
-  const now = useMemo(() => Math.floor(Date.now() / 1000), [])
-
   return useFundingCyclesQuery({
     client,
     variables: {
       where: {
         projectId,
-        endTimestamp_lt: now, // Only already ended
+        number_lt: currentFcNumber,
       },
       orderBy: FundingCycle_OrderBy.number,
       orderDirection: OrderDirection.desc,

src/hooks/useProjects.ts

@@ -87,6 +87,8 @@ export function useDBProjectsInfiniteQuery(
   )
 }
 
+export const DEFAULT_TRENDING_PROJECTS_LIMIT = 10
+
 export function useTrendingProjects(count: number) {
   return useQuery(['trending-projects', count], async () => {
     const res = await axios.get<Json<DBProject>[]>(

src/pages/api/projects/trending.ts

@@ -36,7 +36,7 @@ const handler: NextApiHandler = async (req, res) => {
       query: TrendingProjectsDocument,
       variables: {
         where: {
-          // trendingScore_gt: '0', // Turned off because there wasn't sufficient number of projects to fulfill `first`.
+          trendingScore_gt: '0' as any, // eslint-disable-line @typescript-eslint/no-explicit-any
           ...(ARCHIVED_SUBGRAPH_IDS.length
             ? { id_not_in: ARCHIVED_SUBGRAPH_IDS }
             : {}), // `id_not_in: <empty-array>` will return 0 results