Parameterized the useQuery react-query hook - recreate useEffect.

Added custom prevPage, nextPage.

Author: Ranjith10

package-lock.json

@@ -8,6 +8,7 @@
         "react-dom": "^16.13.1",
         "react-loading-skeleton": "^2.1.1",
         "react-query": "^2.8.0",
+        "react-query-devtools": "^2.4.4",
         "react-scripts": "3.4.3",
         "react-table": "^7.5.0"
     },

package.json

@@ -1,11 +1,13 @@
 import React from 'react'
-import './App.css'
+import { ReactQueryDevtools } from 'react-query-devtools'
+
 import ReactTable from './components/ReactTable'
 
 function App() {
     return (
         <div className = 'App'>
             <ReactTable />
+            <ReactQueryDevtools />
         </div>
     )
 }

src/App.js

@@ -1,33 +1,32 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 import Skeleton from 'react-loading-skeleton'
 import axios from 'axios'
-import {useQuery} from 'react-query'
+import { useQuery } from 'react-query'
 import { useTable, usePagination } from 'react-table'
 
 import './ReactTable.css'
 
-// const PAGE_SIZE = 10
-
-const PeopleTable = ({
-    columns,
-}) => {
+const fetchPeople = async (key, pageIndex) => {
+    let peopleList = await axios.get(
+        `https://swapi.dev/api/people/?page=${pageIndex + 1}`,
+    )
+    return peopleList
+}
 
-    const {data: peopleList, isLoading, } = useQuery('fetchPeople', fetchPeople)
+const PeopleTable = ({ columns }) => {
+    const [pageIndex, setPageIndex] = useState(0)
+    const { data: peopleList, isLoading } = useQuery(
+        ['fetchPeople', pageIndex],
+        fetchPeople,
+    )
 
     const {
         getTableProps,
         getTableBodyProps,
         headerGroups,
         page,
         prepareRow,
-        canPreviousPage,
-        canNextPage,
-        pageCount,
-        gotoPage,
-        nextPage,
-        previousPage,
         pageOptions,
-        state: { pageIndex, pageSize },
     } = useTable(
         {
             columns,
@@ -38,6 +37,16 @@ const PeopleTable = ({
         usePagination,
     )
 
+    const previousPagePossible = () => {
+        if(pageIndex === 0) return true
+        return false
+    }
+
+    const nextPagePossible = () => {
+        if(pageIndex === pageOptions.length) return true
+        return false
+    }
+
     return (
         <div className = 'people-table'>
             <table { ...getTableProps() }>
@@ -81,25 +90,16 @@ const PeopleTable = ({
             {!isLoading && (
                 <div className = 'pagination'>
                     <button
-                        disabled = { !canPreviousPage }
-                        onClick = { () => gotoPage(0) }
-                    >
-                        {'<<'}
-                    </button>{' '}
-                    <button
-                        disabled = { !canPreviousPage }
-                        onClick = { () => previousPage() }
+                        disabled = { previousPagePossible() }
+                        onClick = { () => setPageIndex(i => i - 1) }
                     >
                         {'<'}
                     </button>{' '}
-                    <button disabled = { !canNextPage } onClick = { () => nextPage() }>
-                        {'>'}
-                    </button>{' '}
-                    <button
-                        disabled = { !canNextPage }
-                        onClick = { () => gotoPage(pageCount - 1) }
+                    <button  
+                        disabled = { nextPagePossible() }
+                        onClick = { () => setPageIndex(i => i + 1) }
                     >
-                        {'>>'}
+                        {'>'}
                     </button>{' '}
                     <span>
                         Page{' '}
@@ -117,13 +117,7 @@ const PeopleTable = ({
     )
 }
 
-const fetchPeople = async () => {
-    let peopleList = await axios.get(`https://swapi.dev/api/people/?page=1`)
-    return peopleList
-}
-
 const ReactTable = () => {
-
     let columns = useMemo(
         () => [
             {
@@ -156,13 +150,9 @@ const ReactTable = () => {
             },
         ],
         [],
-    ) 
-
-    return (
-        <PeopleTable
-            columns = { columns }
-        />
     )
+
+    return <PeopleTable columns = { columns } />
 }
 
 export default ReactTable