Skip to content

Commit

Permalink
added genre form with pagination and style , rewrite select form
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bukilan
Bukilan committed Apr 25, 2019
1 parent d54cce3 commit bc4c5ba
Show file tree
Hide file tree
Showing 5 changed files with 230 additions and 27 deletions.
44 changes: 33 additions & 11 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
//TODO: implement first and last page in pagination
//TODO: implement current page in pagination

import React from "react";
import { PropTypes } from 'prop-types';
import { connect } from "react-redux";
Expand All @@ -14,6 +17,7 @@ let top_rated_page_counter = 1;
let upcoming_page_counter = 1;
let now_playing_page_counter = 1;
let year_page_counter = 1;
let genre_page_counter = 1;
let prev_query = "";

class App extends React.Component {
Expand Down Expand Up @@ -58,10 +62,18 @@ class App extends React.Component {
break
}
case "discover/movie": {
year_page_counter++;
let year = "&primary_release_year=" + this.props.state.items.year.toString();
this.props.fetchMovie(year_page_counter, "discover/movie", '&sort_by=popularity.desc&include_adult=false&include_video=false', year);
break
if (this.props.state.items.year.length === 4){
year_page_counter++;
let year = "&primary_release_year=" + this.props.state.items.year.toString();
this.props.fetchMovie(year_page_counter, "discover/movie", '&sort_by=popularity.desc&include_adult=false&include_video=false', year);
break
} else {
genre_page_counter++;
let genre = "&with_genres=" + this.props.state.items.year;
console.log(genre);
this.props.fetchMovie(genre_page_counter, "discover/movie", '&sort_by=popularity.desc&include_adult=false&include_video=false', genre);
}

}
}
};
Expand All @@ -76,7 +88,9 @@ class App extends React.Component {
break
}
case "search/movie": {
if(search_page_counter >= 2) {search_page_counter--}
if (search_page_counter >= 2) {
search_page_counter--
}
this.props.fetchMovie(search_page_counter);
let query = '&query=' + this.props.state.items.query.toString();
this.props.fetchMovie(search_page_counter, 'search/movie', query);
Expand Down Expand Up @@ -105,12 +119,21 @@ class App extends React.Component {
break
}
case "discover/movie": {
if (year_page_counter >= 2) {
year_page_counter--
if (this.props.state.items.year.length === 4) {
if (year_page_counter >= 2) {
year_page_counter--
}
let year = "&primary_release_year=" + this.props.state.items.year.toString();
this.props.fetchMovie(year_page_counter, "discover/movie", '&sort_by=popularity.desc&include_adult=false&include_video=false', year);
break
} else {
if (genre_page_counter >= 2) {
genre_page_counter--
}
let genre = "&with_genres=" + this.props.state.items.year.toString();
this.props.fetchMovie(genre_page_counter, "discover/movie", '&sort_by=popularity.desc&include_adult=false&include_video=false', genre);
break
}
let year = "&primary_release_year=" + this.props.state.items.year.toString();
this.props.fetchMovie(year_page_counter, "discover/movie", '&sort_by=popularity.desc&include_adult=false&include_video=false', year);
break
}
}
};
Expand Down Expand Up @@ -177,7 +200,6 @@ App.propTypes = {
};

