Feedreader

Posts.jsx

import React from "react";
import { Query } from "react-apollo";
import gql from "graphql-tag";
import { Redirect } from "react-router";
import TagSelect from "./TagSelect";

const Q = gql`
  query allPosts($cursor: String, $tags: String, $id: ID) {
    allPosts(username: "jmn", tags: $tags, id: $id, first: 1, after: $cursor) {
      edges {
        node {
          id
          title
          content
        }
      }
      pageInfo {
        startCursor
        endCursor
      }
    }
  }
`;

export const updQuery = (previousResult, { fetchMoreResult }) => {
  //  const newEdges = fetchMoreResult.allPosts.edges;
  const pageInfo = fetchMoreResult.allPosts.pageInfo;
  return {
    allPosts: {
      __typename: fetchMoreResult.allPosts.__typename,
      edges: fetchMoreResult.allPosts.edges,
      pageInfo
    }
  };
};

class Posts extends React.Component {
  state = {
    tags: ""
  };

  handleCompleted = data => {
    console.log("completed", this.props);
    if (this.props.data && !this.props.data.loading) {
      this.props.history.push(
        "/post/" + this.props.data.allPosts.edges[0].node.id
      );
    }
  };
  handleTagSelect = event => {
    console.log("select change");
    this.setState({ tags: event.target.value });
  };

  handleNext = (fetchMore, data) => {
    console.log("next, tags:", this.state.tags);
    fetchMore({
      variables: {
        cursor: data.allPosts.pageInfo.endCursor,
        tags: this.state.tags
      },
      updateQuery: updQuery
    });
    window.scrollTo(0, 0);
    //window.scrollTo(0, this.myRef.current.offsetTop);
    //this.props.history.push("#!/" + data.allPosts.pageInfo.endCursor);
  };

  renderRedirect = data => {
    if (!this.props.match.params.id) {
      return (
        <Redirect
          to={
            "/post/" +
            data.allPosts.edges[0].node.id +
            "&next=" +
            data.allPosts.pageInfo.endCursor
          }
        />
      );
    }
  };

  render() {
    return (
      <Query
        query={Q}
        /*     onCompleted={data => {
          if (
            !(this.props.match.params.id === data.allPosts.edges[0].node.id)
          ) {
            this.props.history.push("/post/" + data.allPosts.edges[0].node.id);
            console.log("pushing", data.allPosts.edges[0].node.id);
          }
        }} */
        variables={{
          //id: this.props.match.params.id,
          //cursor: this.data.allPosts.pageInfo.endCursor,
          tags: this.state.tags
        }}
      >
        {({ loading, error, data, fetchMore }) => {
          if (loading) return <p>Loading...</p>;
          if (error) return <p>Error :(</p>;
          if (!data.allPosts) return <p>Error 2</p>;
          if (data.allPosts.edges.length === 0) return <p>No data</p>;
          return (
            <div>
              {this.renderRedirect(data)}
              <TagSelect
                onChange={this.handleTagSelect}
                selected={this.state.tags}
              />
              <button
                className="top-button btn btn-primary btn-lg mt-2"
                onClick={() => this.handleNext(fetchMore, data)}
              >
                Next
              </button>
              {data.allPosts.edges.map(({ node }) => (
                <div key={node.id}>
                  <p id="title">
                    <a href={"/one/" + this.props.match.params.id}>{`${
                      node.title
                    }`}</a>
                  </p>
                  <div
                    className="content"
                    dangerouslySetInnerHTML={{
                      __html: node.content
                    }}
                  />
                </div>
              ))}
              <button
                className="btn btn-primary btn-lg mt-2"
                onClick={() => this.handleNext(fetchMore, data)}
              >
                Next
              </button>
            </div>
          );
        }}
      </Query>
    );
  }
}

export default Posts;