fix: fix small image undefined bug

Author: satnaing

app/(routes)/categories/[category]/layouts/BooksContainer.tsx

@@ -6,6 +6,7 @@ import Pagination from "app/components/Pagination"
 import CardSkeletons from "@/loading-ui/CardSkeletons"
 import scrollToTop from "@/utils/scrollToTop"
 import { getBooksByCategory } from "@/lib/api"
+import { getOptimizedImage } from "@/utils/utilFuncs"
 import { Book } from "@/types/Book"
 
 type Props = {
@@ -39,6 +40,7 @@ export default function BooksContainer({
       <div className="cards-container">
         {data.data.map(({ id, attributes }) => {
           const { slug, price, title, image } = attributes
+
           return (
             <ItemCard
               key={id}
@@ -47,7 +49,7 @@ export default function BooksContainer({
               price={price}
               slug={slug}
               title={title}
-              image={image.data[0].attributes.formats.small.url}
+              image={getOptimizedImage(image)}
             />
           )
         })}

app/(routes)/wishlist/components/WishlistTable.tsx

@@ -6,6 +6,7 @@ import { useQuery } from "@tanstack/react-query"
 import CancelIcon from "@/icons/CancelIcon"
 import LoadingIcon from "@/icons/LoadingIcon"
 import EmptyBoxIcon from "@/icons/EmptyBoxIcon"
+import { getOptimizedImage } from "@/utils/utilFuncs"
 import { getBooksByIds } from "@/lib/api"
 import { useMounted } from "@/hooks"
 import {
@@ -31,7 +32,7 @@ const fetchBooks = async (wishlistIds: number[], wishlist: WishlistItem[]) => {
       return {
         id: item.id,
         slug: slug,
-        image: image.data[0].attributes.formats.small.url,
+        image: getOptimizedImage(image),
         title: title,
         price: price,
         inStock: in_stock,

app/components/BookRow.tsx

@@ -3,6 +3,7 @@
 import { useQuery } from "@tanstack/react-query"
 import ItemCard from "@/components/ItemCard"
 import CardSkeletons from "@/loading-ui/CardSkeletons"
+import { getOptimizedImage } from "@/utils/utilFuncs"
 import { getBooksBySlug } from "@/lib/api"
 
 type Props = {
@@ -37,7 +38,7 @@ export default function BookRow({ slug }: Props) {
             price={price}
             slug={slug}
             title={title}
-            image={image.data[0].attributes.formats.small.url}
+            image={getOptimizedImage(image)}
           />
         )
       })}

app/components/SearchDialog.tsx

@@ -6,6 +6,7 @@ import Image from "next/image"
 import * as Dialog from "@radix-ui/react-dialog"
 import { useQuery } from "@tanstack/react-query"
 import SearchIcon from "@/icons/SearchIcon"
+import { getOptimizedImage } from "@/utils/utilFuncs"
 import { getBooksByTitle } from "@/lib/api"
 import { useDebounce } from "@/hooks"
 import { Book } from "@/types/Book"
@@ -110,7 +111,7 @@ const SearchDialog = () => {
                       >
                         <div className="relative h-32 w-28 overflow-hidden">
                           <Image
-                            src={image.data[0].attributes.formats.small.url}
+                            src={getOptimizedImage(image)}
                             alt={title}
                             fill
                             sizes="

lib/hooks/useCart.ts

@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query"
+import { getOptimizedImage } from "@/utils/utilFuncs"
 import { getBooksByIds } from "@/lib/api"
 import { useCartStore } from "@/store"
 
@@ -46,7 +47,7 @@ export const useCart = () => {
         title,
         price,
         slug,
-        image: image.data[0].attributes.formats.small.url,
+        image: getOptimizedImage(image),
         quantity: qtyMap.get(item.id) || 1,
         timestamp: timestampMap.get(item.id) || 1,
       }

lib/types/Book.d.ts

@@ -87,7 +87,7 @@ export interface ImageAttributes {
 }
 
 export interface Formats {
-  small: Small
+  small?: Small
   thumbnail: Small
 }
 

lib/utils/utilFuncs.ts

@@ -1,3 +1,5 @@
+import { Image } from "@/types/Book"
+
 export const defaultStroke = (className: string): string =>
   new RegExp("stroke-*", "g").test(className) ? "" : "stroke-2 stroke-skin-dark"
 
@@ -10,3 +12,6 @@ export const generateUniqueArray = (num: number) => {
 
   return Array.from(numbers)
 }
+
+export const getOptimizedImage = (image: Image) =>
+  image.data[0].attributes.formats.small?.url || image.data[0].attributes.url