list working but theming

Back/src/application_controller.js

@@ -15,8 +15,9 @@ router.get('/coins/markets', function (req, res) {
 
   api_helper.REMOTE_API_call(url)
     .then(response => {
-      console.log("url: ", url);
+      console.log("response.length : ", response.length);
-      console.log("response.length: ", response.length);
+      console.log("response.page   : ", page);
+//console.log("url             : ", url);
       res.json(response);
     })
     .catch(error => {
@@ -28,7 +29,7 @@ router.get('/coins/markets', function (req, res) {
 
 router.get('/coins/count', function (req, res) {
   let url = config.coingecko.api_url + '/global';
-  console.log("url: ", url);
+//  console.log("url: ", url);
 
   api_helper.REMOTE_API_call(url)
     .then(response => {

Front/src/App.tsx

@@ -15,7 +15,7 @@ function App() {
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<CoinList />} />
-          <Route path="/coin/:id" element={<CoinList />} />
+          <Route path="/coin/:id" element={<CoinDetails />} />
         </Routes>
       </BrowserRouter>
     </div>

Front/src/coinApi.ts

@@ -7,8 +7,8 @@ const countUrl = '/coins/count';
 export const coinListApi = createApi({
   baseQuery: fetchBaseQuery({ baseUrl: baseUrl }),
   endpoints: (builder) => ({
-    getMarkets: builder.query<any, number | void>({
+    getMarkets: builder.query<any, any>({
-      query: (page = 1) => `${marketsUrl}?per_page=10&page=${page}`,
+      query: (payload: {page: number, per_page: number}) => `${marketsUrl}?per_page=${payload.per_page}&page=${payload.page}`,
     }),
     getCount: builder.query<any, number | void>({
       query: () => countUrl,

Front/src/coinDetails/coinDetails.tsx

@@ -1,6 +1,8 @@
+import { useParams } from 'react-router-dom';
 
-const CoinDetails = (props: any): JSX.Element => {
+const CoinDetails = (): JSX.Element => {
-    console.log("props: ", props)
+    const { id } = useParams();
+    console.log("id: ", id)
     return (
         <div>CoinDetails</div>
     )

Front/src/coinList/coinList.tsx

@@ -1,25 +1,29 @@
-import {useParams, useLocation} from 'react-router-dom';
+import {useSearchParams} from 'react-router-dom';
-import { useGetMarketsQuery } from './coinList-api';
+import { useGetMarketsQuery } from '../coinApi';
 import Pager from './coinListPager';
 
 const CoinList = (): JSX.Element => {
  
-    const location = useLocation()
+    const [searchParams, setSearchParams] = useSearchParams();
-    const { page } = useParams();
+    const page = Number(searchParams.get('page')) || 1
-
+    const per_page = Number(searchParams.get('per_page')) || 20
-    const { data, error, isLoading, isSuccess, refetch } = useGetMarketsQuery();
+    const payload = {page, per_page}
-    console.log(page)
+    const { data, error, isLoading, isSuccess, refetch } = useGetMarketsQuery(payload);
-    console.log(location.search)
+    console.log("payload: ", payload);
     
     return (
       <div>
         CoinList
+
+        {isLoading && <div>Loading...</div>}
+
         <table>
         <thead>
 
         </thead>
           <tbody>
-            { data && 
+            
+            { data && isSuccess &&
               data.map((item: any, index: any) => {
                 return (
                   <tr key={index}>
@@ -36,7 +40,7 @@ const CoinList = (): JSX.Element => {
             }
           </tbody>
         </table>
-        <Pager />
+        <Pager page={page} per_page={per_page} setSearchParams={setSearchParams}/>
       </div>
     )
   }

Front/src/coinList/coinListPager.tsx

@@ -1,14 +1,29 @@
-import { useGetCountQuery } from './coinList-api';
+import { useGetCountQuery } from '../coinApi';
+import { useNavigate } from "react-router-dom";
 
+const Pager = (props:any): JSX.Element => {
 
-const Pager = (): JSX.Element => {
+    console.log("page props", props)
+
+    const { page, per_page, } = props;
 
     const { data, error, isLoading, isSuccess, refetch } = useGetCountQuery();
+    const navigate = useNavigate();
+
+    const lastPage = Math.ceil(data / per_page)
+
+    function handlePager(page: number) {
+        const url = `/?page=${page}`
+        navigate(url)
+    }
 
     return (
         <div>
-            pager
+            <button disabled={page === 1} onClick={() => navigate("/")}>First</button>
-            coins: {JSON.stringify(data)}
+            <button disabled={page === 1} onClick={() => handlePager(page - 1)}>Prev</button>
+            <div>Page {page} from {lastPage}</div>
+            <button disabled={page === lastPage} onClick={() => handlePager(page + 1)}>Next</button>
+            <button disabled={page === lastPage} onClick={() => handlePager(lastPage)}>Last</button>
         </div>
     )
 }

Front/src/store.ts

@@ -1,7 +1,7 @@
 import { combineReducers, configureStore } from '@reduxjs/toolkit'
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 
-import { coinListApi } from './coinList/coinList-api';
+import { coinListApi } from './coinApi';
 // import listSliceReducer from './chartList/chartList-slice'