10bd2b's People
10bd2b's Issues
Feature: Build Frontend Pagination
THIS ISSUE WAS AUTOGENERATED BY HATCHWAYS
For this task, you will be modifying existing client code for a blogging website. Currently the website has already implemented:
- Ability to load and display blog posts. For this evaluation, the data is retrieved from a JSON file that is already included.
Please open a single pull request with the following changes:
- Adding pagination functionality
- Write a markdown file with answers to questions in Part 2
The expected changes are outlined in detail below.
Part 1 - Adding pagination abilities
Currently, the UI has already exists - please do not change the HTML structure for this part of the task. We would like it to be implemented so that it satisfy the following functionality:
- By default, “15 per page” is selected and you will be on page 1
- When user changes “X per page” (the only options will be 15, 25, 50 and 100), it should only display at maximum that amount of blogs per page and the first page is displayed
- When user clicks on the Previous and Next arrow button, it will display it’s respective page results
- If the first and last page is the same, then previous and next arrow buttons are disabled
- If user at the beginning of the results, the previous button should be disabled
- If user at the end of the results, the next button should be disabled
- Current page always have 2 siblings (refer to screenshots below)
- Ellipses should be inserted if the first page or the last page is not a sibling of the current page
- First and last page must always be displayed
- There will always be at least 1 blog post
Please note that for this evaluation, calculations will be done on the frontend and that we are not looking to imitate an API call.
- Current page is 1, and it has 2 sibling options next to it. Ellipses before the last page.
- In the middle of the pagination, with one sibling before and after. Ellipses after page 1 and before the last page.
- Second last page, one sibling before and after (the last page is the same page as the next page). Ellipses after page 1.
- No ellipses when there is only one page available.
Part 2: Written Evaluation
Please provide a markdown file with the answers to the following questions below.
The product team has decided that we want to make improvements to this application.
Questions:
- Right now the data for the posts is coming from a json file. What changes would you have to make to the application if it came from an API? In what type of hook should you use to fetch the data and why? What other considerations would you have to make?
- Part of this application uses the package nanoid to generate keys. What issue would this cause for generating keys in React?
Considerations
- Please format your answers so that they are easy to digest, and do not include any code in your pull request related to these questions above. We will be evaluating both the quality of your answer as well as the quality of your written explanation of that answer.
- Please include a file in the root of the repo called
improvements-proposal.md
that addresses these questions.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.