<commit_before>import { gql } from 'apollo-boost';
import * as React from 'react';
import { graphql } from 'react-apollo';
import { Grid, Row } from 'react-bootstrap';
import * as projectsJson from '../projects.json';
import Loading from './Loading';
import ProjectContainer from './ProjectContainer';

interface ProjectsProps {
  loading: boolean;
  loadMoreEntries: () => Promise<any>;
  repositories: any[];
}
class Projects extends React.Component<ProjectsProps> {
  public state = {
    isFinished: false,
    loadMore: false,
  };
  constructor(props: ProjectsProps) {
    super(props);
    this.handleScroll = this.handleScroll.bind(this);
  }

  public handleScroll() {
    const documentOffsetHeight = document.documentElement ? document.documentElement.offsetHeight : 0;
    const windowHeight =
      'innerHeight' in window
        ? window.innerHeight
        : documentOffsetHeight;
    const body = document.body;
    const html = document.documentElement;
    const htmlHeight = html ? Math.max(html.clientHeight, html.scrollHeight, html.offsetHeight) : 0;
    const docHeight = Math.max(
      body.scrollHeight,
      body.offsetHeight,
      htmlHeight,
    );
    const windowBottom = windowHeight + window.pageYOffset + 20;

    const { loading, loadMoreEntries } = this.props;
    const { isFinished } = this.state;
    if (windowBottom >= docHeight && !loading && !isFinished) {
      this.setState({
        loadMore: true,
      });
      loadMoreEntries().then(({ data }) =>
        this.setState({
          isFinished: data.user.repositories.length < 9,
          loadMore: false,
        }),
      );
    }
  }

  public componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  public componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  public render() {
    const { loading, repositories } = this.props;
    const { loadMore } = this.state;
    const projectJSX = repositories.map(({ node }: any, index: number) => {
      const data = [
        { name: 'Watchers', value: node.watchers.totalCount },
        { name: 'Favorites', value: node.stargazers.totalCount },
        { name: 'Forks', value: node.forkCount },
      ];
      return [
        <ProjectContainer
          key={node.id}
          projectJSON={projectsJson[node.name]}
          node={node}
          data={data}
          repositoriesLength={repositories.length}
        />,
        <Row
          key={`${node.id}1`}
          style={{
            display: (index + 1) % 3 === 0 ? 'block' : 'none',
            margin: 0,
          }}
        />,
      ];
    });
    return (
      <Grid>
        <Row>
          {projectJSX}
          {loadMore && <Loading />}
        </Row>
      </Grid>
    );
  }
}

const initialQuery = gql`
  query Projects($cursor: String) {
    user(username: "mrdokenny") {
      repositories(cursor: $cursor)
    }
  }
`;

const ProjectsWithData = graphql(initialQuery, {
  options: {
    notifyOnNetworkStatusChange: false,
  },
  props(props: any) {
    const {
      data: { loading, user, fetchMore },
    } = props;
    return {
      loadMoreEntries: () =>
        fetchMore({
          updateQuery: (previousResult: any, { fetchMoreResult }: any) => {
            const oldRepos = previousResult.user.repositories;<commit_msg>Fix loading spinner on projects<commit_after>import { gql } from 'apollo-boost';
import * as React from 'react';
import { graphql } from 'react-apollo';
import { Grid, Row } from 'react-bootstrap';
import * as projectsJson from '../projects.json';
import Loading from './Loading';
import ProjectContainer from './ProjectContainer';

interface ProjectsProps {
  loading: boolean;
  loadMoreEntries: () => Promise<any>;
  repositories: any[];
}
class Projects extends React.Component<ProjectsProps> {
  public state = {
    isFinished: false,
    loadMore: false,
  };
  constructor(props: ProjectsProps) {
    super(props);
    this.handleScroll = this.handleScroll.bind(this);
  }

  public handleScroll() {
    const documentOffsetHeight = document.documentElement ? document.documentElement.offsetHeight : 0;
    const windowHeight =
      'innerHeight' in window
        ? window.innerHeight
        : documentOffsetHeight;
    const body = document.body;
    const html = document.documentElement;
    const htmlHeight = html ? Math.max(html.clientHeight, html.scrollHeight, html.offsetHeight) : 0;
    const docHeight = Math.max(
      body.scrollHeight,
      body.offsetHeight,
      htmlHeight,
    );
    const windowBottom = windowHeight + window.pageYOffset + 20;

    const { loading, loadMoreEntries } = this.props;
    const { isFinished } = this.state;
    if (windowBottom >= docHeight && !loading && !isFinished) {
      this.setState({
        loadMore: true,
      });
      loadMoreEntries().then(({ data }) =>
        this.setState({
          isFinished: data.user.repositories.length < 9,
          loadMore: false,
        }),
      );
    }
  }

  public componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  public componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  public render() {
    const { loading, repositories } = this.props;
    const { loadMore } = this.state;
    const projectJSX = repositories.map(({ node }: any, index: number) => {
      const data = [
        { name: 'Watchers', value: node.watchers.totalCount },
        { name: 'Favorites', value: node.stargazers.totalCount },
        { name: 'Forks', value: node.forkCount },
      ];
      return [
        <ProjectContainer
          key={node.id}
          projectJSON={projectsJson[node.name]}
          node={node}
          data={data}
          repositoriesLength={repositories.length}
        />,
        <Row
          key={`${node.id}1`}
          style={{
            display: (index + 1) % 3 === 0 ? 'block' : 'none',
            margin: 0,
          }}
        />,
      ];
    });
    return (
      <Grid>
        <Row>
          {projectJSX}
        </Row>
        <Row>
          {(loading || loadMore) && <Loading />}
        </Row>
      </Grid>
    );
  }
}

const initialQuery = gql`
  query Projects($cursor: String) {
    user(username: "mrdokenny") {
      repositories(cursor: $cursor)
    }
  }
`;

const ProjectsWithData = graphql(initialQuery, {
  options: {
    notifyOnNetworkStatusChange: false,
  },
  props(props: any) {
    const {
      data: { loading, user, fetchMore },
    } = props;
    return {
      loadMoreEntries: () =>
        fetchMore({
          updateQuery: (previousResult: any, { fetchMoreResult }: any) => {
            const oldRepos = previousResult.user.repositories;
{'fraction_non_alphanumeric': 0.13090638930163448, 'fraction_numerical': 0.0029717682020802376, 'mean_word_length': 2.4984407484407485, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2200155', 'n_tokens_mistral': 2008, 'n_tokens_neox': 1951, 'n_words': 436}