feat: implement item icon loading in InventoryModal and add API function to fetch item icons

src/components/modal/InventoryModal.tsx

@@ -1,19 +1,60 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Inventory, InvItemInteraction, Pet } from '../../types/Pet';
-import { putPetItemInteract } from '../../services/api/api';
+import { putPetItemInteract, getItemIcon } from '../../services/api/api';
+import { Loader2 } from 'lucide-react';
 
 interface InventoryModalProps {
   inventory: Inventory;
   petId: string;
   onClose: () => void;
-  onPetUpdate: (updatedPet: Pet) => void;  // Add this prop
+  onPetUpdate: (updatedPet: Pet) => void;
 }
 
 export default function InventoryModal({ inventory, petId, onClose, onPetUpdate }: InventoryModalProps) {
-  const capacity = inventory.capacity; // Expected to be 20 for 4 rows x 5 cols
+  const capacity = inventory.capacity;
   const items = inventory.items;
   const gridSlots = Array.from({ length: capacity }, (_, i) => items[i]);
   const [selectedItemIndex, setSelectedItemIndex] = useState<number | null>(null);
+  const [itemIcons, setItemIcons] = useState<Map<number, string>>(new Map());
+  const [loadingIcons, setLoadingIcons] = useState<Set<number>>(new Set());
+
+  useEffect(() => {
+    const fetchItemIcons = async () => {
+      const newIcons = new Map<number, string>();
+      const loadingItems = new Set<number>();
+
+      for (const itemId of items) {
+        if (itemId !== undefined && !itemIcons.has(itemId)) {
+          loadingItems.add(itemId);
+        }
+      }
+      setLoadingIcons(loadingItems);
+
+      for (const itemId of loadingItems) {
+        if (itemId !== undefined && !itemIcons.has(itemId)) {
+          try {
+            const blob = await getItemIcon(itemId);
+            const imageUrl = URL.createObjectURL(blob);
+            newIcons.set(itemId, imageUrl);
+          } catch (error) {
+            console.error(`Failed to load icon for item ${itemId}:`, error);
+          } finally {
+            loadingItems.delete(itemId);
+            setLoadingIcons(new Set(loadingItems));
+          }
+        }
+      }
+
+      setItemIcons(new Map([...itemIcons, ...newIcons]));
+    };
+
+    fetchItemIcons();
+
+    return () => {
+      // Cleanup object URLs on unmount
+      itemIcons.forEach(url => URL.revokeObjectURL(url));
+    };
+  }, [items]);
 
   const handleItemClick = (index: number) => {
     if (selectedItemIndex === index || gridSlots[index] === undefined) {
@@ -47,15 +88,27 @@ export default function InventoryModal({ inventory, petId, onClose, onPetUpdate
           </button>
         </div>
         <div className="grid grid-cols-5 grid-rows-4 gap-4">
-          {gridSlots.map((item, index) => (
+          {gridSlots.map((itemId, index) => (
             <div
               key={index}
               onClick={() => handleItemClick(index)}
-              className={`border rounded p-4 flex items-center justify-center h-16
-                ${item !== undefined ? 'bg-gray-700 cursor-pointer' : 'bg-gray-800 text-gray-500'}
+              className={`border rounded p-2 flex items-center justify-center h-24 w-24
+                ${itemId !== undefined ? 'bg-gray-700 cursor-pointer' : 'bg-gray-800 text-gray-500'}
                 ${selectedItemIndex === index ? 'border-blue-500 animate-pulse' : 'border-gray-600'}`}
             >
-              {item !== undefined ? <span>{item}</span> : <span className="text-gray-500">Empty</span>}
+              {itemId !== undefined ? (
+                loadingIcons.has(itemId) ? (
+                  <Loader2 className="w-6 h-6 animate-spin" />
+                ) : (
+                  <img
+                    src={itemIcons.get(itemId)}
+                    alt={`Item ${itemId}`}
+                    className="w-full h-full object-contain"
+                  />
+                )
+              ) : (
+                <span className="text-gray-500">Empty</span>
+              )}
             </div>
           ))}
         </div>

src/services/api/api.ts

@@ -50,4 +50,14 @@ export async function postAllocatePetSkill(petId: string, skillId: number): Prom
 export async function putPetItemInteract(petId: string, itemId: number, inter: InvItemInteraction): Promise<Pet> {
   const response = await api.put<Pet>(`/api/v1/inventory/${petId}/${itemId}/${inter.toLowerCase()}`);
   return response.data;
+}
+
+export async function getItemIcon(itemId: number): Promise<Blob> {
+  const response = await api.get<Blob>(`/api/v1/gamedata/item/icon/${itemId}`, {
+    responseType: 'blob',
+    headers: {
+      Accept: 'image/png'
+    }
+  });
+  return response.data;
 }

src/services/api/types.ts

@@ -29,4 +29,5 @@ export interface RequestOptions {
   headers?: Record<string, string>;
   params?: Record<string, any>;
   timeout?: number;
+  responseType? : 'json' | 'blob' | 'text';
 }