How to make only logged in user delete their cards in Rails backend react frontend?

Viewed 21

Im new with rails and imm stuck on this deleting part.When a user logs into his account I want the user to be able to delete only his review cards and not the review cards of other users i know this requires some authorization but im not sure how.Heres my code.

Application controller

class ApplicationController < ActionController::API
  include ActionController::Cookies
  
  rescue_from ActiveRecord::RecordInvalid, with: :render_unprocessable_entity_response

  before_action :authorize
   
    

    private
    def authorize
      puts "hello",session[:user_id]
      @current_user = User.find_by(id: session[:user_id])
  
      render json: { errors: ["Not authorized"] }, status: :unauthorized unless @current_user
    end
  
    def render_unprocessable_entity_response(exception)
      render json: { errors: exception.record.errors.full_messages }, status: :unprocessable_entity
    end
  end

Reviews controller

class ReviewsController < ApplicationController
    before_action :authorize


    def index
        review=Review.all
        render json: review

    end
    def show
        review=Review.find(params[:id])
        render json: review

    end
    def create
        review=Review.create!(review_params)
        render json: review,status: :created


    end

    def update
        review=Review.find(params[:id])
        review.update!(review_params)
        render json: review,status: :ok

    end

    def destroy
        review=Review.find(params[:id])
        review.destroy
        head :no_content
    rescue ActiveRecord::RecordInvalid => invalid
        render json: { errors: invalid.record.errors }, status: :not_found
    end

    private
    
    def review_params
        params.permit(:image,:date,:description,:destination,:seat,:user_id,:airline_id)

    end

   
end

sessions controller

class SessionsController < ApplicationController

    skip_before_action :authorize, only: :create
    def create
        user = User.find_by(email: params[:email])
        if user&.authenticate(params[:password])
          session[:user_id] = user.id
          render json: user
        else
          render json: { errors: ["Invalid username or password"] }, status: :unauthorized
        end
      end

    def destroy
        session.delete :user_id
        head :no_content
      end
    
    
end
    

User controller

class UsersController < ApplicationController
    
    skip_before_action :authorize, only: :create
   
    def create
        user = User.create!(user_params)
        session[:user_id] = user.id
        render json: user, status: :created
      end

   
      def show
        render json: @current_user
      end

     
      def index
        user=User.all 
        render json: user

      end

    private 
    
    def user_params
        params.permit(:name,:email,:password)

    end
end

On the front end App.js

 const [reviews, setReviews] = useState([]);

return(

          <Route
            exact
            path="/airlines/:id"
            element={
              <Reviews
                reviews={reviews}
                setReviews={setReviews}
                
              />
            }
          />)

Reviews.js

const Reviews = ({reviews, setReviews}) => {

  const { id } = useParams();

  useEffect(()=>{
    fetch("/reviews")
    .then(res=>res.json())
    .then(reviewData=>{
      setReviews(reviewData)
    })
  },[])

  function handleAddReviews(newReview){
    console.log("in handle add review", newReview)
    setReviews([...reviews,newReview]);
  }

  function handleDelete(id){
    let newReviews=reviews.filter(r=>r.id !== id)
    setReviews(newReviews)
  }


console.log(reviews)
  let filteredReviews = reviews.filter(review => {

    if(review.airline?.id) {
      return review.airline.id === parseInt(id);
    }

    return null;
  })

  
  return (
    <>
    <div className="reviewb">
    <Button className="reviewbuttons" variant="danger" href={"/airlines"} >Go Back</Button>
    <Button  className="reviewbuttons" variant="info" href={`/airlines/${id}/reviews/new`} >Add a Review</Button>
    </div>
      {filteredReviews.map((review) => {
        return (
          <ReviewCard key={review.id} id={review.id} review={review} handleDelete={handleDelete}  /> 
        )
      })}
    </>
  )
}

export default Reviews;

Review.Card.js

function ReviewCard({review,handleDelete}){
    const {id}=useParams();
    const{image,date,destination,seat,description,likes,dislikes,airline_id,user_id}=review;
   
    function handleDeleteClick() {
 
      fetch(`/reviews/${review.id}`, {
        method: "DELETE",
  
      })
      handleDelete(review.id)
      
  
    } 


    return(
        <div className="reviewcard">


        
        <img  className="cardimg" src={image} />
        <p></p>
        <h6>{date}</h6>
        <h5>{destination}</h5>
        <h5>{seat}</h5>
        <Card.Text>{description}</Card.Text>
        <Card.Title>By {review.user.name}</Card.Title>
        <p></p>
        <h6>Likes: {likes}</h6>
         <h6>Dislikes: {dislikes}</h6>

        <br/>

        <Button  className ="btn btn-success"  > </Button>

        <Button  className ="btn btn-danger"  >  </Button>
        <hr />
        
        <Button  className ="btn btn-primary" onClick={handleDeleteClick}  >Delete</Button>
        
          
    
        
        </div>
    )
}
export default ReviewCard;


With this code im able to delete any review cards of any user

0 Answers
Related