import React from 'react';
import FeedPhotoItems from './FeedPhotoItems';
import useFetch from '../../Hooks/useFetch';
import { PHOTOS_GET } from '../../api';
import Error from '../Helper/Error';
import Loading from '../Helper/Loading';
import styles from './FeedPhotos.module.css'

const FeedPhotos = ({user, page, setModalPhoto, setInfinite}) => {

const {data, loading, error, request} = useFetch();

React.useEffect(() => {
     async function fetchPhotos(){
        const total = 6;
        const {url, options} = PHOTOS_GET({page, total, user}); 
        const {response, json} = await request(url, options);
        if(response && response.ok && json.length < total) setInfinite(false);
              
     }
    fetchPhotos();
}, [request, user, page, setInfinite]);

    if(error) return <Error error={error}/>
    if(loading) return <Loading/>
    if(data) 
    return (
    <ul className={`${styles.feed} animeLeft`}>
        {data.map((photo) =>  (
            <FeedPhotoItems setModalPhoto={setModalPhoto} key={photo.id} photo={photo}/>
        ))}
       
    </ul>
    );
    else return null;
};

export default FeedPhotos;
