[
{
"path": ".gitignore",
"content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n"
},
{
"path": "README.md",
"content": "# Simple React Pagination\n\n> Frontend pagination example using React with Hooks\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm install`\n\n### `npm start`\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"react_pagination\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"axios\": \"^0.19.0\",\n \"react\": \"^16.8.6\",\n \"react-dom\": \"^16.8.6\",\n \"react-scripts\": \"3.0.1\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n"
},
{
"path": "public/index.html",
"content": "\n\n \n \n \n \n \n \n \n \n \n React Pagination\n \n \n \n \n \n \n\n"
},
{
"path": "public/manifest.json",
"content": "{\n \"short_name\": \"React App\",\n \"name\": \"Create React App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n \"sizes\": \"64x64 32x32 24x24 16x16\",\n \"type\": \"image/x-icon\"\n }\n ],\n \"start_url\": \".\",\n \"display\": \"standalone\",\n \"theme_color\": \"#000000\",\n \"background_color\": \"#ffffff\"\n}\n"
},
{
"path": "src/App.css",
"content": ".App {\n text-align: center;\n}\n\n.App-logo {\n animation: App-logo-spin infinite 20s linear;\n height: 40vmin;\n pointer-events: none;\n}\n\n.App-header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.App-link {\n color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n"
},
{
"path": "src/App.js",
"content": "import React, { useState, useEffect } from 'react';\nimport Posts from './components/Posts';\nimport Pagination from './components/Pagination';\nimport axios from 'axios';\nimport './App.css';\n\nconst App = () => {\n const [posts, setPosts] = useState([]);\n const [loading, setLoading] = useState(false);\n const [currentPage, setCurrentPage] = useState(1);\n const [postsPerPage] = useState(10);\n\n useEffect(() => {\n const fetchPosts = async () => {\n setLoading(true);\n const res = await axios.get('https://jsonplaceholder.typicode.com/posts');\n setPosts(res.data);\n setLoading(false);\n };\n\n fetchPosts();\n }, []);\n\n // Get current posts\n const indexOfLastPost = currentPage * postsPerPage;\n const indexOfFirstPost = indexOfLastPost - postsPerPage;\n const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);\n\n // Change page\n const paginate = pageNumber => setCurrentPage(pageNumber);\n\n return (\n \n );\n};\n\nexport default App;\n"
},
{
"path": "src/components/Pagination.js",
"content": "import React from 'react';\n\nconst Pagination = ({ postsPerPage, totalPosts, paginate }) => {\n const pageNumbers = [];\n\n for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {\n pageNumbers.push(i);\n }\n\n return (\n \n );\n};\n\nexport default Pagination;\n"
},
{
"path": "src/components/Posts.js",
"content": "import React from 'react';\n\nconst Posts = ({ posts, loading }) => {\n if (loading) {\n return Loading...
;\n }\n\n return (\n \n {posts.map(post => (\n - \n {post.title}\n
\n ))}\n
\n );\n};\n\nexport default Posts;\n"
},
{
"path": "src/index.js",
"content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nReactDOM.render(, document.getElementById('root'));\n"
}
]