app.js

import React from 'react';
import { StyleSheet, Text, View, Dimensions, Image, ScrollView, TouchableHighlight, RefreshControl} from 'react-native';
import config from './src/config';
import Header from './src/components/header';
import Tabs from './src/components/tabs';
import Spinner from './src/components/spinner';
import MovieDetail from './src/components/movieDetail';
import axios from 'axios';

export default class App extends React.Component {
  state = { 
    moviesTrending: [],
    moviesPlaying: [],
    moviesSoon: [],
    selectedMovieTrending: null
  };

  const = urlTrending = 'https://api.themoviedb.org/3/movie/popular?api_key=2e3b3e231665535756b50c3e216e0467';
  const = urlPlaying = 'https://api.themoviedb.org/3/movie/now_playing?api_key=2e3b3e231665535756b50c3e216e0467';
  const = urlSoon = 'https://api.themoviedb.org/3/movie/upcoming?api_key=2e3b3e231665535756b50c3e216e0467';

  getMoviesTrending() {
    axios.get(urlTrending).then(
      //response => console.log(response)
      response => this.setState({moviesTrending: response.data.results})
    );
  }

  getMoviesPlaying(){
   axios.get(urlPlaying).then(
      //response => console.log(response)
      response => this.setState({moviesPlaying: response.data.results})
    );
  }

  getMoviesSoon(){
    axios.get(urlSoon).then(
      //response => console.log(response)
      response => this.setState({moviesSoon: response.data.results})
     );
  }

  componentDidMount(){
    axios.all([ this.getMoviesTrending(), this.getMoviesPlaying(), this.getMoviesSoon()]).then(axios.spread(function (moviesTrending, moviesPlaying, moviesSoon){
          //console.log('Trending', moviesTrending.data.results);
          //console.log('Playing Now', moviesPlaying.data.results);
          //console.log('Coming Soon', moviesSoon.data.results);
          moviesTrending => this.setState({moviesTrending: moviesTrending.data.results});
          moviesPlaying => this.setState({moviesPlaying: moviesPlaying.data.results});
          moviesSoon => this.setState({moviesSoon: moviesSoon.data.results});
    }));
  }

  renderMoviesTrending(){
    console.log('6666', this.state.moviesTrending);
    return this.state.moviesTrending.map(movieTrending =>
      <View key={movieTrending.id}>
          <TouchableHighlight onPress={() => this.onPressPosterTrending(movieTrending.title)} >
            <Image style={styles.poster} source={{ uri: `${TMDB_IMG_URL}${(movieTrending.poster_path)}` }} /> 
          </TouchableHighlight>
      </View>
    ); 
  }

  renderMoviesPlaying(){
    //console.log('777', this.state.moviesPlaying);
    return this.state.moviesPlaying.map(moviePlaying =>
      //<MovieDetail key={movieHot.id} movieHot={movieHot} />
      <View key={moviePlaying.id}>
          <TouchableHighlight onPress={() => this.onPressPosterPlaying(moviePlaying)} >
            <Image style={styles.poster} source={{ uri: `${TMDB_IMG_URL}${(moviePlaying.poster_path)}` }} /> 
          </TouchableHighlight>
      </View>
    );
  }

  renderMoviesSoon(){
   //console.log('888', this.state.moviesSoon);
    return this.state.moviesSoon.map(movieSoon =>
      //<MovieDetail key={movieHot.id} movieHot={movieHot} />
      <View key={movieSoon.id}>
          <TouchableHighlight onPress={() => this.onPressPosterSoon(movieSoon)} >
            <Image style={styles.poster} source={{ uri: `${TMDB_IMG_URL}${(movieSoon.poster_path)}` }} /> 
          </TouchableHighlight>
      </View>
    );
  }

  onPressPosterTrending = (movieTrending) => {
    //movieTrending => contains the whole movie info of a single movie
    console.log('MT', movieTrending);
    
    this.setState(prevState => {
        return {
          selectedMovieTrending: prevState.moviesTrending.find(movieTrending => {
              return movieTrending.id === movieTrending
          })
        };
    });

    console.log('onpres MT ', movieTrending.title);
    console.log('selectedMovieT' , this.state.selectedMovieTrending);
  }

  onPressPosterPlaying = (moviePlaying) => {
    //movieHot => contains the whole movie info of a single movie
    //console.log('MP', moviePlaying);
    //create modal window that displays details of movie
  }

  onPressPosterSoon = (movieSoon) => {
    //movieHot => contains the whole movie info of a single movie
    //console.log('MS', movieSoon);
    //create modal window that displays details of movie
  }

  onCloseModal = () => {
      this.setState({
          selectedMovieTrending: null
      })
  }

  render() {
    //console.log(this.state);
    return (
      <View style={styles.container}>
        <Header />
        <Tabs>
          {/* First tab */}
          <View title="TRENDING" style={styles.content}>
            <ScrollView contentContainerStyle={styles.ScrollViewStylesContainer} >
              <View style={styles.Grid}>
                {this.renderMoviesTrending()}
              </View>
            </ScrollView>
            <MovieDetail selectedMovieTrending={this.state.selectedMovieTrending} closeModal={this.onCloseModal} />
          </View>
          {/* Second tab */}
          <View title="PLAYING NOW" style={styles.content}>
            <ScrollView contentContainerStyle={styles.ScrollViewStylesContainer}>
              <View style={styles.Grid}>
                {this.renderMoviesPlaying()}
              </View>
            </ScrollView>
          </View>
          {/* Third tab */}
          <View title="COMING SOON" style={styles.content}>
            <ScrollView contentContainerStyle={styles.ScrollViewStylesContainer}>
              <View style={styles.Grid}>
                {this.renderMoviesSoon()}
              </View>
            </ScrollView>
          </View>
        </Tabs>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  // App container
  container: {
    flex: 1,                            // Take up all screen
    backgroundColor: '#E91E63',         // Background color
  },
  // Tab content container
  content: {
    flex: 1,                            // Take up all available space
    justifyContent: 'center',           // Center vertically
    alignItems: 'center',               // Center horizontally
    backgroundColor: '#000',            // Darker background for content area
  },
  // Content text
  text: {
    marginHorizontal: 20,               // Add horizontal margin
    color: 'rgba(255, 255, 255, 0.75)', // Semi-transparent text
    textAlign: 'center',                // Center
    fontFamily: 'Avenir',
    fontSize: 18,
  },
  Grid:{
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    padding: 10,
    justifyContent: 'center',
    alignItems: 'center'
  },
  poster:{
    //width: 105,
    width: Dimensions.get('window').width / 3.5,
    height: 180,
    margin:5,
    justifyContent: 'center',
    alignItems: 'center'
  }
  
});