working out rental form logistics

.gitignore

@@ -27,3 +27,7 @@
 
 # Ignore master key for decrypting credentials and more.
 /config/master.key
+
+NOTES.md
+
+.byebug_history

Gemfile

@@ -39,6 +39,8 @@ gem "bootsnap", require: false
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
   gem "debug", platforms: %i[ mri mingw x64_mingw ]
+
+  gem "byebug"
 end
 
 group :development do

Gemfile.lock

@@ -75,6 +75,7 @@ GEM
     bootsnap (1.15.0)
       msgpack (~> 1.2)
     builder (3.2.4)
+    byebug (11.1.3)
     case_transform (0.2)
       activesupport
     concurrent-ruby (1.1.10)
@@ -169,6 +170,7 @@ DEPENDENCIES
   active_model_serializers (~> 0.10.13)
   bcrypt (~> 3.1.7)
   bootsnap
+  byebug
   debug
   pg (~> 1.1)
   puma (~> 5.0)

app/controllers/application_controller.rb

@@ -25,7 +25,7 @@ def authorize
     end
 
     def render_422(exception)
-      render json: { errors: exception.record.errors.full_messages }, status: 422
+      render json: { errors: [exception.record.errors.full_messages] }, status: 422
     end
 
 end

app/controllers/movies_controller.rb

@@ -12,7 +12,9 @@ def create
 
   def update
     find_movie
-    @movie.update(movie_params)
+    # byebug
+    @movie.update!(availability: params[:availability])
+    # byebug
     render json: @movie, status: :accepted
   end
 

app/controllers/rentals_controller.rb

@@ -2,7 +2,7 @@ class RentalsController < ApplicationController
   before_action :authorize
 
   def index
-    render json: @current_user.rentals.all, include: [:movie, :store]
+    render json: @current_user.rentals.all # //, include: [:movie, :store]
   end
 
   def show
@@ -11,13 +11,16 @@ def show
   end
 
   def create
-    rental = @current_user.rentals.create!(rental_params)
+    # verify_availability
+    find_movie
+    rental = @current_user.rentals.create!(user_id: @current_user.id, movie_id: @movie.id, store_id: @movie.store_id)
     render json: rental, status: :created
   end
 
   def destroy
     find_rental
     @rental.destroy
+    render json: @current_user.rentals.all, include: [:movie, :store]
   end
 
   private
@@ -29,4 +32,13 @@ def find_rental
     def rental_params
       params.permit(:user_id, :movie_id, :store_id)
     end
+
+    def find_movie
+      @movie = Movie.find_by(id: params[:movie_id])
+    end
+
+    # def verify_availability
+    #   find_movie
+    #   @movie.availability == false ? render json: {error: "Movie not available"}, status: :unprocessable_entity : 
+    # end
 end

app/serializers/rental_serializer.rb

@@ -1,5 +1,5 @@
 class RentalSerializer < ActiveModel::Serializer
-  attributes :id, :movie, :store, :rental_summary
+  attributes :id, :movie  # //, :store, :rental_summary
 
   def rental_summary
     "Test"

client/src/App.js

@@ -67,13 +67,13 @@ function App() {
   return (
     <BrowserRouter>
       <div className="App">
-        <NavBar user={user} setUser={setUser} />
+        <NavBar user={user} setUser={setUser} setRentalMovie={setRentalMovie} />
         <Switch>
           <Route exact path="/movies"><MoviesContainer fetchMovies={fetchMovies} user={user} movies={movies} availableMovies={availableMovies}/></Route>
           <Route path={"/movies/:id"}><MovieDetails movies={movies} setRentalMovie={setRentalMovie} /></Route>
           <Route path="/stores"><StoresContainer user={user} stores={stores} setStores={setStores}/></Route>
           <Route path="/stores/:id"><Store /></Route>
-          <Route path="/rent"><RentalForm user={user} movies={movies} availableMovies={availableMovies} rentalMovie={rentalMovie} setRentalMovie={setRentalMovie}/></Route>
+          <Route path="/rent"><RentalForm user={user} movies={movies} setMovies={setMovies} availableMovies={availableMovies} rentalMovie={rentalMovie} setRentalMovie={setRentalMovie} fetchMovies={fetchMovies}/></Route>
           <Route exact path="/"><Home user={user} setUser={setUser} loggedIn={loggedIn} setLoggedIn={setLoggedIn} movies={movies} fetchMovies={fetchMovies}/></Route>
         </Switch>
       </div>

client/src/components/MovieDetails.js

@@ -19,8 +19,8 @@ function MovieDetails({ movies, setRentalMovie }) {
     }
   },[])
 
-  function handleRentalClick() {
-    setRentalMovie({movie_id: movie.id, title: movie.title})
+  function handleRentalClick(movie) {
+    setRentalMovie(movie)
     history.push("/rent")
   }
 
@@ -41,7 +41,7 @@ function MovieDetails({ movies, setRentalMovie }) {
       <p className="synopsis">{movie.synopsis}</p>
       <br></br>
       <br></br>
-      {movie.availability ? <button value={movie.id} onClick={handleRentalClick}>Rent this movie!</button> : <div>Sorry, this movie is not available to rent.</div> }
+      {movie.availability ? <button value={movie.id} onClick={handleRentalClick(movie)}>Rent this movie!</button> : <div>Sorry, this movie is not available to rent.</div> }
     </div>
   )
 }

client/src/components/NavBar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link, NavLink, useHistory } from 'react-router-dom';
 
