35 lines
1.1 KiB
JavaScript
35 lines
1.1 KiB
JavaScript
import { useEffect } from "react";
|
|
import { connect } from "react-redux";
|
|
import { CircularProgress, List, ListItem, ListItemText, Alert } from "@mui/material";
|
|
import { loadRestaurants } from '../store/restaurants/actions';
|
|
|
|
export function RestaurantList({ loadRestaurants, restaurants, loading, loadError })
|
|
{
|
|
useEffect(() =>
|
|
{
|
|
loadRestaurants();
|
|
}, [loadRestaurants]);
|
|
return (
|
|
<>
|
|
{loading && <CircularProgress />}
|
|
{loadError && (<Alert severity="error">Restaurants could not be loaded.</Alert>)}
|
|
<List>
|
|
{restaurants.map(restaurant =>
|
|
(
|
|
<ListItem key={restaurant.id}>
|
|
<ListItemText>{restaurant.name}</ListItemText>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const mapStateToProps = state => ({
|
|
restaurants: state.restaurants.records,
|
|
loading: state.restaurants.loading,
|
|
loadError: state.restaurants.loadError,
|
|
});
|
|
const mapDispatchToProps = { loadRestaurants };
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(RestaurantList); |