favorite feature connected to db

Author: wonil-park

client/src/components/App.jsx

@@ -13,6 +13,10 @@ const navItems = [
     name: "About",
     link: "#",
   },
+  {
+    name: "My Favorite Videos",
+    link: "#",
+  },
   {
     name: "Services",
     link: "#",
@@ -44,6 +48,7 @@ class App extends React.Component {
       .get("/fav")
       .then(({ data }) => this.setState({ favorites: data }))
       .catch((err) => console.log(err));
+    console.log(this.state.favorites);
   }
 
   handleSubmit(query) {
@@ -56,13 +61,15 @@ class App extends React.Component {
       .then(({ data }) => {
         let videos = [];
         data.items.forEach((item) => {
+          console.log(item);
           let video = {};
           video.liked = false;
           video.id = item.id.videoId;
           video.title = item.snippet.title;
           video.publishedAt = item.snippet.publishedAt;
           video.description = item.snippet.description;
-          video.thumbnails = item.snippet.thumbnails;
+          video.thumbnails = {};
+          video.thumbnails.default = item.snippet.thumbnails.default;
           videos.push(video);
         });
         this.setState({
@@ -77,10 +84,13 @@ class App extends React.Component {
 
   handleFavorite(idx) {
     let { videos } = this.state;
-    videos[idx].liked = !videos[idx].liked;
+    let video = videos[idx];
+    video.liked = !video.liked;
     this.setState({ videos });
     axios
-      .patch(`/fav/${videos[idx].id}`)
+      .patch(`/fav/${video.id}`, {
+        data: video,
+      })
       .then((msg) => console.log(msg))
       .catch((err) => console.log(err));
   }

client/src/components/ExerciseService.jsx

@@ -32,7 +32,7 @@ class ExerciseService extends React.Component {
           <div
             className="modal fade"
             id="exampleModal"
-            tabindex="-1"
+            tabIndex="-1"
             role="dialog"
             aria-labelledby="exampleModalLabel"
             aria-hidden="true"

database/Model/Video.js

@@ -7,7 +7,9 @@ const videoSchema = new mongoose.Schema({
   description: String,
   thumbnails: {
     default: {
+      height: Number,
       url: String,
+      width: Number,
     },
   },
 });
@@ -24,15 +26,25 @@ const getAllVideos = (callback) => {
   });
 };
 
-const changeFavorite = (video, callback) => {
-  Photo.create(video, (err) => {
-    if (err) {
-      callback(err);
-    } else {
-      console.log("added");
-      callback(null);
-    }
-  });
+const changeFavorite = (id, video, callback) => {
+  if (!Video.exists({ id })) {
+    Video.findOneAndUpdate({ id }, video, (err) => {
+      if (err) {
+        callback(err);
+      } else {
+        callback(null);
+      }
+    });
+  } else {
+    Video.create(video, (err) => {
+      if (err) {
+        callback(err);
+      } else {
+        console.log("added");
+        callback(null);
+      }
+    });
+  }
 };
 
 module.exports = {

public/bundle.js

@@ -27,8 +27,8 @@ app.get("/fav", (req, res) => {
 
 app.patch("/fav/:id", (req, res) => {
   const id = req.param.id;
-  console.log(req.body);
-  Video.changeFavorite(id, (err, results) => {
+  const video = req.body.data;
+  Video.changeFavorite(id, video, (err, results) => {
     if (err) {
       res.status(500).send(err);
     } else {
@@ -37,11 +37,6 @@ app.patch("/fav/:id", (req, res) => {
   });
 });
 
-app.post("/fav", (req, res) => {
-  const video = req.body;
-  console.log(video);
-});
-
 app.listen(PORT, () => {
   console.log(`Server listening on port: ${PORT}...`);
 });