{"size": 1568, "ext": "js", "max_stars_repo_path": "src/App.js", "max_stars_repo_name": "ZielonyBuszmen/biblioteka-jest", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/App.js", "max_issues_repo_name": "ZielonyBuszmen/biblioteka-jest", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/App.js", "max_forks_repo_name": "ZielonyBuszmen/biblioteka-jest", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.4029850746, "max_line_length": 90, "alphanum_fraction": 0.5707908163}
import React, { Component } from 'react';
import Header from './Header';
import Gallery from './Gallery/Gallery';
import Image from './Image/Image';
import { getAllImages, addComment, addLike } from './helpers';


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imageList: getAllImages(),
      imageId: null,
    };
  }

  gotoImageHandler = (imageId) => {
    this.setState({ imageId });
  };

  gotoMainSiteHandler = () => {
    this.setState({ imageId: null });
  };

  addLikeHandler = (imageId) => {
    addLike(imageId);
    this.refreshComponentState();
  };

  addCommentHandler = (imageId, author, text) => {
    addComment(imageId, author, text);
    this.refreshComponentState();
  };

  refreshComponentState = () => {
    this.setState({ imageList: getAllImages(), });
  };

  render() {
    const { imageId, imageList } = this.state;
    const isShowImage = imageId !== null;
    return (
      <div>
        <Header isShowImage={isShowImage} gotoMainSiteHandler={this.gotoMainSiteHandler}/>
        <div className='container'>
          {
            isShowImage
              ? <Image
                image={imageList[imageId]}
                imageId={imageId}
                addCommentHandler={this.addCommentHandler}
                addLikeHandler={this.addLikeHandler}
              />
              : <Gallery
                imageList={imageList}
                gotoImageHandler={this.gotoImageHandler}
              />
          }

        </div>
      </div>
    );
  }
}

export default App;
