Merge pull request #44 from sliitsesc/feat/7-setup-api-connection

feat: categoies dynamic page

Author: pawan-live

package-lock.json

@@ -1,73 +1,33 @@
-import fs from "fs/promises";
-import path from "path";
+import { API_URL } from "@/config";
+import { API_ENDPOINTS } from "@/config/endpoints";
+import CardsSection from "../components/CardsSection";
 
 export default async function Page({
   params,
 }: {
   params: { category: string };
 }) {
-  const categorySlug = params.category;
+  const categorySlug = (await params).category;
+  const data = await fetch(
+    `${API_URL}${API_ENDPOINTS.CATEGORIES}?populate=subcategories&filters[slug][$eq]=${categorySlug}`
+  );
 
-  // Correct path to the categories.json file
-  const filePath = path.join(process.cwd(), "src", "data", "categories.json");
+  const categoryData = await data.json();
 
-  try {
-    // Read and parse the JSON file
-    const fileData = await fs.readFile(filePath, "utf-8");
-    const parsedData = JSON.parse(fileData);
-
-    // Access the `category` array inside the parsed JSON
-    const categories = parsedData.category;
-
-    // Log the parsed data for debugging
-    console.log("Categories Data:", categories);
-
-    // Validate that categories is an array
-    if (!Array.isArray(categories)) {
-      throw new Error("Parsed 'category' is not an array");
-    }
-
-    // Find the category with the matching slug
-    const category = categories.find((cat) => cat.slug === categorySlug);
-
-    // Handle the case where no matching slug is found
-    if (!category) {
-      return (
-        <section className="flex flex-col items-center justify-center min-h-[60vh] bg-gradient-to-b from-blue-100 to-white text-center px-4">
-          <h1 className="text-4xl font-bold text-gray-800 mb-4">
-            Category Not Found
-          </h1>
-          {/* <p className="text-lg text-gray-600 max-w-2xl">
-            The category you are looking for does not exist.
-          </p> */}
-        </section>
-      );
-    }
-
-    // Return the title and description
-    return (
-      <section className="flex flex-col items-center justify-center h-[400px] bg-gradient-to-b from-blue-100 to-white text-center px-4">
-        <h1 className="text-4xl font-bold text-gray-800 mb-4">
-          {category.title}
-        </h1>
-        <p className="text-lg text-gray-600 max-w-2xl">
-          {category.description}
-        </p>
-      </section>
-    );
-  } catch (error) {
-    // Handle errors (e.g., file not found, invalid JSON)
-    console.error("Error reading or parsing categories.json:", error);
-    return (
-      <section className="flex flex-col items-center justify-center min-h-[60vh] bg-gradient-to-b from-blue-100 to-white text-center px-4">
+  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">
-          Error Loading Category Data
+          {categoryData?.data[0]?.name}
         </h1>
         <p className="text-lg text-gray-600 max-w-2xl">
-          There was an error while loading the category data. Please try again
-          later.
+          {/* {category.description} */}
         </p>
       </section>
-    );
-  }
+      <CardsSection
+        categorySlug={categoryData?.data[0]?.slug}
+        subcategories={categoryData?.data[0]?.subcategories}
+      />
+    </>
+  );
 }

src/app/[category]/page.tsx

@@ -1,34 +1,28 @@
 import React from "react";
