No projects available.
;
+ }
+
return (
<>
@@ -52,40 +60,46 @@ export default function Pagination({
{/* Pagination Controls */}
-
+ {totalPages > 1 && (
+ <>
+
- {/* Page Numbers */}
- {[...Array(totalPages)].map((_, index) => (
-
- ))}
+ {/* Page Numbers */}
+ {Array.from({ length: totalPages }, (_, index) => (
+
+ ))}
-
+
+
+ )}
);
diff --git a/src/app/Component/SimilarProjects.tsx b/src/app/Component/SimilarProjects.tsx
index f644a8b..70e4744 100644
--- a/src/app/Component/SimilarProjects.tsx
+++ b/src/app/Component/SimilarProjects.tsx
@@ -1,13 +1,51 @@
import Image from "next/image";
-import data from "../../data.json";
import Link from "next/link";
interface SimilarProjectsProps {
currentProjectId: string; // or number, depending on the type of `id`
}
-export default function SimilarProjects({
+
+interface Project {
+ id: string;
+ projectname: string;
+ projecturl: string;
+ imageurl: string;
+ subimageurl: string;
+ description: string;
+ about: string;
+ createdAt: string;
+ published: boolean;
+ updatedAt: string;
+}
+
+interface ApiResponse {
+ projects: Project[];
+ result: number;
+ status: string;
+}
+
+async function getProject(): Promise
{
+ try {
+ const response = await fetch(`${process.env.API_URL}/api/projects`, {
+ cache: "no-cache",
+ });
+
+ if (!response.ok) {
+ throw Error("Failed to fetch projects!!");
+ }
+ const data: ApiResponse = await response.json();
+ return data.projects || [];
+ } catch (error) {
+ console.error("Error fetching projects: ", error);
+ return [];
+ }
+}
+
+export default async function SimilarProjects({
currentProjectId,
}: SimilarProjectsProps) {
+ const data = await getProject();
+ console.log(data, "data form pagination");
return (
<>
{
@@ -20,18 +58,19 @@ export default function SimilarProjects({
href={`/projects/${project.id}`}
key={project.id}
className="flex py-3 w-60 items-center gap-2 h-24 hover:text-[#1A80E5] group"
+ data-testid="similar-projects"
>
-
{project.projectName}
+
{project.projectname}
Vice Studio
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4b3db62..33e597b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,5 @@
import { Metadata } from "next";
-import data from "../data.json";
-import Pagination from "./Component/Pagination"; // New client component
+import Pagination from "./Component/Pagination";
export const metadata: Metadata = {
title: "Cardano API",
@@ -21,14 +20,62 @@ export const metadata: Metadata = {
},
};
-export default function Home() {
+interface Project {
+ id: string;
+ projectname: string;
+ projecturl: string;
+ imageurl: string;
+ subimageurl: string;
+ description: string;
+ about: string;
+ createdAt: string;
+ published: boolean | null;
+ updatedAt: string;
+}
+
+interface ApiResponse {
+ projects: Project[];
+ results: number;
+ status: string;
+}
+
+async function getProjects(): Promise
{
+ try {
+ const response = await fetch(`${process.env.API_URL}/api/projects`, {
+ cache: "no-store",
+ });
+
+ if (!response.ok) {
+ throw new Error("Failed to fetch projects!");
+ }
+
+ const data: ApiResponse = await response.json();
+ return data.projects || [];
+ } catch (error) {
+ console.error("Error fetching projects: ", error, process.env.API_URL);
+ return [];
+ }
+}
+
+export default async function Home() {
+ const projects = await getProjects();
const cardsPerPage = 8;
- const totalPages = Math.ceil(data.length / cardsPerPage);
+ const totalPages = Math.max(1, Math.ceil(projects.length / cardsPerPage));
+
+ // Map the API data structure to match what the Pagination component expects
+ const mappedProjects = projects.map((project) => ({
+ id: project.id,
+ projectName: project.projectname,
+ url: project.projecturl,
+ imageUrl: project.imageurl,
+ subImageUrl: project.subimageurl,
+ description: project.description,
+ }));
return (
diff --git a/src/app/projects/[id]/page.tsx b/src/app/projects/[id]/page.tsx
index 7cb7dff..437f59c 100644
--- a/src/app/projects/[id]/page.tsx
+++ b/src/app/projects/[id]/page.tsx
@@ -1,33 +1,69 @@
import Image from "next/image";
-import data from "../../../data.json";
import SimilarProjects from "@/app/Component/SimilarProjects";
import Link from "next/link";
import { notFound } from "next/navigation";
+interface Project {
+ id: string;
+ projectname: string;
+ projecturl: string;
+ imageurl: string;
+ subimageurl: string;
+ description: string;
+ about: string;
+ createdAt: string;
+ published: boolean | null;
+ updatedAt: string;
+}
+
+interface ApiResponse {
+ projects: Project[];
+ results: number;
+ status: string;
+}
+
type Props = {
params: Promise<{ id: string }>;
};
+async function getProject(id: string): Promise
{
+ try {
+ const response = await fetch(`${process.env.API_URL}/api/projects`, {
+ cache: "no-store",
+ });
+
+ if (!response.ok) {
+ throw new Error("Failed to fetch projects!");
+ }
+
+ const data: ApiResponse = await response.json();
+ return data.projects.find((project) => project.id === id) || null;
+ } catch (error) {
+ console.error("Error fetching project:", error);
+ return null;
+ }
+}
+
export async function generateMetadata({ params }: Props) {
const { id } = await params;
if (!id) {
return {};
}
- const project = data.find((project) => project.id === id);
+ const project = await getProject(id);
if (!project) {
return {};
}
- const projectName = project.projectName || "Cardano API";
+ const projectName = project.projectname || "Cardano API";
const projectDescription =
project.description || "A List of Cardano API Projects";
return {
title: projectName,
description: projectDescription,
- metadataBase: new URL('https://cardanoapi.io'),
+ metadataBase: new URL("https://cardanoapi.io"),
openGraph: {
title: projectName,
description: projectDescription,
@@ -45,18 +81,13 @@ export async function generateMetadata({ params }: Props) {
}
const ProjectPage = async ({ params }: Props) => {
- // Ensure `params` has an id
-
const { id } = await params;
- console.log(id);
if (!id) {
return Project not found!
;
}
- // Fetch the project data based on the `id` parameter
- const project = data.find((project) => project.id === id);
+ const project = await getProject(id);
- // If project is not found, trigger a 404 page
if (!project) {
notFound();
}
@@ -67,32 +98,32 @@ const ProjectPage = async ({ params }: Props) => {
Projects
{" "}
- / {project?.projectName}
+ / {project.projectname}
- {project?.projectName}
+ {project.projectname}
- {project?.description}
+ {project.description}
-
+
-
+
@@ -134,10 +165,7 @@ const ProjectPage = async ({ params }: Props) => {
About this app →
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat
- nobis cumque expedita necessitatibus consectetur accusantium ullam
- explicabo non dolore voluptatem fasdlkfjsdaf dsfdsafaljfdas;df
- fasdfsadf.
+ {project.about}