fix: updates on checker story (#59)

* updates on checker story

* cleaning

* minor change

* cleaning

---------

Co-authored-by: Nick Lionis <nikolaos@gitcoin.co>

Author: thelostone-mc

src/components/pool/components/PoolSummary/PoolSummary.tsx

@@ -44,11 +44,14 @@ export const PoolSummary = (pool: PoolSummaryProps) => {
   const applyLink = `https://builder.gitcoin.co/#/chains/${pool.chainId}/round/${pool.poolId}/apply`;
   const explorerLink = `https://explorer.gitcoin.co/#/round/${pool.chainId}/${pool.poolId}`;
 
-  // TODO Fix breadcrumbItems hrefs
   const breadcrumbItems = [
-    { label: "My Programs", href: "#" },
-    { label: "Program Details", href: "#" },
-    { label: "Round Details", href: "#" },
+    { label: "My Programs", href: "https://manager.gitcoin.co/#/" },
+    // TODO: Fix href for Program Details
+    { label: "Program Details", href: "https://manager.gitcoin.co/#/1" },
+    {
+      label: "Round Details",
+      href: `https://explorer.gitcoin.co/#/round/${pool.chainId}/${pool.poolId}`,
+    },
   ];
   return (
     <div className={cn(variants.variants.default, "grid grid-cols-2")}>

src/features/checker/Checker.stories.tsx

@@ -1,16 +1,17 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { handlers } from "@/mocks/handlers";
+import { CheckerProvider } from "~checker/store";
 
 import { Checker } from "./Checker";
+import { usePerformEvaluation, usePerformOnChainReview } from "./hooks";
 
 const meta = {
   title: "Features/Checker",
   component: Checker,
   args: {
     address: "0x1234567890123456789012345678901234567890",
-    poolId: "609",
-    chainId: 42161,
+    poolId: "597",
+    chainId: 11155111,
   },
 } satisfies Meta;
 
@@ -19,9 +20,39 @@ export default meta;
 type Story = StoryObj<typeof Checker>;
 
 export const Default: Story = {
-  parameters: {
-    msw: {
-      handlers,
+  decorators: [
+    (Story) => {
+      // New StoryWrapper component
+      const StoryWrapper = () => {
+        const { setEvaluationBody, isSigning, isSuccess, isEvaluating, isError, isErrorSigning } =
+          usePerformEvaluation();
+        const { steps, setReviewBody, isReviewing } = usePerformOnChainReview();
+
+        return (
+          <Story
+            setEvaluationBody={setEvaluationBody}
+            isSigning={isSigning}
+            isSuccess={isSuccess}
+            isEvaluating={isEvaluating}
+            isError={isError}
+            isErrorSigning={isErrorSigning}
+            steps={steps}
+            setReviewBody={setReviewBody}
+            isReviewing={isReviewing}
+          />
+        );
+      };
+
+      return (
+        <CheckerProvider>
+          <StoryWrapper />
+        </CheckerProvider>
+      );
     },
+  ],
+  parameters: {
+    // msw: {
+    //   handlers,
+    // },
   },
 };

src/features/checker/Checker.tsx

@@ -1,14 +1,5 @@
-import { Hex } from "viem";
-
-import { CheckerProvider } from "~checker/store";
-
-import { CheckerRouter } from "./CheckerRouter";
-
-export interface CheckerProps {
-  address: Hex;
-  poolId: string;
-  chainId: number;
-}
+import { CheckerRouter, CheckerProps } from "./CheckerRouter";
+import { CheckerProvider } from "./store";
 
 export const Checker = (props: CheckerProps) => {
   return (

src/features/checker/CheckerRouter.tsx

@@ -1,36 +1,52 @@
 import { match, P } from "ts-pattern";
 import { Hex } from "viem";
 
+import { Step } from "@/components/ProgressModal";
 import { useCheckerContext } from "@/features/checker/store/hooks/useCheckerContext";
 
-import { useInitialize, usePerformEvaluation, usePerformOnChainReview } from "~checker/hooks";
+import { useInitialize } from "~checker/hooks";
 import {
   ApplicationEvaluationOverviewPage,
   ReviewApplicationsPage,
+  ReviewBody,
   SubmitApplicationEvaluationPage,
   SubmitFinalEvaluationPage,
 } from "~checker/pages";
+import { EvaluationBody } from "~checker/services/checker/api";
 import { CheckerRoute } from "~checker/store";
 
-export interface CheckerRouterProps {
+export interface CheckerProps {
   address: Hex;
   poolId: string;
   chainId: number;
+  setEvaluationBody: (body: EvaluationBody) => void;
+  isSigning: boolean;
+  isSuccess: boolean;
+  isEvaluating: boolean;
+  isError: boolean;
+  isErrorSigning: boolean;
+  steps: Step[];
+  setReviewBody: (reviewBody: ReviewBody | null) => void;
+  isReviewing: boolean;
 }
 
-export const CheckerRouter = ({ address, poolId, chainId }: CheckerRouterProps) => {
+export const CheckerRouter = ({
+  address,
+  poolId,
+  chainId,
+  setEvaluationBody,
+  isSigning,
+  isSuccess,
+  isEvaluating,
+  isError,
+  isErrorSigning,
+  steps,
+  setReviewBody,
+  isReviewing,
+}: CheckerProps) => {
   useInitialize({ address, poolId, chainId });
-  const { setEvaluationBody, isSigning, isSuccess, isEvaluating, isError, isErrorSigning } =
-    usePerformEvaluation();
-  const { route } = useCheckerContext();
 
-  const {
-    steps,
-    setReviewBody,
-    isSuccess: isReviewSuccess,
-    isError: isReviewError,
-    isReviewing,
-  } = usePerformOnChainReview();
+  const { route } = useCheckerContext();
 
   return match(route)
     .with({ id: CheckerRoute.ReviewApplications }, () => <ReviewApplicationsPage />)

src/features/checker/hooks/useApplication.ts

@@ -20,7 +20,7 @@ export const useApplicationEvaluations = (
       );
       const data = {
         application,
-        applicationEvaluations,
+        applicationEvaluations: applicationEvaluations,
       };
       return data;
     },

src/features/checker/pages/ApplicationEvaluationOverviewPage/ApplicationEvaluationOverviewPage.tsx

@@ -1,6 +1,5 @@
 import { Hex } from "viem";
 
-import { PoolType } from "@/components/Badges";
 import { PoolSummary } from "@/components/pool/components/PoolSummary/PoolSummary";
 import { ProjectBanner } from "@/components/project/components/ProjectBanner/ProjectBanner";
 import { Button } from "@/primitives/Button";
@@ -33,7 +32,7 @@ export const ApplicationEvaluationOverviewPage = ({
   const { application, applicationEvaluations } =
     useApplicationOverviewEvaluations({ applicationId }) || {};
 
-  if (!application || !applicationEvaluations) return null;
+  if (!application) return null;
 
   const dispatch = useCheckerDispatchContext();
 
@@ -80,7 +79,7 @@ export const ApplicationEvaluationOverviewPage = ({
         </p>
         <div className="flex flex-col gap-8">
           <div className="px-16">
-            <EvaluationList evaluations={applicationEvaluations} />
+            <EvaluationList evaluations={applicationEvaluations ?? []} />
           </div>
           <div className="flex items-center justify-center">
             <Button

src/features/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.tsx

@@ -167,7 +167,7 @@ export const SubmitApplicationEvaluationPage = ({
       alloPoolId: poolId,
       alloApplicationId: applicationId,
       cid: application.metadataCid,
-      evaluator: address ?? "0xGitcoinShips!!!",
+      evaluator: address ?? "0xGitcoinShips!",
       summaryInput: {
         questions: data,
         summary: feedback,

src/features/checker/pages/SubmitFinalEvaluationPage/SubmitFinalEvaluationPage.tsx

@@ -65,8 +65,8 @@ export const SubmitFinalEvaluationPage = ({
   };
 
   const [success, error] = useMemo(() => {
-    const success = steps.every((step) => step.status === "IS_SUCCESS");
-    const error = steps.some((step) => step.status === "IS_ERROR");
+    const success = steps?.every((step) => step.status === "IS_SUCCESS");
+    const error = steps?.some((step) => step.status === "IS_ERROR");
     return [success, error];
   }, [steps]);
 

src/features/checker/services/allo/dataLayer.ts

@@ -15,7 +15,6 @@ export async function getApplicationsFromIndexer(
       chainId,
       roundId,
     });
-
     return response.applications as ProjectApplicationForManager[];
   } catch (e) {
     throw new Error(`Failed to fetch applications data. with error: ${e}`);
@@ -33,7 +32,6 @@ export async function getApplicationByIdFromIndexer(
       roundId,
       applicationId,
     });
-
     return response.application as ProjectApplication;
   } catch (e) {
     throw new Error(`Failed to fetch application data. with error: ${e}`);

src/features/checker/services/checker/api.ts

@@ -72,7 +72,7 @@ export async function syncPool(syncPoolBody: SyncPoolBody): Promise<boolean> {
       },
       body: JSON.stringify({
         ...syncPoolBody,
-        skipEvaluation: true,
+        skipEvaluation: false,
       }),
     });
 

src/features/checker/services/checker/dataLayer.ts

@@ -1,3 +1,4 @@
+import { syncPool } from "./api";
 import { executeQuery } from "./checkerClient";
 import { checkerApplicationEvaluationsQuery, checkerPoolDataQuery } from "./queries";
 import { CheckerApiApplication, CheckerApiPoolData } from "./types";
@@ -7,6 +8,7 @@ export async function getCheckerPoolData(
   alloPoolId?: string,
 ): Promise<CheckerApiPoolData> {
   try {
+    await syncPool({ chainId: chainId as number, alloPoolId: alloPoolId as string });
     const response = (await executeQuery(checkerPoolDataQuery, {
       chainId,
       alloPoolId,
@@ -32,7 +34,7 @@ export async function getCheckerApplicationEvaluations(
     })) as unknown as {
       applications: CheckerApiApplication[];
     };
-    return response.applications[0].evaluations;
+    return response.applications[0]?.evaluations ?? [];
   } catch (e) {
     throw new Error(
       `Failed to fetch application evaluations data from checker api with error: ${e}.`,

src/features/checker/utils/mapApplicationsForOverviewPage.ts

@@ -61,13 +61,15 @@ export function categorizeProjectReviews(
     }
 
     // Separate evaluations into AI and non-AI
-    const aiEvaluations = application.evaluations.filter(
-      (evaluation) => evaluation.evaluator.toLowerCase() === AI_EVALUATOR_ADDRESS.toLowerCase(),
-    );
+    const aiEvaluations =
+      application.evaluations?.filter(
+        (evaluation) => evaluation.evaluator.toLowerCase() === AI_EVALUATOR_ADDRESS.toLowerCase(),
+      ) ?? [];
 
-    const humanEvaluations = application.evaluations.filter(
-      (evaluation) => evaluation.evaluator.toLowerCase() !== AI_EVALUATOR_ADDRESS.toLowerCase(),
-    );
+    const humanEvaluations =
+      application.evaluations?.filter(
+        (evaluation) => evaluation.evaluator.toLowerCase() !== AI_EVALUATOR_ADDRESS.toLowerCase(),
+      ) ?? [];
 
     // Determine the category based on the number of human evaluations
     const isReadyForReview = humanEvaluations.length >= 2;
@@ -76,7 +78,7 @@ export function categorizeProjectReviews(
       : "INREVIEW";
 
     // Map human evaluations to reviews
-    const reviews: Review[] = humanEvaluations.map((evaluation) => {
+    const reviews: Review[] = humanEvaluations?.map((evaluation) => {
       const isApproved = evaluation.evaluatorScore >= 50; // Assuming 50 as the approval threshold
       const reviewerAddress: `0x${string}` = evaluation.evaluator.startsWith("0x")
         ? (evaluation.evaluator as `0x${string}`)
@@ -88,18 +90,14 @@ export function categorizeProjectReviews(
     });
 
     // Calculate the average score including both AI and human evaluations
-    const totalScore = application.evaluations.reduce(
-      (sum, evaluation) => sum + evaluation.evaluatorScore,
-      0,
-    );
-    const totalEvaluations = application.evaluations.length;
+    const totalScore =
+      application.evaluations?.reduce((sum, evaluation) => sum + evaluation.evaluatorScore, 0) ?? 0;
+    const totalEvaluations = application.evaluations?.length ?? 0;
     const scoreAverage = totalEvaluations > 0 ? totalScore / totalEvaluations : 0;
 
     // Calculate AI suggestion score (average AI evaluator scores)
-    const aiTotalScore = aiEvaluations.reduce(
-      (sum, evaluation) => sum + evaluation.evaluatorScore,
-      0,
-    );
+    const aiTotalScore =
+      aiEvaluations?.reduce((sum, evaluation) => sum + evaluation.evaluatorScore, 0) ?? 0;
     const aiSuggestion = aiEvaluations.length > 0 ? aiTotalScore / aiEvaluations.length : 0;
 
     const projectData = application.metadata.application.project;