├── .gitignore ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.js ├── components │ ├── Pagination.js │ ├── User.js │ └── users.js ├── index.js └── utils │ └── constants.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | ### `yarn install` 7 | 8 | Instal All dependencies in this project 9 | 10 | ### `yarn start` 11 | 12 | Runs the app in the development mode.
13 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 14 | 15 | ### Video Tutorial 16 | You can see my youtube video for this project in [here](https://youtu.be/8Gmi1NNPtB8) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pagination-from-scratch", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "axios": "^0.21.0", 10 | "react": "^17.0.1", 11 | "react-dom": "^17.0.1", 12 | "react-scripts": "4.0.1", 13 | "web-vitals": "^0.2.4" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/candraKriswinarto/simple-react-pagination/3b03f73fc0448d5e8196f656f23a2e3e037a9940/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/candraKriswinarto/simple-react-pagination/3b03f73fc0448d5e8196f656f23a2e3e037a9940/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/candraKriswinarto/simple-react-pagination/3b03f73fc0448d5e8196f656f23a2e3e037a9940/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import Users from './components/users'; 3 | import Pagination from './components/Pagination'; 4 | import axios from 'axios'; 5 | import { USER_PER_PAGE } from "./utils/constants"; 6 | 7 | function App() { 8 | const [users, setUsers] = useState([]); 9 | const [loading, setLoading] = useState(false); 10 | const [page, setPage] = useState(1); 11 | const [totalPages, setTotalPages] = useState(0); 12 | 13 | useEffect(() => { 14 | const fetchUsers = async () => { 15 | setLoading(true); 16 | const res = await axios.get('https://randomuser.me/api/?page=1&results=50&nat=us'); 17 | setLoading(false); 18 | setUsers(res.data.results); 19 | 20 | setTotalPages(Math.ceil(res.data.results.length / USER_PER_PAGE)); 21 | }; 22 | fetchUsers(); 23 | }, []); 24 | 25 | const handleClick = num => { 26 | setPage(num); 27 | } 28 | 29 | return ( 30 |
31 |

Pagination Demo

32 |

Page {page}

33 | { loading ?

Loading...

: <> 34 | 35 | 36 | } 37 |
38 | ); 39 | } 40 | 41 | export default App; 42 | -------------------------------------------------------------------------------- /src/components/Pagination.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Pagination = ({ totalPages, handleClick }) => { 4 | const pages = [...Array(totalPages).keys()].map(num => num+1); 5 | return ( 6 |
7 | { pages.map(num => ( 8 | 12 | )) } 13 |
14 | ) 15 | } 16 | 17 | export default Pagination 18 | -------------------------------------------------------------------------------- /src/components/User.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const User = ({ user }) => { 4 | return ( 5 |
6 |
7 |

{`Full Name: ${user.name.first} ${user.name.last}`}

8 |

{`Phone: ${user.phone}`}

9 |
10 | ) 11 | } 12 | 13 | export default User 14 | -------------------------------------------------------------------------------- /src/components/users.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import User from './User' 3 | import { USER_PER_PAGE } from '../utils/constants'; 4 | 5 | const users = ({ users, page }) => { 6 | const startIndex = ( page - 1 ) * USER_PER_PAGE; 7 | const selectedUsers = users.slice(startIndex, startIndex + USER_PER_PAGE); 8 | return selectedUsers.map(user => ( 9 | 10 | )) 11 | } 12 | 13 | export default users 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById('root') 10 | ); 11 | 12 | -------------------------------------------------------------------------------- /src/utils/constants.js: -------------------------------------------------------------------------------- 1 | export const USER_PER_PAGE = 5; --------------------------------------------------------------------------------