Fetching proper route path

Question

So I am trying to fetch and display players that belong to team. I have a dropdown button which has a selection of said teams and on click, it should render the chosen team's players. The problem I have is that on click, it renders all of the players in my seed data, irrelevant of the team it belongs to. I am not sure what I am missing but here is the code I have. In Postman when I put "http://localhost:3000/api/teams/1/players" it is returning all of the players instead of just the one that belongs to team with id 1.

Edit: I fixed the issue with filtering data as now the url "http://localhost:3000/api/teams/1/players" in Postman works correctly. However I am getting 'TypeError: this.props.players.cards.map is not a function' from the DataContainer when it tries to render the players after clicking the team on the dropdown button. All I did was change the index in my controller. Also the terminal says "ActiveRecord::RecordNotFound (Couldn't find Team with 'id'=Chaos):"

Here is my players controller:

class PlayersController < ApplicationController
before_action :set_params, only: [:show]

def index
  @players = Team.find(params[:team_id]).players
  render json: @players, status: 200
end

def show
  render json: @player, status: 200
end

private

def player_params
  params.require(:player).permit(:name, :player_type, :cost, 
  :movement_allowance, :strength, :agility, :armour_value, :skills, 
  :team_id)
end

def set_params
  @player = Player.find(params[:id])
end

My filter file which contains the dropdown button (edited):

class PlayerFilter extends Component {
constructor() {
  super();
  this.state = { data: [] };
}

async fetchButtonTeams() {
  const response = await fetch(`/api/teams`);
  const json = await response.json();
  this.setState({ data: json });
}

componentDidMount(){
  this.fetchButtonTeams()
}

handleTeamSelection = e => {
    e.preventDefault();
    const { target: { title }} = e;
    this.props.setTeam(title);
    this.props.fetchPlayers(title);
};

render() {
    return (
        
            
                
                      {this.state.data.map(team => (
                        
                            {team.name}
                        
                    ))}
                
            
        
      )
   }
}

const mapStateToProps = state => {
    return {
        team: state.players.team
    }
};

const mapDispatchToProps = dispatch => {
    return {
        fetchPlayers: params => dispatch(fetchPlayers(params)),
        fetchTeams: params => dispatch(fetchTeams(params)),
        setTeam: team => dispatch({ type: "SET_TEAM", team })

    }
};

export default connect(mapStateToProps, mapDispatchToProps)(PlayerFilter)

My player fetch being called in the filter (edited)

export const fetchPlayers = teamId => {
return dispatch => {
    dispatch({ type: 'LOADING_PLAYERS' });
    fetch(`/api/teams/${teamId}/players`)
        .then(res => res.json())
        .then(responseJSON => { dispatch({ type: 'ADD_PLAYERS', cards: responseJSON})
        })
}

My DataContainer:

class DataContainer extends Component {

displayCards = () => {
    switch(this.props.path) {
        case "teams":
            return (this.props.teams.cards.map(card => (
              
          )));

        case "players":
            return (this.props.players.cards.map(card => (
              
          )));

        default:
            return (Empty)
    }
};

render() {
    return (
        
            {this.displayCards()}
        
      )
   }
}

const mapStateToProps = state => {
    return {
        teams: state.teams,
        players: state.players
    }
};

export default connect(mapStateToProps)(DataContainer)

My app.js:

import React from 'react';
import './App.css';
import { connect } from 'react-redux'

import NavButtonsContainer  from './containers/NavButtonsContainer';
import DataContainer from "./containers/DataContainer";

import PlayerDisplay from "./components/PlayerDisplay";
import PlayerFilter from "./components/PlayerFilter";

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import 'bootstrap/dist/css/bootstrap.min.css';
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row"
import Col from "react-bootstrap/Col"

const App = props => {
  return (
    
        
            
                
                    
                

                
                    
                

                
                    
                        
                    
                    
                        
                    
                    
                        
                    
                

                
                    
                        
                    
                    
                        
                    
                    
                        
                    
                

                
                       
                
            
        
    
  );
};

const mapStateToProps = state => {
    return {
        info: state.piece
    }
};

export default connect(mapStateToProps)(App);

Fetching proper route path

Answers (1)

Related Questions