Fetch TV Shows and detaisl Implemented.

emp7eror · Jan 27, 2020 · f5ae778 · f5ae778
1 parent f9f63ba
commit f5ae778
Show file tree

Hide file tree

Showing 18 changed files with 554 additions and 317 deletions.
diff --git a/controllers/MoviesController.js b/controllers/MoviesController.js
@@ -46,7 +46,7 @@ const getTrendingMovies = (req, res, next) => {
     const params = {
         api_key: API_KEY,
         language: 'en-US',
-        sort_by: 'release_date.desc',
+        sort_by: 'revenue.desc',
         include_adult: false,
         include_video: false
     };

diff --git a/controllers/TvShowsController.js b/controllers/TvShowsController.js
@@ -7,131 +7,133 @@ const SEARCH_URL = 'https://api.themoviedb.org/3/search/tv?';
 
 // Return popular TV-Shows.
 const getPopularTvShows = (req, res, next) => {
-  // Parameters That will Be Included In Request URL
-  const params = {
-    api_key: API_KEY,
-    language: 'en-US',
-    sort_by: 'popularity.desc',
-    include_adult: false,
-    include_video: false
-  };
+    // Parameters That will Be Included In Request URL
+    const params = {
+        api_key: API_KEY,
+        language: 'en-US',
+        sort_by: 'popularity.desc',
+        include_adult: false,
+        include_video: false,
+        page: 1
+    };
 
-  // Make an API request to get popular TV-Shows.
-  axios
-    .get(DISCOVER_URL, { params: params })
-    .then(response => {
-      // res.send(response.data.results);
-      res.status(200).json({
-        status: 'Success',
-        result: response.data.results.length,
-        data: {
-          popularShows: response.data.results
-        }
-      });
-    })
-    .catch(error => {
-      res.status(404).json({
-        status: error
-      });
-    });
+    // Make an API request to get popular TV-Shows.
+    axios
+        .get(DISCOVER_URL, { params: params })
+        .then(response => {
+            // res.send(response.data.results);
+            res.status(200).json({
+                status: 'Success',
+                result: response.data.results.length,
+                data: {
+                    popularShows: response.data.results
+                }
+            });
+        })
+        .catch(error => {
+            res.status(404).json({
+                status: error
+            });
+        });
 };
 // ***********************************************************************************************************************************
 
 // Return trending TV-Shows.
 const getTrendingTvShows = (req, res, next) => {
-  // Parameters That will Be Included In Request URL
-  const params = {
-    api_key: API_KEY,
-    language: 'en-US',
-    sort_by: 'release_date.desc',
-    include_adult: false,
-    include_video: false
-  };
+    // Parameters That will Be Included In Request URL
+    const params = {
+        api_key: API_KEY,
+        language: 'en-US',
+        sort_by: 'popularity.desc',
+        include_adult: false,
+        include_video: false,
+        page: 2
+    };
 
-  // Make an API request to get trending TV-Shows.
-  axios
-    .get(DISCOVER_URL, { params: params })
-    .then(response => {
-      // res.send(response.data.results);
-      res.status(200).json({
-        status: 'Success',
-        result: response.data.results.length,
-        data: {
-          trendingShows: response.data.results
-        }
-      });
-    })
-    .catch(error => {
-      res.status(404).json({
-        status: error
-      });
-    });
+    // Make an API request to get trending TV-Shows.
+    axios
+        .get(DISCOVER_URL, { params: params })
+        .then(response => {
+            // res.send(response.data.results);
+            res.status(200).json({
+                status: 'Success',
+                result: response.data.results.length,
+                data: {
+                    trendingShows: response.data.results
+                }
+            });
+        })
+        .catch(error => {
+            res.status(404).json({
+                status: error
+            });
+        });
 };
 // ***********************************************************************************************************************************
 // @METHOD GET
 // Return TV-Show details.
 const getTvShowDetails = (req, res, next) => {
-  // Parameters That will Be Included In Request URL
-  const id = req.params.showID;
-  const params = {
-    api_key: API_KEY,
-    language: 'en-US'
-  };
+    // Parameters That will Be Included In Request URL
+    const id = req.params.showID;
+    const params = {
+        api_key: API_KEY,
+        language: 'en-US'
+    };
 
-  // Make an API request to get TV-Show details.
-  axios
-    .get(`https://api.themoviedb.org/3/tv/${id}?`, { params: params })
-    .then(response => {
-      res.status(200).json({
-        status: 'Success',
-        data: {
-          showDetails: response.data
-        }
-      });
-    })
-    .catch(error => {
-      res.status(404).json({
-        status: error
-      });
-    });
+    // Make an API request to get TV-Show details.
+    axios
+        .get(`https://api.themoviedb.org/3/tv/${id}?`, { params: params })
+        .then(response => {
+            res.status(200).json({
+                status: 'Success',
+                data: {
+                    showDetails: response.data
+                }
+            });
+        })
+        .catch(error => {
+            res.status(404).json({
+                status: error
+            });
+        });
 };
 // ***********************************************************************************************************************************
 // @METHOD GET
 // Return TV-Shows on search .
 const getTvOnSearch = (req, res, next) => {
-  // Parameters That will Be Included In Request URL
-  const { query } = req.params;
-  const params = {
-    api_key: API_KEY,
-    language: 'en-US',
-    query: query,
-    include_adult: false
-  };
+    // Parameters That will Be Included In Request URL
+    const { query } = req.params;
+    const params = {
+        api_key: API_KEY,
+        language: 'en-US',
+        query: query,
+        include_adult: false
+    };
 
-  // Make an API request to get movie details.
-  axios
-    .get(SEARCH_URL, { params: params })
-    .then(response => {
-      // res.send(response.data.results);
-      res.status(200).json({
-        status: 'Success',
-        result: response.data.results.length,
-        data: {
-          tvShow: response.data.results
-        }
-      });
-    })
-    .catch(error => {
-      res.status(404).json({
-        status: error
-      });
-    });
+    // Make an API request to get movie details.
+    axios
+        .get(SEARCH_URL, { params: params })
+        .then(response => {
+            // res.send(response.data.results);
+            res.status(200).json({
+                status: 'Success',
+                result: response.data.results.length,
+                data: {
+                    tvShow: response.data.results
+                }
+            });
+        })
+        .catch(error => {
+            res.status(404).json({
+                status: error
+            });
+        });
 };
 
 // Exporting Methods.
 module.exports = {
-  getPopularTvShows,
-  getTrendingTvShows,
-  getTvShowDetails,
-  getTvOnSearch
+    getPopularTvShows,
+    getTrendingTvShows,
+    getTvShowDetails,
+    getTvOnSearch
 };
diff --git a/view/src/App.js b/view/src/App.js
@@ -2,14 +2,15 @@ import React, { Component } from 'react';
 import Home from './Layouts/Home';
 import Register from './Layouts/Register';
 import Login from './Layouts/Login';
-import Details from './Layouts/Details';
 import Profile from './Layouts/Profile';
 import DiscoverMovies from './Layouts/DiscoverMovies';
 import DiscoverShows from './Layouts/DiscoverShows';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import NavBar from './components/NavBar';
 import AuthHelper from './Utils/AuthHelper';
 import axios from 'axios';
+import MovieDetails from './Layouts/MovieDetails';
+import ShowDetails from './Layouts/ShowDetails';
 class App extends Component {
     // App State.
     constructor(props) {
@@ -81,7 +82,8 @@ class App extends Component {
                             path="/discover/shows/trending"
                             component={DiscoverShows}
                         />
-                        <Route path="/details/:id" component={Details} />
+                        <Route path="/movie-details/:id" component={MovieDetails} />
+                        <Route path="/show-details/:id" component={ShowDetails} />
                     </Switch>
                 </div>
             </BrowserRouter>

diff --git a/view/src/Assets/CSS/ActorItem.css b/view/src/Assets/CSS/ActorItem.css
@@ -3,9 +3,15 @@
     width: 150px;
     height: 220px;
     margin-right: 20px;
+    border-radius: 5%;
+    overflow:hidden;
+    box-shadow: 0px 5px 10px #e00000;
+
 }
 .actor-img{
     width: 150px;
+    padding: 10%;
+    background-color: rgb(85, 85, 85);
 }
 .real-name{
     margin:8px 0 0 15px;
@@ -15,4 +21,8 @@
 .role-name{
     margin:1px 0 0 15px;
     color: #000;
+}
+.names{
+    padding: 2%;
+    padding-bottom: 15%;
 }
diff --git a/view/src/Assets/CSS/Details.css b/view/src/Assets/CSS/Details.css
@@ -36,6 +36,10 @@
     margin: 1%;
     cursor: pointer;
 }
+
+.btns:hover{
+     transform: scale(1.3);
+}
 .overview {
     max-width: 100%;
 }
@@ -85,4 +89,8 @@
     flex-wrap: wrap;
     max-width: 80%;
     padding-bottom: 20%;
+}
+
+.no-crew{
+    color:white;
 }
diff --git a/view/src/Assets/CSS/GenerChip.css b/view/src/Assets/CSS/GenerChip.css
@@ -4,7 +4,7 @@
     border-radius: 20px;
     margin: 0px 5px;
     max-height: 35px;
-    max-width: 130px;
+    max-width: 150px;
     min-width: 70px;
     margin-top: 8px;
     text-align: center;