src/components/repository-grid/index.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

import React from 'react';
import PropTypes from 'prop-types';

import GridItem from './grid-item';
import './styles.css';
import GroupHeading from '../group-heading';

class RepositoryGrid extends React.Component {
  renderGroup(repositoryGroup, counter) {
    let groupHeading = '';
    // for the first repository group, we have the
    // heading among the filters out of the grid
    if (counter !== 0) {
      groupHeading = (
        <div className="row row-group">
          <GroupHeading
            start={ repositoryGroup.start }
            end={ repositoryGroup.end }
            dateJump={ this.props.dateJump }
          />
        </div>
      );
    }

    const groupKey = `${repositoryGroup.start}_${repositoryGroup.end}_${counter}`;
    const repositories = repositoryGroup.data.items;

    return (
      <div key={ groupKey } data-group-key={ groupKey }>
        { groupHeading }
        <div className="row grid-container">
          { repositories.map(repository => <GridItem repository={ repository } key={ repository.id }/>) }
        </div>
      </div>
    );
  }

  render() {
    return (
      <div className="repositories-grid">
        {
          this.props.repositories.map((repositoryGroup, counter) => {
            return this.renderGroup(repositoryGroup, counter);
          })
        }
      </div>
    );
  }
}

RepositoryGrid.propTypes = {
  repositories: PropTypes.array.isRequired,
  dateJump: PropTypes.string.isRequired
};

export default RepositoryGrid;