infiniteScroll.js

import React, { useState, useEffect } from 'react';
import {PageItem} from "./recruit/recruitList";
import InfiniteScrollStyles from './infiniteScroll.module.css'
import {ChannelItem} from "./channel/channelList";

function InfiniteScroll(props){
    const [items, setItems] = useState([]);
    const [minId, setMinId] = useState(0);
    const [minDate, setMinDate] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const [search, setSearch] =useState([]);

    const page = props.pagename;
    const queryString1 = props.queryString1;
    const queryString2 = props.queryString2;
    const min = props.min;
    
    const initialFetchData = async ()=>{
        try{
            const response = await fetch(`/api/${page}${queryString1}`);
            const jsonData = await response.json();
            if(page==='channels'){
                setMinDate(jsonData['minDate']);
                const newData = jsonData[page];
                if (newData.length > 0) {
                  const components = [];
                  for (let i = 0; i < newData.length; i += 2) {
                    const component = (
                     
                        <div className={InfiniteScrollStyles.itemContainer}>
                        <div className={InfiniteScrollStyles.firstitem}>
                        <ChannelItem props={newData[i]} /></div>
                        <div className={InfiniteScrollStyles.seconditem}>{i + 1 < newData.length && <ChannelItem props={newData[i + 1]} />}</div>
                        </div>
                      
                    );
                    components.push(component);
                  }
                  setItems((prevItem) => [...prevItem, ...components]);
                }
              }else if(page === 'recruits'){
                setMinId(jsonData['minId']);
                const newData = jsonData[page];
                if(newData.length > 0) {    
                    const components = newData.map((item) => (
                        <PageItem data={item}/>
                    ));
                    
                    setItems(prevItem => [...prevItem, ...components]);
                }
            }  else{
                setMinId(jsonData['minId']);
                const newData = jsonData['recruits'];
                if(newData.length > 0) {    
                    const components = newData.map((item) => (
                        <PageItem data={item}/>
                    ));
    
                    setSearch([]);
                    setSearch(prevItem => [...prevItem, ...components]);
                }
            }

        } catch(error){
            console.log('Error during fetch:', error);
        }
    }

    useEffect(() => {
        initialFetchData(); // 최초 렌더링 시에 데이터 가져오기
    }, [page, queryString1, queryString2]);

    const fetchData = async ()=>{
        if (isLoading || minId === 0 || minDate === null) return;

        setIsLoading(true);


        try{    

            if(page==='channels'){
                const response = await fetch(`/api/${page}?${min}=${minDate}${queryString2}`);
                const jsonData = await response.json();
                setMinDate(jsonData['minDate']);
                const newData = jsonData[page];
                if (newData.length > 0) {
                  const components = [];
                  for (let i = 0; i < newData.length; i += 2) {
                    const component = (
                     
                        <div className={InfiniteScrollStyles.itemContainer}>
                        <div className={InfiniteScrollStyles.firstitem}>
                        <ChannelItem props={newData[i]} /></div>
                        <div className={InfiniteScrollStyles.seconditem}>{i + 1 < newData.length && <ChannelItem props={newData[i + 1]} />}</div>
                        </div>
                      
                    );
                    components.push(component);
                    console.log('ne', newData[i]);
                  }
                  setItems((prevItem) => [...prevItem, ...components]);
                }
            }else if(page==='recruits'){ 
                const response = await fetch(`/api/${page}?${min}=${minId}${queryString2}`);
                const jsonData = await response.json();
                setMinId(jsonData['minId']); 
                const newData = jsonData[page];
                if(newData.length > 0) {    
                    const components = newData.map((item) => (
                        <PageItem data={item}/>
                    ));
    
                    setItems(prevItem => [...prevItem, ...components]);
                }
            } else{
                const response = await fetch(`/api/${page}?${min}=${minId}${queryString2}`);
                const jsonData = await response.json();
                setMinId(jsonData['minId']);
                const newData = jsonData["recruits"];
                if(newData.length > 0) {    
                    const components = newData.map((item) => (
                        <PageItem data={item}/>
                    ));
    
                    setSearch(prevItem => [...prevItem, ...components]);
                }
            }

        } catch(error){
            console.log('Error during fetch:', error);
        } finally{
            setIsLoading(false);
        }
    };

    // 스크롤 이벤트 감지
    const handleScroll = () => {
        if (
            window.innerHeight + window.scrollY + 100 >=
            document.body.offsetHeight
            && !isLoading
        ) {
            // 스크롤이 페이지 하단에 도달하면 데이터를 가져옴
            fetchData();
        }
    };

    useEffect(() => {
        // 컴포넌트가 마운트될 때 한 번만 이벤트 리스너 등록
        window.addEventListener('scroll', handleScroll);

        // 컴포넌트가 언마운트될 때 이벤트 리스너 제거
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    },);

    return (
        <div className="itemList">
            {page === "recruits" || page === "channels" ?(
                items
            ):(
                search
            )}

            {/* 로딩 중일 때 로딩 표시 */}
            {isLoading && <div className={InfiniteScrollStyles.loading}>Loading...</div>}
        </div>
    );
};

export default InfiniteScroll;