minhnhat/uldp.edu.vn
1
0
Fork 0
forked from UKSOURCE/hailearning.edu.vn
Code Pull Requests 1 Activity

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

Browse Source 
Reviewed-on: UKSOURCE/hailearning.edu.vn#18
This commit is contained in:
tranthanh
2026-02-05 08:58:45 +00:00
parent 857d250435 a85182ff20
commit 774d531aa1
8 changed files with 225 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
api/footerApi.ts Normal file
View File

@@ -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;
}
},
};

4
api/index.ts
View File

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

9
app/blog/[slug]/page.tsx
View File

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

13
app/blog/category/[slug]/page.tsx
View File

@@ -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 =
searchParams instanceof Promise ? await searchParams : searchParams;
const resolvedSearchParams = 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
blogs={blogs}
categorySlug={slug}
searchQuery={searchQuery}
pagination={pagination}
/>
<NewsSection blogs={blogs} categorySlug={slug} searchQuery={searchQuery} pagination={pagination} />
</>
);
}

11
app/blog/page.tsx
View File

@@ -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 =
searchParams instanceof Promise ? await searchParams : searchParams;
const resolvedSearchParams = 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
title={searchQuery ? `Search: ${searchQuery}` : "Blog Standard"}
current="Blog Standard"
/>
<Breadcrumb title={searchQuery ? `Search: ${searchQuery}` : "Blog Standard"} current="Blog Standard" />
<NewsSection blogs={blogs} searchQuery={searchQuery} pagination={pagination} />
</>
);

6
app/blog/tag/[slug]/page.tsx
View File

@@ -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 =
searchParams instanceof Promise ? await searchParams : searchParams;
const resolvedSearchParams = searchParams instanceof Promise ? await searchParams : searchParams;
const searchQuery = resolvedSearchParams?.search?.toString() || "";
const pageParam = resolvedSearchParams?.page?.toString() || "1";
const currentPage = Number.parseInt(pageParam, 10) || 1;

26
app/components/layout/Footer/FooterBottom.tsx
View File

@@ -1,8 +1,28 @@
import Link from 'next/link';
import footerData from './footer.json';
"use client";
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">

26
app/components/layout/Footer/FooterTop.tsx
View File

@@ -1,8 +1,28 @@
import Link from 'next/link';
import footerData from './footer.json';
"use client";
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}')` }}>