Shruthireddy04/ipl-dashboard-

Refer to the image below:

Set Up Instructions

Click to view

• Download dependencies by running npm install
• Start up the app using npm start

Completion Instructions

Functionality to be added

Add the code to have the following functionality

• When the app is opened, Home Route should be displayed
• When the Home Route is opened,
  • Make HTTP GET request to the teamsApiUrl
  • loader should be displayed while fetching the data
  • After fetching the data, the list of teams should be displayed
• When a team card in Home Route is clicked,
  • Page should be navigated to the Team Matches Route with the URL /team-matches/:id
• When the Team Matches Route is opened,
  • Make HTTP GET request to the teamMatchesApiUrl with the team id to get the recent matches data of the team
    • Example: https://apis.ccbp.in/ipl/KKR
  • loader should be displayed while fetching the data
  • After fetching the data, the team banner, latest match, and list of recent matches should be displayed

API Requests & Responses

teamsApiUrl

API: https://apis.ccbp.in/ipl

Method: GET

Description:

Returns a response containing the list of all IPL teams

Response

{
  "teams": [
    {
      "name": "Royal Challengers Bangalore",
      "id": "RCB",
      "team_image_url": "https://assets.ccbp.in/frontend/react-js/rcb-logo-img.png",
      // use value of the key 'name' for alt as `${name}`
    },
    ...
  ],
}

teamMatchesApiUrl

API: https://apis.ccbp.in/ipl/:id

Example: https://apis.ccbp.in/ipl/KKR

Method: GET

Description:

Returns a response containing details of all recent matches of a team

Response

{
  "team_banner_url": "https://assets.ccbp.in/frontend/react-js/kkr-team-img.png",
  "latest_match_details": {
    "umpires": "CB Gaffaney, VK Sharma",
    "result": "Kolkata Knight Riders Won by 7 wickets",
    "man_of_the_match": "Shubman Gill",
    "id": "1216545",
    "date": "2020-09-26",
    "venue": "At Sheikh Zayed Stadium, Abu Dhabi",
    "competing_team": "Sunrisers Hyderabad",
    "competing_team_logo": "https://upload.wikimedia.org/wikipedia/en/thumb/8/81/Sunrisers_Hyderabad.svg/1200px-Sunrisers_Hyderabad.svg.png",
    // use value of the key 'competing_team' for alt as `latest match ${competing_team}`
    "first_innings": "Sunrisers Hyderabad",
    "second_innings": "Kolkata Knight Riders",
    "match_status": "Won",
  },
  "recent_matches": [
    {
      "umpires": "RK Illingworth, K Srinivasan",
      "result": "Royal Challengers Bangalore Won by 82 runs",
      "man_of_the_match": "AB de Villiers",
      "id": "1216540",
      "date": "2020-10-12",
      "venue": "At Sharjah Cricket Stadium, Sharjah",
      "competing_team": "Royal Challengers Bangalore",
      "competing_team_logo": "https://upload.wikimedia.org/wikipedia/en/thumb/2/2a/Royal_Challengers_Bangalore_2020.svg/1200px-Royal_Challengers_Bangalore_2020.svg.png",
      // use value of the key 'competing_team' for alt as `competing team ${competing_team}`
      "first_innings": "Royal Challengers Bangalore",
      "second_innings": "Kolkata Knight Riders",
      "match_status": "Lost",
    },
    ...
  ],
}

Important Note

Click to view

The following instructions are required for the tests to pass

• Wrap the Loader component with an HTML container element and add the testid attribute value as loader to it as shown below

  <div testid="loader">
    <Loader type="Oval" color="#ffffff" height={50} width={50} />
  </div>

Things to Keep in Mind

• All components you implement should go in the src/components directory.
• Don't change the component folder names as those are the files being imported into the tests.
• Do not remove the pre-filled code
• Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.