{"size": 1439, "ext": "js", "max_stars_repo_path": "src/Home.js", "max_stars_repo_name": "carlosmertens/movie-router", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/Home.js", "max_issues_repo_name": "carlosmertens/movie-router", "max_issues_repo_issues_event_min_datetime": "2021-03-10T21:19:33.000Z", "max_issues_repo_issues_event_max_datetime": "2021-03-10T21:19:33.000Z", "max_forks_repo_path": "src/Home.js", "max_forks_repo_name": "carlosmertens/movie-router", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 27.1509433962, "max_line_length": 101, "alphanum_fraction": 0.6011118833}
import React, { Component } from "react";
import axios from "axios";
import config from "./config";
import { Link } from "react-router-dom";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      movieList: [],
    };
  }

  componentDidMount() {
    const nowPlayingUrl = `https://api.themoviedb.org/3/movie/now_playing?api_key=${config.api_key}`;
    axios.get(nowPlayingUrl).then((response) => {
      // console.log(response.data);
      const movieData = response.data.results;
      this.setState({
        movieList: movieData,
      });
    });
  }

  render() {
    // console.log(this.state.movieList);
    const imageUrl = "http://image.tmdb.org/t/p/w300";
    const movieGrid = this.state.movieList.map((movie, index) => {
      return (
        <div className="col s3" key={index}>
          <Link to={`/movie/${movie.id}`}>
            <img src={`${imageUrl}${movie.poster_path}`} alt="" />
          </Link>
        </div>
      );
    });

    return (
      <div className="row">
        <h1>{movieGrid}</h1>
      </div>
    );
  }
}

export default Home;

/* TODO: Get own api key at themoviedb.org and add it to config.js
    const apiKey = "fec8b5ab27b292a68294261bb21b04a5";
    const singleMovieUrl = "https://api.themoviedb.org/3/movie/"
    const nowPlayingUrl = "https://api.themoviedb.org/3/movie/now_playing";
    const imageUrl = "http://image.tmdb.org/t/p/w300"; */