-function NavBar({ user, setUser }) {
+function NavBar({ user, setUser, setRentalMovie }) {
   const history = useHistory();
 
   function handleLogout(e) {
@@ -10,6 +10,7 @@ function NavBar({ user, setUser }) {
       method: "DELETE"
     })
     .then(setUser(null))
+    .then(setRentalMovie({}))
     .then(history.push("/"))
   }
 

client/src/components/RentalForm.js

@@ -1,15 +1,19 @@
 import React, { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import '../styles.css'
 
-function RentalForm({ user, movies, availableMovies, rentalMovie, setRentalMovie }) {
-  const [activeRentals, setActiveRentals] = useState([]); 
-  // const [rental, setRental] = useState({
-  //   movie_id: rentalMovie.id,
-  //   title: rentalMovie.id
-  // })
+function RentalForm({ user, movies, setMovies, availableMovies, rentalMovie, setRentalMovie, fetchMovies }) {
+  const [activeRentals, setActiveRentals] = useState([]);
+  const [errors, setErrors] = useState([]);
+  const [rental, setRental] = useState({
+    movie_id: rentalMovie.id,
+    title: rentalMovie.id
+  })
 
   useEffect(() => {
     fetchActiveRentals()
-  }, [user])
+    setRental({movie_id: rentalMovie.id, title: rentalMovie.title})
+  }, [])
 
   function fetchActiveRentals() {
     fetch('/rentals')
@@ -28,28 +32,102 @@ function RentalForm({ user, movies, availableMovies, rentalMovie, setRentalMovie
         availability: true
       })
     })
-    .then(fetch(`/rentals/${e.target.id}`, {
+    .then(fetch(`/rentals/${e.target.value}`, {
       method: "DELETE",
       headers: {
         "Content-Type": "application/json",
         "Accept": "application/json"
       }
     }))
+    .then(r => {
+      if (r.ok) {
+        // fetchActiveRentals()
+      } else {
+        r.json().then(data => setErrors(data.errors))
+      }
+    })
     .then(fetchActiveRentals())
   }
 
-  // function handleMovieSelection(e) {
-  //   const newMovie = movies.find(movie => parseInt(movie.id) === parseInt(e.target.value))
-  //   setRentalMovie(newMovie)
-  //   // console.log((newMovie))
+
+  function updateMoviesFalse() {
+    const movieIndex = movies.findIndex(movie => movie.id === rentalMovie.movie_id)
+    console.log(movieIndex)
+    const newMovies = movies
+    newMovies[movieIndex].availability = false
+    console.log(newMovies)
+    setMovies(newMovies)
+  }
+
+  function updateMoviesTrue() {
+    const movieIndex = movies.findIndex(movie => movie.id === rentalMovie.movie_id)
+    console.log(movieIndex)
+    const newMovies = movies
+    newMovies[movieIndex].availability = true
+    console.log(newMovies)
+    setMovies(newMovies)
+  }
+
+
+  function availabilityPatchFalse() {
+    fetch(`/movies/${rental.movie_id}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        "Accept": "application/json"
+      },
+      body: JSON.stringify({availability: false})
+    }).then(updateMoviesFalse()).then(setRentalMovie({}))
+  }
+
+  function availabilityPatchTrue() {
+    fetch(`/movies/${rental.movie_id}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        "Accept": "application/json"
+      },
+      body: JSON.stringify({availability: true})
+    }).then(updateMoviesTrue()) 
+  }
+
+  // function handleRentalStart(e) {
+    // fetch(`/rentals`, {
+    //   method: "POST",
+    //   headers: {
+    //     "content-type": "application/json",
+    //     "accept": "application/json"
+    //   },
+    //   body: JSON.stringify({
+    //     movie_id: rentalMovie.movie_id
+    //   })
+    //   })
+    // availabilityPatch()
+  // }
+
+  function handleRentalStart(e) {
+    fetch('/rentals', {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+        "accept": "application/json"
+      },
+      body: JSON.stringify(rental)
+    })
+    .then(r => {
+      if (r.ok) {
+        availabilityPatchFalse();
+        fetchActiveRentals();
+      } else {
+        r.json().then(data => setErrors(data.errors))
+      }
+    })
+  }
+
+  // function handleReturn() {
+
   // }
 
-  // useEffect(() => {
-  //   setRental({
-  //     movie_id: rentalMovie.id
-  //   })
-  //   console.log("from useeffect", rental)
-  // }, [rentalMovie])
 
   return (
     <div>
@@ -59,7 +137,7 @@ function RentalForm({ user, movies, availableMovies, rentalMovie, setRentalMovie
       <ul>
         {activeRentals.map(rental => {
           return (
-            <li key={rental.movie.id}>{rental.movie.title} <button value={rental.movie.id} id={rental.id} onClick={handleReturn}>Return this movie</button></li>
+            <li key={rental.movie.id} value={rental.index}> {rental.movie.title} <button value={rental.id} id={rental.id} onClick={handleReturn}>Return this movie</button></li>
           )
         })}
       </ul>
@@ -78,7 +156,14 @@ function RentalForm({ user, movies, availableMovies, rentalMovie, setRentalMovie
           })}
         </select>
       </form> */}
-      <h4>Begin rental of {rentalMovie.title}</h4><button>Activate Rental</button>
+
+      { rentalMovie.title ? <div><h4>Begin rental of {rentalMovie.title}</h4><button value={rentalMovie.movie_id} onClick={handleRentalStart} >Activate Rental</button></div> : <Link to="/movies">Choose a movie to rent</Link> }
+
+      {errors.map(err => {
+        return (
+          <li key={err.message}>{err.message}</li>
+        )
+      })}
     </div>
   )
 }

client/src/styles.css

@@ -34,4 +34,8 @@
   margin-right: auto;
   width: 95%;
   padding-left: 50px
+}
+
+.hidden {
+  visibility: hidden;
 }