const mapStateToProps = (state) => ({
// list: state.list,
method: state.method,
query: state.query,
year: state.year,
Expand Down
159 changes: 145 additions & 14 deletions src/components/MyTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,102 @@ import React from 'react';
import "../static/MyTable.css"
import {itemFetchMovies} from "../redux/actions/items";
import {connect} from "react-redux";
import Select from 'react-select';
import makeAnimated from 'react-select/lib/animated';

let sel = '';
let genre = '';

const genreCustomStyles = {
control: (base, state) => ({
...base,
background: "#000",
borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
borderColor: "white",
boxShadow: state.isFocused ? null : null,
"&:hover": {
borderColor: "cyan",
}
}),
menu: base => ({
...base,
borderRadius: 0,
marginTop: 0
}),
menuList: base => ({
...base,
padding: 0
}),
option: base => ({
background: "#000",
textAlign: "left",
padding: "10px",
})
};

const genre_options = [
{ value: '28', label: 'Action' },
{ value: '12', label: 'Adventure' },
{ value: '16', label: 'Animation' },
{ value: '35', label: 'Comedy' },
{ value: '80', label: 'Crime' },
{ value: '99', label: 'Documentary' },
{ value: '18', label: 'Drama' },
{ value: '10751', label: 'Family' },
{ value: '14', label: 'Fantasy' },
{ value: '36', label: 'History' },
{ value: '27', label: 'Horror' },
{ value: '10402', label: 'Music' },
{ value: '9648', label: 'Mystery' },
{ value: '10749', label: 'Romance' },
{ value: '878', label: 'Science Fiction' },
{ value: '10770', label: 'TV Movie' },
{ value: '53', label: 'Thriller' },
{ value: '10752', label: 'War' },
{ value: '37', label: 'Western' },
];

const selectCustomStyles = {
control: (base, state) => ({
...base,
background: "#000",
borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
borderColor: "white",
boxShadow: state.isFocused ? null : null,
color: "white",
"&:hover": {
borderColor: "cyan",
}
}),

menu: base => ({
...base,
borderRadius: 0,
marginTop: 0
}),
menuList: base => ({
...base,
padding: 0
}),
option: base => ({
background: "#000",
color: "white",
textAlign: "left",
padding: "10px",
}),
singleValue: base => ({
fontSize: 14,
color: "white"
}),
};

const select_options = [
{ value: 'popular', label: 'Popular' },
{ value: 'top_rated', label: 'Top Rated' },
{ value: 'upcoming', label: 'Upcoming' },
{ value: 'now_playing', label: 'Now Playing' },
];

let sel = "popular";

const MyTable = (props) => {

Expand Down Expand Up @@ -37,11 +131,11 @@ let sel = "popular";

const handleMenu = () => {
props.fetchMovie(1);
window.location.reload();
};

const onSelectChange = () => {
console.log(sel.value);
switch (sel.value){
switch (sel.state.value.value){
case "popular": {
props.fetchMovie(1);
break
Expand All @@ -59,6 +153,21 @@ let sel = "popular";
break
}
}
};

const onGenreChange = () => {
if ( genre.state.value !== null){
if ( genre.state.value.length !== 0){
let str;
genre.state.value.forEach((item) => {str = str +item.value + "%2C"});
str = str.split("undefined")[1].slice(0,-3);
str = "&with_genres=" + str;
console.log(str);
props.fetchMovie(1, 'discover/movie', '&sort_by=popularity.desc&include_adult=false&include_video=false', str)
} else { alert("please, choose genre")}
} else { alert("please, choose genre")}


};


Expand All @@ -75,23 +184,45 @@ let sel = "popular";
HOME
</h3>
</th>
<th width="90"/>
<th width="100"/>
<th>
<select ref={node => {sel = node}}
onChange={onSelectChange}
className="select-form" >
<option value="popular">Popular</option>
<option value="top_rated">Top Rated</option>
<option value="upcoming">Upcoming</option>
<option value="now_playing">Now Playing</option>
</select>
<Select
ref={node => {genre = node}}
className="genre-form"
closeMenuOnSelect={false}
components={makeAnimated()}
isMulti={true}
options={genre_options}
styles={genreCustomStyles}
/>
</th>
<th width="60"/>
<th width="10"/>
<th>
<button onClick={onGenreChange} className="genre-button">Submit</button>
</th>
<th width="120"/>
<th>
<Select
ref={node => {sel = node}}
className="sel-form"
closeMenuOnSelect={true}
autoFocus = {true}
components={makeAnimated()}
options={select_options}
styles={selectCustomStyles}
defaultValue={select_options[0]}
/>
</th>
<th width="10"/>
<th>
<button onClick={onSelectChange} className="select-button">Submit</button>
</th>
<th width="90"/>
<th>
<input className="header-input-year" type="text" name="txt" placeholder="Enter search year"
onChange={yearChangeHandler}/>
</th>
<th width="930"/>
<th width="150"/>
<th>
<input className="header-input" type="text" name="txt" placeholder="Enter search term"
onChange={searchChangeHandler}/>
Expand Down
12 changes: 10 additions & 2 deletions src/redux/actions/items.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,15 @@ export function itemFetchMovies(page = 1, method = 'movie/popular', query_value=
}
console.log('fetch data here');
console.log(movies);
let search_year = year.split('=');
let search_year = '';
if ( year.split('=')[0] === "&primary_release_year"){
search_year = year.split('=')[1];
console.log(search_year[1])
}
if ( year.split('=')[0] === "&with_genres"){
search_year = year.split('=')[1];
console.log(search_year)
}
let curr_method = method;
let curr_query = query_value.split('=')[1];
dispatch(
Expand All @@ -44,7 +52,7 @@ export function itemFetchMovies(page = 1, method = 'movie/popular', query_value=
payload: movies,
payload_method: curr_method,
payload_query: curr_query,
payload_year: search_year[1],
payload_year: search_year,
}
);
});
Expand Down
2 changes: 2 additions & 0 deletions src/redux/reducer/items.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ const initalState = {
method: "movie/popular",
query: '',
year: '',
genre: '',
};


Expand All @@ -15,6 +16,7 @@ export function items(state = initalState, action) {
method: action.payload_method,
query: action.payload_query,
year: action.payload_year,
genre: action.payload_genre,
};

default:
Expand Down
40 changes: 40 additions & 0 deletions src/static/MyTable.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,4 +59,44 @@
border-width: 3px;
width: 130px;
height: 25px;
}

.genre-form{
font-family: Roboto, sans-serif;
font-size: 14px;
background-color: #000;
color: white;
width: 400px;
height: 30px;
}

.sel-form{
font-family: Roboto, sans-serif;
font-size: 14px;
background-color: #000;
color: white;
width: 200px;
height: 30px;
}

.genre-button{
font-family: Roboto, sans-serif;
font-size: 14px;
background-color: #000;
color: white;
border-color: black;
border-width: 3px;
width: 60px;
height: 25px;
}

.select-button{
font-family: Roboto, sans-serif;
font-size: 14px;
background-color: #000;
color: white;
border-color: black;
border-width: 3px;
width: 60px;
height: 25px;
}

0 comments on commit bc4c5ba

Please sign in to comment.