MovieTab

src/components/App.jsx

@@ -1,6 +1,8 @@
 import React from "react";
-import { moviesData } from "../moviesData";
+//import { moviesData } from "../moviesData";
 import MovieItem from "./MovieItem";
+import { API_URL, API_KEY_3 } from "../utils/api";
+import MovieTabs from "./MovieTabs";
 
 // UI = fn(state, props)
 
@@ -11,9 +13,34 @@ class App extends React.Component {
     super();
 
     this.state = {
-      movies: moviesData,
-      moviesWillWatch: []
+      //movies: moviesData,
+      movies: [],
+      moviesWillWatch: [],
+      //sort_by: "popularity.desc"
+      sort_by: "revenue.desc"
+      //sort_by: "vote_average.desc"
     };
+    console.log("constructor");
+  }
+
+  componentDidMount() {
+    console.log("didMount");
+    fetch(
+      `${API_URL}/discover/movie?api_key=${API_KEY_3}&sort_by=${
+        this.state.sort_by
+      }`
+    )
+      .then(response => {
+        console.log("then");
+        return response.json();
+      })
+      .then(data => {
+        console.log("data", data);
+        this.setState({
+          movies: data.results
+        });
+      });
+    //console.log("after fetch");
   }
 
   deleteMovie = movie => {
@@ -46,12 +73,26 @@ class App extends React.Component {
     });
   };
 
+  updateSortBy = value => {
+    this.setState({
+      sort_by: value
+    });
+  };
+
   render() {
     console.log("render", this);
     return (
       <div className="container">
         <div className="row mt-4">
           <div className="col-9">
+            <div className="col-12">
+              <div className="row mb-4">
+                <MovieTabs
+                  sort_by={this.state.sort_by}
+                  updateSortBy={this.updateSortBy}
+                />
+              </div>
+            </div>
             <div className="row">
               {this.state.movies.map(movie => {
                 return (

src/components/MovieTabs.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+const MovieTabs = (props) => {
+  const { sort_by, updateSortBy } = props;
+  return (
+    <ul className="tabs nav nav-pills">
+      <li className="nav-item">
+        <div 
+          className={`nav-link ${sort_by === "popularity.desc" ? "active":""}`} 
+          onClick = {() => {
+            updateSortBy("popularity.desc")
+          }}>
+          Popularity desc
+        </div>
+      </li>
+      <li className="nav-item">
+      <div 
+        className={`nav-link ${sort_by === "revenue.desc" ? "active":""}`}
+        onClick = {() => {
+        updateSortBy("revenue.desc")
+      }}>
+        Revenue desc
+      </div>
+      </li>
+      <li className="nav-item">
+      <div 
+        className={`nav-link ${sort_by === "vote_average.desc" ? "active":""}`}
+        onClick = {() => {
+          updateSortBy("vote_average.desc")
+        }}>
+        Vote average desc
+      </div>
+      </li>
+    </ul>
+  );
+};
+
+export default MovieTabs;