refactor: centralize data fetching in layout components

This commit is contained in:
Wini_Fy
2026-02-10 10:24:48 +07:00
parent eecd48913a
commit 1d901dec07
7 changed files with 87 additions and 77 deletions

View File

@@ -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} />
</>
);
};

View File

@@ -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) {

View File

@@ -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) {