resources/js/components/episodes/List.js

   1 import moment from 'moment';
   2 import PropTypes from 'prop-types';
   3 import React from 'react';
   4
   5 import Item from './Item';
   6
   7 const List = ({ episodes, onAddRestream, onApply, onEditRestream }) => {
   8         const grouped = React.useMemo(() => episodes.reduce((groups, episode) => {
   9                 const day = moment(episode.start).format('YYYY-MM-DD');
  10                 return {
  11                         ...groups,
  12                         [day]: [
  13                                 ...groups[day] || [],
  14                                 episode,
  15                         ],
  16                 };
  17         }, {}), [episodes]);
  18
  19         return <div className="episodes-list">
  20                 {Object.entries(grouped).map(([day, group]) => <div key={day}>
  21                         <h2 className="text-center episodes-group-heading">
  22                                 {moment(day).format('dddd, L')}
  23                         </h2>
  24                         {group.map(episode =>
  25                                 <Item
  26                                         episode={episode}
  27                                         onAddRestream={onAddRestream}
  28                                         onApply={onApply}
  29                                         onEditRestream={onEditRestream}
  30                                         key={episode.id}
  31                                 />
  32                         )}
  33                 </div>)}
  34         </div>;
  35 };
  36
  37 List.propTypes = {
  38         episodes: PropTypes.arrayOf(PropTypes.shape({
  39                 start: PropTypes.string,
  40         })),
  41         onAddRestream: PropTypes.func,
  42         onApply: PropTypes.func,
  43         onEditRestream: PropTypes.func,
  44 };
  45
  46 export default List;