text: import React, { Component } from 'react';
  import * as PropTypes from 'prop-types';
  import { createPaginationContainer } from 'react-relay';
  import graphql from 'babel-plugin-relay/macro';
  import { pathOr } from 'ramda';
  import ListCardsContent from '../../../../components/list_cards/ListCardsContent';
  import { MalwareCard, MalwareCardDummy } from './MalwareCard';
  import { setNumberOfElements } from '../../../../utils/Number';
  
  const nbOfCardsToLoad = 50;
  
  class MalwaresCards extends Component {
    componentDidUpdate(prevProps) {
      setNumberOfElements(
        prevProps,
        this.props,
        'malwares',
        this.props.setNumberOfElements.bind(this),
      );
    }
  
    render() {
      const { initialLoading, relay, onLabelClick } = this.props;
      return (
        <ListCardsContent
          initialLoading={initialLoading}
          loadMore={relay.loadMore.bind(this)}
          hasMore={relay.hasMore.bind(this)}
          isLoading={relay.isLoading.bind(this)}
          dataList={pathOr([], ['malwares', 'edges'], this.props.data)}
          globalCount={pathOr(
            nbOfCardsToLoad,
            ['malwares', 'pageInfo', 'globalCount'],
            this.props.data,
          )}
          CardComponent={<MalwareCard />}
          DummyCardComponent={<MalwareCardDummy />}
          nbOfCardsToLoad={nbOfCardsToLoad}
          onLabelClick={onLabelClick.bind(this)}
        />
      );
    }
  }
  
  MalwaresCards.propTypes = {
    data: PropTypes.object,
    relay: PropTypes.object,
    initialLoading: PropTypes.bool,
    onLabelClick: PropTypes.func,
    setNumberOfElements: PropTypes.func,
  };
  
  export const malwaresCardsQuery = graphql`
    query MalwaresCardsPaginationQuery(
      $search: String
      $count: Int!
      $cursor: ID
      $orderBy: MalwaresOrdering
      $orderMode: OrderingMode
      $filters: [MalwaresFiltering]
    ) {
      ...MalwaresCards_data
        @arguments(
          search: $search
          count: $count
          cursor: $cursor
          orderBy: $orderBy
          orderMode: $orderMode
          filters: $filters
        )
    }
  `;
  
  export default createPaginationContainer(
    MalwaresCards,
    {
      data: graphql`
        fragment MalwaresCards_data on Query
        @argumentDefinitions(
          search: { type: "String" }
          count: { type: "Int", defaultValue: 25 }
          cursor: { type: "ID" }
          orderBy: { type: "MalwaresOrdering", defaultValue: name }
          orderMode: { type: "OrderingMode", defaultValue: asc }
          filters: { type: "[MalwaresFiltering]" }
        ) {
          malwares(
            search: $search
            first: $count
            after: $cursor
            orderBy: $orderBy
            orderMode: $orderMode
            filters: $filters
          ) @connection(key: "Pagination_malwares") {
            edges {
              node {
                id
                name
                description
                ...MalwareCard_node
              }
            }
            pageInfo {
              endCursor
              hasNextPage
              globalCount
            }
          }
        }
      `,
    },
    {
      direction: 'forward',
      getConnectionFromProps(props) {
        return props.data && props.data.malwares;
      },
      getFragmentVariables(prevVars, totalCount) {
        return {
          ...prevVars,
          count: totalCount,
        };
      },
      getVariables(props, { count, cursor }, fragmentVariables) {
        return {
          search: fragmentVariables.search,
          count,
          cursor,
          orderBy: fragmentVariables.orderBy,
          orderMode: fragmentVariables.orderMode,
          filters: fragmentVariables.filters,
        };
      },
      query: malwaresCardsQuery,
    },
  );
  