category , subcategory, product url changes

components/category/SubcategoryList.jsx

@@ -5,10 +5,12 @@ import React, { useState, useEffect } from "react";
 import { backendUrl } from "@/utils/axios";
 import axios from "axios";
 import Image from "next/image";
+import slugify from "slugify";
 
 export default function SubcategoryList({ params }) {
-  console.log(params);
-  console.log(params.id);
+  //console.log("category params is", params);
+  //console.log("Category name:", params.name);
+
   const [subcategories, setSubcategories] = useState([]);
   const [category, setCategory] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -17,23 +19,29 @@ export default function SubcategoryList({ params }) {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        // Fetch category details
-        const categoryResponse = await axios.get(
-          `${backendUrl}/products/category/`
-        );
+        // Fetch all categories
+        const categoryResponse = await axios.get(`${backendUrl}/products/category/`);
+
+        // Find the category by name
         const selectedCategory = categoryResponse.data.find(
-          (cat) => cat.id == params.id
+          (cat) => cat.category_name.toLowerCase() === decodeURIComponent(params.name).toLowerCase()
         );
+
+        if (!selectedCategory) {
+          setError("Category not found.");
+          setLoading(false);
+          return;
+        }
+
         setCategory(selectedCategory);
 
-        // Fetch subcategories for this category
+        // Fetch subcategories using category id
         const subcategoriesResponse = await axios.get(
-          `${backendUrl}/admins/product/subcategories/?category_id=${params.id}`
+          `${backendUrl}/admins/product/subcategories/?category_id=${selectedCategory.id}`
         );
         setSubcategories(subcategoriesResponse.data);
-        console.log("Selected sub category")
-        console.log(subcategoriesResponse.data);
-        // console.log(sub)
+
+        console.log("Selected subcategories", subcategoriesResponse.data);
       } catch (err) {
         console.error("Error fetching data:", err);
         setError("Failed to load subcategories. Please try again later.");
@@ -43,7 +51,7 @@ export default function SubcategoryList({ params }) {
     };
 
     fetchData();
-  }, [params.id]);
+  }, [params.name]);
 
   if (loading) {
     return <div className="py-16 text-center">Loading subcategories...</div>;
@@ -71,7 +79,7 @@ export default function SubcategoryList({ params }) {
                 key={subcategory.id}
                 className="bg-white shadow-lg rounded-lg overflow-hidden transition-transform transform hover:scale-105"
               >
-                <Link href={`/category/${params.id}/subcategory/${subcategory.id}`}>
+                <Link href={`/category/${params.name}/subcategory/${slugify(subcategory.subcategory_name, { lower: true })}`}>
                   <div className="relative w-full h-64 bg-gray-200">
                     <Image
                       src={`${
@@ -105,4 +113,4 @@ export default function SubcategoryList({ params }) {
       </div>
     </section>
   );
-}
+}