Skip to content

Instantly share code, notes, and snippets.

@RyanCCollins
Created October 11, 2016 23:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RyanCCollins/1acac08866710b924569e7024b0e4611 to your computer and use it in GitHub Desktop.
Save RyanCCollins/1acac08866710b924569e7024b0e4611 to your computer and use it in GitHub Desktop.
// import dependencies here
class EventsContainer extends Component {
constructor() {
super();
this.handleMore = this.handleMore.bind(this);
}
handleMore() {
const {
actions,
refetch,
} = this.props;
actions.eventsIncrementCurrent();
refetch();
}
render() {
const {
events,
loading,
eventsCount,
} = this.props;
return (
<Box align="center" align="center">
<Hero size="small" justify="center" align="center">
<Box style={{ width: '100%' }} align="center" justify="center">
<CalendarIcon align="center" size="large" />
<Heading align="center">
Meetup Events
</Heading>
<Button href="/create-event" label="Create Event" onClick={e => e} />
</Box>
</Hero>
<Section>
<Heading align="center">
Event List
</Heading>
{loading &&
<LoadingIndicator isLoading={loading} />
}
{events && events.length > 0 &&
<List
onMore={() => events.length + 1 >= eventsCount ? null : this.handleMore()}
>
<Box align="center" justify="center">
{events.map((event, i) =>
<ListItem key={i}>
<EventInfo event={event} />
</ListItem>
)}
</Box>
</List>
}
</Section>
</Box>
);
}
}
EventsContainer.propTypes = {
loading: PropTypes.bool.isRequired,
eventsCount: PropTypes.number,
events: PropTypes.array,
current: PropTypes.number.isRequired,
refetch: PropTypes.func.isRequired,
actions: PropTypes.object.isRequired,
};
// mapStateToProps :: {State} -> {Props}
const mapStateToProps = (state) => ({
current: state.eventsContainer.current,
});
// mapDispatchToProps :: Dispatch -> {Action}
const mapDispatchToProps = (dispatch) => ({
actions: bindActionCreators(
EventsActionCreators,
dispatch
),
});
const getEventsQuery = gql`
query getEvents($first: Int) {
events(first: $first) {
id
name
type: event_type
message
location
startDate: start_date
endDate: end_date
guests {
name
}
host {
id
name
}
}
eventsCount
}
`;
const ContainerWithData = graphql(getEventsQuery, {
options: (ownProps) => ({
variables: {
first: ownProps.current,
},
}),
props: ({ data: { events, eventsCount, loading, refetch } }) => ({
loading,
events,
eventsCount,
refetch,
}),
})(EventsContainer);
export default connect(
mapStateToProps,
mapDispatchToProps
)(ContainerWithData);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment