fix stretched featured product images (#220)

* fix stretched carousel imgs

* rename files

* slice products

* fetch products

* updated attribs

* reduce textsize

* add categories

* update

* fix: build errors

* fix: type errors

---------

Co-authored-by: Sonia Lomo <49971500+sonylomo@users.noreply.github.com>
Co-authored-by: sonylomo <sonylomo1@gmail.com>

Author: bugswritter

src/components/shop/ProductCard.jsx

@@ -8,33 +8,43 @@ import { addCommaSeparator, categoryColors } from "../../utilities/utils";
 function ProductCard({ product }) {
   const { backgroundColor, color } = categoryColors(product.category);
 
+  const attributeWithImages = product.attributes.find(
+    (attribute) => attribute.images.length > 0
+  );
+  const image = attributeWithImages
+    ? attributeWithImages.images.map((img) => img.image)[0]
+    : "";
+  const totalStock = product.attributes.reduce(
+    (acc, attribute) => acc + attribute.stock,
+    0
+  );
   return (
     <div className="border rounded-lg p-2.5 pr-1.5 shadow-sm group hover:bg-green-dark/10 bg-white flex flex-col gap-4 ">
       <Link
         to={`/shop/item/${product.id}`}
         className="aspect-h-1 aspect-w-1 w-full bg-gray-200 lg:aspect-none group-hover:opacity-75 lg:h-96"
       >
         <LazyLoadImage
-          src={product.image}
-          alt="Product image"
+          src={image}
+          alt={product.name}
           className="w-full h-80 object-cover object-center lg:h-full lg:w-full"
         />
       </Link>
       <Link
         to={`/shop/item/${product.id}`}
         className="flex justify-between pr-1"
       >
-        <h3 className="text-md uppercase font-bold text-gray-600">
+        <h3 className="text-md uppercase font-medium text-gray-600">
           {product.name}
         </h3>
         <div className="p-1 rounded-xl bg-green-dark/10">
-          {product.stock > 0 ? (
+          {totalStock > 0 ? (
             <p className="text-green-dark font-medium text-sm px-1">
-              <span> {product.stock}</span>
+              <span> {totalStock}</span>
               <span className="ml-2">items left</span>
             </p>
           ) : (
-            <div className=" text-red-800 p-1 rounded-lg bg-red-800/20 font-bold text-base">
+            <div className=" text-red-800 p-1 rounded-lg bg-red-800/20 font-bold text-sm">
               <p>Out of stock</p>
             </div>
           )}
@@ -63,14 +73,37 @@ function ProductCard({ product }) {
 }
 export default ProductCard;
 
+const imagePropTypes = PropTypes.shape({
+  id: PropTypes.number.isRequired,
+  product_attribute: PropTypes.number.isRequired,
+  image: PropTypes.string.isRequired,
+  is_primary: PropTypes.bool.isRequired,
+  angle: PropTypes.string.isRequired,
+});
+
+const sizePropTypes = PropTypes.shape({
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+});
+
+const attributePropTypes = PropTypes.shape({
+  id: PropTypes.number.isRequired,
+  size: PropTypes.arrayOf(sizePropTypes).isRequired,
+  color: PropTypes.string.isRequired,
+  stock: PropTypes.number.isRequired,
+  images: PropTypes.arrayOf(imagePropTypes).isRequired,
+});
+
+const ProductCardPropTypes = {
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  slug: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  price: PropTypes.string.isRequired,
+  category: PropTypes.string.isRequired,
+  is_featured: PropTypes.bool.isRequired,
+  attributes: PropTypes.arrayOf(attributePropTypes).isRequired,
+};
 ProductCard.propTypes = {
-  product: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    name: PropTypes.string.isRequired,
-    description: PropTypes.string,
-    price: PropTypes.number.isRequired,
-    image: PropTypes.string,
-    stock: PropTypes.number.isRequired,
-    category: PropTypes.string.isRequired,
-  }).isRequired,
+  product: PropTypes.shape(ProductCardPropTypes).isRequired,
 };

src/hooks/Queries/shop/useSwagList.jsx

@@ -1,12 +1,10 @@
-// https://apis.spaceyatech.com/api/swaggs/
 import { useQuery } from "@tanstack/react-query";
 import toast from "react-hot-toast";
 import publicAxios from "../../../api/publicAxios";
 
 const fetchSwag = async () => {
   try {
-    const response = await publicAxios.get("/swaggs/");
-
+    const response = await publicAxios.get("/swaggsnew");
     return response.data;
   } catch (error) {
     toast.error("Error fetching swag list");
@@ -38,4 +36,21 @@ const useSingleSwag = (id) =>
     refetchOnWindowFocus: false,
   });
 
-export { useSingleSwag, useSwagList };
+const fetchSwagCategories = async () => {
+  try {
+    const response = await publicAxios.get("/product-categories");
+    return response.data;
+  } catch (error) {
+    toast.error("Error fetching swag list");
+    throw error;
+  }
+};
+
+const useSwagCategory = () =>
+  useQuery({
+    queryKey: ["swagCategory"],
+    queryFn: () => fetchSwagCategories(),
+    refetchOnWindowFocus: false,
+  });
+
+export { useSingleSwag, useSwagList, useSwagCategory };

src/pages/shop/Homepage.jsx

@@ -1,10 +1,10 @@
 import SeoMetadata from "../../components/SeoMetadata";
 import CartIcon from "../../components/shop/CartIcon";
 import Banner from "./sections/Banner/index";
+import BrowseProducts from "./sections/BrowseProducts";
 import FaqSection from "./sections/FaqSection";
-import FeaturedProducts from "./sections/FeaturedProducts";
 import FilterSection from "./sections/FilterSection";
-import NewProducts from "./sections/NewProducts";
+import NewProducts from "./sections/NewArrivals";
 
 function Homepage() {
   return (
@@ -24,8 +24,8 @@ function Homepage() {
         </div>
         <Banner />
         <FilterSection />
-        <FeaturedProducts />
         <NewProducts />
+        <BrowseProducts />
         <FaqSection />
       </div>
     </>

src/pages/shop/sections/Banner/Carousal.jsx

@@ -7,7 +7,11 @@ function Carousel() {
   const [width, setWidth] = useState(0);
   const [selectedIndex, setSelectedIndex] = useState(0);
 
-  const { data: swagList, isSuccess } = useSwagList();
+  const { data, isSuccess } = useSwagList();
+  const swagList = Array.isArray(data)
+    ? data.filter((item) => item.is_featured === true)
+    : [];
+
   const carouselRef = useRef(null);
 
   useEffect(() => {
@@ -48,16 +52,24 @@ function Carousel() {
           className="overflow-hidden w-full md:rounded-2xl h-full scrollbar-hide cursor-grab "
         >
           <div className="flex -ml-2.5 h-full">
-            {isSuccess &&
-              swagList?.map(({ image, name, id }) => (
-                <div key={id} className="relative min-w-full pl-2.5 h-full">
-                  <LazyLoadImage
-                    className="w-full h-full md:rounded-2xl"
-                    src={image}
-                    alt={name}
-                  />
-                </div>
-              ))}
+            {Array.isArray(swagList) &&
+              swagList.map(({ attributes, name, id }) => {
+                const attributeWithImages = attributes.find(
+                  (attribute) => attribute.images.length > 0
+                );
+                const image = attributeWithImages
+                  ? attributeWithImages.images.map((img) => img.image)[0]
+                  : "";
+                return (
+                  <div key={id} className="relative min-w-full pl-2.5 h-full">
+                    <LazyLoadImage
+                      className="w-full h-full md:rounded-2xl object-cover"
+                      src={image}
+                      alt={name}
+                    />
+                  </div>
+                );
+              })}
           </div>
         </div>
       </div>
@@ -76,15 +88,16 @@ function Carousel() {
           Shop Now
         </Link>
         <div className="flex justify-center bg-black/60 rounded-3xl gap-3 px-2 py-1.5">
-          {swagList?.map((_, index) => (
-            <button
-              key={crypto.randomUUID()}
-              type="button"
-              aria-label={`Slide ${index + 1}`}
-              className={`cursor-pointer relative p-0 outline-none border-0 rounded-full h-[9px] w-[9px] ${index === selectedIndex ? " bg-green-dark" : "bg-white"}`}
-              onClick={() => scrollToIndex(index)}
-            />
-          ))}
+          {Array.isArray(swagList) &&
+            swagList.map((_, index) => (
+              <button
+                key={crypto.randomUUID()}
+                type="button"
+                aria-label={`Slide ${index + 1}`}
+                className={`cursor-pointer relative p-0 outline-none border-0 rounded-full h-[9px] w-[9px] ${index === selectedIndex ? " bg-green-dark" : "bg-white"}`}
+                onClick={() => scrollToIndex(index)}
+              />
+            ))}
         </div>
       </div>
     </>

src/pages/shop/sections/NewProducts.jsx renamed to src/pages/shop/sections/BrowseProducts.jsx

@@ -3,8 +3,8 @@ import ProductCard from "../../../components/shop/ProductCard";
 import SectionWrapper from "../../../components/shop/SectionWrapper";
 import { useSwagList } from "../../../hooks/Queries/shop/useSwagList";
 
-function NewProducts() {
-  const { data: swagList, isSuccess } = useSwagList();
+function BrowseProducts() {
+  const { data: swagList } = useSwagList();
 
   return (
     <LandingWrapper title="Browse">
@@ -15,8 +15,8 @@ function NewProducts() {
           </h3>
         </section>
         <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
-          {isSuccess &&
-            swagList?.map((product) => (
+          {Array.isArray(swagList) &&
+            swagList.map((product) => (
               <ProductCard key={product.id} product={product} />
             ))}
         </div>
@@ -25,4 +25,4 @@ function NewProducts() {
   );
 }
 
-export default NewProducts;
+export default BrowseProducts;

src/pages/shop/sections/FilterSection.jsx

@@ -3,7 +3,7 @@ import { Link, useParams } from "react-router-dom";
 import SearchInput from "../../../components/shop/SearchInput";
 import SectionWrapper from "../../../components/shop/SectionWrapper";
 import SortItems from "../../../components/shop/SortItems";
-import { categories } from "../data";
+import { useSwagCategory } from "../../../hooks/Queries/shop/useSwagList";
 
 function FilterSection() {
   return (
@@ -27,22 +27,28 @@ function FilterSection() {
 }
 
 function Categories() {
+  const { data } = useSwagCategory();
   return (
     <div className="flex  gap-4 flex-wrap ">
-      {categories.map((item) => (
-        <CategoryItem key={crypto.randomUUID()} name={item.name} />
-      ))}
+      {Array.isArray(data) &&
+        data.map((item) => (
+          <CategoryItem
+            key={crypto.randomUUID()}
+            name={item.name}
+            slug={item.slug}
+          />
+        ))}
     </div>
   );
 }
 
-function CategoryItem({ name }) {
+function CategoryItem({ name, slug }) {
   const params = useParams();
-  const category = params.category === name;
+  const category = params.category === slug;
 
   return (
     <Link
-      to={`/shop/category/${name}`}
+      to={`/shop/category/${slug}`}
       className={`rounded-3xl flex items-center border shadow-sm py-2 px-4 ${category ? "bg-green-dark" : " hover:bg-gray-500/20 "}`}
     >
       <p
@@ -58,4 +64,5 @@ export default FilterSection;
 
 CategoryItem.propTypes = {
   name: PropTypes.string.isRequired,
+  slug: PropTypes.string.isRequired,
 };

src/pages/shop/sections/FeaturedProducts.jsx renamed to src/pages/shop/sections/NewArrivals.jsx

@@ -3,8 +3,8 @@ import ProductCard from "../../../components/shop/ProductCard";
 import SectionWrapper from "../../../components/shop/SectionWrapper";
 import { useSwagList } from "../../../hooks/Queries/shop/useSwagList";
 
-function FeaturedProducts() {
-  const { data: swagList, isSuccess } = useSwagList();
+function NewProducts() {
+  const { data: swagList } = useSwagList();
 
   return (
     <LandingWrapper title="New Arrivals">
@@ -15,8 +15,8 @@ function FeaturedProducts() {
           </h3>
         </section>
         <div className="mt-8 py-4 flex gap-4 overflow-x-scroll h-full w-full hr-scrollbar">
-          {isSuccess &&
-            swagList?.map((product) => (
+          {Array.isArray(swagList) &&
+            swagList.slice(0, 10).map((product) => (
               <div
                 className="min-w-[100%] sm:min-w-[50%] lg:min-w-[33%]  h-full"
                 key={product.id}
@@ -30,4 +30,4 @@ function FeaturedProducts() {
   );
 }
 
-export default FeaturedProducts;
+export default NewProducts;