<repo_name>KamillaKatz/flickr-gallery<file_sep>/src/components/App/App.js
import React from 'react';
import './App.scss';
import Gallery from '../Gallery';

class App extends React.Component {
  static propTypes = {
   
  };

  constructor() {
    super();
    this.fullScreenImage = this.fullScreenImage.bind(this);
    this.closeSlider = this.closeSlider.bind(this);
    this.nextImage = this.nextImage.bind(this);
    this.prevImage = this.prevImage.bind(this);
   
    this.state = {
      tag: 'art',
      frontImage: null
    };
  }

  
  closeSlider() {
    var temp = document.getElementById('ImageSlider');
    temp.style.display = 'none';

  }

  fullScreenImage(image_com_to_show) {
    
    var Imcmp = document.getElementById(image_com_to_show);
    var img = document.getElementById('imshow');
    var slider = document.getElementById('ImageSlider');
    
    img.src = Imcmp.children.item(0).src;
    slider.style.display = 'block';
    this.state.frontImage = Imcmp;
  }


  nextImage() {


    var front = document.getElementById('imshow');
    var slider = document.getElementById('ImageSlider');
    var nextImage = this.state.frontImage.nextElementSibling;
    front.src = nextImage.children.item(0).src;
    this.state.frontImage = nextImage;


  }

  prevImage() {

    var front = document.getElementById('imshow');
    var slider = document.getElementById('ImageSlider');
    var prevImage = this.state.frontImage.previousElementSibling;
    front.src = prevImage.children.item(0).src;
    this.state.frontImage = prevImage;




  }

  render() {
    return (
     
      <div className="app-root">
        <div className="slider" id="ImageSlider">
          <a className="close-btn" onClick={this.closeSlider}>&times;</a>
          <a className="prev" onClick={this.prevImage} >&#10094;</a>
          <a className="next" onClick={this.nextImage} >&#10095;</a>
          <img className="frot-image" id="imshow"/></div>
        <div className="app-header">
          <h2>Flickr Gallery</h2>
          <input className="app-input" onChange={event => this.setState({tag: event.target.value})} value={this.state.tag}/>
        </div>
        <Gallery Myfunc={this.fullScreenImage} tag={this.state.tag} />
      </div>
     
    );
  }
  
}

export default App;
<file_sep>/src/components/Image/Image.js
import React from 'react';
import PropTypes from 'prop-types';
import FontAwesome from 'react-fontawesome';
import './Image.scss';





class Image extends React.Component {
  static propTypes = {
    dto: PropTypes.object,
    galleryWidth: PropTypes.number,
    Myfunc: PropTypes.func
  
    
  };

  constructor(props) {
    super(props);
    this.calcImageSize = this.calcImageSize.bind(this);
    this.state = {
      size: 200,
      angle: 0
    
    };
    this.turnImage = this.turnImage.bind(this);
    this.deleteImage = this.deleteImage.bind(this);
    this.expendImage = this.expendImage.bind(this);
    
    
  }

  calcImageSize() {
    const {galleryWidth} = this.props;
    const targetSize = 200;
    const imagesPerRow = Math.round(galleryWidth / targetSize);
    const size = (galleryWidth / imagesPerRow);
    this.setState({
      size
      
    });
  }

  componentDidMount() {
    this.calcImageSize();
  }

  urlFromDto(dto) {
   
    return `https://farm${dto.farm}.staticflickr.com/${dto.server}/${dto.id}_${dto.secret}.jpg`;
  }



  turnImage() {
    this.state.angle = (this.state.angle + 90) % 360;
    var temp = document.getElementById(this.props.dto.id);
    temp.childNodes.item(0).style.transform = 'rotate(' + this.state.angle.toString() + 'deg)';
  }

  deleteImage() {

    var temp = document.getElementById(this.props.dto.id);
    temp.style.display = 'none';
   
    
  }



  expendImage() {
    //var temp = document.getElementById(this.props.dto.id);
    this.props.Myfunc(this.props.dto.id);
    


  }
  render() {

 

    return (
      <div
        id={this.props.dto.id} className="image-root">
        
        <img src={this.urlFromDto(this.props.dto)} style={{
          width: this.state.size + 'px',
          height: this.state.size + 'px'
        }} />
        
        <div>
          <FontAwesome onClick={this.turnImage} className="image-icon" name="sync-alt" title="rotate"/>
          <FontAwesome onClick={this.deleteImage} className="image-icon" name="trash-alt" title="delete" />
          <FontAwesome onClick={this.expendImage} className="image-icon" name="expand" title="expand" />
        </div>
      </div>
    );
  }
}

export default Image;
