Merge pull request 'refactor: centralize data fetching in layout components' (#33) from fea/thanh-02022026-news into main

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

app/components/layout/Footer/Footer.tsx

@@ -1,11 +1,32 @@
+"use client";
+
+import { useEffect, useState } from 'react';
 import FooterTop from './FooterTop';
 import FooterBottom from './FooterBottom';
+import { footerApi, FooterData } from "../../../../api/footerApi";
+import footerData from "./footer.json";
 
 const Footer = () => {
+    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();
+    }, []);
+
     return (
         <>
-            <FooterTop />
-            <FooterBottom />
+            <FooterTop data={data} />
+            <FooterBottom data={data} />
         </>
     );
 };

app/components/layout/Footer/FooterBottom.tsx

@@ -1,29 +1,18 @@
 "use client";
 
 import Link from "next/link";
-import { useEffect, useState } from "react";
-import { footerApi, FooterData } from "../../../../api/footerApi";
+import { FooterData } from "../../../../api/footerApi";
 import footerData from "./footer.json";
 
-const FooterBottom = () => {
-    const [data, setData] = useState<FooterData>(footerData as FooterData);
+interface FooterBottomProps {
+    data: 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 FooterBottom = ({ data }: FooterBottomProps) => {
+    const effectiveData = data || footerData;
 
     // Ensure we always have a valid `bottom` object, even if API shape changes
-    const bottom = data?.bottom || footerData.bottom;
+    const bottom = effectiveData?.bottom || footerData.bottom;
 
     // If bottom is still missing, avoid rendering to prevent runtime errors
     if (!bottom) {

app/components/layout/Footer/FooterTop.tsx

@@ -1,29 +1,19 @@
 "use client";
 
 import Link from "next/link";
-import { useEffect, useState } from "react";
-import { footerApi, FooterData } from "../../../../api/footerApi";
+import { FooterData } from "../../../../api/footerApi";
 import footerData from "./footer.json";
 
-const FooterTop = () => {
-    const [data, setData] = useState<FooterData>(footerData as FooterData);
+interface FooterTopProps {
+    data: 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 FooterTop = ({ data }: FooterTopProps) => {
+    // Use passed data, fallback to static json if needed
+    const effectiveData = data || footerData;
 
     // Ensure we always have a valid `top` object, even if API shape changes
-    const top = data?.top || footerData.top;
+    const top = effectiveData?.top || footerData.top;
 
     // If for some reason `top` is still missing, avoid rendering to prevent runtime errors
     if (!top) {

app/components/layout/Header/Header.tsx

@@ -13,6 +13,7 @@ const Header = () => {
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
     const [isSearchOpen, setIsSearchOpen] = useState(false);
     const [menuItems, setMenuItems] = useState<any[]>([]);
+    const [headerData, setHeaderData] = useState<any>(null);
     const [isLoading, setIsLoading] = useState(true);
 
     const toggleOffcanvas = () => setIsOffcanvasOpen(!isOffcanvasOpen);
@@ -33,31 +34,48 @@ const Header = () => {
     );
 
     useEffect(() => {
-        const fetchMenu = async () => {
+        const fetchData = async () => {
             try {
                 setIsLoading(true);
-                const data = await headerMenuService.getHeaderMenu();
-                const mappedData = data.map((item) => adaptMenu(item));
-                setMenuItems(mappedData);
+                
+                // Fetch Menu
+                const menuPromise = headerMenuService.getHeaderMenu();
+                
+                // Fetch Header Data (Logo, Topbar)
+                const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000";
+                const headerPromise = fetch(`${apiUrl}/api/header`).then(res => res.json());
+
+                const [menuData, headerResult] = await Promise.all([menuPromise, headerPromise]);
+
+                // Process Menu
+                const mappedMenu = menuData.map((item) => adaptMenu(item));
+                setMenuItems(mappedMenu);
+
+                // Process Header Data
+                if (headerResult.success && headerResult.data) {
+                    setHeaderData(headerResult.data);
+                }
+
             } catch (error) {
-                console.error("Error fetching menu in Header:", error);
+                console.error("Error fetching header data:", error);
             } finally {
                 setIsLoading(false);
             }
         };
 
-        fetchMenu();
+        fetchData();
     }, [adaptMenu]);
 
     return (
         <>
-            <HeaderTop />
+            <HeaderTop data={headerData?.top} />
             <HeaderBottom
                 onToggleOffcanvas={toggleOffcanvas}
                 onToggleMobileMenu={toggleMobileMenu}
                 onToggleSearch={toggleSearch}
                 menuItems={menuItems}
                 isLoading={isLoading}
+                logo={headerData?.logo}
             />
 
             <Offcanvas isOpen={isOffcanvasOpen} onClose={() => setIsOffcanvasOpen(false)} menuItems={menuItems} />

app/components/layout/Header/HeaderBottom.tsx

@@ -12,6 +12,7 @@ interface HeaderBottomProps {
     onToggleSearch: () => void;
     menuItems: any[];
     isLoading: boolean;
+    logo: { light: string; dark: string; alt: string } | null;
 }
 
 const HeaderBottom: React.FC<HeaderBottomProps> = ({
@@ -20,7 +21,18 @@ const HeaderBottom: React.FC<HeaderBottomProps> = ({
     onToggleSearch,
     menuItems,
     isLoading,
+    logo,
 }) => {
+    // Helper function to resolve logo URL
+    const getLogoUrl = (path: string | undefined) => {
+        if (!path) return "/assets/img/logo/black-logo.svg";
+        if (path.startsWith("http")) return path;
+        const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
+        return `${apiUrl}${path}`;
+    };
+
+    const logoSrc = getLogoUrl(logo?.light);
+
     return (
         <header id="header-sticky" className="header-1">
             <div className="container-fluid">
@@ -29,7 +41,11 @@ const HeaderBottom: React.FC<HeaderBottomProps> = ({
                         <div className="header-left">
                             <div className="logo">
                                 <Link href="/" className="header-logo-2">
-                                    <img src="/assets/img/logo/black-logo.svg" alt="logo-img" />
+                                    <img 
+                                        src={logoSrc} 
+                                        alt={logo?.alt || "logo-img"} 
+                                        style={{ maxHeight: "4rem" }}
+                                    />
                                 </Link>
                             </div>
                             <div className="mean__menu-wrapper">

app/components/layout/Header/HeaderTop.tsx

@@ -18,39 +18,15 @@ interface HeaderData {
             name: string;
             value: string;
         }>;
-    };
+    } | null;
 }
 
-const HeaderTop = () => {
-    const [data, setData] = useState<HeaderData>(headerData);
-    const [loading, setLoading] = useState(true);
+const HeaderTop: React.FC<{ data: HeaderData['top'] }> = ({ data }) => {
+    // Use passed data or fallback to local JSON if data is null (though parent should handle fetching)
+    // If data is null (initial load), we can use headerData fallback or render nothing/skeleton
     
-    useEffect(() => {
-        const fetchHeaderData = async () => {
-            try {
-                const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000";
-                const response = await fetch(`${apiUrl}/api/header`);
-
-                if (response.ok) {
-                    const result = await response.json();
-                    if (result.success && result.data && result.data.top) {
-                        setData({
-                            top: result.data.top,
-                        });
-                    }
-                }
-            } catch (error) {
-                console.warn("Failed to fetch header data from API, using fallback:", error);
-                // Use fallback data (already set as initial state)
-            } finally {
-                setLoading(false);
-            }
-        };
-
-        fetchHeaderData();
-    }, []);
-
-    const { phone, email, location, socialLinks, languages } = data.top;
+    const displayData = data || headerData.top;
+    const { phone, email, location, socialLinks, languages } = displayData;
 
     return (
         <div className="header-top-section">