Skip to content

Latest commit

 

History

History
134 lines (106 loc) · 4.97 KB

README.md

File metadata and controls

134 lines (106 loc) · 4.97 KB
Raw

React - Fetch - Restaurants

Submission Instrions [Please note]

Maximum Marks - 10

  • The Submission should not contain spaces, for example /rct-101 folder/eval will not work
  • Do not push node_modules to github
  • Rubrics / Marking Scheme is below ( we will convert this back to a scale of 10 )
✅ Able to submit and run the application - 1 mark
✅ should render RestaurantCard.jsx correctly- 2 mark
✅ loading indicator should work - 1 mark
✅ should render Restaurants page - 3 mark
✅ Should work with pagination correctly - 3 mark

Description

  • You need to make an application which lists Restaurants from an api
  • User should be able to apply pagination

Boilerplate

  • You are given a set of Components
  • Rstaurants.jsx
  • Restaurants.css
  • RestaurantCard.jsx
  • RestaurantCard.css
  • LoadingIndicator.jsx
  • Pagination
    • Pagination component which will have page numbers as buttons
  • You are given these dummy elements (anything with data-testid you should not remove or change the attribute values)

Installation

  • you may use nvm use 14, if that does not work you can try 16 or later
// install npm packages
npm install

// start application locally
npm run start

// test locally
npm run test
  • the system on cp.masaischool.com may take between 1-20 minutes for responding,
  • so we request you to read the problem carefully and debug before itself
  • we also request you to not to just submit it last minute
  • try to keep one submission at a time

Requirements

  • API details

  • url: https://dbioz2ek0e.execute-api.ap-south-1.amazonaws.com/mockapi/getrestaurants

  • query params:

    • page: a number representing the page number
    • limit: a number representing total number of results per page

  • response

    • data: array of restaurant details
    • totalPages: number representing no of pages

  • example https://dbioz2ek0e.execute-api.ap-south-1.amazonaws.com/mockapi/getrestaurants?limit=10&page=1

  • By default when the user loads the page, the user should be shown a set of products

    • of page 1
    • 10 per page

  • You cannot use JSON server

  • use useEffect to display the data on the UI

  • Restaurants

    • It should contain a LoadingIndicator component by default ( use Conditional rendering )
      • dont show any other UI when API is loading
    • You need to make an api call and fetch Restaurants data
      • you should fetch ten(10) per page
      • it shuold be page 1 by default
    • After we fetch restaurants data, hide the loading indicator
    • Display the list of RestaurantCards, and pass appropriate data
    • Display Pagination component at the bottom

  • LoadingIndicator

    • it has an element with the following attribute
      • data-testid="loading-indicator"
    • it has the text ...Loading
    • it will be shown when the api is loading
    • Please hide all other elements in the UI when the API is loading

  • Pagination

    • it will accept the following properties
      • current - a number representing the current page
      • onChange - a callback which will be given the new page number (page)=>{})
      • total - a number representing the total pages present in the list
    • Populate page numbers as buttons equal to the number of total pages received from the api response . (refer the image)
      • if the total pages are 10 there should be 10 buttons from 1 to 10 written on it.
    • The border color of the active button should be in red
    • by default page number 1 should be the active page
    • on click of any button the new page number will be sent to the onChange callback.

  • RestaurantCard

    • Component to display information of a single restaurant
    • the card should have id =restaurant-card
    • it should accept the following props
      • name - the title of the restaurant
        • data-testid="restaurant-card-name"
      • type - The type of the Restaurant
        • data-testid="restaurant-card-type"
      • image - the image url of the Restauant
        • data-testid="restaurant-card-image"
      • rating - the rating of the Restaurant
        • data-testid="restaurant-card-rating"
      • number_of_votes - votes of the Restaurant
        • data-testid = "restaurant-card-votes"
      • price_starts_from - the minimum price of the restaurant
        • data-testid = "restaurant-card-price"

Note

  • Make sure you use only the given components and dont create new Components, files, folders of your own. Changing component name, file/folder structures might result in giving you zero marks
  • Do Not Remove data-testid="xxxx" from anywhere, these are used by testing tools to test your code, removal of this will lead to low score.
  • Also make sure to cross check all the spellings and Case of Texts.

General Guidelines

  • The system on cp.masaischool.com may take between 1-20 minutes for responding,
  • so we request you to read the problem carefully and debug before itself
  • we also request you to not to just submit it last minute
  • try to keep one submission at a time