import React from "react";

export default class Thumb extends React.Component {
  state = {
    loading: false,
    thumb: undefined,
  };

  componentDidUpdate(prevProps) {
    if (prevProps.file !== this.props.file) {
      this.setState({ loading: true }, () => {
        let reader = new FileReader();

        reader.onloadend = () => {
          this.setState({ loading: false, thumb: reader.result });
        };

        reader.readAsDataURL(this.props.file);
      });
    }
  }

  render() {
    if (!this.props.file) {
      return null;
    }

    if (this.state.loading) {
      return <p>loading...</p>;
    }

    return (
      <img
        src={this.state.thumb}
        alt={this.props.file.name}
        className=""
        height={200}
        width={200}
      />
    );
  }
}