refactor(page): standardize formatting and improve error handling in ProjectDetails component
This commit is contained in:
@@ -1,167 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import {
|
|
||||||
useRouter,
|
|
||||||
useSearchParams,
|
|
||||||
useParams,
|
|
||||||
usePathname,
|
|
||||||
} from "next/navigation";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
|
|
||||||
import Link from "next/link";
|
|
||||||
|
|
||||||
import Footer_Back from "@/app/components/Footer_Back";
|
|
||||||
import Header from "@/app/components/Header";
|
|
||||||
import Image from "next/image";
|
|
||||||
import "@/app/styles/ghostContent.css"; // Import the global styles
|
|
||||||
|
|
||||||
interface Project {
|
|
||||||
slug: string;
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
feature_image: string;
|
|
||||||
visibility: string;
|
|
||||||
published_at: string;
|
|
||||||
updated_at: string;
|
|
||||||
html: string;
|
|
||||||
reading_time: number;
|
|
||||||
meta_description: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ProjectDetails = () => {
|
|
||||||
const router = useRouter();
|
|
||||||
const searchParams = useSearchParams();
|
|
||||||
const params = useParams();
|
|
||||||
const pathname = usePathname();
|
|
||||||
const [project, setProject] = useState<Project | null>(null);
|
|
||||||
const [isVisible, setIsVisible] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
setIsVisible(true);
|
|
||||||
}, 150); // Delay to start the animation
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const projectData = searchParams.get("project");
|
|
||||||
if (projectData) {
|
|
||||||
setProject(JSON.parse(projectData as string));
|
|
||||||
// Remove the project data from the URL without reloading the page
|
|
||||||
if (typeof window !== "undefined") {
|
|
||||||
const url = new URL(window.location.href);
|
|
||||||
url.searchParams.delete("project");
|
|
||||||
window.history.replaceState({}, "", url.toString());
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Fetch project data based on slug from URL
|
|
||||||
const slug = params.slug as string;
|
|
||||||
try {
|
|
||||||
fetchProjectData(slug);
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
setError("Failed to fetch project data");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [searchParams, router, params, pathname]);
|
|
||||||
|
|
||||||
const fetchProjectData = async (slug: string) => {
|
|
||||||
try {
|
|
||||||
const response = await fetch(`/api/fetchProject?slug=${slug}`);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error("Failed to fetch project data");
|
|
||||||
}
|
|
||||||
const projectData = (await response.json()) as { posts: Project[] };
|
|
||||||
if (projectData.posts.length === 0) {
|
|
||||||
throw new Error("Project not found");
|
|
||||||
}
|
|
||||||
setProject(projectData.posts[0]);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Failed to fetch project data:", error);
|
|
||||||
setError("Project not found");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex flex-col bg-radiant">
|
|
||||||
<Header />
|
|
||||||
<div className="flex-grow flex items-center justify-center">
|
|
||||||
<div className="text-center p-10 bg-white dark:bg-gray-700 rounded shadow-md">
|
|
||||||
<h1 className="text-6xl font-bold text-gray-800 dark:text-white">
|
|
||||||
404
|
|
||||||
</h1>
|
|
||||||
<p className="mt-4 text-xl text-gray-600 dark:text-gray-300">
|
|
||||||
{error}
|
|
||||||
</p>
|
|
||||||
<Link
|
|
||||||
href="/"
|
|
||||||
className="mt-6 inline-block text-blue-500 hover:underline"
|
|
||||||
>
|
|
||||||
Go Back Home
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Footer_Back />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!project) {
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex flex-col bg-radiant">
|
|
||||||
<Header />
|
|
||||||
<div className="flex-grow flex items-center justify-center">
|
|
||||||
<div className="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-32 w-32"></div>
|
|
||||||
</div>
|
|
||||||
<Footer_Back />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const featureImageUrl = project.feature_image
|
|
||||||
? `/api/fetchImage?url=${encodeURIComponent(project.feature_image)}`
|
|
||||||
: "";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`min-h-screen flex flex-col bg-radiant ${isVisible ? "animate-fly-in" : "opacity-0"}`}
|
|
||||||
>
|
|
||||||
<Header />
|
|
||||||
<div className="flex-grow">
|
|
||||||
<div className="flex justify-center mt-14 md:mt-28 px-4 md:px-0">
|
|
||||||
{featureImageUrl && (
|
|
||||||
<div className="relative w-full max-w-4xl h-0 pb-[56.25%] rounded-2xl overflow-hidden">
|
|
||||||
<Image
|
|
||||||
src={featureImageUrl}
|
|
||||||
alt={project.title}
|
|
||||||
fill
|
|
||||||
style={{ objectFit: "cover" }}
|
|
||||||
className="rounded-2xl"
|
|
||||||
priority={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-center mt-4">
|
|
||||||
<h1 className="text-4xl md:text-6xl font-bold text-gray-600">
|
|
||||||
{project.title}
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Project Content */}
|
|
||||||
<div className="p-10 pt-12">
|
|
||||||
<div className="flex flex-col p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl">
|
|
||||||
<div
|
|
||||||
className="content mt-4 text-gray-600 text-lg leading-relaxed"
|
|
||||||
dangerouslySetInnerHTML={{ __html: project.html }}
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Footer_Back />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProjectDetails;
|
|
||||||
169
app/projects/[slug]/page.tsx
Normal file
169
app/projects/[slug]/page.tsx
Normal file
@@ -0,0 +1,169 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
useRouter,
|
||||||
|
useSearchParams,
|
||||||
|
useParams,
|
||||||
|
usePathname,
|
||||||
|
} from "next/navigation";
|
||||||
|
import {useEffect, useState} from "react";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
import Footer_Back from "@/app/components/Footer_Back";
|
||||||
|
import Header from "@/app/components/Header";
|
||||||
|
import Image from "next/image";
|
||||||
|
import "@/app/styles/ghostContent.css"; // Import the global styles
|
||||||
|
|
||||||
|
interface Project {
|
||||||
|
slug: string;
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
feature_image: string;
|
||||||
|
visibility: string;
|
||||||
|
published_at: string;
|
||||||
|
updated_at: string;
|
||||||
|
html: string;
|
||||||
|
reading_time: number;
|
||||||
|
meta_description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ProjectDetails = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const params = useParams();
|
||||||
|
const pathname = usePathname();
|
||||||
|
const [project, setProject] = useState<Project | null>(null);
|
||||||
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
setIsVisible(true);
|
||||||
|
}, 150); // Delay to start the animation
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const projectData = searchParams.get("project");
|
||||||
|
if (projectData) {
|
||||||
|
setProject(JSON.parse(projectData as string));
|
||||||
|
// Remove the project data from the URL without reloading the page
|
||||||
|
if (typeof window !== "undefined") {
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
url.searchParams.delete("project");
|
||||||
|
window.history.replaceState({}, "", url.toString());
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Fetch project data based on slug from URL
|
||||||
|
const slug = params.slug as string;
|
||||||
|
try {
|
||||||
|
fetchProjectData(slug);
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
setError("Failed to fetch project data");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [searchParams, router, params, pathname]);
|
||||||
|
|
||||||
|
const fetchProjectData = async (slug: string) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/api/fetchProject?slug=${slug}`);
|
||||||
|
if (!response.ok) {
|
||||||
|
setError("Failed to fetch project Data");
|
||||||
|
}
|
||||||
|
const projectData = (await response.json()) as { posts: Project[] };
|
||||||
|
if (projectData.posts.length === 0) {
|
||||||
|
setError("Project not found");
|
||||||
|
}
|
||||||
|
setProject(projectData.posts[0]);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to fetch project data:", error);
|
||||||
|
setError("Project not found");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex flex-col bg-radiant">
|
||||||
|
<Header/>
|
||||||
|
<div className="flex-grow flex items-center justify-center">
|
||||||
|
<div className="text-center p-10 bg-white dark:bg-gray-700 rounded shadow-md">
|
||||||
|
<h1 className="text-6xl font-bold text-gray-800 dark:text-white">
|
||||||
|
404
|
||||||
|
</h1>
|
||||||
|
<p className="mt-4 text-xl text-gray-600 dark:text-gray-300">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="mt-6 inline-block text-blue-500 hover:underline"
|
||||||
|
>
|
||||||
|
Go Back Home
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Footer_Back/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!project) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex flex-col bg-radiant">
|
||||||
|
<Header/>
|
||||||
|
<div className="flex-grow flex items-center justify-center">
|
||||||
|
<div
|
||||||
|
className="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-32 w-32"></div>
|
||||||
|
</div>
|
||||||
|
<Footer_Back/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const featureImageUrl = project.feature_image
|
||||||
|
? `/api/fetchImage?url=${encodeURIComponent(project.feature_image)}`
|
||||||
|
: "";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`min-h-screen flex flex-col bg-radiant ${isVisible ? "animate-fly-in" : "opacity-0"}`}
|
||||||
|
>
|
||||||
|
<Header/>
|
||||||
|
<div className="flex-grow">
|
||||||
|
<div className="flex justify-center mt-14 md:mt-28 px-4 md:px-0">
|
||||||
|
{featureImageUrl && (
|
||||||
|
<div className="relative w-full max-w-4xl h-0 pb-[56.25%] rounded-2xl overflow-hidden">
|
||||||
|
<Image
|
||||||
|
src={featureImageUrl}
|
||||||
|
alt={project.title}
|
||||||
|
fill
|
||||||
|
style={{objectFit: "cover"}}
|
||||||
|
className="rounded-2xl"
|
||||||
|
priority={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-center mt-4">
|
||||||
|
<h1 className="text-4xl md:text-6xl font-bold text-gray-600">
|
||||||
|
{project.title}
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Project Content */}
|
||||||
|
<div className="p-10 pt-12">
|
||||||
|
<div
|
||||||
|
className="flex flex-col p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl">
|
||||||
|
<div
|
||||||
|
className="content mt-4 text-gray-600 text-lg leading-relaxed"
|
||||||
|
dangerouslySetInnerHTML={{__html: project.html}}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Footer_Back/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProjectDetails;
|
||||||
Reference in New Issue
Block a user