Merge pull request #749 from IkkiOcean/agro-shop-frontend

Implemented Dynamic Banner loading at Category Page and Improved Homepage Responsiveness
manikumarreddyu · Nov 3, 2024 · 91e51cb · 91e51cb
2 parents 665f351 + e53e113
commit 91e51cb
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 55 deletions.
diff --git a/frontend/src/AgroShopAI/components/BottomCardContainer.jsx b/frontend/src/AgroShopAI/components/BottomCardContainer.jsx
@@ -1,25 +1,20 @@
 import DisplayCard from "./DisplayCard";
 
-const BottomCardContainer = ({items,text}) => {
-    return (
-      <div className="h-fit w-full pr-2 bg-white mx-2 mt-4">
-        <div className="border-b-2 bg-green-200 border-green-600">
-
-          <h1 className="font-semibold py-1 ml-8 text-2xl text-black text-center">{text}</h1>
-        </div>
-        <div className="grid grid-cols-4 gap-4 p-6 mt-2 bg-green-100">
-        {items.slice(0, 12).map((item, index) => { // Calculate savings
-            return (
-              <div className="justify-center mx-auto" key={index}>
-
-                <DisplayCard item= {item}/>
-              </div>
-            );
-          })}
-        </div>
+const BottomCardContainer = ({ items, text }) => {
+  return (
+    <div className="h-fit w-full pr-2 bg-white mx-2 mt-4">
+      <div className="border-b-2 bg-green-200 border-green-600">
+        <h1 className="font-semibold py-1 ml-8 text-2xl text-black text-center">{text}</h1>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-6 mt-2 bg-green-100">
+        {items.slice(0, 12).map((item, index) => (
+          <div className="justify-center mx-auto" key={index}>
+            <DisplayCard item={item} />
+          </div>
+        ))}
       </div>
-    );
-  };
-  
-  export default BottomCardContainer;
-  
+    </div>
+  );
+};
+
+export default BottomCardContainer;
diff --git a/frontend/src/AgroShopAI/components/Categories.jsx b/frontend/src/AgroShopAI/components/Categories.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
+
 const Categories = ({ categories }) => {
   return (
     <div className="category-container d-flex justify-content-center align-items-center mx-2 my-2">
@@ -9,25 +10,20 @@ const Categories = ({ categories }) => {
         </h1>
       </div>
       <div className="bg-green-100 py-4 mt-2">
-        <div className="grid gap-4 grid-cols-5 ">
+        <div className="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
           {categories.map((category, index) => (
-            <>
-              <div key={index} className="w-36 justify-center mx-auto ">
-                {/* display category information here */}
-                <Link to={`category/${category.id}`}>
-                  {" "}
-                  {/* Adjust the route as needed */}
-                  <img
-                    className="rounded-full"
-                    src={category.image}
-                    alt={category.title}
-                  />
-                  <h1 className="pt-2 font-semibold text-center cursor-pointer hover:text-green-400">
-                    {category.title}
-                  </h1>
-                </Link>
-              </div>
-            </>
+            <div key={index} className="w-36 justify-center mx-auto">
+              <Link to={`category/${category.alias}`}>
+                <img
+                  className="rounded-full"
+                  src={category.image}
+                  alt={category.title}
+                />
+                <h1 className="pt-2 font-semibold text-center cursor-pointer hover:text-green-400">
+                  {category.title}
+                </h1>
+              </Link>
+            </div>
           ))}
         </div>
       </div>

diff --git a/frontend/src/AgroShopAI/pages/CategoryPage.jsx b/frontend/src/AgroShopAI/pages/CategoryPage.jsx
@@ -4,18 +4,27 @@ import Filter from "../components/Filter";
 import { useParams } from 'react-router-dom';
 import Preloader from "../../components/PreLoader";
 import { useAuth } from "../../context/AuthContext";
+import NotFound from "../../NotFound";
+import { categories } from "../utils/home-data";
 const CategoryPage = () => {
   const { isLoggedIn, userData } = useAuth(); 
+  const [wrongURL, setWrongURL] =useState(false);
   const [items, setItems] = useState([]); // State to store fetched items
   const [filteredItems, setFilteredItems] = useState([]); // State for filtered items
   const [loading, setLoading] = useState(true); // State for loading status
   const [wishlist, setWishlist] = useState([]);
   const [wishlistLoading, setWishlistLoading] = useState(true);
-  const { id } = useParams();
+
+  // Using name instead of Id for test purpose.
+  const {name} = useParams();
+  let id;
   let url = '';
   if (id) {
+    //  Add Data to collection and use that Id here
     url = `${import.meta.env.VITE_BACKEND_BASE_URL}api/products/category/${id}`;
   } else {
+    /* Fetching every product for development phase
+    Remove it after setting up db locally */
     url = `${import.meta.env.VITE_BACKEND_BASE_URL}api/products/`;
   }
 
@@ -25,7 +34,7 @@ const CategoryPage = () => {
       setLoading(true); // Set loading to true before fetching
       const response = await fetch(url); // Replace with your API URL
       const data = await response.json();
-
+      console.log(data)
       // Flatten data to include each variant as a separate item
       const flattenedData = data.flatMap(item =>
         item.variants.map(variant => ({
@@ -39,6 +48,7 @@ const CategoryPage = () => {
       setFilteredItems(flattenedData); // Set initial filtered items
     } catch (error) {
       console.error("Failed to fetch items:", error);
+      setWrongURL(true);
     } finally {
       setLoading(false); // Set loading to false after fetching
     }
@@ -62,7 +72,9 @@ const CategoryPage = () => {
     fetchData(); // Fetch data when the component mounts
     fetchWishlist();
   }, [id]);
-
+  if(wrongURL){
+    return <NotFound />
+  }
   // Display loader while fetching data
   if (loading || wishlistLoading) {
     return <Preloader />;
@@ -72,7 +84,8 @@ const CategoryPage = () => {
     <div className="category bg-gray-800">
       <img
         className="mx-2"
-        src="https://github.com/IkkiOcean/AgroTech_Assets/blob/main/shop-asset/category_page/seed_banner.png?raw=true"
+        src={categories.find(category => category.alias === name)?.banner || null}
+
         alt=""
       />
       <div className="flex gap-4 mx-2 mt-2 pb-2">

diff --git a/frontend/src/AgroShopAI/utils/home-data.js b/frontend/src/AgroShopAI/utils/home-data.js
@@ -2,55 +2,76 @@ export const categories = [
   {
       title: "Herbicides",
       image: "https://github.com/IkkiOcean/AgroTech_Assets/blob/main/shop-asset/category-img/herbicide.jpg?raw=true",
-      id: "" // Empty string for id
+      banner: "https://raw.githubusercontent.com/IkkiOcean/AgroTech_Assets/refs/heads/main/shop-asset/category_page/herbicide.png",
+      id: "",
+      alias: "herbicides"
   },
   {
       title: "Growth Promoters",
       image: "https://github.com/IkkiOcean/AgroTech_Assets/blob/main/shop-asset/category-img/growth_promoters.jpg?raw=true",
-      id: "67154de8c99a7d1729a431ba" // ID for Growth Promoters
+      banner: "https://raw.githubusercontent.com/IkkiOcean/AgroTech_Assets/refs/heads/main/shop-asset/category_page/growth_promoters.png",
+      id: "67154de8c99a7d1729a431ba",
+      alias: "growth"
   },
   {
       title: "Fungicides",
       image: "https://github.com/IkkiOcean/AgroTech_Assets/blob/main/shop-asset/category-img/fungicides.jpg?raw=true",
-      id: "" // Empty string for id
+      banner : "https://raw.githubusercontent.com/IkkiOcean/AgroTech_Assets/refs/heads/main/shop-asset/category_page/fungicide.png",
+      id: "",
+      alias: "fungicides"
   },
   {
       title: "Vegetable & Fruit Seeds",
       image: "https://github.com/IkkiOcean/AgroTech_Assets/blob/main/shop-asset/category-img/seeds.jpg?raw=true",
-      id: "67154da7c99a7d1729a431b8" // ID for Vegetable & Fruit Seeds
+      banner: "https://raw.githubusercontent.com/IkkiOcean/AgroTech_Assets/refs/heads/main/shop-asset/category_page/Seeds.png",
+      id: "67154da7c99a7d1729a431b8",
+      alias: "seeds"
   },
   {
       title: "Farm Machinery",
       image: "https://github.com/IkkiOcean/AgroTech_Assets/blob/main/shop-asset/category-img/machine.jpg?raw=true",
-      id: "" // Empty string for id
+      banner: "https://raw.githubusercontent.com/IkkiOcean/AgroTech_Assets/refs/heads/main/shop-asset/category_page/farm_machinery.png",
+      id: "",
+      alias: "machinery"
   },
   {
       title: "Nutrients",
       image: "https://github.com/IkkiOcean/AgroTech_Assets/blob/main/shop-asset/category-img/nutrient.jpg?raw=true",
-      id: "" // Empty string for id
+      banner: "https://raw.githubusercontent.com/IkkiOcean/AgroTech_Assets/refs/heads/main/shop-asset/category_page/nutrient.png",
+      id: "",
+      alias: "nutrients"
   },
   {
       title: "Insecticide",
       image: "https://github.com/IkkiOcean/AgroTech_Assets/blob/main/shop-asset/category-img/insecticide.jpg?raw=true",
-      id: "" // Empty string for id
+      banner : "https://raw.githubusercontent.com/IkkiOcean/AgroTech_Assets/refs/heads/main/shop-asset/category_page/insecticide.png",
+      id: "",
+      alias: "insecticide"
   },
   {
       title: "Organic Farming",
       image: "https://github.com/IkkiOcean/AgroTech_Assets/blob/main/shop-asset/category-img/organic.jpg?raw=true",
-      id: "" // Empty string for id
+      banner: "https://raw.githubusercontent.com/IkkiOcean/AgroTech_Assets/refs/heads/main/shop-asset/category_page/organic.png",
+      id: "",
+      alias: "organic"
   },
   {
       title: "Animal Husbandry",
       image: "https://github.com/IkkiOcean/AgroTech_Assets/blob/main/shop-asset/category-img/animal.jpg?raw=true",
-      id: "" // Empty string for id
+      banner: "https://raw.githubusercontent.com/IkkiOcean/AgroTech_Assets/refs/heads/main/shop-asset/category_page/animal_husbandary.png",
+      id: "",
+      alias: "animal"
   },
   {
       title: "New Products",
       image: "https://github.com/IkkiOcean/AgroTech_Assets/blob/main/shop-asset/category-img/new.jpg?raw=true",
-      id: "" // Empty string for id
+      banner: "https://raw.githubusercontent.com/IkkiOcean/AgroTech_Assets/refs/heads/main/shop-asset/category_page/new_product.png",
+      id: "",
+      alias: "new"
   }
 ];
 
+
 export const topSellingItems = [
   {
     title: "Roundup Weed Killer",

diff --git a/frontend/src/MainContent.jsx b/frontend/src/MainContent.jsx
@@ -137,7 +137,7 @@ const MainContent = () => {
                 {/* AgroShopAI Routes */}
                 <Route path="/AgroShop" element={<HomeShop/>} />
                 <Route path="/AgroShop/Category" element={<CategoryPage/>} />
-                <Route path="/AgroShop/Category/:id" element={<CategoryPage/>} />
+                <Route path="/AgroShop/Category/:name" element={<CategoryPage/>} />
                 <Route path="/AgroShop/Product/:id" element={<ProductPage/>}/>
                 <Route path="/AgroShop/Cart" element={<CartPage/>} />
                 <Route path="/AgroShop/Wishlist" element={<Wishlist/>} />