-// import { ArrowRightIcon } from "@heroicons/react/24/outline";
-
-const CardsSection = () => {
-  const cardTitles = [
-    "Treatment Info",
-    "Symptoms",
-    "Precautions",
-    "Diet and Nutrition",
-    "Side Effects",
-    "Other",
-  ];
+import { ArrowRightIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
 
+const CardsSection = (props) => {
+  console.log(props);
   return (
     <section className="bg-white py-16">
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-10 px-4 sm:px-0 max-w-2xl mx-auto">
-        {cardTitles.map((title, index) => (
-          <div
+        {props.subcategories?.map((item, index) => (
+          <Link
+            href={`/${props.categorySlug}/${item.slug}`}
             key={index}
             className="group relative border-[#DBEBFB] border sm:border-2 bg-white rounded-xl sm:rounded-lg shadow-sm 
             p-4 sm:p-6 sm:pt-4 sm:pb-16 w-full sm:w-72 cursor-pointer transition-all duration-300 
             hover:bg-[#2F7CC4] mx-auto">
             <h2 className="text-gray-700 font-semibold text-xl sm:text-2xl group-hover:text-white transition-colors duration-300">
-              {title}
+              {item.name}
             </h2>
             <div className="absolute right-4 sm:right-6 top-1/2 -translate-y-1/2 sm:top-auto sm:bottom-4 sm:translate-y-0">
               <div className="bg-blue-500 p-2 rounded-lg arrow-button transition-all duration-300 group-hover:bg-white">
-                {/* <ArrowRightIcon className="h-5 w-5 text-white group-hover:text-[#2F7CC4] transition-colors duration-300" /> */}
+                <ArrowRightIcon className="h-5 w-5 text-white group-hover:text-[#2F7CC4] transition-colors duration-300" />
               </div>
             </div>
-          </div>
+          </Link>
         ))}
       </div>
     </section>

src/app/components/CardsSection.jsx src/app/components/CardsSection.tsxsrc/app/components/CardsSection.jsx renamed to src/app/components/CardsSection.tsx

@@ -17,7 +17,7 @@ const Footer = () => {
   };
 
   return (
-    <section className="bg-gradient-to-b to-blue-100 from-white py-16 text-black">
+    <section className="bg-gradient-to-b to-blue-100 from-white py-16 text-black border-t-[1px] border-[#DBEBFB]">
       {/* Mobile View */}
       <div className="md:hidden flex flex-col mx-auto px-5">
         {/* RheumaConnect Brand Name */}
@@ -28,8 +28,7 @@ const Footer = () => {
         {/* Link 1 Dropdown */}
         <button
           onClick={() => toggleDropdown("link1")}
-          className="bg-white rounded-lg shadow-md px-5 py-3 text-left text-black mb-3 flex justify-between items-center"
-        >
+          className="bg-white rounded-lg shadow-md px-5 py-3 text-left text-black mb-3 flex justify-between items-center">
           Link 1
           {isOpen.link1 ? (
             <ChevronUpIcon className="h-6 w-6 text-gray-500" />
@@ -38,7 +37,7 @@ const Footer = () => {
           )}
         </button>
         {isOpen.link1 && (
-          <ul className="bg-white p-3 rounded-lg">
+          <ul className="bg-white p-3 rounded-lg mb-4">
             <li>
               <a href="#">Tincidunt amet</a>
             </li>
@@ -60,8 +59,7 @@ const Footer = () => {
         {/* Link 2 Dropdown */}
         <button
           onClick={() => toggleDropdown("link2")}
-          className="bg-white rounded-lg shadow-md px-5 py-3 text-left text-black mb-3 flex justify-between items-center"
-        >
+          className="bg-white rounded-lg shadow-md px-5 py-3 text-left text-black mb-3 flex justify-between items-center">
           Link 2
           {isOpen.link2 ? (
             <ChevronUpIcon className="h-6 w-6 text-gray-500" />
@@ -92,8 +90,7 @@ const Footer = () => {
         {/* Contact Dropdown */}
         <button
           onClick={() => toggleDropdown("contact")}
-          className="bg-white rounded-lg shadow-md px-5 py-3 text-left text-black mb-3 flex justify-between items-center"
-        >
+          className="bg-white rounded-lg shadow-md px-5 py-3 text-left text-black mb-3 flex justify-between items-center">
           Contact
           {isOpen.contact ? (
             <ChevronUpIcon className="h-6 w-6 text-gray-500" />

src/app/components/Footer.jsx src/app/components/Footer.tsxsrc/app/components/Footer.jsx renamed to src/app/components/Footer.tsx

@@ -1,6 +1,3 @@
-// // This is the MainCatSection component which is responsible for rendering the main categories section of the website. It uses the categoriesData.json file to get the data for the categories.
-// // Path of the data json file: src\app\data\MainCatSection\categoriesData.json
-
 import React from "react";
 import Image from "next/image";
 import categoriesData from "../data/MainCategorySection/categoriesData.json";
@@ -18,8 +15,7 @@ const MainCategorySection = () => {
         {categoriesData.map((category) => (
           <div
             key={category.id}
-            className="p-8 cursor-pointer border-2 border-transparent hover:border-[#DBEBFB] rounded-xl transition duration-500"
-          >
+            className="p-8 cursor-pointer border-2 border-transparent hover:border-[#DBEBFB] rounded-xl transition duration-500">
             <div className="relative max-w-[274px] max-h-[103px] mx-auto aspect-[274/103]">
               <Image
                 src={category.image}

src/app/components/MainCategorySection.jsx

@@ -5,6 +5,7 @@ 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";
 
 const dmSans = DM_Sans({
   subsets: ["latin"],
@@ -26,11 +27,11 @@ export default async function RootLayout({
   const navbarData = await data.json();
 
   return (
-
     <html lang="en" className={dmSans.variable}>
       <body className="antialiased font-sans">
         <Navbar data={navbarData?.data} />
         <main>{children}</main>
+        <Footer />
       </body>
     </html>
   );

src/app/layout.tsx

@@ -1,11 +1,9 @@
 import HeroSection from "./components/HeroSection";
-import CardsSection from "./components/CardsSection";
 import AZCards from "@/app/components/AZCards";
 import translations from "@/app/data/translations.json";
 import { Translations } from "@/app/types";
 // import ContactCard from "./components/ContactCard";
 import MainCategorySection from "./components/MainCategorySection";
-import Footer from "./components/Footer";
 const translationsData: Translations = translations;
 
 // fetch data from API
@@ -14,12 +12,10 @@ export default async function Home() {
   return (
     <div>
       <HeroSection selectedLang="en" />
-      <CardsSection />
       {/* <ContactCard /> */}
       <MainCategorySection />
       {/* <ContactCard /> */}
       <AZCards azCards={translationsData["en"]["az-cards"]} />
-      <Footer />
     </div>
   );
 }