Add Runtime filter and modify default state for something more intere…

…sting
Macxim · Aug 17, 2017 · 1dbfaa5 · 1dbfaa5
1 parent f56587e
commit 1dbfaa5
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 8 deletions.
diff --git a/src/App.js b/src/App.js
@@ -23,9 +23,13 @@ class App extends Component {
       filtersOpen: true,
       filters: {
         rating: {
-          min: 0,
+          min: 5,
           max: 10
         },
+        runtime: {
+          min: 45,
+          max: 250
+        },
         year: new Date().getFullYear()
       }
     };

diff --git a/src/components/Discover/index.js b/src/components/Discover/index.js
@@ -25,7 +25,16 @@ class Discover extends Component {
   }
 
   getMovies = (page) => {
-    fetch(`${PATH_BASE}${PATH_DISCOVER}${PATH_MOVIE}?language=en-US&api_key=${API_KEY}&${PATH_PAGE}${page}&primary_release_year=${this.props.filters.year}&vote_average.gte=${this.props.filters.rating.min}&vote_average.lte=${this.props.filters.rating.max}&sort_by=vote_average.asc`)
+    fetch(`
+      ${PATH_BASE}${PATH_DISCOVER}${PATH_MOVIE}?api_key=${API_KEY}&${PATH_PAGE}${page}
+      &language=en-US
+      &primary_release_year=${this.props.filters.year}
+      &vote_average.gte=${this.props.filters.rating.min}
+      &vote_average.lte=${this.props.filters.rating.max}
+      &with_runtime.gte=${this.props.filters.runtime.min}
+      &with_runtime.lte=${this.props.filters.runtime.max}
+      &sort_by=vote_average.desc`
+    )
     .then(response => response.json())
     .then(movies => {
       this.setMovies(movies)
@@ -61,7 +70,7 @@ class Discover extends Component {
     return (
       <div>
         <h1 className="App-main-title">{this.props.title}</h1>
-        <p>Movies with ratings from {this.props.filters.rating.min} to {this.props.filters.rating.max} released in {this.props.filters.year}.</p>
+        <p>Movies with ratings from {this.props.filters.rating.min} to {this.props.filters.rating.max} released in {this.props.filters.year} with runtime from {this.props.filters.runtime.min} to {this.props.filters.runtime.max} minutes.</p>
         <Button className="" onClick={this.toggleFilters} text="Filters" />
         { results &&
           <List list={results} />

diff --git a/src/components/Filters/index.js b/src/components/Filters/index.js
@@ -17,6 +17,16 @@ class Filters extends Component {
       <div className={appFiltersClasses}>
         <ul className="filters-list">
 
+          <li className="filters-list__item">
+            <span className="filter-label">
+              Released in {this.props.filters.year}
+            </span>
+            <Dropdown
+              options={rangeDate(1900, new Date().getFullYear())}
+              value={`${this.props.filters.year}`}
+              onChange={year => this.props.updateFilters({ ...this.props.filters, year: year.value })} />
+          </li>
+
           <li className="filters-list__item">
             <span className="filter-label">
               Rating from {this.props.filters.rating.min} to {this.props.filters.rating.max}
@@ -30,12 +40,13 @@ class Filters extends Component {
 
           <li className="filters-list__item">
             <span className="filter-label">
-              Released in {this.props.filters.year}
+              Duration from {this.props.filters.runtime.min} to {this.props.filters.runtime.max} (minutes)
             </span>
-            <Dropdown
-              options={rangeDate(1900, new Date().getFullYear())}
-              value={`${this.props.filters.year}`}
-              onChange={year => this.props.updateFilters({ ...this.props.filters, year: year.value })} />
+            <InputRange
+              minValue={0}
+              maxValue={500}
+              value={this.props.filters.runtime}
+              onChange={runtime => this.props.updateFilters({ ...this.props.filters, runtime: runtime })} />
           </li>
 
         </ul>