]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/episodes/List.js
clean up manual tracking
[alttp.git] / 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;