From 0ca6b610a45a1dd9c785ac3b63a2016bf0a31f01 Mon Sep 17 00:00:00 2001
From: Denshooter <44590296+Denshooter@users.noreply.github.com>
Date: Thu, 13 Feb 2025 14:23:40 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20update=20Docker=20setup=20a?=
 =?UTF-8?q?nd=20enhance=20error=20handling=20(#19)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/main.yml         |  7 ++++--
 app/Projects/[slug]/page.tsx       | 39 +++++++++++++++++++++++++++++-
 app/api/fetchAllProjects/route.tsx |  2 +-
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index e05ee13..6b1f237 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -38,6 +38,7 @@ jobs:
           CONTAINER_NAME="nextjs-$DEPLOY_ENV"
           IMAGE_NAME="my-nextjs-app:$DEPLOY_ENV"
           NEW_CONTAINER_NAME="$CONTAINER_NAME-new"
+          NETWORK_NAME="big-bear-ghost_ghost-network"
 
           # Remove existing temporary container, if any
           if [ "$(docker ps -aq -f name=$NEW_CONTAINER_NAME)" ]; then
@@ -46,8 +47,9 @@ jobs:
           fi
 
           # Start the new container on a temporary internal port
-          docker run -d --name "$NEW_CONTAINER_NAME" -p 40000:3000 \
+          docker run -d --name "$NEW_CONTAINER_NAME" --network $NETWORK_NAME -p 40000:3000 \
             -e GHOST_API_KEY="${{ secrets.GHOST_API_KEY }}" \
+            -e NEXT_PUBLIC_BASE_URL="https://dki.one" \
             $IMAGE_NAME
 
           # Wait to ensure the new container is running
@@ -66,8 +68,9 @@ jobs:
             docker rm "$NEW_CONTAINER_NAME" || true
 
             # Start the container with the desired name and port
-            docker run -d --name "$CONTAINER_NAME" -p $PORT:3000 \
+            docker run -d --name "$CONTAINER_NAME" --network $NETWORK_NAME -p $PORT:3000 \
               -e GHOST_API_KEY="${{ secrets.GHOST_API_KEY }}" \
+              -e NEXT_PUBLIC_BASE_URL="https://dki.one" \
               $IMAGE_NAME
           else
             echo "New container failed to start."
diff --git a/app/Projects/[slug]/page.tsx b/app/Projects/[slug]/page.tsx
index ebab8db..7c10c0e 100644
--- a/app/Projects/[slug]/page.tsx
+++ b/app/Projects/[slug]/page.tsx
@@ -8,6 +8,8 @@ import {
 } 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";
@@ -33,6 +35,7 @@ const ProjectDetails = () => {
   const pathname = usePathname();
   const [project, setProject] = useState<Project | null>(null);
   const [isVisible, setIsVisible] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     setTimeout(() => {
@@ -53,7 +56,12 @@ const ProjectDetails = () => {
     } else {
       // Fetch project data based on slug from URL
       const slug = params.slug as string;
-      fetchProjectData(slug);
+      try {
+        fetchProjectData(slug);
+      } catch (error) {
+        console.log(error);
+        setError("Failed to fetch project data");
+      }
     }
   }, [searchParams, router, params, pathname]);
 
@@ -64,12 +72,41 @@ const ProjectDetails = () => {
         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">
diff --git a/app/api/fetchAllProjects/route.tsx b/app/api/fetchAllProjects/route.tsx
index 0d2f73c..9e8546f 100644
--- a/app/api/fetchAllProjects/route.tsx
+++ b/app/api/fetchAllProjects/route.tsx
@@ -2,7 +2,7 @@ import { NextResponse } from "next/server";
 
 export const runtime = "nodejs"; // Force Node runtime
 
-const GHOST_API_URL = "http://192.168.179.31:2368";
+const GHOST_API_URL = "http://big-bear-ghost:2368";
 const GHOST_API_KEY = process.env.GHOST_API_KEY;
 
 export async function GET() {