<file_sep>import React, { useState, useEffect } from 'react';
import { useParams, useHistory } from 'react-router-dom';
import axios from 'axios';

//styles
import './UpdateForm.scss';

const UpdateForm = ({getMovieList, movieList, setMovieList}) => {
  const [movieToEdit, setMovieToEdit] = useState({});
  const {id} = useParams();
  let history= useHistory();

  useEffect(() => {
      const itemToEdit= movieList.find( movie => `${movie.id}` === id );
      if(itemToEdit){
        setMovieToEdit(itemToEdit);
      }//end if
  }, [])

  const handleChange = e => {
    let value= e.target.value;
    setMovieToEdit({
      ...movieToEdit,
      [e.target.name]: value
    });
    console.log('handleChange: ');
  }//end handleChange

  const sendPut= () => {
    axios.put(`http://localhost:5000/api/movies/${movieToEdit.id}`, movieToEdit)
    .then(putRes => {
      console.log('putRes.data: ', putRes.data);
      getMovieList();
      history.push(`/movies/${id}`);
    })
    .catch(putErr => {console.log('putErr: ', putErr)})
  }//end sendPut

  const handleSubmit = e => {
    e.preventDefault();
    sendPut();
    {console.log('movieToEdit from state: ', movieToEdit)}
    console.log('submitted!');
  }//end handleSubmit

  return (
    <div className='updateCont'>
      {console.log('movieList from props: ', movieList)}
      <form onSubmit={handleSubmit}>

        <label htmlFor='title'>Title</label>
        <input
          onChange={handleChange}
          value={movieToEdit.title}
          type='text'
          name='title'
          id='title'
          placeholder='Title'
        />

        <label htmlFor='director'>Director</label>
        <input
          onChange={handleChange}
          value={movieToEdit.director}
          type='text'
          name='director'
          id='director'
          placeholder='Director'
        />

        <label htmlFor='metascore'>Metascore</label>
        <input
          onChange={handleChange}
          value={movieToEdit.metascore}
          type='text'
          name='metascore'
          id='metascore'
          placeholder='Metascore'
        />

        <label htmlFor='actors'>Stars</label>
        <input
          onChange={handleChange}
          value={movieToEdit.stars}
          type='text'
          name='stars'
          id='stars'
          placeholder='Stars'
        />

        <button
          id='updateSubmitBtn'
        >Submit Changes</button>
      </form>
    </div>
  )
}

export default UpdateForm;<file_sep>import React from 'react';
import {Link, useHistory} from 'react-router-dom';
import axios from 'axios';

const MovieCard = props => {
  const { title, director, metascore, stars, id } = props.movie;
  const history= useHistory();

  const deleteMovie= id => {
    if(window.confirm('Are you sure you want to delete this movie?')){
      axios
        .delete(`http://localhost:5000/api/movies/${id}`)
        .then(delRes => {
          props.getMovieList()
          history.push('/')
          console.log('delRes: ', delRes);
        })
        .catch(delErr => {
          console.log('delErr: ', delErr);
        })
    }//end if confirm
  }//end deleteMovie

  return (
    <div className="movie-card">
      <h2>{title}</h2>
      <div className="movie-director">
        Director: <em>{director}</em>
      </div>
      <div className="movie-metascore">
        Metascore: <strong>{metascore}</strong>
      </div>
      <h3>Actors</h3>

      {stars.map(star => (
        <div key={star} className="movie-star">
          {star}
        </div>
      ))}
      {
      useHistory().location.pathname.includes('movies') && <Link id= 'updateBtn' to= {`/update-movie/${id}`}>Edit Me</Link>}
      {useHistory().location.pathname.includes('movies') &&
      <button onClick= {() => deleteMovie(`${id}`)} id= 'deleteBtn'>Delete</button>
      }
    </div>
  );
};

export default MovieCard;
<file_sep>import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useRouteMatch } from 'react-router-dom';
import MovieCard from './MovieCard';

function Movie({getMovieList, addToSavedList }) {
  const [movie, setMovie] = useState(null);
  const match = useRouteMatch();

  //this page only recieves one movie, so we need to format the 'array' portion of the  movie if it's a string.
  const formatMovie= (movieData) => {
    if(Array.isArray(movieData.stars) === false){
      //string to array
      let newArr= movieData.stars.split(',');
      //assign the new array to the movie
      movieData.stars= newArr;
      return movieData;
    }else{
      return movieData;
    }
  }//end formatMovie

  const fetchMovie = id => {
    axios
      .get(`http://localhost:5000/api/movies/${id}`)
      .then(res => {
        let movieData= res.data
        setMovie(formatMovie(movieData));
      })
      .catch(err => console.log(err.response));
  };

  const saveMovie = () => {
    addToSavedList(movie);
  };

  useEffect(() => {
    fetchMovie(match.params.id);
  }, [match.params.id]);

  if (!movie) {
    return <div>Loading movie information...</div>;
  }

  return (
    <div className='save-wrapper'>
      <MovieCard 
        getMovieList= {getMovieList}
        movie={movie} />
      <div className='save-button' onClick={saveMovie}>
        Save
      </div>
    </div>
  );
}

export default Movie;
