Team - CREATE

[rtate2]

User Story

As a user, I should be able to click a button that displays a form to create a complete team and when I fill out the form and click the "Save Team" button the new team should be created in firebase and should now show in my Teams component.

Acceptance Criteria

WHEN the user clicks the We have our Team button THEN a form will appear for the user to select the new team details AND when the user clicks the Save Team button the new team is created in firebase and appears in my Teams component

Dev Notes

• In src/helpers/Data/teamData.js create the axios.post call and export it

  • const createTeam = (newTeam) => axios.post(${baseUrl}/teams.json, newTeam);

• In src/components/pages/NewTeam/NewTeam.js

  1. axios call to firebase to grab all players and teams .get( ) methods
     • Import teamData and playerData at the top of the file
     • set State for teams and players as open arrays / set State for teamName and playerName
     • Create ComponentDidMount function to call data on page load / call the this.getTeamsNow and the getPlayersNow functions
     • Create a getTeamsNow function
     • Create a getPlayersNow function
  2. In render under options, map players and teams
  3. Be sure to create functions to handle the change (each dropdown has its own function)
  4. On the save button, it will grab the array created and post it back to firebase and create card on waitlist component
     • Attach onClick to button saveTeamEvent
     • Create the saveTeamEvent to create an object

blabber

• In src/components/Teams/Teams.js create the addTeam function that passes newTeam as a parameter and calls the createTeam function from the teamData file. Within the .then(), call the getAllTeams function which calls all of the teams data.

• In the `src/components/NewTeam/NewTeam.js create the standard React setup and export it at the bottom of the page

  • Create the form within the render function
  • Create the saveTeamEvent function that creates the newTeam object

    const newTeam = {
    name: this.state.name,
    date: this.state.date,
    time: this.state.time,
    player1: this.state.player1,
    player2: this.state.player2,
    player3: this.state.player3,
    player4: this.state.player4,
    player5: this.state.player5,
    isWaitlist: this.state.isWaitlist,
    };

  • Set state

    state = {
    name: '',
    date: '',
    time: '',
    player1: '',
    player2: '',
    player3: '',
    player4: '',
    player5: '',
    isWaitlist: false,
    }

    -For the team name input be sure to set the value with the form - this.state.name and so on for the appropriate form

• For each onChange, you have to create a function targets the "state" (empty string) and will populate it with the users input

  • ex) onChange={this.nameChange} - nameChange is the function we created

• To save the new information within the form, beneath the newTeam object, within the saveTeamEvent function call teamData.createTeam, and pass the newTeam object

  • Then reroute to the teams view page, and the new object will be pulled automatically // addTeam(newTeam); teamData.createTeam(newTeam).then(() => { // reroute to Team page this.props.history.push('/teams'); // and do the setState thing youre doing on line 41 in here too this.setState({ name: '', player1: '', player2: '', player3: '', player4: '', player5: '', }); });

??

• Within saveTeamEvent function, after newTeam object, call addPlayer while passing the newPlayer as its parameter
• To clear the form after the new team is created, set this.setState with the state keys as open strings at the bottom of the saveTeamEvent function

• In Teams component pass addTeam={this.addTeam} within NewTeam.

[rtate2]

Create Team mockup