CODEWITHSUNDEEP
reactjsruby-on-railsreact-on-rails
Creider9
Creider9

Reputation: 1

Update controller action - how to redirect to the index page after rendering json?

My app is built with ruby on rails on the backend, and react.js on the front end.

I can see in my rails console that I get the updated information from my http.patch request in rails, and it is received in rails, and now I am trying to adjust the update controller action to be able to redirect to the /donations page.

My routes for donations are as follows:

Routes

I am trying to figure out how I can redirect the routes so that when the PATCH occurs, it will send the user to the list of all donations, instead of staying on the /edit page which is what it is currently doing. My current update action is:

    def update
      if @donation.update(donation_params)
        render json: @donation
      else
        render json: @donation.errors, status: :unprocessable_entity
      end
    end

I know this will not redirect at all, but I have tried to redirect_to donations_path and it will not work still. I tried to update the patch in the routes, to route to donations#index, but that doesn't work either... I am almost certain it is something to do with the update action, and/or, routes.rb, but this is my first time trying to patch an item and redirect - seems to be more complicated then I have ran into before... anyone know any suggestions to try?

Currently my routes for donations are back to square one:

    resources :donations, module: 'team'

looking for any suggestions on how to do something like this. Appreciate it in advance.

I expect that after I click save on my form, it passes the donation json back to rails, and then continues to redirect using rails routing, through the update action.

UPDATE: Added code to show the UseEffect, and handleSubmit functions, as well as the onClick call in the return to give more context to the client side operations.

    import React, { useEffect, useState } from "react";
    import PropTypes from "prop-types";
    import { HTTP } from "../../api/resources";

    export default function DonationsEdit({donation: donationProps}) {
      const [donation, setDonation] = useState(null);
      const [saving, setSaving] = useState(false);
  
      useEffect(() => {
        if (!donation) {
          setDonation({
            ...donationProps,
            unit_cost: parseFloat(donationProps.unit_cost).toFixed(2)
          });
        }
      }, [donation, donationProps]);


    const handleSubmit = () => {
      setSaving(true)
      HTTP.patch(`/donations/${donation.id}`, {
      donation: donation
    }).then(response => {
      Alert.show("notice", "Donation Item Saved!");
      setDonation(response.data);
      setSaving(false);
    }).catch(e => {
      Alert.show("error", "Could not save. Try again or refresh.");
      setSaving(false);
    })
  }

  return (
    <React.Fragment>
        <div>
            <button onClick={handleSubmit} name="button" className="btn btn-primary">
              {saving && <i className="fa fa-spinner-third fa-spin mr-2"></i>}
              Save
            </button>
          </div>
        </div>

Upvotes: 0

Views: 322

Answers (1)

Creider9
Creider9

Reputation: 1

Thank you Max, I did the redirect on the client side and it worked using:

const handleSubmit = () => {
  setSaving(true)
  HTTP.patch(`/donations/${donation.id}`, {
    donation: donation
  }).then(response => {
    Alert.show("notice", "Donation Item Saved!");
    setDonation(response.data);
    setSaving(false);
    setTimeout(function() { window.location.href= '/donations';}, 1500);
  }).catch(e => {
    Alert.show("error", "Could not save. Try again or refresh.");
    setSaving(false);
  })
}

Upvotes: 0

Related Questions