Implemented pagination for meetings.

33-minutes · Jul 10, 2018 · 4fd9bda · 4fd9bda
1 parent d11e975
commit 4fd9bda
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 39 deletions.
diff --git a/app/components/Meeting.js b/app/components/Meeting.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

diff --git a/app/components/Meetings.js b/app/components/Meetings.js
@@ -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)
+        }
+      }
+    `
   }
-`)
+);