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 }) => {
   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 episode={episode} key={episode.id} />
  24                         )}
  25                 </div>)}
  26         </div>;
  27 };
  28
  29 List.propTypes = {
  30         episodes: PropTypes.arrayOf(PropTypes.shape({
  31                 start: PropTypes.string,
  32         })),
  33 };
  34
  35 export default List;