Merge pull request #52 from sliitsesc/feat/all-articles-page

Feat/all articles page

Author: pawan-live

next.config.ts

@@ -2,6 +2,9 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
+  images: {
+    domains: ["images.unsplash.com"],
+  },
 };
 
 export default nextConfig;

package-lock.json

@@ -0,0 +1,37 @@
+import ArticleCard from "@/app/components/Articles/ArticleCard";
+import { API_ENDPOINTS } from "@/config/endpoints";
+import { getData } from "@/lib/helpers/dataFetchHelper";
+import { ApiResponse, SubcategoryType } from "@/types/CommonTypes";
+
+export default async function Page({
+  params,
+}: {
+  params: { subcategory: string };
+}) {
+  const response: ApiResponse<SubcategoryType> = await getData(
+    `${API_ENDPOINTS.SUBCATEGORIES}?filters[slug][$eq]=${params.subcategory}&populate=articles`
+  );
+
+  const [{ name, subtitle, articles }] = response.data;
+
+  // Map and transform articles to match the expected props
+  
+  const transformedArticles = articles.map((article: any) => ({
+    id: article.id,
+    title: article.title,
+    description: article.description,
+    content: article.content || "No content available", // Matches the expected `content` field
+    imageUrl: article.image?.url || "/placeholder.png", // Matches the expected `imageUrl` field
+  }));
+
+  return (
+    <>
+      <section className="flex flex-col items-center justify-center h-[400px] bg-gradient-to-r from-blue-100 to-white text-center px-4">
+        <h1 className="text-4xl font-bold text-gray-800 mb-4">{name}</h1>
+        <p className="text-lg text-gray-600 max-w-2xl">{subtitle}</p>
+      </section>
+
+      <ArticleCard name={name} subtitle={subtitle} articles={transformedArticles} />
+    </>
+  );
+}

src/app/[category]/[subcategory]/page.tsx

@@ -12,9 +12,11 @@ export default async function Page({
   const response: ApiResponse<Category> = await getData(
     `${API_ENDPOINTS.CATEGORIES}?populate=subcategories&filters[slug][$eq]=${categorySlug}`
   );
+  console.log("API response" , response)
 
   const [{ name, subtitle, subcategories, slug }] = response.data; // select first object in array, and destructure properties
 
+
   return (
     <>
       <section className="flex flex-col items-center justify-center h-[400px] bg-gradient-to-r from-blue-100 to-white text-center px-4">

src/app/[category]/page.tsx

@@ -0,0 +1,45 @@
+import Image from "next/image";
+
+interface ArticleCardProps {
+  name: string;
+  subtitle: string;
+  articles: Array<{
+    description: string;
+    id: number;
+    title: string;
+    content: string;
+    imageUrl: string;
+  }>;
+}
+
+export default function ArticleCard({ name, subtitle, articles }: ArticleCardProps) {
+  return (
+    <section className="p-6">
+      {/* <h1 className="text-3xl font-bold text-center text-black mb-4">{name}</h1>
+      <p className="text-center text-gray-600 mb-8">{subtitle}</p> */}
+
+      {/* Responsive grid layout */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+        {articles.map((article) => (
+          <div
+            key={article.id}
+            className="bg-gradient-to-r from-[#eaf5ff98] to-[#f4f9ff86] p-6 rounded-xl"
+          >
+            <Image
+              className="w-full h-[150px] object-cover object-center rounded-lg"
+              src={article.imageUrl || "/placeholder.png"} // Fallback image if none provided
+              alt={article.title}
+              width={1000}
+              height={1000}
+            />
+            <h2 className="font-semibold text-2xl text-black mt-4">{article.title}</h2>
+            <p className="text-black m-1">{article.description.slice(0, 100)}...</p>
+            <button className="bg-transparent text-[#2F7CC4] border-2 border-[#2F7CC4] w-full h-10 rounded-[12px] text-[16px] font-medium hover:bg-[#276ca3] hover:text-white transition flex items-center justify-center">
+              Explore more
+            </button>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

src/app/components/Articles/ArticleCard.tsx

@@ -3,9 +3,10 @@ import "./globals.css";
 import Navbar from "./components/Navbar/Navbar";
 import "@fontsource/dm-sans";
 import { API_ENDPOINTS } from "@/config/endpoints";
-import { API_URL } from "@/config";
 import { DM_Sans } from "next/font/google";
 import Footer from "./components/Footer";
+import { ApiResponseSingle, NavbarType } from "@/types/CommonTypes";
+import { getData } from "@/lib/helpers/dataFetchHelper";
 
 const dmSans = DM_Sans({
   subsets: ["latin"],
@@ -23,13 +24,14 @@ export default async function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const data = await fetch(`${API_URL}${API_ENDPOINTS.NAVBAR}`);
-  const navbarData = await data.json();
+  const navbarResponse: ApiResponseSingle<NavbarType> = await getData(
+    `${API_ENDPOINTS.NAVBAR}`
+  );
 
   return (
     <html lang="en" className={dmSans.variable}>
       <body className="antialiased font-sans">
-        <Navbar data={navbarData?.data} />
+        <Navbar data={navbarResponse?.data} />
         <main>{children}</main>
         <Footer />
       </body>

src/app/layout.tsx

@@ -1,4 +1,5 @@
 export const API_ENDPOINTS = {
   NAVBAR: "/navbar?populate=link&populate=navbarButton",
   CATEGORIES: "/categories",
+  SUBCATEGORIES: "/subcategories", 
 };

src/config/endpoints.ts

@@ -1,18 +1,23 @@
+// strapi image type
 export interface ImageType {
-  url: string;
-  alt: string;
-  width?: number;
-  height?: number;
+  id: string;
+  documentId: string;
+  name: string;
+  alternativeText: string;
+  caption: string;
+  width: number;
+  height: number;
 }
 
-export interface NavbarDataType {
-  link: NavbarLinkType[];
-  navbarButton: ButtonType;
+export interface NavbarType {
+  link: LinkType[];
+  navbarButton: ButtonType[];
 }
 
-export interface NavbarLinkType {
+export interface LinkType {
+  id: string;
   linkText: string;
-  linkUrl?: string | null;
+  linkUrl: string;
 }
 
 export interface ButtonType {
@@ -25,6 +30,10 @@ export interface ApiResponse<T> {
   data: T[];
 }
 
+export interface ApiResponseSingle<T> {
+  data: T;
+}
+
 export interface Category {
   id: string;
   documentId: string;
@@ -34,6 +43,26 @@ export interface Category {
   subcategories: Subcategory[];
 }
 
+export interface SubcategoryType {
+  id: string;
+  documentId: string;
+  name: string;
+  subtitle: string;
+  slug: string;
+  articles: Article[];
+}
+
+export interface Article {
+  id: string;
+  documentId: string;
+  title: string;
+  slug: string;
+  description: string;
+  category: string;
+  subcategory: string;
+  thumbnailImage: ImageType;
+}
+
 export interface Subcategory {
   id: string;
   name: string;