Fix community page error

client/app/community/community.tsx

@@ -1,9 +1,11 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import Link from "next/link";
 import { ApiError, CommunityIdeaData } from "@/interfaces";
 
 import { getCommunityGeneratedIdea } from "@/lib/index";
+import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useToast } from "@/components/ui/use-toast";
@@ -18,7 +20,7 @@ export default function CommunityGeneratedIdeaList() {
     const fetchCommunityGeneratedIdeas = async () => {
       try {
         const fetchedCommunityGeneratedIdea = await getCommunityGeneratedIdea();
-        setCommunityData(fetchedCommunityGeneratedIdea.data);
+        setCommunityData(fetchedCommunityGeneratedIdea.data ?? []);
       } catch (error) {
         const apiError = error as ApiError;
 
@@ -41,6 +43,42 @@ export default function CommunityGeneratedIdeaList() {
     fetchCommunityGeneratedIdeas();
   }, [toast]);
 
+  const renderLoadingSkeleton = () => {
+    return (
+      <div className="grid grid-cols-1 gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+        <div>
+          <Skeleton className="mb-5 h-10 w-full" />
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-full" />
+          </div>
+          <Skeleton className="mt-5 h-4 w-3/5" />
+        </div>
+      </div>
+    );
+  };
+
+  const renderNoDataDisplay = () => (
+    <div className="flex h-full flex-col items-center justify-center">
+      <Label className=" text-md mt-2 inline-block">No community ideas found.</Label>
+      <Link href="/">
+        <Button className="mt-2" aria-label="Generate one">
+          Generate one
+        </Button>
+      </Link>
+    </div>
+  );
+
+  const renderProjectCards = () => {
+    return (
+      <div className="grid grid-cols-1 gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+        {communityData.map(({ id, title, description, tags, projectImage, createdAt }) => (
+          <ProjectCard key={id} id={id} title={title} description={description} badges={tags} imgUrl={projectImage.urls.small} createdAt={createdAt} />
+        ))}
+      </div>
+    );
+  };
+
   return (
     <div className="container mx-auto px-5 py-12 sm:px-10">
       <div className="mb-12 text-center">
@@ -49,23 +87,9 @@ export default function CommunityGeneratedIdeaList() {
           Explore a myriad of innovative DIY ideas generated by our creative community members. Dive into the inspiration behind each project and kickstart your next DIY journey.
         </Label>
       </div>
-
-      <div className="grid grid-cols-1 gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-        {loading
-          ? [...Array(3)].map((_, i) => (
-              <div key={i}>
-                <Skeleton className="mb-5 h-10 w-full" />
-                <div className="space-y-2">
-                  <Skeleton className="h-4 w-full" />
-                  <Skeleton className="h-4 w-full" />
-                </div>
-                <Skeleton className="mt-5 h-4 w-3/5" />
-              </div>
-            ))
-          : communityData.map(({ id, title, description, tags, projectImage, createdAt }) => (
-              <ProjectCard key={id} id={id} title={title} description={description} badges={tags} imgUrl={projectImage.urls.small} createdAt={createdAt} />
-            ))}
-      </div>
+      {loading && renderLoadingSkeleton()}
+      {!loading && communityData.length === 0 && renderNoDataDisplay()}
+      {!loading && communityData.length > 0 && renderProjectCards()}
     </div>
   );
 }

server/src/controllers/community.controller.ts

@@ -1,7 +1,7 @@
 import { Response, NextFunction } from "express";
 import { sendSuccess } from "../utils/response-template";
 import { PrismaClient } from "@prisma/client";
-import { parsePrisma, removeDuplicates, validateQueryFilter } from "../utils";
+import { validateQueryFilter } from "../utils";
 import { QueryRequest } from "../middleware/schema-validate";
 import { CommunityGeneratedIdeaRequest } from "../schema/community.schema";
 
@@ -17,7 +17,12 @@ export const getCommunityGeneratedIdea = async (req: QueryRequest<CommunityGener
       select: {
         id: true,
         projectDetails: true,
-        projectImage: true,
+        projectImage: {
+          select: {
+            alt_description: true,
+            urls: true,
+          },
+        },
         createdAt: true,
       },
       orderBy: {
@@ -31,38 +36,19 @@ export const getCommunityGeneratedIdea = async (req: QueryRequest<CommunityGener
       return;
     }
 
-    const formattedProject = projects.map(({ id, projectDetails, projectImage, createdAt }) => {
-      const { urls, alt_description } = parsePrisma<{
-        urls: {
-          raw: string;
-          full: string;
-          small: string;
-          thumb: string;
-          regular: string;
-          small_s3: string;
-        };
-        alt_description: string;
-      }>(projectImage);
-      const { title, description, tags } = parsePrisma<{
-        title: string;
-        description: string;
-        tags: string[];
-      }>(projectDetails);
-
-      return {
-        id,
-        title,
-        description,
-        tags,
-        projectImage: {
-          urls,
-          alt_description,
-        },
-        createdAt,
-      };
-    });
+    const transformedProjects = projects.map((project) => ({
+      id: project.id,
+      title: project.projectDetails.title,
+      description: project.projectDetails.description,
+      tags: project.projectDetails.tags,
+      projectImage: {
+        alt_description: project.projectImage.alt_description,
+        urls: project.projectImage.urls,
+      },
+      createdAt: project.createdAt,
+    }));
 
-    return sendSuccess(res, removeDuplicates(formattedProject, ["title"]));
+    return sendSuccess(res, transformedProjects);
   } catch (error) {
     next(error);
   }