Skip to content

Instantly share code, notes, and snippets.

@josercruz01

josercruz01/relay-new-candidates-component.jsx Secret

Created February 19, 2016 17:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save josercruz01/ebcb3413f0855ccd2041 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save josercruz01/ebcb3413f0855ccd2041 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. josercruz01 revised this gist Feb 19, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion relay-new-candidates-component.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -41,7 +41,7 @@ class NewCandidates extends React.Component {

    export default Relay.createContainer(NewCandidates, {
    initialVariables: {
    pageSize: 30
    pageSize: pageSize
    },
    fragments: {
    viewer: () => Relay.QL`
  2. josercruz01 created this gist Feb 19, 2016.
    60 changes: 60 additions & 0 deletions relay-new-candidates-component.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    import Relay from "react-relay";
    import React from "react";
    import ReactList from "react-list";

    const pageSize = 30;

    class NewCandidates extends React.Component {

    constructor(props){
    super(props);
    this.renderRow = this.renderRow.bind(this);
    }

    renderRow(key, index) {
    var candidates = this.props.viewer.newCandidates.edges;

    // End of the list reached. Increase page size. Relay
    // will fetch only the required data to fill the new
    // page size.
    if (index === candidates.length - 1) {
    this.props.relay.setVariables({
    pageSize: candidates.length + pageSize
    });
    }

    var candidate = candidates[index].node;
    return (
    <li key={ key }> Id: { candidate.recordId }, Name: { candidate.name }</li>
    );
    }

    render() {
    var candidates = this.props.viewer.newCandidates;
    return (
    <ul style={{ height: 200, overflowY: "scroll"}}>
    <ReactList itemRenderer={ this.renderRow} length={ candidates.edges.length }/>
    </ul>
    );
    }
    }

    export default Relay.createContainer(NewCandidates, {
    initialVariables: {
    pageSize: 30
    },
    fragments: {
    viewer: () => Relay.QL`
    fragment on User {
    newCandidates(first: $pageSize) {
    edges {
    node {
    recordId,
    name
    }
    }
    }
    }
    `
    }
    });