message: [WFU] initial attempt at pagination
diff: @@ -22,31 +22,43 @@ import Notification from "../components/works_for_you/notification"
  import colors from "../../data/colors"
  -interface Props extends RelayProps {}
  +const PageSize = 10
  +const PageEndThreshold = 1000
  +
  +interface Props extends RelayProps {
  + relay: any;
  +}
  interface State {
  dataSource: ListViewDataSource | null
  sideMargin: number
  topMargin: number
  + fetchingNextPage: boolean
  + completed: boolean
  }
  export class WorksForYou extends React.Component<Props, State> {
  constructor(props) {
  super(props)
  - const edges = props.me.notifications_connection.edges
  - const dataSource = edges.length && new ListView.DataSource({
  - rowHasChanged: (row1, row2) => row1 !== row2,
  - }).cloneWithRows(edges.map((edge) => edge.node))
  + const edges = props.me.notifications.edges
  + const dataSource = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 })
  this.state = {
  dataSource,
  sideMargin: 20,
  topMargin: 0,
  + completed: false,
  + fetchingNextPage: false,
  }
  }
  componentDidMount() {
  + const notifications = this.props.me.notifications_connection.edges.map((edge) => edge.node)
  + this.setState({
  + dataSource: this.state.dataSource.cloneWithRows(notifications),
  + })
  +
  // update status in gravity
  NativeModules.ARTemporaryAPIModule.markNotificationsRead((error) => {
  if (error) {
  @@ -71,6 +83,27 @@ export class WorksForYou extends React.Component<Props, State> {
  this.setState({ sideMargin, topMargin })
  }
  + fetchNextPage() {
  + if (this.state.fetchingNextPage || this.state.completed) {
  + return
  + }
  + this.setState({ fetchingNextPage: true })
  + this.props.relay.setVariables({
  + totalSize: this.props.relay.variables.totalSize + PageSize,
  + }, (readyState) => {
  + if (readyState.done) {
  + const notifications = this.props.me.notifications_connection.edges.map((edge) => edge.node)
  + this.setState({
  + fetchingNextPage: false,
  + dataSource: this.state.dataSource.cloneWithRows(notifications)
  + })
  + if (!this.props.me.notifications_connection.pageInfo.hasNextPage) {
  + this.setState({ completed: true })
  + }
  + }
  + })
  + }
  +
  render() {
  const margin = this.state.sideMargin
  const containerMargins = { marginLeft: margin, marginRight: margin }
  @@ -97,6 +130,7 @@ export class WorksForYou extends React.Component<Props, State> {
  <View key={`${sectionID}-${rowID}`} style={styles.separator} /> as React.ReactElement<{}>
  }
  style={{marginTop: this.state.topMargin}}
  + onEndReached={ () => this.fetchNextPage()}
  />)
  }
  @@ -164,10 +198,16 @@ const styles = StyleSheet.create<Styles>({
  })
  export default Relay.createContainer(WorksForYou, {
  + initialVariables: {
  + totalSize: PageSize,
  + },
  fragments: {
  me: () => Relay.QL`
  fragment on Me {
  - notifications_connection(first: 10) {
  + notifications: notifications_connection(first: $totalSize) {
  + pageInfo {
  + hasNextPage
  + }
  edges {
  node {
  ${Notification.getFragment("notification")}
  @@ -181,6 +221,9 @@ export default Relay.createContainer(WorksForYou, {
  interface RelayProps {
  me: {
  notifications_connection: {
  + pageInfo: {
  + hasNextPage: boolean,
  + },
  edges: Array<{
  node: any | null,
  }>,
  