<file_sep>import React from "react";
import {connect} from "react-redux";

const MoviesPage = () => {
    return <div>

    </div>
};

let mapStateToProps = (state) => ({
    films: state.filmsPage.films,
    currentPage:state.filmsPage.currentPage
});

export default connect()(MoviesPage)<file_sep>import * as axios from 'axios'

export const API = {
    getFilm(page, genreId) {
        return axios.get(`https://api.themoviedb.org/3/discover/movie?page=${page}&api_key=<KEY>&with_genres=${genreId}`)
    },
    getGenres() {
        return axios.get(`http://api.themoviedb.org/3/genre/movie/list?api_key=<KEY>`).then(genres => {
            return genres.data.genres
        })
    },
    getByTitle(title) {
        return axios.get(`https://api.themoviedb.org/3/search/movie?api_key=<KEY>&query=${title}`)
    },
    getByAll(page, genreId, title) {
        return axios.get(`https://api.themoviedb.org/3/search/movie?api_key=<KEY>&query=${title}&with_genres=${genreId}&page=${page}`)
    }
};

export const MovieAPI = {
    getMovie(movieId) {
        return axios.get(`https://api.themoviedb.org/3/movie/${movieId}?api_key=<KEY>&language=en-US`)
    }
};

<file_sep>import {applyMiddleware, combineReducers, createStore} from "redux";
import filmsReducer from "./filmsReducer";
import MovieReducer from "./MoviePageReducer";
import thunkMiddleware from "redux-thunk"
import {reducer as formReducer} from "redux-form"

let reducers = combineReducers({
    filmsPage: filmsReducer,
    moviePage: MovieReducer,
    form:formReducer
});

let store = createStore(reducers, applyMiddleware(thunkMiddleware));

export default store<file_sep>import React from "react";
import StarRatings from "react-star-ratings";
import {NavLink} from "react-router-dom";
import style from './MoviesListCard.module.css'

const MoviesListCard = (props) => {
    return <div className={style.movieCard}>
        <NavLink to={`/film/${props.film.id}`} className={style.movieBlock}>
            <div onClick={()=>props.setFilm(props.film)}>
            <img src={`https://image.tmdb.org/t/p/w500${props.film.backdrop_path}`} alt="filmPhoto"/>
            <h2>{props.film.title}</h2>
            </div>
        </NavLink>
            <div>rating {props.film.vote_average}/10</div>
            <StarRatings
                rating={props.film.vote_average}
                starDimension="20px"
                starRatedColor="gold"
                numberOfStars={10}
                name='rating'
            />
            <br/>
            <div>{props.film.overview}</div>

    </div>

};

export default MoviesListCard<file_sep>import React from 'react';
import './App.css';
import {Provider} from "react-redux";
import store from "./Redux/store";
import MoviesList from "./components/MoviesList";
import {BrowserRouter, Route} from "react-router-dom";
import Movie from "./components/Movie/Movie";
import Header from "./components/Header/Header";


function App() {
    return (
        <BrowserRouter>
            <Provider store={store}>
                <Header/>
                <Route exact path={'/'} render={() => <MoviesList/>}/>
                <Route path={'/film/:id'} render={() => <Movie/>}/>
            </Provider>
        </BrowserRouter>
    );
}

export default App;
<file_sep>import React from "react";
import {compose} from "redux";
import {NavLink, withRouter} from "react-router-dom";
import {connect} from "react-redux";
import {getMoviePage} from "../../Redux/MoviePageReducer";
import StarRatings from "react-star-ratings";
import style from './Movie.module.css'
import cn from 'classnames'
import {changeTheme} from "../../Redux/filmsReducer";

class Movie extends React.Component {
    componentDidMount() {
        this.props.getMoviePage(this.props.match.params.id)
    }

    render() {
        return <div className={cn({[style.darkTheme]: this.props.darkTheme}, style.moviePage)}>
            <div className={style.movieImg}><img src={`https://image.tmdb.org/t/p/w500${this.props.movie.poster_path}`}
                                                 alt="poster"/></div>
            <div className={style.movieDescription}>
                <h2>{this.props.movie.title}</h2>
                <StarRatings
                    rating={this.props.movie.vote_average}
                    starDimension="20px"
                    starRatedColor="gold"
                    numberOfStars={10}
                    name='rating'
                />
                <div className={style.movieOverview}>{this.props.movie.overview}</div>
                <div className={style.releaseDate}><span>Release date: </span>{this.props.movie.release_date}</div>
                <div className={style.anotherInfo}>
                    <div><b>Companies:</b> {this.props.movie.production_companies.map(company => <div
                        key={company.id}>{company.name}, </div>)}</div>
                    <div><b>Countries:</b> {this.props.movie.production_countries.map(country => <div key={country.id}>
                        {country.name}, </div>)}</div>
                    <div><b>Genres: </b>{this.props.movie.genres.map(genre => <div
                        key={genre.id}>{genre.name},</div>)}</div>
                    <div><b>Run time: </b>{this.props.movie.runtime} min</div>
                    <div className={cn({[style.linkDark]: this.props.darkTheme}, style.links)}><a
                        href={this.props.movie.homepage}>Movie Home page</a></div>
                    <NavLink to={'/'} className={cn({[style.linkDark]: this.props.darkTheme}, style.links)}>
                        Go to Home Page
                    </NavLink>
                </div>
            </div>

        </div>
    }
}

let mapStateToProps = (state) => ({
    movie: state.moviePage.movie,
    darkTheme: state.filmsPage.darkTheme
});

export default compose(
    connect(mapStateToProps, {getMoviePage, changeTheme}),
    withRouter
)(Movie)<file_sep>import React from "react";
import style from "./Switcher.module.css";

const Switcher = (props) => {
    return <div className={style.switch} onClick={() => props.changeTheme(props.darkTheme)}>
        <input type="checkbox" checked={props.darkTheme}/>
        <span className={style.slider}></span>
    </div>
};

export default Switcher<file_sep>import React from "react";
import style from './GenreBadge.module.css'
import cn from 'classnames'

const GenreBadge = (props) => {
    return <div className={style.genreList}>
        {props.genres.map(genre => <div key={genre.id}
                                        className={cn({[style.darkTheme]:props.darkTheme},{[style.activeGenre]: props.activeGenre === genre.id}, style.genreItem)}
                                        onClick={() => props.getFilmsForGenre(genre.id)}>
            {genre.name}
        </div>)}
    </div>
};

export default GenreBadge<file_sep>import React from "react";
import {Field, reduxForm} from "redux-form";

const InputForm = (props) => {
    return <form onSubmit={props.handleSubmit}>
        <Field  placeholder={'Search film'} name={'filmQuery'} component={'input'}/>
        <button>Search</button>
    </form>
};

const InputReduxForm = reduxForm({form: 'search'})(InputForm);
export default InputReduxForm