React axios post request not allowing user to add to favorite movie

Question

I'm currently building a Netlfix mockup app, part of its functionality allows users to add to their favorite movie list. However, I keep getting this POST error 500 status from Axios whenever I click on the add favorite movie button.

I've tried everything even checked my API to see if there as issue with my POST request but to no avail.

So my question is, how can I fix this issue?

Any suggestion will be greatly appreciated.

Code

import React from "react";
import PropTypes from "prop-types";
import axios from "axios";

import {
  Link
} from "react-router-dom";
import {
  Button,
  Container,
  Row,
  Col
} from "react-bootstrap";

import "./movie-view.scss";

export class MovieView extends React.Component {
  constructor() {
    super();

    this.state = {
      movies: [],
      user: null,
    };
  }

  addMovie(movie, user) {
    let username = localStorage.getItem("user");
    let token = localStorage.getItem("token");
    console.log(movie);
    console.log(token);

    axios
      .post(
        `https://mymoviesapi2023.herokuapp.com/users/${username}/movies/${movie._id}`, {}, {
          headers: {
            Authorization: `Bearer ${token}`
          }
        }
      )
      .then((response) => {
        console.log(response.data);
        alert(`${movie.Title} has been added from your list.`);
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  delFavMovie = (movie, user) => {
    let token = localStorage.getItem("token");
    let username = localStorage.getItem("user");
    console.log(movie);
    console.log(token);
    axios
      .delete(
        `https://mymoviesapi2023.herokuapp.com/users/${username}/movies/${movie._id}`, {
          headers: {
            Authorization: `Bearer ${token}`
          },
        }
      )
      .then((response) => {
        console.log(response.data);
        alert(`${movie.Title} has been removed from your list.`);
      })
      .catch((e) => {
        console.log("Error");
      });
  };

  render() {
    const {
      movie,
      user,
      onBackClick
    } = this.props;

    return ( <
      Container className = "movie-view" >
      <
      Row >
      <
      Col className = "movie-poster" >
      <
      img src = {
        movie.ImageURL
      }
      /> <
      /Col> <
      /Row> <
      Row className = "movie-title" >
      <
      Col className = "label" > Title: < /Col> <
      Col className = "value" > {
        movie.Title
      } < /Col> <
      /Row> <
      Row className = "movie-description" >
      <
      Col className = "label" > Description: < /Col> <
      Col className = "value" > {
        movie.Description
      } < /Col> <
      /Row> <
      Row >
      <
      Link to = {
        `/directors/${movie.Director.Name}`
      } >
      <
      Button variant = "link" > Director < /Button> <
      /Link> <
      Link to = {
        `/genres/${movie.Genre.Name}`
      } >
      <
      Button variant = "link" > Genre < /Button> <
      /Link> <
      /Row> <
      Button

      onClick = {
        () => {
          onBackClick(null);
        }
      } >
      Back <
      /Button> <
      Button className = "button ml-2"
      onClick = {
        () => {
          this.addMovie(movie, user);
        }
      } >
      Add to favorites <
      /Button> <
      Button className = "button ml-2"
      onClick = {
        () => {
          this.delFavMovie(movie, user);
        }
      } >
      Remove from favorites <
      /Button> <
      /Container>
    );
  }
}

API POST Request

// ADD MOVIE TO FAVORITES LIST OF USER
app.post('/users/:Username/movies/:MovieID',
  passport.authenticate({
    session: false
  }),
  (req, res) => {
    if (req.user.Username !== req.params.Username) {
      res.status(403).json('Not allowed to add movie to another user\'s favorites list');
    } else {
      Users.findOneAndUpdate({
          Username: req.params.Username
        },
        {
          $push: {
            FavoriteMovies: req.params.MovieID
          }
        }, {
          new: true
        }, // This line ensures that the updated document is returned
        (err, updated_User) => {
          if (err) {
            console.error(err);
            res.status(500).send(`Error:${err}`)
          } else {
            res.json(updated_User)
          }
        });
    }
  });

Console: Axios Error

Logs

React axios post request not allowing user to add to favorite movie

0 Answers