fix: project tender pill color and grants in home (#1205)

decentraland · Aug 25, 2023 · c132949 · c132949
1 parent 0b1e592
commit c132949
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/src/components/Home/ActiveCommunityGrants.tsx b/src/components/Home/ActiveCommunityGrants.tsx
@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 
 import classNames from 'classnames'
 
+import { ProposalType } from '../../entities/Proposal/types'
 import useFormatMessage from '../../hooks/useFormatMessage'
-import useGrants from '../../hooks/useProjects'
+import useProjects from '../../hooks/useProjects'
 import locations from '../../utils/locations'
 import FullWidthButton from '../Common/FullWidthButton'
 import ProjectCard from '../Projects/ProjectCard/ProjectCard'
@@ -12,11 +13,12 @@ import './ActiveCommunityGrants.css'
 import HomeLoader from './HomeLoader'
 import HomeSectionHeader from './HomeSectionHeader'
 
-const CURRENT_GRANTS_PER_PAGE = 4
+const GRANTS_TO_SHOW = 4
 
 const ActiveCommunityGrants = () => {
   const t = useFormatMessage()
-  const { projects, isLoadingProjects } = useGrants()
+  const { projects, isLoadingProjects } = useProjects()
+  const grants = useMemo(() => projects?.data.filter((item) => item.type === ProposalType.Grant), [projects])
 
   return (
     <div className="ActiveCommunityGrants">
@@ -31,8 +33,8 @@ const ActiveCommunityGrants = () => {
       )}
       {!isLoadingProjects && (
         <div className="ActiveCommunityGrants__Container">
-          {projects &&
-            projects.data.slice(0, CURRENT_GRANTS_PER_PAGE).map((project, index) => (
+          {grants &&
+            grants.slice(0, GRANTS_TO_SHOW).map((project, index) => (
               <div
                 className={classNames('HoverableCardContainer', index <= 1 && 'HoverableCardContainer__FirstRow')}
                 key={`HoverableCard__${project.id}`}

diff --git a/src/components/Projects/ProjectPill.tsx b/src/components/Projects/ProjectPill.tsx
@@ -36,9 +36,11 @@ function getProjectCategory(
 }
 
 export default function ProjectPill({ type }: Props) {
+  const categoryType = getProjectCategory(type)
+
   return (
-    <Pill size="sm" color={PROJECT_CATEGORY_COLORS[type]}>
-      {getProjectCategory(type).split(' ')[0]}
+    <Pill size="sm" color={PROJECT_CATEGORY_COLORS[categoryType]}>
+      {categoryType.split(' ')[0]}
     </Pill>
   )
 }