fix : add approve/reject list in main checker page (#68)

fix : add approve/reject list in main checker page + ui fixes + invalidate queries
gitcoinco · Nov 29, 2024 · 67a82ac · 67a82ac
1 parent dac96ec
commit 67a82ac
Show file tree

Hide file tree

Showing 8 changed files with 159 additions and 66 deletions.
diff --git a/src/features/checker/components/ProjectEvaluationList/ProjectEvaluationList.tsx b/src/features/checker/components/ProjectEvaluationList/ProjectEvaluationList.tsx
@@ -67,7 +67,7 @@ export const ProjectEvaluationList = ({
       position: "center",
       render: (item) => (
         <div className="flex items-center justify-center">
-          <CircleStat value={item.scoreAverage.toFixed(1)} />
+          <CircleStat value={item.scoreAverage.toFixed(0)} />
         </div>
       ),
     },

diff --git a/src/features/checker/components/ProjectReviewList/ProjectReviewList.tsx b/src/features/checker/components/ProjectReviewList/ProjectReviewList.tsx
@@ -1,3 +1,5 @@
+import { Address } from "viem";
+
 import { DefaultLogo } from "@/assets";
 import { IconLabel } from "@/components/IconLabel";
 import { Button } from "@/primitives/Button";
@@ -10,12 +12,21 @@ import { getReviewsCount } from "~checker/utils/getReviewsCount";
 import { ReviewsCounterLabel } from "../ReviewsCounterLabel";
 
 export interface ProjectReviewListProps {
-  reviewer: `0x${string}`;
   projects: ProjectReview[];
+
+  reviewer?: Address;
   action?: (projectId: string) => void;
+  actionLabel?: string;
+  keepAction?: boolean;
 }
 
-export const ProjectReviewList = ({ reviewer, projects, action }: ProjectReviewListProps) => {
+export const ProjectReviewList = ({
+  reviewer,
+  projects,
+  action,
+  actionLabel,
+  keepAction,
+}: ProjectReviewListProps) => {
   const columns: ListGridColumn<ProjectReview>[] = [
     {
       header: "Project",
@@ -38,7 +49,7 @@ export const ProjectReviewList = ({ reviewer, projects, action }: ProjectReviewL
     {
       header: "Date Submitted",
       key: "date",
-      width: "1fr",
+      width: "1.3fr",
       render: (item) => <IconLabel type="date" date={item.date} />,
     },
     {
@@ -53,17 +64,23 @@ export const ProjectReviewList = ({ reviewer, projects, action }: ProjectReviewL
     {
       header: "AI Suggestion",
       key: "aiSuggestion",
-      width: "1fr",
-      render: (item) => <IconLabel type="ai-evaluation" percent={item.aiSuggestion} />,
+      width: "0.9fr",
+      render: (item) => {
+        return item.aiSuggestion !== 0 ? (
+          <IconLabel type="ai-evaluation" percent={item.aiSuggestion} />
+        ) : (
+          <ReviewsCounterLabel negativeReviews={0} positiveReviews={0} />
+        );
+      },
     },
     {
       header: "Score Average",
       key: "scoreAverage",
-      width: "1fr",
+      width: "0.8fr",
       position: "center",
       render: (item) => (
         <div className="flex items-center justify-center">
-          <CircleStat value={item.scoreAverage.toFixed(1)} />
+          <CircleStat value={item.scoreAverage.toFixed(0)} />
         </div>
       ),
     },
@@ -73,13 +90,13 @@ export const ProjectReviewList = ({ reviewer, projects, action }: ProjectReviewL
       width: "1fr",
       position: "center",
       render: (item) => {
-        const isReviewed = item.reviews.some((review) => review.reviewer === reviewer);
+        const isReviewed = item.reviews.some((review) => review.reviewer === reviewer) || !reviewer;
         return (
           <div className="flex items-center justify-center">
             <Button
               variant="outlined-secondary"
-              value="Evaluate project"
-              disabled={isReviewed}
+              value={actionLabel ?? "Evaluate project"}
+              disabled={keepAction ? false : isReviewed}
               onClick={() => {
                 if (action) {
                   action(item.id);

diff --git a/...res/checker/pages/ApplicationEvaluationOverviewPage/ApplicationEvaluationOverviewPage.tsx b/...res/checker/pages/ApplicationEvaluationOverviewPage/ApplicationEvaluationOverviewPage.tsx
@@ -50,10 +50,10 @@ export const ApplicationEvaluationOverviewPage = ({
         poolId={poolId}
         strategyName={application.round.strategyName}
         name={application.round.roundMetadata.name}
-        registerStartDate={new Date()}
-        registerEndDate={new Date()}
-        allocationStartDate={new Date()}
-        allocationEndDate={new Date()}
+        registerStartDate={new Date(application.round.applicationsStartTime)}
+        registerEndDate={new Date(application.round.applicationsEndTime)}
+        allocationStartDate={new Date(application.round.donationsStartTime)}
+        allocationEndDate={new Date(application.round.donationsEndTime)}
       />
       <div className="mx-auto flex max-w-[1440px] flex-col gap-4 px-20">
         <div>

diff --git a/src/features/checker/pages/ReviewApplicationsPage/ReviewApplicationsPage.tsx b/src/features/checker/pages/ReviewApplicationsPage/ReviewApplicationsPage.tsx
@@ -6,6 +6,7 @@ import { useGetApplicationsReviewPage } from "~checker/hooks";
 import {
   goToApplicationEvaluationOverviewAction,
   goToSubmitFinalEvaluationAction,
+  goToSubmitApplicationEvaluationAction,
   useCheckerContext,
   useCheckerDispatchContext,
 } from "~checker/store";
@@ -27,30 +28,38 @@ export const ReviewApplicationsPage = () => {
     dispatch(goToSubmitFinalEvaluationAction());
   };
 
+  const openRoundInManager = () => {
+    window.open(`https://manager.gitcoin.co/#/chain/${chainId}/round/${poolId}`, "_blank");
+  };
+
+  const openApplicationOnManager = (projectId: string) => {
+    dispatch(goToSubmitApplicationEvaluationAction({ projectId }));
+  };
   const ReadyApplicationsToSubmit = categorizedReviews?.READY_TO_REVIEW || [];
 
   const PendingApplications = categorizedReviews?.INREVIEW || [];
 
+  const ApprovedApplications = categorizedReviews?.APPROVED || [];
+  const RejectedApplications = categorizedReviews?.REJECTED || [];
+
   return (
     <div className="flex flex-col gap-6 ">
       <PoolSummary
         chainId={chainId}
         poolId={poolId}
         strategyName={application?.round.strategyName ?? ""}
         name={application?.round.roundMetadata.name ?? ""}
-        registerStartDate={new Date()}
-        registerEndDate={new Date()}
-        allocationStartDate={new Date()}
-        allocationEndDate={new Date()}
+        registerStartDate={new Date(application?.round.applicationsStartTime ?? new Date())}
+        registerEndDate={new Date(application?.round.applicationsEndTime ?? new Date())}
+        allocationStartDate={new Date(application?.round.donationsStartTime ?? new Date())}
+        allocationEndDate={new Date(application?.round.donationsEndTime ?? new Date())}
       />
       <div className="mx-auto flex max-w-[1440px] flex-col gap-6 px-20">
         <div className="flex justify-start">
           <Button
             variant="secondry"
             icon={<Icon type={IconType.CHEVRON_LEFT} />}
-            onClick={() =>
-              window.open(`https://manager.gitcoin.co/#/chain/${chainId}/round/${poolId}`)
-            }
+            onClick={openRoundInManager}
             value="back to round manager"
           />
         </div>
@@ -87,7 +96,7 @@ export const ReviewApplicationsPage = () => {
                 </div>
               ) : (
                 <ProjectReviewList
-                  reviewer={address || "0x"}
+                  reviewer={address}
                   projects={ReadyApplicationsToSubmit}
                   action={goToApplicationEvaluationOverview}
                 />
@@ -111,13 +120,65 @@ export const ReviewApplicationsPage = () => {
                 </div>
               ) : (
                 <ProjectReviewList
-                  reviewer={address || "0x"}
+                  reviewer={address}
                   projects={PendingApplications}
                   action={goToApplicationEvaluationOverview}
                 />
               )}
             </div>
           </div>
+          <div className="flex flex-col gap-2">
+            <div className="pb-1">
+              <div className="flex items-center justify-start pb-1">
+                <div className="font-mono text-2xl font-medium leading-loose text-black">
+                  {`Approved applications (${ApprovedApplications.length})`}
+                </div>
+              </div>
+              <div className="h-px bg-[#c8cccc]" />
+            </div>
+
+            <div>
+              {ApprovedApplications.length === 0 ? (
+                <div className="font-mono text-base font-normal leading-7 text-grey-900">
+                  No approved applications.
+                </div>
+              ) : (
+                <ProjectReviewList
+                  reviewer={address}
+                  projects={ApprovedApplications}
+                  action={openApplicationOnManager}
+                  actionLabel="View project"
+                  keepAction
+                />
+              )}
+            </div>
+          </div>
+          <div className="flex flex-col gap-2">
+            <div className="pb-1">
+              <div className="flex items-center justify-start pb-1">
+                <div className="font-mono text-2xl font-medium leading-loose text-black">
+                  {`Rejected applications (${RejectedApplications.length})`}
+                </div>
+              </div>
+              <div className="h-px bg-[#c8cccc]" />
+            </div>
+
+            <div>
+              {RejectedApplications.length === 0 ? (
+                <div className="font-mono text-base font-normal leading-7 text-grey-900">
+                  No rejected applications.
+                </div>
+              ) : (
+                <ProjectReviewList
+                  reviewer={address}
+                  projects={RejectedApplications}
+                  action={openApplicationOnManager}
+                  actionLabel="View project"
+                  keepAction
+                />
+              )}
+            </div>
+          </div>
         </div>
       </div>
     </div>

diff --git a/...eatures/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.tsx b/...eatures/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.tsx
@@ -1,6 +1,7 @@
 // src/components/SubmitApplicationEvaluation/SubmitApplicationEvaluationPage.tsx
 import { useEffect, useState } from "react";
 
+import { useQueryClient } from "@tanstack/react-query";
 import { Hex } from "viem";
 
 import { ApplicationBadge, ApplicationBadgeStatus } from "@/components/Badges";
@@ -65,10 +66,10 @@ export const SubmitApplicationEvaluationPage = ({
   const { application, evaluationQuestions } =
     useApplicationOverviewEvaluations({ applicationId }) || {};
 
-  const [toastShowed, setToastShowed] = useState(false);
   const dispatch = useCheckerDispatchContext();
   const { data: pastApplications } = useGetPastApplications(chainId, poolId, applicationId);
   const { toast } = useToast();
+  const queryClient = useQueryClient();
 
   const showToast = () => {
     toast({
@@ -89,13 +90,15 @@ export const SubmitApplicationEvaluationPage = ({
   };
 
   useEffect(() => {
-    if ((isSuccess || isError) && !toastShowed) {
-      setToastShowed(true);
+    if ((isSuccess || isError) && isModalOpen) {
       setIsModalOpen(false);
       showToast();
       goToSubmitFinalEvaluation();
+      if (isSuccess) {
+        queryClient.invalidateQueries({ queryKey: ["poolData", chainId, poolId] }); // Invalidate the query
+      }
     }
-  }, [isSuccess, isError, toastShowed]);
+  }, [isSuccess, isError]);
 
   if (!application || !evaluationQuestions) return null;
 
@@ -191,10 +194,10 @@ export const SubmitApplicationEvaluationPage = ({
         poolId={poolId}
         strategyName={application.round.strategyName}
         name={application.round.roundMetadata.name}
-        registerStartDate={new Date()}
-        registerEndDate={new Date()}
-        allocationStartDate={new Date()}
-        allocationEndDate={new Date()}
+        registerStartDate={new Date(application.round.applicationsStartTime)}
+        registerEndDate={new Date(application.round.applicationsEndTime)}
+        allocationStartDate={new Date(application.round.donationsStartTime)}
+        allocationEndDate={new Date(application.round.donationsEndTime)}
       />
       <div className="mx-auto flex max-w-[1440px] flex-col gap-4 px-20">
         <SubmitApplicationEvaluationModal

diff --git a/src/features/checker/pages/SubmitFinalEvaluationPage/SubmitFinalEvaluationPage.tsx b/src/features/checker/pages/SubmitFinalEvaluationPage/SubmitFinalEvaluationPage.tsx
@@ -1,5 +1,6 @@
 import { useState, useMemo, useEffect } from "react";
 
+import { useQueryClient } from "@tanstack/react-query";
 import { match } from "ts-pattern";
 
 import { Step } from "@/components/ProgressModal";
@@ -79,9 +80,12 @@ export const SubmitFinalEvaluationPage = ({
     return [success, error];
   }, [steps]);
 
+  const queryClient = useQueryClient();
+
   useEffect(() => {
     if (success && isModalOpen) {
       setReviewBody(null);
+      queryClient.invalidateQueries({ queryKey: ["poolData", chainId, poolId] }); // Invalidate the query
       setIsModalOpen(false);
       toast({ status: "success", description: "Your evaluations have been submitted" });
       dispatch(goToReviewApplicationsAction());
@@ -109,10 +113,10 @@ export const SubmitFinalEvaluationPage = ({
         poolId={poolId ?? "1"}
         strategyName={application?.round.strategyName ?? ""}
         name={application?.round.roundMetadata.name ?? ""}
-        registerStartDate={new Date()}
-        registerEndDate={new Date()}
-        allocationStartDate={new Date()}
-        allocationEndDate={new Date()}
+        registerStartDate={new Date(application?.round.applicationsStartTime ?? new Date())}
+        registerEndDate={new Date(application?.round.applicationsEndTime ?? new Date())}
+        allocationStartDate={new Date(application?.round.donationsStartTime ?? new Date())}
+        allocationEndDate={new Date(application?.round.donationsEndTime ?? new Date())}
       />
       <div className="mx-auto flex max-w-[1440px] flex-col  gap-6 px-20">
         <div className="flex justify-start">