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, 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                                         onEditRestream={onEditRestream}
  29                                         key={episode.id}
  30                                 />
  31                         )}
  32                 </div>)}
  33         </div>;
  34 };
  35
  36 List.propTypes = {
  37         episodes: PropTypes.arrayOf(PropTypes.shape({
  38                 start: PropTypes.string,
  39         })),
  40         onAddRestream: PropTypes.func,
  41         onEditRestream: PropTypes.func,
  42 };
  43
  44 export default List;