1

So I have a component for displaying players which uses my displayPlayerObject function. The problem is it is I do not have the correct route for fetching in the function and for POST in my routes.rb. The model relationships have the players belonging to the teams and the route for getting a player is "http://localhost:3000/api/teams/1/players/1" 1 being the team id for the former and player id in the latter. But how do I make the displayPlayerObject work the same way syntax wise? And how should it look like for the POST in routes.rb? Also I suspect my players controller's 'show' is wrong as well.

displayPlayerObject function (edited):

export const displayPlayerObject = (id, teamId, type) => {
    return dispatch => {
        const data = { id };
        fetch(`/api/teams/:team_id/players/show`, {
            method: 'post',
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
            },
            body: JSON.stringify(data)
        })
            .then(res => res.json())
            .then(responseJSON => { dispatch({ type , player_object: responseJSON})
            })
    }
};

My routes.rb (edited):

Rails.application.routes.draw do
  scope '/api' do

    post "teams/show", to: 'teams#show'
    post "teams/:team_id/players/show", to: 'players#show'

    resources :teams do
      resources :players
      resources :star_players
    end
  end
end

Players Controller Show (edited):

  def show
      Player.find(params[:id])
    render json: @player, status: 200
  end
Jabba the Hutt
  • 654
  • 3
  • 15

1 Answers1

1

Let's make it look better.

First of all Player.find_by(id: params[:id]) is nonsense, since find_by(id: params[:id]) is equal to where(id: params[:id]).take. Better to replace it with classic find(params[:id]) which looks much better.

What about your main question, what is the point to give name for POST with displayObject. For me display something means GET it to me. If you want to get some player you need to call api/teams/:team_id/players/:id. But if you want to create new player you need to make POST request to /api/teams/:team_id/players route.

P.S.1 Just change request method from POST to GET. And then add to your promise this:

.then(res => {
 console.log(res)
})

And observe what server returns

P.S.2 Change request to

fetch(`/api/teams/:team_id/players/:id`)

And in controller find player by :id

Roman Alekseiev
  • 1,854
  • 16
  • 24
  • Ok I added edited the controller, routes and displayPlayerObject and terminal not showing any problems but when I click on a player card it is not displaying correctly. Maybe something is wrong with my react componenst and container? Do you happen to know 'react' 'redux' by chance? – Jabba the Hutt Jan 25 '20 at 05:43
  • I have changed my answer. Change POST to GET and add console.log to promise to check what server returns – Roman Alekseiev Jan 26 '20 at 09:14
  • When I change request method to GET, I get the error "Unhandled Rejection (TypeError): Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body". This is because of "body: JSON.stringify(data)" and others are saying use POST instead. – Jabba the Hutt Jan 26 '20 at 23:13
  • What data you send in body? – Roman Alekseiev Jan 27 '20 at 05:32
  • data = id of the selected player – Jabba the Hutt Jan 28 '20 at 00:31
  • I have change my answer. You do not need to pass data with GET request. If you want to retrieve one player you just need to pass their id in url – Roman Alekseiev Jan 28 '20 at 06:28