Team - READ

[rtate2]

User Story

As a user when once I click the Save Team button within the create team form, I will be redirected to the 'Teams' component. I will also be able to navigate to the 'Teams' Component by clicking the link in the navbar

Acceptance Criteria

GIVEN the user clicks the Save Team button within the create team form WHEN the user is redirected to the teams page OR if the user clicks the 'Teams' link in the navbar THEN the user will see all of the complete teams in order of when they were created, sorted by date/time AND see an H1 of 'Teams' at the top of the page

Dev Notes

• In src/components/pages/Teams/Teams.js complete the standard React setup and export it at the bottom of the file.

• At the top of the file, import teamData

• As soon as the Teams renders, the data from Firebase should be available.

  • Use ComponentDidMount() lifecycle method to do so.

• Create state for teams as an empty array

• Pass teams as state and map over within return

• In src/components/shared/Team/Team.js create a standard React setup

  • Create the bootstrap card to display the information with the appropriate teamShape
  • Be sure to import teamShape from the appropriate file and set the team static propType
  • import { Link } from 'react-router-dom' and create the View Team button
  • The View Team button will redirect to "/teams/${teamId}" / SingleTeam component
  • Within render const { team } = this.props;
  • Create correct Route to SingleComponent - /teams/:teamId
  • Create SingleTeam component and set data to state = { team: { }, }
  • Create ComponentDidMount function

    componentDidMount() {
    const { teamId } = this.props.match.params;
    teamData.getSingleTeam(teamId)
    .then((response) => {
    this.setState({ team: response.data });
    })
    .catch((error) => console.error('error from  get single team', error));
    }

  • Within render `const { teamId } = this.props.match.params;
  • Create the bootstrap card with the single team info

• In Teams.js import Team.js at the top of the file

• Pass Team as a propType

• Style according to mockup