app/src/pages/home/components/SearchCom/index.tsx

import { useEffect, useState, useRef } from "react";
import { Input, Space, Button, Image, Result } from 'antd-mobile';
import { UpCircleOutline } from 'antd-mobile-icons'
import { getSearchCustomService, getItemImageCustomService } from './service';
import ChatData from './data.json';
import api from '@/axios/apiNames';

import './style.less';

interface Item {
    id: string;
    item: string;
}

interface ImageItem {
  url: string;
  from: string;
  id: string;
  link?: string;
  prompt?: string;
  label?: string;
}

const demoSrc =
  "https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=60";

function SearchCom() {
    const [images, setImages] = useState<ImageItem[]>([]);

    const getClosetAll = () => {
        return new Promise((resolve, reject) => {
            const closetAll = ChatData["item in the closet"].map((item: Item) => { return getItemImageCustomService(item?.id)
            });

            Promise.all(closetAll).then((result) => {
                const results: ImageItem[] = result.map((res) => {
                    const data = res?.data[0];
                    const item = 
                        {
                            id: data?.id,
                            url: (data?.attributes?.images?.data[0]?.attributes?.url) || '',
                            from: 'closet',
                            link: ''
                        };
                    item.url = `${'http://106.52.238.44:8080'}${item.url}`;
                    return item;
                })
                resolve(results);
            }).catch((err) => reject(err))
        })
    }

    const getNotClosetAll = () => {
        const notClosetAll = ChatData["item not in the closet"].map((key: string) => { return getSearchCustomService(key)});
        return new Promise((resolve, reject) => {
            Promise.all(notClosetAll).then((result) => {
                const results: ImageItem[] = []
                result.forEach((res) => {
                    const data = res?.organic_results[2];
                    if (data) {
                        if (data?.related_images) {
                            const item = 
                            {
                                id: data?.related_images?.[0]?.link || '',
                                url: data?.related_images?.[0]?.image || '',
                                from: 'not closet',
                                link: data?.related_images[0]?.link || '',
                            };
                            results.push(item);
                        } else if(data?.thumbnail) {
                            const item = 
                            {
                                id: data?.link || '',
                                url: data?.thumbnail || '',
                                from: 'not closet',
                                link: data?.link || '',
                            };
                            results.push(item);
                        }
                    }
                })
                resolve(results);
            }).catch((err) => reject(err));
        });
    }

    useEffect(() => {
        const getAllData = async () => {
            const closetAllData = await getClosetAll();
            const notClosetAllData = await getNotClosetAll();
            setImages([...images, ...closetAllData as ImageItem[], ...notClosetAllData as ImageItem[]]);
        }
        getAllData();
    }, []);

    return (<>
       <div className="search-container">
       <div className="search-container-image">     
       <Space wrap> 
            {
            images.map((img) => <Image key={img.id} src={img.url} />)
            }
        </Space>
        </div>
       </div>
    </>)
}

export default SearchCom;