Permalink
Browse files

Implemented pagination for meetings.

  • Loading branch information...
dblock committed Jul 10, 2018
1 parent d11e975 commit 4fd9bda8580ee2bad52a0c831b54a51957840bcb
Showing with 101 additions and 39 deletions.
  1. +22 −1 app/components/Meeting.js
  2. +79 −38 app/components/Meetings.js
@@ -4,15 +4,31 @@ import moment from 'moment';
import twix from 'twix';
import Icon from 'react-native-vector-icons/Ionicons';
import { createFragmentContainer, graphql } from 'react-relay';
import environment from '../Environment'
import DeleteMeetingMutation from '../mutations/DeleteMeetingMutation';
import PropTypes from 'prop-types';

class Meeting extends React.Component {
removeMeeting() {
DeleteMeetingMutation.commit(this.props.user.id, {
environment,
input: {
id: this.props.meeting.id
}
}).then(response => {

}).catch(error => {
alert(error.message);
});
}

deleteItem() {
Alert.alert(
'Delete Meeting',
'Are you sure?',
[
{ text: 'No', style: 'cancel' },
{ text: 'Yes', onPress: () => this.props.deleteMethod() },
{ text: 'Yes', onPress: () => this.removeMeeting() },
],
{ cancelable: true }
)
@@ -69,6 +85,11 @@ const styles = StyleSheet.create({
}
});

Meeting.propTypes = {
user: PropTypes.object,
meeting: PropTypes.object
};

export default createFragmentContainer(Meeting, graphql`
fragment Meeting_meeting on Meeting {
id
@@ -1,42 +1,39 @@
import React from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import { FlatList, View, Text, StyleSheet, ScrollView } from 'react-native';
import Meeting from './Meeting';
import { createFragmentContainer, graphql } from 'react-relay';
import DeleteMeetingMutation from '../mutations/DeleteMeetingMutation';
import environment from '../Environment'
import { createPaginationContainer, graphql } from 'react-relay';
import PropTypes from 'prop-types';
import uuid from 'uuid/v4';

class Meetings extends React.Component {
removeMeetingById(id) {
DeleteMeetingMutation.commit(this.props.user.id, {
environment,
input: {
id: id
}
}).then(response => {

}).catch(error => {
alert(error.message);
});
renderMeeting(val) {
if (val.item.node) {
return <Meeting key={val.item.node.__id} meeting={val.item.node} user={this.props.user} />
}
}

render() {
let meetings = this.props.user.meetings.edges.map(({node}) => {
if (node) {
return <Meeting key={node.__id} meeting={node} deleteMethod={ () => this.removeMeetingById(node.__id) } />
}
})

if (meetings.length == 0) {
meetings.push(<Text style={{ padding: 20 }} key={0}>Press the record button below to record a meeting.</Text>);
_loadMore() {
if (! this.props.relay.hasMore() || this.props.relay.isLoading()) {
return;
}

this.props.relay.loadMore(
10,
error => {
// TODO: warn
},
);
}

render() {
return (
<View style={styles.container}>
<ScrollView>
{ meetings }
</ScrollView>
</View>
<FlatList
data={this.props.user.meetings.edges}
// bug: https://github.com/33-minutes/33-minutes-app/issues/5
keyExtractor={(item) => { if (item.node) { return item.node.__id } else { return uuid() } } }
renderItem={(item) => this.renderMeeting(item)}
onEndReached={() => this._loadMore() }
/>
);
}
}
@@ -53,15 +50,59 @@ Meetings.propTypes = {
user: PropTypes.object
};

export default createFragmentContainer(Meetings, graphql`
fragment Meetings_user on User {
id
meetings(last: 10) @connection(key: "Meetings_meetings", filters: []) {
edges {
node {
...Meeting_meeting
export default createPaginationContainer(
Meetings,
{
user: graphql`
fragment Meetings_user on User
@argumentDefinitions(
count: { type: "Int", defaultValue: 10 }
cursor: { type: "String" }
) {
id
meetings(
first: $count
after: $cursor
) @connection(key: "Meetings_meetings", filters: []) {
edges {
node {
id
...Meeting_meeting
}
}
pageInfo {
hasNextPage
}
}
}
}
`,
},
{
direction: 'forward',
getConnectionFromProps(props) {
return props.user && props.user.meetings;
},
getFragmentVariables(prevVars, totalCount) {
return {
...prevVars,
count: totalCount,
};
},
getVariables(props, {count, cursor}, fragmentVariables) {
return {
count,
cursor
};
},
query: graphql`
query MeetingsPaginationQuery(
$count: Int!
$cursor: String
) {
user {
...Meetings_user @arguments(count: $count, cursor: $cursor)
}
}
`
}
`)
);

0 comments on commit 4fd9bda

Please sign in to comment.