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 my-5">{moment(day).format('dddd, L')}</h2>
  22                         {group.map(episode =>
  23                                 <Item
  24                                         episode={episode}
  25                                         onAddRestream={onAddRestream}
  26                                         onEditRestream={onEditRestream}
  27                                         key={episode.id}
  28                                 />
  29                         )}
  30                 </div>)}
  31         </div>;
  32 };
  33
  34 List.propTypes = {
  35         episodes: PropTypes.arrayOf(PropTypes.shape({
  36                 start: PropTypes.string,
  37         })),
  38         onAddRestream: PropTypes.func,
  39         onEditRestream: PropTypes.func,
  40 };
  41
  42 export default List;