moviedb dimi demo app

App.jsx

import React from 'react';
import { StyleSheet, Text, View, TextInput, KeyboardAvoidingView } from 'react-native';
import Button from './src/view/Button'
import Movies from './src/view/Movies'

const API_KEY = '870c92db52a5e74ad6c1b6b06b19cfb9'
const API_MOVIE_ENDPOINT = 'https://api.themoviedb.org/3/search/movie'

const getSearchUrl = (query, page = 1) => {

  return `${API_MOVIE_ENDPOINT}?api_key=${API_KEY}&page=${page}&query=${query}`

}

const fetchMoviesJson = async (query) => {

  const url = getSearchUrl(query)
  
  console.log(`fetching movies from ${url}`)
  console.log('copy this url above to check data/json structure in a browser')

  const response = await fetch(url)
  const json = await response.json()

  return json

}

export default class App extends React.Component {

  state = {
    query: null,
    moviesJson: null,
  }

  onSearchPress = async () => {
    const { query } = this.state
    const moviesJson = await fetchMoviesJson(query);
    this.setState({ moviesJson })
  }

  render() {

    const { query, moviesJson } = this.state

    return (
      <KeyboardAvoidingView style={styles.container} behavior="height" enabled>
        {moviesJson &&
          <Movies query={query} moviesJson={moviesJson}/>
        }
        <View style={{ alignSelf:'stretch' }}>
          <Text>Search movies</Text>
          <TextInput
            placeholder="search"
            onChangeText={query => this.setState({ query })}
            style={styles.input}/>
          <Button title={`Search "${query}"`} onPress={this.onSearchPress}/>
        </View>
      </KeyboardAvoidingView>
    )
  }
}

const styles = StyleSheet.create({
  
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 32,
  },

  input: {
    height: 48,
    borderColor: '#fc0',
    borderWidth: 1,
    alignSelf: 'stretch',
    borderRadius: 5,
    padding: 8,
    marginTop: 6,
  },
});

Button.jsx

import React, { Component } from 'react'
import { TouchableOpacity, StyleSheet, View, Text } from 'react-native'

export default ({ onPress, title }) => {

	return (
		<TouchableOpacity onPress={onPress} style={styles.container}>
			<Text>{title}</Text>
		</TouchableOpacity>
	);

}

const styles = StyleSheet.create({
	
	container: {
		height: 48,
		marginTop: 8,
		padding: 16,
		backgroundColor: '#fc0',
		alignItems: 'center',
		justifyContent: 'center',
		alignSelf: 'stretch',
		borderRadius: 5,
	},

});
  

Movies.jsx

import React from 'react'
import { View, Text, Image, ScrollView } from 'react-native'

// https://developers.themoviedb.org/3/configuration/get-api-configuration
const API_IMAGE_BASE_URL = 'https://image.tmdb.org/t/p/w780'

const Movie = (props) => {

  /*
    example of movie data:
    {
      popularity: 57.115,
      vote_count: 12634,
      video: false,
      poster_path: "/btTdmkgIvOi0FFip1sPuZI2oQG6.jpg",
      id: 11,
      adult: false,
      backdrop_path: "/4iJfYYoQzZcONB9hNzg0J0wWyPH.jpg",
      original_language: "en",
      original_title: "Star Wars"
    }
  */

  const { original_title, poster_path } = props
  const uri = API_IMAGE_BASE_URL + poster_path

  return (
    <View style={{ padding:16, alignItems:'center' }}>
      <Image source={{ uri }} style={{ height:100, width:100 }}/>
      <Text>{original_title}</Text>
    </View>
  )

}

export default class Movies extends React.Component {

  /*
    example of moviesJson data:
    {
      page: 1,
      total_results: 433,
      total_pages: 22,
      results: [... (here an array of movies data, cf above for details)]
    }
  */

  render() {
    const { moviesJson, query } = this.props

    return (
      <View style={{ alignSelf:'stretch', flex:1 }}>
        <Text>Movies for "{query}" ({moviesJson.total_results})</Text>
        <ScrollView>
        {moviesJson.results.map((movie, index) => (
          <Movie key={index} {...movie}/>
        ))}
        </ScrollView>
      </View>
    )
  }
}