fix: clean up styling and final review behaviour (#65)

* ensure consistent styling between review and final review * - ensure toast appears only once - redirect to ApplicationReview after submitting final review * render default logo if ipfsCId is null
gitcoinco · Nov 29, 2024 · 3d8c29e · 3d8c29e
1 parent b37c6a3
commit 3d8c29e
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 66 deletions.
diff --git a/src/features/checker/components/ProjectEvaluationList/ProjectEvaluationList.tsx b/src/features/checker/components/ProjectEvaluationList/ProjectEvaluationList.tsx
@@ -1,3 +1,4 @@
+import { DefaultLogo } from "@/assets";
 import { IconLabel } from "@/components/IconLabel";
 import { CircleStat } from "@/primitives/Indicators";
 import { ListGrid, ListGridColumn } from "@/primitives/ListGrid";
@@ -31,7 +32,7 @@ export const ProjectEvaluationList = ({
             alt={item.name}
             className="aspect-square size-12 rounded-sm"
             onError={(event: React.SyntheticEvent<HTMLImageElement, Event>) => {
-              event.currentTarget.src = "/images/grey-image.png";
+              event.currentTarget.src = DefaultLogo;
             }}
           />
           <span>{item.name}</span>

diff --git a/src/features/checker/components/ProjectReviewList/ProjectReviewList.tsx b/src/features/checker/components/ProjectReviewList/ProjectReviewList.tsx
@@ -1,3 +1,4 @@
+import { DefaultLogo } from "@/assets";
 import { IconLabel } from "@/components/IconLabel";
 import { Button } from "@/primitives/Button";
 import { CircleStat } from "@/primitives/Indicators";
@@ -27,7 +28,7 @@ export const ProjectReviewList = ({ reviewer, projects, action }: ProjectReviewL
             alt={item.name}
             className="aspect-square size-12 rounded-sm"
             onError={(event: React.SyntheticEvent<HTMLImageElement, Event>) => {
-              event.currentTarget.src = "/images/grey-image.png";
+              event.currentTarget.src = DefaultLogo;
             }}
           />
           <span>{item.name}</span>

diff --git a/...res/checker/pages/ApplicationEvaluationOverviewPage/ApplicationEvaluationOverviewPage.tsx b/...res/checker/pages/ApplicationEvaluationOverviewPage/ApplicationEvaluationOverviewPage.tsx
@@ -76,7 +76,13 @@ export const ApplicationEvaluationOverviewPage = ({
         </p>
         <div className="flex flex-col gap-8">
           <div className="px-16">
-            <EvaluationList evaluations={applicationEvaluations ?? []} />
+            {applicationEvaluations ? (
+              <EvaluationList evaluations={applicationEvaluations} />
+            ) : (
+              <p className="text-center text-lg">
+                No evaluations have been submitted for this project yet.
+              </p>
+            )}
           </div>
           <div className="flex items-center justify-center">
             <Button

diff --git a/src/features/checker/pages/ReviewApplicationsPage/ReviewApplicationsPage.tsx b/src/features/checker/pages/ReviewApplicationsPage/ReviewApplicationsPage.tsx
@@ -43,7 +43,7 @@ export const ReviewApplicationsPage = () => {
         allocationStartDate={new Date()}
         allocationEndDate={new Date()}
       />
-      <div className="mx-auto flex max-w-[1440px] flex-col  gap-6 px-20">
+      <div className="mx-auto flex max-w-[1440px] flex-col gap-6 px-20">
         <div className="flex justify-start">
           <Button
             variant="secondry"

diff --git a/...eatures/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.tsx b/...eatures/checker/pages/SubmitApplicationEvaluationPage/SubmitApplicationEvaluationPage.tsx
@@ -226,7 +226,7 @@ export const SubmitApplicationEvaluationPage = ({
         <h1 className="text-3xl font-medium leading-9">Evaluate {project.title}</h1>
         <div className="h-0.5 bg-[#EAEAEA]" />
         <div className="flex gap-2">
-          <div className="flex w-[628px] flex-col gap-4">
+          <div className="flex w-full max-w-[600px] flex-col gap-4">
             <Accordion
               header={
                 <IconLabel
@@ -320,7 +320,7 @@ export const SubmitApplicationEvaluationPage = ({
             />
           </div>
 
-          <div className="w-[628px] rounded-[20px] border border-gray-100 p-5">
+          <div className="rounded-[20px] border border-gray-100 p-5">
             <EvaluationForm groups={groups} onSubmit={handleSubmit} />
           </div>
         </div>

diff --git a/src/features/checker/pages/SubmitFinalEvaluationPage/SubmitFinalEvaluationPage.tsx b/src/features/checker/pages/SubmitFinalEvaluationPage/SubmitFinalEvaluationPage.tsx
@@ -80,10 +80,11 @@ export const SubmitFinalEvaluationPage = ({
   }, [steps]);
 
   useEffect(() => {
-    if (success) {
+    if (success && isModalOpen) {
       setReviewBody(null);
       setIsModalOpen(false);
       toast({ status: "success", description: "Your evaluations have been submitted" });
+      dispatch(goToReviewApplicationsAction());
     }
     if (error) {
       setReviewBody(null);
@@ -113,58 +114,60 @@ export const SubmitFinalEvaluationPage = ({
         allocationStartDate={new Date()}
         allocationEndDate={new Date()}
       />
-      <div className="mx-auto flex max-w-[1440px]">
-        <div className="flex flex-col gap-6 px-20 pt-6">
-          <div className="flex flex-col gap-8">
-            <Button
-              value="Exit"
-              icon={<Icon type={IconType.X} className="fill-red-700" />}
-              className="flex h-8 w-fit justify-start gap-2 bg-red-50 p-4 text-red-700"
-            />
-            <StatCardGroup stats={statCardsProps || []} justify="center" />
-          </div>
-          <div className="flex flex-col gap-8">
-            <div className="flex flex-col gap-4">
-              <div className="font-mono text-2xl font-medium leading-loose text-black">
-                Review applications
-              </div>
-              <div className="font-mono text-base font-normal leading-7 text-grey-900">
-                Evaluate projects here.
-              </div>
+      <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}`)
+            }
+            value="back to round manager"
+          />
+        </div>
+        <StatCardGroup stats={statCardsProps || []} justify="center" />
+
+        <div className="flex flex-col gap-8">
+          <div className="flex flex-col gap-4">
+            <div className="font-mono text-2xl font-medium leading-loose text-black">
+              Review applications
+            </div>
+            <div className="font-mono text-base font-normal leading-7 text-grey-900">
+              Evaluate projects here.
             </div>
-            <div className="flex flex-col gap-2">
-              <div className="pb-1">
-                <div className="flex items-center justify-between pb-1">
-                  <div className="font-mono text-2xl font-medium leading-loose text-black">
-                    {`Ready to submit (${ReadyApplicationsToSubmit.length})`}
-                  </div>
-                  <div className="flex gap-2">
-                    <Button value="Cancel" onClick={handleCancel} />
-                    <Button
-                      value={`Record (${numberOfOnchainEvaluations}) evaluations onchain`}
-                      disabled={Object.keys(projectEvaluations).length === 0}
-                      onClick={() => {
-                        setIsModalOpen(true);
-                      }}
-                    />
-                  </div>
+          </div>
+          <div className="flex flex-col gap-2">
+            <div className="pb-1">
+              <div className="flex items-center justify-between pb-1">
+                <div className="font-mono text-2xl font-medium leading-loose text-black">
+                  {`Ready to submit (${ReadyApplicationsToSubmit.length})`}
                 </div>
-                <div className="h-px bg-grey-300" />
-              </div>
-
-              <div>
-                {ReadyApplicationsToSubmit.length === 0 ? (
-                  <div className="font-mono text-base font-normal leading-7 text-grey-900">
-                    Evaluations that are ready to be submitted onchain will appear here once
-                    reviewed. Manager supports multiple reviewers.
-                  </div>
-                ) : (
-                  <ProjectEvaluationList
-                    projects={ReadyApplicationsToSubmit}
-                    action={handleUpdateFinalEvaluations}
+                <div className="flex gap-2">
+                  <Button value="Cancel" onClick={handleCancel} />
+                  <Button
+                    value={`Record (${numberOfOnchainEvaluations}) evaluations onchain`}
+                    disabled={Object.keys(projectEvaluations).length === 0}
+                    onClick={() => {
+                      setIsModalOpen(true);
+                    }}
                   />
-                )}
+                </div>
               </div>
+              <div className="h-px bg-grey-300" />
+            </div>
+
+            <div>
+              {ReadyApplicationsToSubmit.length === 0 ? (
+                <div className="font-mono text-base font-normal leading-7 text-grey-900">
+                  Evaluations that are ready to be submitted onchain will appear here once reviewed.
+                  Manager supports multiple reviewers.
+                </div>
+              ) : (
+                <ProjectEvaluationList
+                  projects={ReadyApplicationsToSubmit}
+                  action={handleUpdateFinalEvaluations}
+                />
+              )}
             </div>
           </div>
         </div>

diff --git a/src/primitives/Avatar/Avatar.tsx b/src/primitives/Avatar/Avatar.tsx
@@ -40,12 +40,16 @@ export const Avatar = ({
   variant = "default", // Default to default variant
 }: AvatarProps) => {
   const imageURL = useMemo(() => {
-    return match({ ipfsCID, url, fallbackName })
-      .with({ ipfsCID: P.nullish, url: P.nullish, fallbackName: P.nullish }, () => defaultImage)
-      .with({ ipfsCID, url: P.string.length(0) }, ({ ipfsCID }) => `${ipfsBaseURL}${ipfsCID}`)
-      .with({ ipfsCID, url: P.nullish }, ({ ipfsCID }) => `${ipfsBaseURL}${ipfsCID}`)
-      .with({ ipfsCID: P.string.length(0), url }, ({ url }) => url)
-      .with({ ipfsCID: P.nullish, url }, ({ url }) => url)
+    return match({ ipfsCID, url })
+      .with(
+        { ipfsCID: P.when((cid) => !cid || typeof cid !== "string"), url: P.nullish },
+        () => defaultImage,
+      )
+      .with({ ipfsCID: P.when((cid) => !cid || typeof cid !== "string"), url }, ({ url }) => url)
+      .with(
+        { ipfsCID: P.when((cid) => typeof cid === "string" && cid.length > 0), url: P.nullish },
+        ({ ipfsCID }) => `${ipfsBaseURL}${ipfsCID}`,
+      )
       .with(
         { ipfsCID: P.string.minLength(1), url: P.string.minLength(1) },
         ({ ipfsCID }) => `${ipfsBaseURL}${ipfsCID}`,

diff --git a/src/primitives/BannerImage/BannerImage.tsx b/src/primitives/BannerImage/BannerImage.tsx
@@ -41,11 +41,15 @@ export const BannerImage = ({
 }: BannerImageProps) => {
   const imageURL = useMemo(() => {
     return match({ ipfsCID, url })
-      .with({ ipfsCID: P.nullish, url: P.nullish }, () => defaultImage)
-      .with({ ipfsCID, url: P.string.length(0) }, ({ ipfsCID }) => `${ipfsBaseURL}${ipfsCID}`)
-      .with({ ipfsCID, url: P.nullish }, ({ ipfsCID }) => `${ipfsBaseURL}${ipfsCID}`)
-      .with({ ipfsCID: P.string.length(0), url }, ({ url }) => url)
-      .with({ ipfsCID: P.nullish, url }, ({ url }) => url)
+      .with(
+        { ipfsCID: P.when((cid) => !cid || typeof cid !== "string"), url: P.nullish },
+        () => defaultImage,
+      )
+      .with({ ipfsCID: P.when((cid) => !cid || typeof cid !== "string"), url }, ({ url }) => url)
+      .with(
+        { ipfsCID: P.when((cid) => typeof cid === "string" && cid.length > 0), url: P.nullish },
+        ({ ipfsCID }) => `${ipfsBaseURL}${ipfsCID}`,
+      )
       .with(
         { ipfsCID: P.string.minLength(1), url: P.string.minLength(1) },
         ({ ipfsCID }) => `${ipfsBaseURL}${ipfsCID}`,