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,9 +23,11 @@ export async function generateStaticParams() {
 }
 
 interface BlogDetailsPageProps {
-    params: Promise<{
+    params:
+        | Promise<{
               slug: string;
-    }> | {
+          }>
+        | {
               slug: string;
           };
 }

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

@@ -3,6 +3,9 @@ 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:
         | Promise<{
@@ -18,8 +21,7 @@ export default async function CategoryPage({ params, searchParams }: CategoryPag
     // 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;
@@ -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,13 +2,15 @@ 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 };
 }
 
 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 pageParam = resolvedSearchParams?.page?.toString() || "1";
     const currentPage = Number.parseInt(pageParam, 10) || 1;
@@ -23,10 +25,7 @@ export default async function NewsPage({ searchParams }: NewsPageProps) {
 
     return (
         <>
-      <Breadcrumb
+            <Breadcrumb title={searchQuery ? `Search: ${searchQuery}` : "Blog Standard"} current="Blog Standard" />
-        title={searchQuery ? `Search: ${searchQuery}` : "Blog Standard"}
-        current="Blog Standard"
-      />
             <NewsSection blogs={blogs} searchQuery={searchQuery} pagination={pagination} />
         </>
     );

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

@@ -3,6 +3,9 @@ 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:
         | Promise<{
@@ -18,8 +21,7 @@ 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;

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}')` }}>