forked from UKSOURCE/hailearning.edu.vn
refactor: centralize data fetching in layout components
This commit is contained in:
@@ -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} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user