{"size": 1467, "ext": "js", "max_stars_repo_path": "src/components/MapItems/MapItems.js", "max_stars_repo_name": "rockdev55/yoap", "max_stars_repo_stars_event_min_datetime": "2019-11-22T18:57:44.000Z", "max_stars_repo_stars_event_max_datetime": "2019-11-22T18:57:44.000Z", "max_issues_repo_path": "src/components/MapItems/MapItems.js", "max_issues_repo_name": "rockdev55/yoap", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/MapItems/MapItems.js", "max_forks_repo_name": "rockdev55/yoap", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.679245283, "max_line_length": 98, "alphanum_fraction": 0.6114519427}
import React, { Component } from 'react'
import { inject, observer } from 'mobx-react'
import { Title, Content, Container } from 'components'
import { MapContainer } from 'containers'
import { declination, parseItemsToPoints } from 'helpers'
import s from './MapItems.sass'


const mapStateToProps = ({items: {filtered, data}, filter: {hasSearched}, device: {height}}) => ({
  height,
  items: (hasSearched ? filtered : data) || [],
});

@inject(mapStateToProps) @observer
export default class MapItems extends Component {
  mapOptions = {scrollwheel: false};
  state = {data: []};

  foundWord = declination([
    'Найден',
    'Найдены',
    'Найдено'
  ]);
  varWord = declination([
    'вариант',
    'варианта',
    'вариантов'
  ])

  render() {
    const { height, items } = this.props;
    const { foundWord, varWord } = this;
    const data = items && parseItemsToPoints(items) || [];
    const length = data.length;

    return (
      <div className={s.wrapper}>
        <Container tag="header" className={s.header}>
          <Title size="2" light center nooffsets>
            {`${foundWord(length)} ${length} ${varWord(length)}`}
          </Title>
          <Content size="2" gray center className={s.subtitle}>
            Используйте приближение, чтобы увидеть больше
          </Content>
        </Container>
        <MapContainer points={data} options={this.mapOptions}
             style={{height: `${height * .9}px`}}/>
      </div>
    )
  }
}

