feat: move CardSkeleton

gitcoinco · Jun 18, 2024 · a35300c · a35300c
1 parent eb94419
commit a35300c
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 44 deletions.
diff --git a/packages/grant-explorer/src/features/common/ApplicationCard.test.tsx b/packages/grant-explorer/src/features/common/ApplicationCard.test.tsx
@@ -1,9 +1,10 @@
 import { vi } from "vitest";
 import { render, fireEvent, screen } from "@testing-library/react";
-import { ApplicationCard, CardSkeleton } from "./ApplicationCard";
+import { ApplicationCard } from "./ApplicationCard";
 import { ApplicationSummary } from "data-layer";
 import { zeroAddress } from "viem";
 import { ChakraProvider } from "@chakra-ui/react";
+import { CardSkeleton } from "./ProjectBanner";
 
 vi.mock("common/src/config", async () => {
   return {

diff --git a/packages/grant-explorer/src/features/common/ApplicationCard.tsx b/packages/grant-explorer/src/features/common/ApplicationCard.tsx
@@ -1,4 +1,3 @@
-import { Skeleton, SkeletonCircle, SkeletonText } from "@chakra-ui/react";
 import { ReactComponent as CartCircleIcon } from "../../assets/icons/cart-circle.svg";
 import { ReactComponent as CheckedCircleIcon } from "../../assets/icons/checked-circle.svg";
 import { ApplicationSummary } from "data-layer";
@@ -10,47 +9,9 @@ import {
   CardHeader,
 } from "./styles";
 import { applicationPath } from "common/src/routes/explorer";
-import { ProjectBanner } from "./ProjectBanner";
-import { createIpfsImageUrl } from "common/src/ipfs";
-import { getConfig } from "common/src/config";
+import { ProjectBanner, ProjectLogo } from "./ProjectBanner";
 import { usePostHog } from "posthog-js/react";
 
-export function ProjectLogo(props: {
-  className?: string;
-  imageCid: string;
-  size: number;
-}): JSX.Element {
-  const {
-    ipfs: { baseUrl: ipfsBaseUrl },
-  } = getConfig();
-
-  const projectLogoImageUrl = createIpfsImageUrl({
-    baseUrl: ipfsBaseUrl,
-    cid: props.imageCid,
-    height: props.size * 2,
-  });
-
-  return (
-    <img
-      className={`object-cover rounded-full ${props.className ?? ""}`}
-      style={{ height: props.size, width: props.size }}
-      src={projectLogoImageUrl}
-      alt="Project Banner"
-    />
-  );
-}
-
-export function CardSkeleton(): JSX.Element {
-  return (
-    <div className="bg-white rounded-3xl overflow-hidden p-4 pb-10">
-      <Skeleton height="110px" />
-      <SkeletonCircle size="48px" mt="-24px" ml="10px" />
-      <SkeletonText mt="3" noOfLines={1} spacing="4" skeletonHeight="7" />
-      <SkeletonText mt="10" noOfLines={4} spacing="4" skeletonHeight="2" />
-    </div>
-  );
-}
-
 export function ApplicationCard(props: {
   application: ApplicationSummary;
   inCart: boolean;

diff --git a/packages/grant-explorer/src/features/common/ProjectBanner.tsx b/packages/grant-explorer/src/features/common/ProjectBanner.tsx
@@ -1,3 +1,4 @@
+import { Skeleton, SkeletonCircle, SkeletonText } from "@chakra-ui/react";
 import DefaultBannerImage from "../../assets/default_banner.jpg";
 import { createIpfsImageUrl } from "common/src/ipfs";
 import { getConfig } from "common/src/config";
@@ -31,3 +32,39 @@ export function ProjectBanner(props: {
     </div>
   );
 }
+
+export function ProjectLogo(props: {
+  className?: string;
+  imageCid: string;
+  size: number;
+}): JSX.Element {
+  const {
+    ipfs: { baseUrl: ipfsBaseUrl },
+  } = getConfig();
+
+  const projectLogoImageUrl = createIpfsImageUrl({
+    baseUrl: ipfsBaseUrl,
+    cid: props.imageCid,
+    height: props.size * 2,
+  });
+
+  return (
+    <img
+      className={`object-cover rounded-full ${props.className ?? ""}`}
+      style={{ height: props.size, width: props.size }}
+      src={projectLogoImageUrl}
+      alt="Project Banner"
+    />
+  );
+}
+
+export function CardSkeleton(): JSX.Element {
+  return (
+    <div className="bg-white rounded-3xl overflow-hidden p-4 pb-10">
+      <Skeleton height="110px" />
+      <SkeletonCircle size="48px" mt="-24px" ml="10px" />
+      <SkeletonText mt="3" noOfLines={1} spacing="4" skeletonHeight="7" />
+      <SkeletonText mt="10" noOfLines={4} spacing="4" skeletonHeight="2" />
+    </div>
+  );
+}
diff --git a/packages/grant-explorer/src/features/discovery/PaginatedApplicationsList.tsx b/packages/grant-explorer/src/features/discovery/PaginatedApplicationsList.tsx
@@ -1,8 +1,9 @@
 import PlusIcon from "@heroicons/react/20/solid/PlusIcon";
 import { LoadingRing } from "../common/Spinner";
-import { ApplicationCard, CardSkeleton } from "../common/ApplicationCard";
+import { ApplicationCard } from "../common/ApplicationCard";
 import { ApplicationSummary } from "data-layer";
 import { usePostHog } from "posthog-js/react";
+import { CardSkeleton } from "../common/ProjectBanner";
 
 interface PaginatedApplicationsListProps {
   applications: ApplicationSummary[];

diff --git a/packages/grant-explorer/src/features/round/ViewRoundPage.tsx b/packages/grant-explorer/src/features/round/ViewRoundPage.tsx
@@ -36,7 +36,7 @@ import { getDaysLeft, isDirectRound, isInfiniteDate } from "../api/utils";
 import { PassportWidget } from "../common/PassportWidget";
 
 import NotFoundPage from "../common/NotFoundPage";
-import { ProjectBanner } from "../common/ProjectBanner";
+import { ProjectBanner, ProjectLogo } from "../common/ProjectBanner";
 import RoundEndedBanner from "../common/RoundEndedBanner";
 import { Spinner } from "../common/Spinner";
 import {
@@ -59,7 +59,6 @@ import { getAlloVersion } from "common/src/config";
 import { ExclamationCircleIcon } from "@heroicons/react/24/solid";
 import { DefaultLayout } from "../common/DefaultLayout";
 import { getUnixTime } from "date-fns";
-import { ProjectLogo } from "../common/ApplicationCard";
 import { Application, useDataLayer } from "data-layer";
 import { useRoundApprovedApplications } from "../projects/hooks/useRoundApplications";
 import {