gistfile1.txt

import React, { Component } from "react";
import uniqueString from "unique-string";
import agent from "superagent";
import classNames from "classnames";
import logo from "./logo.svg";
import "./Gallery.css";
import ImageList from "./Components/ImageList";
import image1 from "./images/img1.jpeg";
import image2 from "./images/img2.jpeg";
import image3 from "./images/img3.jpeg";
import image4 from "./images/img4.jpeg";

export default class Gallery extends Component {
  constructor() {
    super();
    this.state = {
      wasClicked: false,
      selectedIndex: 0,
      images: [
        { id: `s${uniqueString()}`, src: image1, alt: "Placeholder text" }
      ]
    };
  }

  fetchImages() {
    agent.get("https://jsonplaceholder.typicode.com/posts/1").then(res => {
      console.log(res.body);
    });
  }

  componentDidMount() {
    this.setState({
      images: [
        { id: `s${uniqueString()}`, src: image1, alt: "alt1" },
        { id: `s${uniqueString()}`, src: image2, alt: "alt2" },
        { id: `s${uniqueString()}`, src: image3, alt: "alt3" },
        { id: `s${uniqueString()}`, src: image4, alt: "alt4" }
      ]
    });
    this.fetchImages();
  }

  handleOnClick(e) {
    const index = this.state.images.findIndex(i => {
      return i.id === e.target.id;
    });
    this.setState({ selectedIndex: index, wasClicked: true });
    setTimeout(() => {
      this.setState({ wasClicked: false });
    }, 500);
  }

  render() {
    var currentClass = classNames({
      "fade-in": this.state.wasClicked
    });
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <div className="container">
          <div className="main-img">
            <img
              src={this.state.images[this.state.selectedIndex].src}
              alt={this.state.images[this.state.selectedIndex].alt}
              id="current"
              className={currentClass}
            />
          </div>
          <ImageList
            images={this.state.images}
            selectedIndex={this.state.selectedIndex}
            onClick={this.handleOnClick.bind(this)}
          />
          {this.state.wasClicked ? <h2>Boo!</h2> : <h3>sad</h3>}
        </div>
      </div>
    );
  }
}