import { useEffect } from "react";
import { connect } from "react-redux";
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import { loadRestaurants } from '../store/restaurants/actions';

export function RestaurantList({ loadRestaurants, restaurants })
{
    useEffect(() => 
    {
        loadRestaurants();
    }, [loadRestaurants]);
    return (
        <List>
            {restaurants.map(restaurant =>
            (
                <ListItem key={restaurant.id}>
                    <ListItemText>{restaurant.name}</ListItemText>
                </ListItem>
            ))}
        </List>
    );
};

const mapStateToProps = state => ({
    restaurants: state.restaurants.records,
});
const mapDispatchToProps = { loadRestaurants };

export default connect(mapStateToProps, mapDispatchToProps)(RestaurantList);