fix project loading bug (#3550)

0xKurt · thelostone-mc · web-flow · commit e75d6b36986f · 2024-07-04T21:44:46.000+05:30
* fix project loading bug

* fix ui

* update to pnpm/action-setup@v4

* fix

* fix

---------

Co-authored-by: Aditya Anand M C &lt;aditya.anandmc@gmail.com&gt;
diff --git a/.github/workflows/builder.yml b/.github/workflows/builder.yml
@@ -18,13 +18,13 @@ jobs:
       with:
         fetch-depth: 1
 
-    - uses: pnpm/action-setup@v2
+    - uses: pnpm/action-setup@v4
       with:
         version: 8
 
     - uses: actions/setup-node@v3
       with:
-        node-version: '16'
+        node-version: '18'
         cache: 'pnpm'
 
     - name: Install Dependencies
diff --git a/.github/workflows/common.yml b/.github/workflows/common.yml
@@ -17,7 +17,7 @@ jobs:
         with:
           fetch-depth: 1
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
           version: 8
 
diff --git a/.github/workflows/data-layer.yml b/.github/workflows/data-layer.yml
@@ -17,7 +17,7 @@ jobs:
         with:
           fetch-depth: 1
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
           version: 8
 
diff --git a/.github/workflows/grant-explorer.yml b/.github/workflows/grant-explorer.yml
@@ -17,7 +17,7 @@ jobs:
         with:
           fetch-depth: 1
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
           version: 8
 
diff --git a/.github/workflows/round-manager.yml b/.github/workflows/round-manager.yml
@@ -17,7 +17,7 @@ jobs:
         with:
           fetch-depth: 1
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
           version: 8
 
diff --git a/.github/workflows/verify-env.yml b/.github/workflows/verify-env.yml
@@ -17,7 +17,7 @@ jobs:
         with:
           fetch-depth: 1
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
           version: 8
 
diff --git a/packages/round-manager/src/features/api/utils.ts b/packages/round-manager/src/features/api/utils.ts
@@ -1,13 +1,15 @@
 import { BigNumber, ethers } from "ethers";
 import {
   ApplicationMetadata,
+  GrantApplication,
   InputType,
   IPFSObject,
   RevisedMatch,
 } from "./types";
 import { useEffect, useState } from "react";
 import Papa from "papaparse";
 import { getChainById } from "common";
+import { ProjectApplicationForManager } from "data-layer";
 
 export type SupportType = {
   name: string;
@@ -240,3 +242,52 @@ export const useMatchCSVParser = (file: File | null) => {
 
   return { data, loading, error };
 };
+
+export const convertApplications = (
+  dataLayerApplications: ProjectApplicationForManager[]
+) => {
+  const applications: GrantApplication[] = dataLayerApplications.flatMap(
+    (application) => {
+      if (application.canonicalProject === null) {
+        console.error(
+          `Canonical project not found for application ${application.id}`
+        );
+        return [];
+      }
+
+      return [
+        {
+          id: application.id,
+          applicationIndex: Number(application.id),
+          round: application.roundId,
+          status: application.status,
+          metadata: application.metadata,
+          project: {
+            ...application.metadata.application.project,
+            owners: application.canonicalProject.roles,
+            id: application.projectId,
+          },
+          projectId: application.projectId,
+          inReview: application.status === "IN_REVIEW",
+          recipient: application.metadata.application.recipient,
+          createdAt: "0",
+          projectsMetaPtr: { protocol: 1, pointer: "" },
+          payoutStrategy: {
+            strategyName: application.round.strategyName,
+            id: application.round.strategyAddress,
+            payouts: [],
+          },
+          distributionTransaction: application.distributionTransaction,
+          statusSnapshots: application.statusSnapshots.map((snapshot) => ({
+            ...snapshot,
+            updatedAt: new Date(snapshot.updatedAt),
+          })),
+          anchorAddress: application.anchorAddress,
+          answers: application.metadata.application.answers,
+        },
+      ];
+    }
+  );
+
+  return applications;
+};
diff --git a/packages/round-manager/src/features/common/styles.ts b/packages/round-manager/src/features/common/styles.ts
@@ -3,7 +3,7 @@ import tw from "tailwind-styled-components";
 export const CardsContainer = tw.div`
   flex
   flex-row
-  flex-grow
+  flex-wrap
   justify-start
   w-full
 `;
diff --git a/packages/round-manager/src/features/common/useApplicationsByRoundId.tsx b/packages/round-manager/src/features/common/useApplicationsByRoundId.tsx
@@ -2,6 +2,7 @@ import { useAccount } from "wagmi";
 import { GrantApplication } from "../../features/api/types";
 import { useDataLayer } from "data-layer";
 import useSWR from "swr";
+import { convertApplications } from "../api/utils";
 
 export const useApplicationsByRoundId = (roundId: string) => {
   const dataLayer = useDataLayer();
@@ -21,50 +22,7 @@ export const useApplicationsByRoundId = (roundId: string) => {
         chainId,
       });
 
-      const applications: GrantApplication[] = dataLayerApplications.flatMap(
-        (application) => {
-          if (application.canonicalProject === null) {
-            console.error(
-              `Canonical project not found for application ${application.id}`
-            );
-            return [];
-          }
-
-          return [
-            {
-              id: application.id,
-              applicationIndex: Number(application.id),
-              round: application.roundId,
-              status: application.status,
-              metadata: application.metadata,
-              project: {
-                ...application.metadata.application.project,
-                owners: application.canonicalProject.roles,
-                id: application.projectId,
-              },
-              projectId: application.projectId,
-              inReview: application.status === "IN_REVIEW",
-              recipient: application.metadata.application.recipient,
-              createdAt: "0",
-              projectsMetaPtr: { protocol: 1, pointer: "" },
-              payoutStrategy: {
-                strategyName: application.round.strategyName,
-                id: application.round.strategyAddress,
-                payouts: [],
-              },
-              distributionTransaction: application.distributionTransaction,
-              statusSnapshots: application.statusSnapshots.map((snapshot) => ({
-                ...snapshot,
-                updatedAt: new Date(snapshot.updatedAt),
-              })),
-              anchorAddress: application.anchorAddress,
-              answers: application.metadata.application.answers,
-            },
-          ];
-        }
-      );
-
-      return applications;
+      return convertApplications(dataLayerApplications);
     },
     {
       onError: (error) => {
diff --git a/packages/round-manager/src/features/round/ApplicationsApproved.tsx b/packages/round-manager/src/features/round/ApplicationsApproved.tsx
@@ -41,7 +41,7 @@ export default function ApplicationsApproved() {
     throw new Error("id is undefined");
   }
 
-  const { data: applications, isLoading } = useApplicationsByRoundId(id);
+const { data: applications, isLoading } = useApplicationsByRoundId(id);
 
   const approvedApplications =
     applications?.filter(
diff --git a/packages/round-manager/src/features/round/ViewApplicationPage.tsx b/packages/round-manager/src/features/round/ViewApplicationPage.tsx
@@ -69,6 +69,8 @@ import ApplicationDirectPayout from "./ApplicationDirectPayout";
 import { useApplicationsByRoundId } from "../common/useApplicationsByRoundId";
 import { useAccount } from "wagmi";
 import { ViewGrantsExplorerButton } from "../common/ViewGrantsExplorerButton";
+import { useDataLayer } from "data-layer";
+import { convertApplications } from "../api/utils";
 
 type Status = "done" | "current" | "rejected" | "approved" | undefined;
 
@@ -95,6 +97,7 @@ export default function ViewApplicationPage() {
   const [reviewDecision, setReviewDecision] = useState<
     ApplicationStatus | undefined
   >(undefined);
+  const dataLayer = useDataLayer();
 
   const [openModal, setOpenModal] = useState(false);
   const [openProgressModal, setOpenProgressModal] = useState(false);
@@ -115,9 +118,9 @@ export default function ViewApplicationPage() {
   const { chain, address } = useAccount();
   const roundChainId = chainId ? Number(chainId) : chain?.id;
 
-  const { data: applications, isLoading } = useApplicationsByRoundId(roundId!);
-  const filteredApplication = applications?.filter((a) => a.id == id) || [];
-  const application = filteredApplication[0];
+  const [applications, setApplications] = useState<GrantApplication[]>();
+  const [isLoading, setIsLoading] = useState(true);
+  const [application, setApplication] = useState<GrantApplication>();
 
   const {
     bulkUpdateGrantApplications,
@@ -150,6 +153,25 @@ export default function ViewApplicationPage() {
     },
   ];
 
+  useEffect(() => {
+    const fetchApplications = async () => {
+      const dataLayerApplications = await dataLayer.getApplicationsForManager({
+        roundId,
+        chainId: Number(roundChainId!),
+      });
+
+      const applications: GrantApplication[] = convertApplications(
+        dataLayerApplications
+      );
+      const filteredApplication = applications.filter((a) => a.id == id);
+      setApplications(applications);
+      setApplication(filteredApplication[0]);
+      setIsLoading(false);
+    };
+
+    if (roundChainId) fetchApplications();
+  }, [roundChainId, roundId]);
+
   useEffect(() => {
     if (contractUpdatingStatus === ProgressStatus.IS_ERROR) {
       setTimeout(() => {
@@ -490,9 +512,9 @@ export default function ViewApplicationPage() {
     <Spinner text="We're fetching the round application." />
   ) : (
     <>
-      {!applicationExists && <NotFoundPage />}
-      {applicationExists && !hasAccess && <AccessDenied />}
-      {applicationExists && hasAccess && (
+      {(!application || !applicationExists) && <NotFoundPage />}
+      {application && applicationExists && !hasAccess && <AccessDenied />}
+      {application && applicationExists && hasAccess && (
         <>
           <Navbar />
           <header className="border-b bg-grey-150 px-3 md:px-20 py-6">

Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ export default function ApplicationsApproved() {`
`41`	`41`	`throw new Error("id is undefined");`
`42`	`42`	`}`
`43`	`43`
`44`		`- const { data: applications, isLoading } = useApplicationsByRoundId(id);`
	`44`	`+const { data: applications, isLoading } = useApplicationsByRoundId(id);`
`45`	`45`
`46`	`46`	`const approvedApplications =`
`47`	`47`	`applications?.filter(`