import React from 'react'
import Genre from './Genre';
import { container } from 'reaxtor-redux';

function GenreList({ genres = [] } = {}) {
    return (
        <div className='genre-grid'>
            {genres.map((genre, index) => (
                <Genre key={`${index}: ${genre.name}`} data={genre}/>
            ))}
        </div>
    );
}

function renderLoading(props) {
    return (
        <div className='genre-grid'>
            <span>Loading Genres...</span>
        </div>
    );
}

function mapStateToFragment(genrelist = []) {
    return `{
        length,
        [0...${genrelist.length}]: ${
            Genre.fragment()
        }
    }`;
}

function mapFragmentToProps(genrelist) {
    return { genres: genrelist };
}

export default container(
    mapStateToFragment,
    mapFragmentToProps
)(GenreList);
