add to favourite completed

NarayanBavisetti · Aug 2, 2021 · c7c41bb · c7c41bb
1 parent 0885709
commit c7c41bb
Show file tree

Hide file tree

Showing 10 changed files with 155 additions and 62 deletions.
diff --git a/frontend/src/components/Favourite.css b/frontend/src/components/Favourite.css
@@ -0,0 +1,13 @@
+.link{
+    text-decoration: none;
+    color: aliceblue;
+}
+.link:hover{
+    color: aliceblue;
+
+}
+.table{
+    margin-left: auto;
+    margin-right: auto;
+
+}
diff --git a/frontend/src/components/Favourite.js b/frontend/src/components/Favourite.js
@@ -1,52 +1,81 @@
-import React,{useEffect} from "react";
+import React, { useContext, useEffect, useState } from "react";
 import Header from "./Header";
 import { Button, Col, Table } from "react-bootstrap";
-import { useHistory } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import axios from "axios";
+import UserContext from "../context/userContext";
+import "./Favourite.css";
 
 export default function Favourite() {
-  //   const history = useHistory();
-  // const callHomePage = async () => {
-
-  //   try {
-  //      const res = await axios.get("/favourite");
-  //     console.log(res)
-  //     const data = await res.json();
-  //     console.log(data);
-  //   } catch (e) {
-  //       history.push("/login");
-  //       console.log(e)
-  //   }
-  // };
-  // useEffect(() => {
-  //   callHomePage();
+  const currentUser = useContext(UserContext);
+  const { favourite } = currentUser;
+  const [cart, setCart] = useState([]);
+  const [movie, setMovie] = useState("");
+  const history = useHistory();
+  const callHomePage = async () => {
+    // try {
+    const res = await axios.get("/favourite");
+    setCart(res.data);
+    console.log(res);
+    // const data = await res.json();
+    console.log(res.data);
+    // }
+    // catch (e) {
+    //   history.push("/login");
+    //   console.log(e);
+    // }
+  };
+
+  async function removeFav(id) {
+    await axios.post("/favourite/remove", id);
+    await axios.get("/favourite");
+    // res.send()
+  }
+  useEffect(() => {
+    callHomePage();
+  }, []);
 
-  //   // axios.post('/favourite')
-  // }, []);
   return (
     <div>
-      <Header />
+      <Header favouriteLen={favourite.length} />
       <h1>Favoourite Page</h1>
-      <Table striped bordered hover variant="dark" responsive>
+      <div className="table">
+      <Table  striped bordered hover variant="dark" responsive>
         <thead>
           <tr>
             <th>S.No</th>
-            <th>Movie Name</th>
-            <th>Last Name</th>
-            <th>Username</th>
+            <th>Movie </th>
+            <th>Title</th>
+            <th></th>
           </tr>
         </thead>
-        <tbody>
-          <tr>
-            <td>1</td>
-            <td>Mark</td>
-            <td>Otto</td>
-            <td>
-              <Button>Remove</Button>
-            </td>
-          </tr>
-        </tbody>
+        {cart.map((item, index) => {
+          return (
+            <tbody>
+              <tr>
+                <td>{index + 1}</td>
+
+                <td style={{ width: "5%" }}>
+                  <Link to={`/movie/${item.imdbID}`} className="link">
+                    <img width="100px" src={item.Poster} alt={item.Title} />
+                  </Link>
+                </td>
+
+                <td>
+                  <Link to={`/movie/${item.imdbID}`} className="link">
+                    <h6>{item.Title}</h6>
+                  </Link>
+                </td>
+
+                <td>
+                  <Button onClick={() => removeFav(item._id)}>Remove</Button>
+                </td>
+              </tr>
+            </tbody>
+          );
+        })}
       </Table>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
@@ -51,7 +51,11 @@ const Header = (props) => {
             <Nav className="me-auto">
               <Nav.Link>
                 <Link className="nav-link" to="/favourite">
-                  Favourite
+                  Favourite{" "}
+                  {props.favouriteLen !== 0 ? <>
+                   ({props.favouriteLen})
+                   </>
+                   :null}
                 </Link>
               </Nav.Link>
             </Nav>

diff --git a/frontend/src/components/Login.js b/frontend/src/components/Login.js
@@ -8,7 +8,7 @@ import UserContext from "../context/userContext";
 export default function Login() {
 
   const currentUser = useContext(UserContext);
-const{getLoggedIn} = currentUser;
+const{getLoggedIn,favourite} = currentUser;
 
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -28,7 +28,7 @@ const{getLoggedIn} = currentUser;
   };
   return (
     <div>
-      <Header />
+      <Header favouriteLen={favourite.length}/>
 
       <div className="row mt-5">
         <div className="col-md-6 m-auto">

diff --git a/frontend/src/components/Movie.js b/frontend/src/components/Movie.js
@@ -1,10 +1,15 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import {  Button } from "react-bootstrap";
 import { useParams } from "react-router-dom";
+import UserContext from "../context/userContext";
 import Header from "./Header";
 import "./Movie.css";
 
 export default function Movie() {
+
+  const currentUser = useContext(UserContext);
+
+  const {favourite} = currentUser;
   const { id } = useParams();
   const [Movie, setMovie] = useState("");
 
@@ -23,7 +28,7 @@ export default function Movie() {
 
   return (
     <div>
-      <Header />
+      <Header favouriteLen={favourite.length} />
       <div className="app">
         <div className="details">
           <div className="big-img">

diff --git a/frontend/src/components/MovieList.js b/frontend/src/components/MovieList.js
@@ -7,41 +7,42 @@ import { ToggleButton } from "react-bootstrap";
 import { Link, useHistory } from "react-router-dom";
 import UserContext from "../context/userContext";
 
-
-
 export default function MovieList() {
 
   const [Movie, setMovie] = useState([]);
   const [search, setSearch] = useState("avengers");
-  // const [favourites, setFavourites] = useState([]);
   const [checked, setChecked] = useState(false);
+
   const currentUser = useContext(UserContext);
+  const { isLoggedIn,favourite } = currentUser;
 
   const history = useHistory();
   const getMovie = async (search) => {
-
-      //  const url =  axios.get("https://www.omdbapi.com/?s=avengers&apikey=8717385c")
+
     const url = `https://www.omdbapi.com/?s=${search}&apikey=${process.env.REACT_APP_API_KEY}`;
     const response = await fetch(url);
     const responseJson = await response.json();
-    // console.log(responseJson);
+
     if (responseJson.Search) {
       setMovie(responseJson.Search);
     }
   };
   useEffect(() => {
     getMovie(search);
-    // addFavouriteHandle()
-    // axios.post('/favourite')
+    addFavouriteHandle()
+    axios.post('/favourite')
   }, [search]);
 
   const { addFavourite } = currentUser;
-  // function addFavouriteHandle(Title) {
-  //   // const movie = {
-  //   //   Title
-  //   // }
-  //   addFavourite(Title);
-  // }
+  function addFavouriteHandle(Poster,imdbID,Title,) {
+    const movie = {
+         imdbID,
+         Title,
+         Poster
+    }
+    console.log(movie);
+    addFavourite(movie);
+  }
 
   // const addFavourite = (movie) => {
   //   const newFavourite = [...favourites,movie];
@@ -52,7 +53,7 @@ export default function MovieList() {
 
   return (
     <div>
-      <Header search={search} setSearch={setSearch} />
+      <Header search={search} setSearch={setSearch}  favouriteLen={favourite.length} />
       <div className="container">
         {Movie.map((item, index) => {
           return (
@@ -74,7 +75,11 @@ export default function MovieList() {
       >
         Checked
       </ToggleButton> */}
-                {/* <button onClick={addFavouriteHandle(item.Title)}>Add to</button> */}
+                {isLoggedIn === true ? (
+                  <button onClick={() => addFavouriteHandle(item.Poster,item.imdbID,item.Title)}>
+                    Add to
+                  </button>
+                ) : null}
                 {/* {favourites.includes(i) ? 
      <IoIosHeart onClick={(item,i) => addFavourite(item,i)} style={{color:'red'}}> </IoIosHeart>
     :

diff --git a/frontend/src/components/SignUp.js b/frontend/src/components/SignUp.js
@@ -1,10 +1,15 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import axios from "axios";
 import { Link, useHistory } from "react-router-dom";
 import "./signup.css";
 import Header from "./Header";
+import UserContext from "../context/userContext";
 
 export default function SignUp() {
+
+  const currentUser = useContext(UserContext);
+  const{favourite} = currentUser;
+
   const [username, setUsername] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -27,7 +32,7 @@ export default function SignUp() {
 
   return (
     <div>
-      <Header />
+      <Header favouriteLen={favourite.length}/>
       <div className="row mt-5">
         <div className="col-md-6 m-auto">
           <div className="card ">

diff --git a/frontend/src/context/userContext.js b/frontend/src/context/userContext.js
@@ -24,13 +24,15 @@ export function UserContextProvider(props) {
       getFavourite();
     }
   },[isLoggedIn]);
-  async function addFavourite(Title) {
+  async function addFavourite(movie) {
     try {
+      if(movie.imdbID !== undefined){
       setFavourite((prevFav) => {
-        return prevFav.concat(Title);
+        return prevFav.concat(movie);
       });
-      await axios.post("/favourite/add", { Title });
+      await axios.post("/favourite/add", { imdbID:movie.imdbID ,Title:movie.Title,Poster:movie.Poster});
       console.log("product added sucessfully");
+    }
     } catch (e) {
       console.log(e);
     }

diff --git a/models/userSchema.js b/models/userSchema.js
@@ -15,8 +15,14 @@ const UserSchema = mongoose.Schema({
     },
     favourite:[
         {
+            imdbID:{
+                type:String,
+            },
             Title:{
                 type:String,
+            },
+            Poster:{
+                type:String,
             }
         }
     ]

diff --git a/routes/auth.js b/routes/auth.js
@@ -96,6 +96,7 @@ router.get("/favourite", isLoggedIn, async (req, res) => {
     const userid = await req.user;
     const User = await user.findById(userid).populate("favourite");
     res.status(200).json(User.favourite);
+    // console.log(User.favourite)
   } catch (e) {
     console.log(e);
     res.status(500).json();
@@ -105,10 +106,16 @@ router.get("/favourite", isLoggedIn, async (req, res) => {
 //add items in the cart
 router.post("/favourite/add", isLoggedIn, async(req, res) => {
   try {
-    const { Title } = req.body;
+    const { imdbID,Title,Poster } = req.body;
     const userid = req.user;
     const User = await user.findById(userid);
-    User.favourite.push(Title);
+    const data ={
+      imdbID,
+      Title,
+      Poster
+    }
+    // console.log(data)
+    User.favourite.push(data);
     await User.save();
     res.status(200).json("added to cart successfully");
   } catch (e) {
@@ -117,4 +124,21 @@ router.post("/favourite/add", isLoggedIn, async(req, res) => {
   }
 });
 
+router.post("/favourite/remove", isLoggedIn, async(req, res) => {
+  try {
+    const { id } = req.body;
+
+    // console.log(id);
+    const userid = req.user;
+    const User = await user.findById(userid);
+
+    User.favourite.pull(req.body);
+    await User.save();
+    res.status(200).json("Remove from cart successfully");
+  } catch (e) {
+    console.log(e);
+    res.status(500).json();
+  }
+});
+
 module.exports = router;