Merge pull request 'Add footer API integration' (#18) from feat/huy-05022026-add-ui-footer into main

Reviewed-on: UKSOURCE/hailearning.edu.vn#18

api/footerApi.ts

@@ -0,0 +1,62 @@
+/**
+ * Footer API Functions
+ * Fetch footer data from external API
+ */
+
+const getApiUrl = (): string => {
+    return process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
+};
+
+export interface FooterData {
+    top: {
+        bgImage: string;
+        phone: {
+            display: string;
+            href: string;
+        };
+        address: string;
+        logo: {
+            src: string;
+            alt: string;
+            href: string;
+        };
+        menuLinks: Array<{
+            label: string;
+            href: string;
+        }>;
+        socialLinks: Array<{
+            icon: string;
+            href: string;
+        }>;
+    };
+    bottom: {
+        copyright: {
+            text: string;
+            brand: string;
+            rights: string;
+        };
+        menuLinks: Array<{
+            label: string;
+            href: string;
+        }>;
+    };
+}
+
+export const footerApi = {
+    // Get footer data
+    getFooter: async (): Promise<FooterData> => {
+        try {
+            const apiUrl = getApiUrl();
+            const response = await fetch(`${apiUrl}/api/footer`);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            return await response.json();
+        } catch (error) {
+            console.error("Error fetching footer data:", error);
+            // Fallback to static data if API fails
+            const fallbackData = await import("../app/components/layout/Footer/footer.json");
+            return fallbackData.default as FooterData;
+        }
+    },
+};

api/index.ts

@@ -1,4 +1,6 @@
 /**
  * Export all API functions
  */
-export * from './blogsApi';
+export * from "./blogsApi";
+export * from "./footerApi";
+export * from "./servicesApi";

app/blog/[slug]/page.tsx

@@ -6,6 +6,9 @@ import { fetchBlogList, fetchBlogDetail } from "@/api/blogsApi";
 import Sidebar from "@/app/blog/components/Sidebar";
 import { getCmsImageUrl } from "@/utils";
 
+// Force dynamic rendering to avoid build-time API calls
+export const dynamic = "force-dynamic";
+
 // Generate static params for all blog posts
 export async function generateStaticParams() {
     try {
@@ -20,65 +23,67 @@ export async function generateStaticParams() {
 }
 
 interface BlogDetailsPageProps {
-    params: Promise<{
+    params:
-        slug: string;
+        | Promise<{
-    }> | {
+              slug: string;
-        slug: string;
+          }>
-    };
+        | {
+              slug: string;
+          };
 }
 
 // SEO metadata cho từng bài blog (Open Graph / thumbnail khi share)
 export async function generateMetadata({
-  params,
+    params,
 }: {
-  params:
+    params:
-    | Promise<{
+        | Promise<{
-        slug: string;
+              slug: string;
-      }>
+          }>
-    | {
+        | {
-        slug: string;
+              slug: string;
-      };
+          };
 }): Promise<Metadata> {
-  const resolvedParams = params instanceof Promise ? await params : params;
+    const resolvedParams = params instanceof Promise ? await params : params;
-  const slug = resolvedParams.slug;
+    const slug = resolvedParams.slug;
 
-  try {
+    try {
-    const blogResponse = await fetchBlogDetail(slug);
+        const blogResponse = await fetchBlogDetail(slug);
-    const post = blogResponse.data;
+        const post = blogResponse.data;
 
-    const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000";
+        const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000";
-    const url = `${siteUrl}/blog/${post.slug}`;
+        const url = `${siteUrl}/blog/${post.slug}`;
-    const imageUrl = post.featuredImage
+        const imageUrl = post.featuredImage
-      ? getCmsImageUrl(post.featuredImage)
+            ? getCmsImageUrl(post.featuredImage)
-      : `${siteUrl}/assets/img/inner-page/news-details/details-1.jpg`;
+            : `${siteUrl}/assets/img/inner-page/news-details/details-1.jpg`;
 
-    return {
+        return {
-      title: post.title,
+            title: post.title,
-      description: post.excerpt,
+            description: post.excerpt,
-      openGraph: {
+            openGraph: {
-        title: post.title,
+                title: post.title,
-        description: post.excerpt,
+                description: post.excerpt,
-        url,
+                url,
-        type: "article",
+                type: "article",
-        images: [
+                images: [
-          {
+                    {
-            url: imageUrl,
+                        url: imageUrl,
-            alt: post.title,
+                        alt: post.title,
-          },
+                    },
-        ],
+                ],
-      },
+            },
-      twitter: {
+            twitter: {
-        card: "summary_large_image",
+                card: "summary_large_image",
-        title: post.title,
+                title: post.title,
-        description: post.excerpt,
+                description: post.excerpt,
-        images: [imageUrl],
+                images: [imageUrl],
-      },
+            },
-    };
+        };
-  } catch {
+    } catch {
-    return {
+        return {
-      title: "Blog Details",
+            title: "Blog Details",
-    };
+        };
-  }
+    }
 }
 
 export default async function BlogDetailsPage({ params }: BlogDetailsPageProps) {
@@ -100,18 +105,18 @@ export default async function BlogDetailsPage({ params }: BlogDetailsPageProps)
                             <div className="row g-4">
                                 <div className="col-lg-8 col-12">
                                     <div className="py-5">
-                            <h2>Post not found</h2>
+                                        <h2>Post not found</h2>
-                            <p>The blog post you are looking for does not exist.</p>
+                                        <p>The blog post you are looking for does not exist.</p>
-                            <Link href="/blog" className="theme-btn mt-3">
+                                        <Link href="/blog" className="theme-btn mt-3">
-                                Back to Blog <i className="fa-solid fa-arrow-right"></i>
+                                            Back to Blog <i className="fa-solid fa-arrow-right"></i>
-                            </Link>
+                                        </Link>
                                     </div>
                                 </div>
                                 {/* Sidebar on the right */}
                                 <Sidebar />
+                            </div>
                         </div>
                     </div>
-                </div>
                 </section>
             </>
         );

app/blog/category/[slug]/page.tsx

@@ -3,23 +3,25 @@ import NewsSection from "@/app/blog/components/NewsSection";
 import Sidebar from "@/app/blog/components/Sidebar";
 import { fetchBlogsByCategory, fetchCategoryDetail } from "@/api/blogsApi";
 
+// Force dynamic rendering to avoid build-time API calls
+export const dynamic = "force-dynamic";
+
 interface CategoryPageProps {
-  params:
+    params:
-    | Promise<{
+        | Promise<{
-        slug: string;
+              slug: string;
-      }>
+          }>
-    | {
+        | {
-        slug: string;
+              slug: string;
-      };
+          };
-  searchParams?: Promise<{ search?: string; page?: string }> | { search?: string; page?: string };
+    searchParams?: Promise<{ search?: string; page?: string }> | { search?: string; page?: string };
 }
 
 export default async function CategoryPage({ params, searchParams }: CategoryPageProps) {
     // Handle both Promise and direct object
     const resolvedParams = params instanceof Promise ? await params : params;
     const slug = resolvedParams.slug;
-    const resolvedSearchParams =
+    const resolvedSearchParams = searchParams instanceof Promise ? await searchParams : searchParams;
-      searchParams instanceof Promise ? await searchParams : searchParams;
     const searchQuery = resolvedSearchParams?.search?.toString() || "";
     const pageParam = resolvedSearchParams?.page?.toString() || "1";
     const currentPage = Number.parseInt(pageParam, 10) || 1;
@@ -30,9 +32,9 @@ export default async function CategoryPage({ params, searchParams }: CategoryPag
         [categoryResponse, blogsResponse] = await Promise.all([
             fetchCategoryDetail(slug),
             fetchBlogsByCategory(slug, {
-              page: currentPage,
+                page: currentPage,
-              limit: 3,
+                limit: 3,
-              ...(searchQuery ? { search: searchQuery } : {}),
+                ...(searchQuery ? { search: searchQuery } : {}),
             }),
         ]);
     } catch {
@@ -64,12 +66,7 @@ export default async function CategoryPage({ params, searchParams }: CategoryPag
     return (
         <>
             <Breadcrumb title={category.name} current="Blog Category" />
-            <NewsSection
+            <NewsSection blogs={blogs} categorySlug={slug} searchQuery={searchQuery} pagination={pagination} />
-              blogs={blogs}
-              categorySlug={slug}
-              searchQuery={searchQuery}
-              pagination={pagination}
-            />
         </>
     );
 }

app/blog/page.tsx

@@ -2,32 +2,31 @@ import Breadcrumb from "@/app/components/Breadcrumb";
 import NewsSection from "./components/NewsSection";
 import { fetchBlogList } from "@/api/blogsApi";
 
+// Force dynamic rendering to avoid build-time API calls
+export const dynamic = "force-dynamic";
+
 interface NewsPageProps {
-  searchParams?: Promise<{ search?: string; page?: string }> | { search?: string; page?: string };
+    searchParams?: Promise<{ search?: string; page?: string }> | { search?: string; page?: string };
 }
 
 export default async function NewsPage({ searchParams }: NewsPageProps) {
-  const resolvedSearchParams =
+    const resolvedSearchParams = searchParams instanceof Promise ? await searchParams : searchParams;
-    searchParams instanceof Promise ? await searchParams : searchParams;
+    const searchQuery = resolvedSearchParams?.search?.toString() || "";
-  const searchQuery = resolvedSearchParams?.search?.toString() || "";
+    const pageParam = resolvedSearchParams?.page?.toString() || "1";
-  const pageParam = resolvedSearchParams?.page?.toString() || "1";
+    const currentPage = Number.parseInt(pageParam, 10) || 1;
-  const currentPage = Number.parseInt(pageParam, 10) || 1;
 
-  // Fetch blog list from API
+    // Fetch blog list from API
-  const blogResponse = await fetchBlogList({
+    const blogResponse = await fetchBlogList({
-    page: currentPage,
+        page: currentPage,
-    limit: 3,
+        limit: 3,
-    ...(searchQuery ? { search: searchQuery } : {}),
+        ...(searchQuery ? { search: searchQuery } : {}),
-  });
+    });
-  const { blogs, pagination } = blogResponse.data;
+    const { blogs, pagination } = blogResponse.data;
 
-  return (
+    return (
-    <>
+        <>
-      <Breadcrumb
+            <Breadcrumb title={searchQuery ? `Search: ${searchQuery}` : "Blog Standard"} current="Blog Standard" />
-        title={searchQuery ? `Search: ${searchQuery}` : "Blog Standard"}
+            <NewsSection blogs={blogs} searchQuery={searchQuery} pagination={pagination} />
-        current="Blog Standard"
+        </>
-      />
+    );
-      <NewsSection blogs={blogs} searchQuery={searchQuery} pagination={pagination} />
+}
-    </>
-  );
-}

app/blog/tag/[slug]/page.tsx

@@ -3,23 +3,25 @@ import NewsSection from "@/app/blog/components/NewsSection";
 import Sidebar from "@/app/blog/components/Sidebar";
 import { fetchBlogsByTag, fetchTagDetail } from "@/api/blogsApi";
 
+// Force dynamic rendering to avoid build-time API calls
+export const dynamic = "force-dynamic";
+
 interface TagPageProps {
-  params:
+    params:
-    | Promise<{
+        | Promise<{
-        slug: string;
+              slug: string;
-      }>
+          }>
-    | {
+        | {
-        slug: string;
+              slug: string;
-      };
+          };
-  searchParams?: Promise<{ search?: string; page?: string }> | { search?: string; page?: string };
+    searchParams?: Promise<{ search?: string; page?: string }> | { search?: string; page?: string };
 }
 
 export default async function TagPage({ params, searchParams }: TagPageProps) {
     // Handle both Promise and direct object
     const resolvedParams = params instanceof Promise ? await params : params;
     const slug = resolvedParams.slug;
-    const resolvedSearchParams =
+    const resolvedSearchParams = searchParams instanceof Promise ? await searchParams : searchParams;
-      searchParams instanceof Promise ? await searchParams : searchParams;
     const searchQuery = resolvedSearchParams?.search?.toString() || "";
     const pageParam = resolvedSearchParams?.page?.toString() || "1";
     const currentPage = Number.parseInt(pageParam, 10) || 1;
@@ -30,9 +32,9 @@ export default async function TagPage({ params, searchParams }: TagPageProps) {
         [tagResponse, blogsResponse] = await Promise.all([
             fetchTagDetail(slug),
             fetchBlogsByTag(slug, {
-              page: currentPage,
+                page: currentPage,
-              limit: 3,
+                limit: 3,
-              ...(searchQuery ? { search: searchQuery } : {}),
+                ...(searchQuery ? { search: searchQuery } : {}),
             }),
         ]);
     } catch {

app/components/layout/Footer/FooterBottom.tsx

@@ -1,8 +1,28 @@
-import Link from 'next/link';
+"use client";
-import footerData from './footer.json';
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { footerApi, FooterData } from "../../../../api/footerApi";
+import footerData from "./footer.json";
 
 const FooterBottom = () => {
-    const { bottom } = footerData;
+    const [data, setData] = useState<FooterData>(footerData as FooterData);
+
+    useEffect(() => {
+        const loadFooterData = async () => {
+            try {
+                const apiData = await footerApi.getFooter();
+                setData(apiData);
+            } catch (error) {
+                console.error("Failed to load footer data from API, using static data:", error);
+                // Keep using static data as fallback
+            }
+        };
+
+        loadFooterData();
+    }, []);
+
+    const { bottom } = data;
 
     return (
         <div className="footer-bottom">

app/components/layout/Footer/FooterTop.tsx

@@ -1,8 +1,28 @@
-import Link from 'next/link';
+"use client";
-import footerData from './footer.json';
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { footerApi, FooterData } from "../../../../api/footerApi";
+import footerData from "./footer.json";
 
 const FooterTop = () => {
-    const { top } = footerData;
+    const [data, setData] = useState<FooterData>(footerData as FooterData);
+
+    useEffect(() => {
+        const loadFooterData = async () => {
+            try {
+                const apiData = await footerApi.getFooter();
+                setData(apiData);
+            } catch (error) {
+                console.error("Failed to load footer data from API, using static data:", error);
+                // Keep using static data as fallback
+            }
+        };
+
+        loadFooterData();
+    }, []);
+
+    const { top } = data;
 
     return (
         <footer className="footer-section fix bg-cover" style={{ backgroundImage: `url('${top.bgImage}')` }}>