added a code to the bottom navigation component

src/App.js

@@ -4,6 +4,11 @@ import Header from "./components/Header/Header";
 import SimpleBottomNavigation from "./components/MainNav";
 import Movies from "./Pages/Movies/Movies";
 import Series from "./Pages/Series/Series";
+
+
+// Imports the Favourties Page
+import Favourites from "./Pages/Favourites/Favourties";
+
 import Trending from "./Pages/Trending/Trending";
 import Search from "./Pages/Search/Search";
 import { Container } from "@material-ui/core";
@@ -19,6 +24,8 @@ function App() {
             <Route path="/movies" component={Movies} />
             <Route path="/series" component={Series} />
             <Route path="/search" component={Search} />
+            {/* Route for the Favourites Page */}
+            <Route path="/favourites" component={Favourites} />
           </Switch>
         </Container>
       </div>

src/Pages/Favourites/Favourites.js

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import SingleContent from "../../components/SingleContent/SingleContent";
+import CustomPagination from "../../components/Pagination/CustomPagination";
+import Genres from "../../components/Genres/Genres";
+import useGenres from "../../hooks/useGenres";
+import { useParams } from "react-router";
+
+
+const Favourites = ({props}) => {
+    const {id} = useParams()
+
+
+
+  const [page, setPage] = useState(1);
+  const [content, setContent] = useState([]);
+  const [numOfPages, setNumOfPages] = useState();
+  const [selectedGenres, setSelectedGenres] = useState([]);
+  const [genres, setGenres] = useState([]);
+  const genreforURL = useGenres(selectedGenres);
+
+
+//   const fetchMovies = async () => {
+
+//     const { data } = await axios.get(
+//       `https://api.themoviedb.org/3/discover/movie?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&sort_by=popularity.desc&include_adult=true&${page}&with_genres=${genreforURL}`
+//     );
+
+//     setContent(data.results);
+//     setNumOfPages(data.total_pages);
+
+
+
+//   };
+
+//   useEffect(() => {
+//     fetchMovies();
+
+
+//   },
+//   // eslint-disable-next-line 
+//   [page,genreforURL])
+
+
+
+
+  return (
+
+    <div>
+      <span className="pageTitle">Favourites</span>
+      <span>Favourite {id}</span>
+
+
+      <div className="trending">
+
+      </div>
+
+
+    </div>
+  );
+};
+
+export default Favourites;

src/components/ContentModal/ContentModal.js

@@ -144,6 +144,7 @@ export default function TransitionsModal({ children, media_type, id }) {
                   >
                     Watch the Trailer
                   </Button>
+                  <Button style={{marginTop:10}} variant="contained" color="primary">Add To WatchList </Button>
                 </div>
               </div>
             </div>

src/components/MainNav.js

@@ -6,6 +6,7 @@ import TvIcon from "@material-ui/icons/Tv";
 import MovieIcon from "@material-ui/icons/Movie";
 import SearchIcon from "@material-ui/icons/Search";
 import WhatshotIcon from "@material-ui/icons/Whatshot";
+import FavoriteIcon from "@material-ui/icons/Favorite";
 import { useHistory } from "react-router-dom";
 
 const useStyles = makeStyles({
@@ -32,6 +33,8 @@ export default function SimpleBottomNavigation() {
       history.push("/series");
     } else if (value === 3) {
       history.push("/search");
+    } else if (value === 4) {
+      history.push("/favourites");
     }
   }, [value, history]);
 
@@ -64,6 +67,21 @@ export default function SimpleBottomNavigation() {
         label="Search"
         icon={<SearchIcon />}
       />
+
+
+
+      {/* This Code Adds a Favourite Tab to the Bottom Navigation. */}
+
+      <BottomNavigationAction
+        style={{ color: "white" }}
+        label="Search"
+        icon={<FavoriteIcon />}
+      />
+
+
+
+
+
     </BottomNavigation>
   );
 }