gistfile1.txt

import React, { Component } from "react";
import agent from "superagent";
import classNames from "classnames";
import logo from "./logo.svg";
import "./Gallery.css";
import ImageList from "./Components/ImageList";
import { FilePond } from "react-filepond";

export default class Gallery extends Component {
  constructor() {
    super();
    this.state = {
      wasClicked: false,
      selectedIndex: 0,
      selectedID: "",
      images: [
        {
          id: 0,
          src: "#",
          alt: "Placeholder Text"
        }
      ]
    };
  }

  fetchImages() {
    agent.get("http://localhost:3001/api/images").then(res => {
      this.setState({ images: res.body }, () => {
        this.setState({
          selectedID: this.state.images[this.state.selectedIndex].id
        });
      });
      console.log(res.body);
    });
  }

  componentWillMount() {
    this.fetchImages();
  }

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

  handlePondInit() {
    console.log("now initialised", this.pond);
  }

  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}
            selectedID={this.state.selectedID}
            onClick={this.handleOnClick.bind(this)}
          />
          <FilePond
            oninit={this.handlePondInit.bind(this)}
            allowMultiple={true}
            maxFiles={3}
            name="images"
            server="http://localhost:3001/api/image"
          />
        </div>
      </div>
    );
  }
}