// fetch 동기화 예시
import { useState, useEffect } from "react"
 
 
type Data ={
    url:string
}
 
export default function RenderAsFetch(){
  const [data, setData]=useState({url: "", lendering: false})
 
  useEffect(()=>{
 
    (async()=>{
        const data = await waitFetchData()
        setData({url: data[0].url , lendering:true})
    })()
 
  },[])
 
  if(!data.lendering){
    console.log("pending- wating image loading one");
    return <div>Loading...</div>
  }
  console.log("Render - Rendering Cat Image one")
 
 
  return <div>
    <img src={data.url} width={200} height={200}/>
    <SecondImgae isLendering={data.lendering} />
  </div>
}
 
function waitFetchData(){
    return new Promise<Data[]>(resolve => setTimeout(async()=>{
        const json = await fetch("https://api.thecatapi.com/v1/images/search")
        const data: Data[] = await json.json()
        return resolve(data)
    }, 1000))
}
 
type Prop ={
    isLendering: boolean
}
function SecondImgae(isLendering: Prop){
    const [data, setData]=useState({url: "", lendering: false})
 
    useEffect(()=>{
        if(isLendering){
            (async()=>{
                const data = await waitFetchData()
                setData({url: data[0].url , lendering:true})
            })()
        }
      },[isLendering])
 
    if(!data.lendering){
        console.log("pending- wating image loading two");
        return <div>Loading Second</div>
    }
    console.log("Render - Rendering Cat Image two")
    return <div>
        <img src={data.url} width={300} height={300}/>
    </div>
}

import { useState, useEffect } from 'react';
 
type State = {
  url: string;
  lendering: boolean;
};
 
export default function RenderThenFetch() {
  const [data, setData] = useState<State>({ url: '', lendering: false });
  const [secondData, setSecondData] = useState<State>({
    url: '',
    lendering: false,
  });
 
  useEffect(() => {
    Promise.all([fetchData(), fetchData()]).then(
      ([firstImage, secondImage]) => {
        setData({ url: firstImage.url, lendering: true });
        setSecondData({ url: secondImage.url, lendering: true });
      },
    );
  }, []);
 
  if (!data.lendering) {
    console.log('pending- wating image loading one');
    return <div>Loading...</div>;
  }
  console.log('Render - Rendering Cat Image one');
 
  return (
    <div>
      <img src={data.url} width={200} height={200} />
      <SecondImgae imageUrl={secondData} />
    </div>
  );
}
 
function SecondImgae({ imageUrl }: { imageUrl: State }) {
  console.log('Render - Rendering Cat Image two');
  return (
    <div>
      <img src={imageUrl.url} width={300} height={300} />
    </div>
  );
}
 
type Data = {
  url: string;
};
 
function fetchData() {
  return new Promise<Data>(resolve => {
    const data = fetch('https://api.thecatapi.com/v1/images/search')
      .then(json => json.json())
      .then(data => data[0] as Data);
    return resolve(data);
  });
}

// App.tsx
import React from 'react';
import UseSuspense from './components/UseSuspense';
 
export default function App() {
  return (
    <React.Suspense fallback={<div>Loading.....</div>}>
      <UseSuspense />
    </React.Suspense>
  );
}

// UseSuspense.tsx
// react의 공식 문서를 참고하여 작성하였습니다.
/*
이는 Suspense와 이를 둘러싼 Data Fetching에 대한 개념적 모델을 구현한 프로토타입이므로
실제로 React가 이렇게 Suspense와 Data Fetching을 처리하지는 않는다는 것을 주의해야 합니다.
*/
type Data = {
  id: string;
  url: string;
  width: number;
  height: number;
};
 
export default function UseSuspense() {
  const catImages = use(
    fetchData('https://api.thecatapi.com/v1/images/search?limit=10`'),
  );
  console.log(catImages);
  return (
    <div>
      {catImages.map((image: Data) => (
        <img
          key={image.id}
          src={image.url}
          width={500}
          height={500}
          alt={`Cat image: ID is a ${image.id}`}
        />
      ))}
    </div>
  );
}
 
// callback 함수가 반환하는 promise에 따라 Suspense가 동작합니다.
function use(promise: any) {
  if (promise.status === 'fulfilled') {
    return promise.value;
  } else if (promise.status === 'rejected') {
    throw promise.reason;
  } else if (promise.status === 'pending') {
    throw promise;
  } else {
    promise.status = 'pending';
    promise.then(
      (result: any) => {
        promise.status = 'fulfilled';
        promise.value = result;
      },
      (reason: any) => {
        promise.status = 'rejected';
        promise.reason = reason;
      },
    );
    throw promise;
  }
}
 
// 데이터 가져오는  함수
const cache = new Map();
function fetchData(url: string) {
  if (!cache.has(url)) {
    cache.set(url, getData(url));
  }
  return cache.get(url);
}
 
async function getData(url: string) {
  try {
    await new Promise(resolve => {
      setTimeout(resolve, 3000);
    });
    const json = await fetch(url);
    const data = await json.json();
    return data;
  } catch (err) {
    return err;
  }
}