[KARMA-GAP] Small fixes on the grants completion badge (#3722)

* fix: Add completed type * fix: Display completion status if milestones are not present in a project
gitcoinco · Nov 1, 2024 · a3424aa · a3424aa
1 parent b503739
commit a3424aa
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/packages/grant-explorer/src/features/api/gap.ts b/packages/grant-explorer/src/features/api/gap.ts
@@ -27,6 +27,7 @@ export interface IGapGrant {
     isGrantUpdate?: boolean;
   }[];
   updates: IGrantStatus[];
+  completed?: IGrantStatus;
 }
 
 export interface IGapImpact {

diff --git a/packages/grant-explorer/src/features/round/KarmaGrant/CompletionBadge.tsx b/packages/grant-explorer/src/features/round/KarmaGrant/CompletionBadge.tsx
@@ -3,10 +3,12 @@ import { IGapGrant } from "../../api/gap";
 import { Flex } from "@chakra-ui/react";
 
 interface CompletionBadgeProps {
+  completed: IGapGrant["completed"];
   milestones: IGapGrant["milestones"];
 }
 
 export const GrantCompletionBadge: React.FC<CompletionBadgeProps> = ({
+  completed,
   milestones,
 }) => {
   const filteredMilestones = milestones.filter(
@@ -18,10 +20,15 @@ export const GrantCompletionBadge: React.FC<CompletionBadgeProps> = ({
     0
   );
 
-  const percent =
-    filteredMilestones.length > 0
-      ? Math.floor((completedCount / filteredMilestones.length) * 100)
-      : 0;
+  let percent = 0;
+  if (milestones.length === 0) {
+    percent = completed ? 100 : 0;
+  } else {
+    percent =
+      filteredMilestones.length > 0
+        ? Math.floor((completedCount / filteredMilestones.length) * 100)
+        : 0;
+  }
 
   return (
     <Flex

diff --git a/packages/grant-explorer/src/features/round/KarmaGrant/GrantItem.tsx b/packages/grant-explorer/src/features/round/KarmaGrant/GrantItem.tsx
@@ -59,7 +59,10 @@ export const GrantItem: React.FC<GrantItemProps> = ({ grant, url }) => {
                   {dateFromMs(grant.createdAtMs)}
                 </small>
               </Box>
-              <GrantCompletionBadge milestones={grant.milestones} />
+              <GrantCompletionBadge
+                completed={grant?.completed}
+                milestones={grant.milestones}
+              />
             </Flex>
           </Flex>
           <Box>