View Movies.js
import React, { Component } from 'react'
import styled from "styled-components"
import Overdrive from 'react-overdrive'
import Link from 'next/link'
import { POSTER_PATH } from '../constants/ActionTypes'
import { MovieInfo } from "../layouts/Layout"
class Movies extends Component {
render() {
var { movie } = this.props
View Terminal1
npm install react-overdrive --save
View post.js
import React , { Component } from 'react'
import styled from 'styled-components'
import { BACKDROP_PATH , POSTER_PATH } from '../constants/ActionTypes'
import { Layout } from '../layouts/Layout'
import { CallAPIInfo } from '../utils/api'
import { Poster } from '../components/Movies'
class Post extends Component{
static async getInitialProps({query}){
const { id } = query
View post.js
import React , { Component } from 'react'
import { Layout } from '../layouts/Layout'
import { CallAPIInfo } from '../utils/api'
class Post extends Component{
static async getInitialProps({query}){
const { id } = query
const res = await CallAPIInfo(id ,'get',null)
return { movie: res.data }
}
View api.js
import axios from 'axios'
import * as Types from '../constants/ActionTypes'
export const CallAPI = (endpoint, method = 'get', body) => {
return axios({
url: `${Types.URl_API}`,
method: method,
data: body
}).catch(err => console.log(err))
}
View index.js
import React , { Component } from 'react'
import styled from 'styled-components'
import Head from '../components/head'
import { Layout } from '../layouts/Layout'
import { CallAPI } from "../utils/api"
import Movies from '../components/Movies'
class Index extends Component {
static async getInitialProps(){
const res = await CallAPI('','get',null)
View api.js
import axios from 'axios'
import * as Types from '../constants/ActionTypes'
export const CallAPI = (endpoint, method = 'get', body) => {
return axios({
url: `${Types.URl_API}`,
method: method,
data: body
}).catch(err => console.log(err))
}
View ActionTypes.js
export const URl_API = 'https://api.themoviedb.org/3/discover/movie?api_key=8d8e6405b1d127dcbe031bd2b3e85c3b&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1'
export const POSTER_PATH = 'http://image.tmdb.org/t/p/w500'
View Movies.js
...
<MovieInfo>
<Link href={`/post?id=${id}`}>
<a>
<Poster src={`${POSTER_PATH}/${poster_path}`} alt={title} />
</a>
</Link>
</MovieInfo>
View post.js
import React , { Component } from 'react'
import { Layout } from '../layouts/Layout'
class Post extends Component{
render(){
return (
<Layout>
movie details
</Layout>
)