cleanup

lib/features/project/components/ProjectCard.stories.tsx

@@ -21,9 +21,7 @@ const meta = {
           }
         }
       `;
-
         const project = await GitcoinGraphqlService.getProject(query);
-
         return { project };
       } catch (error) {
         console.error(error);

lib/features/project/components/ProjectCard.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-// import { Button } from "@/primitives/shadcn/ui/button";
+
 import { Card, CardContent } from "@/primitives/shadcn/ui/card";
 import { Project } from "@/types/types";
 import BannerImage from "@/primitives/BannerImage";
 import ProfileImage from "@/primitives/ProfileImage";
 import { Skeleton } from "@/primitives/shadcn/ui/skeleton";
-// import Image from "next/image";
 
 type ProjectCardProps = {
   project?: Project | undefined;
@@ -17,11 +16,9 @@ export default function ProjectCard({ project }: ProjectCardProps) {
 
 function LoadingCard() {
   return (
-    <Card className="h-96 w-[350px] overflow-hidden">
+    <Card className="block max-w-sm overflow-hidden">
       <div className="relative">
-        {/* <Skeleton className="h-[150px] w-full rounded-md" /> */}
         <Skeleton className="h-[150px] w-full rounded-md" />
-
         <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2">
           <Skeleton className="size-[60px] rounded-full" />
         </div>
@@ -36,7 +33,7 @@ function LoadingCard() {
 
 export function DataCard({ project }: ProjectCardProps) {
   return (
-    <Card className="h-96 w-[350px] overflow-hidden">
+    <Card className="block max-w-sm overflow-hidden">
       <div className="relative">
         <BannerImage ipfsCID={project?.metadata?.bannerImg} />
         <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2">
@@ -50,3 +47,11 @@ export function DataCard({ project }: ProjectCardProps) {
     </Card>
   );
 }
+
+{
+  /* <a href="#" class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+
+<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+<p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+</a> */
+}

lib/features/project/components/ProjectDisplayGrid.stories.tsx

@@ -3,6 +3,7 @@ import ProjectDisplayGrid from "./ProjectDisplayGrid";
 import { activeProjects } from "@/types/QueryFilters/rounds/QueryFilters";
 import { QueryClient } from "@tanstack/react-query";
 import { QueryClientProvider } from "@tanstack/react-query";
+import { undefinedArrayHandler, undefinedHandler } from "@/mocks/handlers";
 
 const meta = {
   title: "Components/ProjectDisplayGrid",
@@ -34,3 +35,11 @@ export default meta;
 type Story = StoryObj<typeof ProjectDisplayGrid>;
 
 export const Default: Story = {};
+
+// export const Loading: Story = {
+//   parameters: {
+//     msw: {
+//       handlers: [undefinedArrayHandler],
+//     },
+//   },
+// };

lib/features/project/components/ProjectDisplayGrid.tsx

@@ -13,12 +13,19 @@ type Props = {
 
 export default function ProjectDisplayGrid(props: Props) {
   // const rounds = useRounds(props.query);
-  const projects = useProjects(props.query);
+  const { data: projects, isPending, isError, isSuccess } = useProjects(props.query);
+
+  function getProjects() {
+    if (isSuccess) {
+      return projects;
+    }
+
+    return new Array(6).fill(undefined);
+  }
 
   return (
     <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-      {/* <div>{JSON.stringify(projects)}</div> */}
-      {projects?.data?.map((object: Project, i: number) => {
+      {getProjects().map((object: Project | undefined, i: number) => {
         return (
           // <Link key={i} href={`/project/${object.chainId}/${object.id}`}>
           <ProjectCard project={object} key={i} />

lib/features/project/hooks/useProjects.tsx

@@ -24,7 +24,7 @@ export const useProjects = (query: string = defaultQuery) => {
     staleTime: minutesToMilliseconds(120),
   });
 
-  console.log(JSON.stringify(result));
+  // console.log(JSON.stringify(result));
   return result;
 };
 
@@ -43,6 +43,6 @@ export const useProject = (projectId: string, chainId: number) => {
     staleTime: minutesToMilliseconds(120),
   });
 
-  console.log("useprojects", JSON.stringify(result));
+  // console.log("useprojects", JSON.stringify(result));
   return result;
 };

lib/services/GitcoinGraphql.tsx

@@ -17,7 +17,7 @@ export class GitcoinGraphqlService {
 
   static async getRound(query: string): Promise<Round> {
     const response = await client.request<{ round: Round }>(query);
-    console.log("gitcoinGraphql", JSON.stringify(response));
+    // console.log("gitcoinGraphql", JSON.stringify(response));
     return response.round;
   }
 
@@ -29,7 +29,7 @@ export class GitcoinGraphqlService {
 
   static async getProject(query: string): Promise<Project> {
     const response = await client.request<{ project: Project }>(query);
-    console.log("gitcoingraphql", response);
+    // console.log("gitcoingraphql", response);
     return response.project;
   }
 }