Merge pull request #37 from electrone901/main

Add SuggestedProjects API with several changes and new files

packages/nextjs/components/projects/Card.tsx

@@ -34,8 +34,8 @@ const Card = ({ project, display }: any) => {
 
           <div className="flex items-center">
             <div className="flex-1">
-              <Link href={`/projects/${project._id}`}>
-                <p className="text-[18px] font-bold leading-[28px] mb-0 mt-2">{name}</p>
+              <Link href={`/projects/${project._id}`} className="truncate">
+                <p className="truncate text-[18px] font-bold leading-[28px] mb-0 mt-2">{name}</p>
               </Link>
 
               <div className="flex items-center">

packages/nextjs/components/shared/SuggestProjects.tsx

@@ -1,36 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import Card from "../projects/Card";
 
-const data = [
-  {
-    id: 1,
-    banner: "/assets/projects/Img.png",
-    logo: "/assets/Logo.png",
-    name: "WalletConnect",
-    description:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in ...",
-    category: "Collective Governance",
-  },
-  {
-    id: 2,
-    banner: "/assets/projects/Img (1).png",
-    logo: "/assets/projects/Logo_2.png",
-    name: "DefiLlama",
-    description:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in ...",
-    category: "Developer Ecosystem",
-  },
-  {
-    id: 3,
-    banner: "/assets/projects/Img (2).png",
-    logo: "/assets/projects/Logo34.png",
-    name: "Cryptotesters",
-    description:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in ...",
-    category: "End User Experience and Adoption",
-  },
-];
-
 interface Project {
   id: number;
   banner: string;
@@ -40,30 +10,19 @@ interface Project {
   category: string;
 }
 
-function SuggestProjects() {
-  const [projects, setProjects] = useState<Project[]>([]);
-
-  useEffect(() => {
-    const getSuggestProjects = async () => {
-      try {
-        // Fetch SuggestProjects from data source
-        // const data: Project[] = await fetchProjectData();
-        setProjects(data);
-      } catch (error) {
-        console.error("Error fetching suggest projects:", error);
-      }
-    };
-    getSuggestProjects();
-  }, []);
-
+function SuggestProjects({ suggestedProjects }: any) {
   return (
     <div className="pt-16 pb-24">
       <h3 className="font-bold text-2xl leading-8 ">You may be also interested</h3>
       <p className="text-lightGray text-[17px] leading-5">Discover more popular projects</p>
       <div className="grid pt-4 gap-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1">
-        {projects.map(project => (
-          <Card key={project.id} project={project} display="grids" />
-        ))}
+        {suggestedProjects.length > 0 ? (
+          suggestedProjects.map((project: Project) => <Card key={project.id} project={project} display="grids" />)
+        ) : (
+          <div className="text-xl">
+            <h1>No suggested projects available...</h1>
+          </div>
+        )}
       </div>
     </div>
   );

packages/nextjs/hooks/scaffold-eth/useSuggestedProjects.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+
+export function useSuggestedProjects(category: any, currentProjectId: string) {
+  const [suggestedProjects, setSuggestedProjects] = useState([]);
+
+  useEffect(() => {
+    const getSuggestedProjectsByCategory = async () => {
+      try {
+        const response = await fetch(
+          `/api/suggestedProjects?category=${category}&currentProjectId=${currentProjectId}`,
+        );
+        const data = await response.json();
+        setSuggestedProjects(data);
+      } catch (error) {
+        console.error("Error fetching /api/suggested-projects/category", error);
+        throw error;
+      }
+    };
+    if (category && currentProjectId) {
+      getSuggestedProjectsByCategory();
+    }
+  }, [category, currentProjectId]);
+
+  return {
+    suggestedProjects,
+  };
+}

packages/nextjs/models/Project.ts

@@ -68,4 +68,4 @@ const projectSchema = new Schema<ProjectDocument>({
 
 const Project = mongoose.models.Projects || mongoose.model("Projects", projectSchema);
 
-export default Project;
+export default Project;

packages/nextjs/pages/api/suggestedProjects.ts

@@ -0,0 +1,16 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import dbConnect from "~~/lib/dbConnect";
+import Project, { ProjectDocument } from "~~/models/Project";
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== "GET") {
+    return res.status(405).json({ message: "Method not allowed." });
+  }
+  await dbConnect();
+  const { category, currentProjectId } = req.query;
+  const suggestedProjects: ProjectDocument[] = await Project.find({ category, _id: { $ne: currentProjectId } }).limit(
+    3,
+  );
+
+  return res.status(200).json(suggestedProjects);
+}

packages/nextjs/pages/lists/[listId].tsx

@@ -6,6 +6,7 @@ import SharedProjects from "~~/components/lists/SharedProjects";
 import YourBallot from "~~/components/op/projects/YourBallot";
 import { Address } from "~~/components/scaffold-eth";
 import SuggestProjects from "~~/components/shared/SuggestProjects";
+import { useSuggestedProjects } from "~~/hooks/scaffold-eth/useSuggestedProjects";
 import dbConnect from "~~/lib/dbConnect";
 import List from "~~/models/List";
 import { IList } from "~~/types/list";
@@ -18,6 +19,10 @@ interface Props {
 const ListDetail: NextPage<Props> = ({ list }) => {
   const [openLikedModal, setopenLikedModal] = React.useState(false);
   const [isLiked, setIsLiked] = React.useState(false);
+  const tempCategory = list.tags ? list?.tags[0] : undefined;
+  const category = tempCategory && tempCategory[0]?.toUpperCase() + tempCategory?.slice(1);
+  const currentProjectId = list._id;
+  const { suggestedProjects } = useSuggestedProjects(category, currentProjectId);
   return (
     <div className=" mx-auto px-12 mt-12 grid lg:grid-cols-[350px,1fr] gap-12">
       <YourBallot />
@@ -87,7 +92,7 @@ const ListDetail: NextPage<Props> = ({ list }) => {
 
         <div className="mt-16">
           <SharedProjects list={list} />
-          <SuggestProjects />
+          <SuggestProjects suggestedProjects={suggestedProjects} />
         </div>
       </div>
     </div>

packages/nextjs/pages/projects/[projectId].tsx

@@ -6,6 +6,7 @@ import { HeartIcon } from "@heroicons/react/24/outline";
 import { Address } from "~~/components/scaffold-eth";
 import SuggestProjects from "~~/components/shared/SuggestProjects";
 import { useBallot } from "~~/context/BallotContext";
+import { useSuggestedProjects } from "~~/hooks/scaffold-eth/useSuggestedProjects";
 import dbConnect from "~~/lib/dbConnect";
 import Project, { ProjectDocument } from "~~/models/Project";
 import { notification } from "~~/utils/scaffold-eth";
@@ -18,6 +19,9 @@ const ProjectDetail: NextPage<Props> = ({ projects }) => {
   const [isLiked, setIsLiked] = React.useState(false);
   const [isAdded, setIsAdded] = useState(false);
   const { state, dispatch } = useBallot();
+  const category = projects.length > 0 ? projects[0].category : undefined;
+  const currentProjectId = projects[0]._id;
+  const { suggestedProjects } = useSuggestedProjects(category, currentProjectId);
 
   useEffect(() => {
     if (!state) return;
@@ -81,7 +85,7 @@ const ProjectDetail: NextPage<Props> = ({ projects }) => {
           </button>
         </div>
         <div className="mt-16">
-          <SuggestProjects />
+          <SuggestProjects suggestedProjects={suggestedProjects} />
         </div>
       </div>
     </div>