fetch markets

Front/src/App.tsx

@@ -1,10 +1,23 @@
-import CoinList from './coinList/coinList';
 import './App.css';
 
+import {
+  BrowserRouter,
+  Routes,
+  Route
+} from "react-router-dom";
+
+import CoinList from './coinList/coinList';
+import CoinDetails from './coinDetails/coinDetails';
+
 function App() {
   return (
     <div className="App">
-      <CoinList />
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<CoinList />} />
+          <Route path="/coin/:id" element={<CoinList />} />
+        </Routes>
+      </BrowserRouter>
     </div>
   );
 }

Front/src/coinDetails/coinDetails.tsx

@@ -0,0 +1,9 @@
+
+const CoinDetails = (props: any): JSX.Element => {
+    console.log("props: ", props)
+    return (
+        <div>CoinDetails</div>
+    )
+  }
+  
+  export default CoinDetails;

Front/src/coinList/coinList-api.ts

@@ -2,14 +2,18 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
 
 const baseUrl = "http://127.0.0.1:8080";
 const marketsUrl = '/coins/markets';
+const countUrl = '/coins/count';
 
 export const coinListApi = createApi({
   baseQuery: fetchBaseQuery({ baseUrl: baseUrl }),
   endpoints: (builder) => ({
-    getMarkets: builder.query<any, void>({
-      query: () => marketsUrl,
+    getMarkets: builder.query<any, number | void>({
+      query: (page = 1) => `${marketsUrl}?per_page=10&page=${page}`,
+    }),
+    getCount: builder.query<any, number | void>({
+      query: () => countUrl,
     }),   
   }),
 })
 
-export const { useGetMarketsQuery } = coinListApi;
+export const { useGetMarketsQuery, useGetCountQuery } = coinListApi;

Front/src/coinList/coinList.tsx

@@ -1,24 +1,44 @@
-import { useSelector } from 'react-redux'
-import { RootState } from '../store';
-import { useGetMarketsQuery } from './coinList-api'
+import {useParams, useLocation} from 'react-router-dom';
+import { useGetMarketsQuery } from './coinList-api';
+import Pager from './coinListPager';
 
 const CoinList = (): JSX.Element => {
  
-    const { data, error, isLoading, isSuccess, refetch } = useGetMarketsQuery();
+    const location = useLocation()
+    const { page } = useParams();
 
+    const { data, error, isLoading, isSuccess, refetch } = useGetMarketsQuery();
+    console.log(page)
+    console.log(location.search)
+    
     return (
       <div>
         CoinList
-        { data && 
-          data.map((item: any, index: any) => {
-            return <div key={index}>
-              {item.id}
-              {item.name}
-              </div>
-          })
-        }
+        <table>
+        <thead>
+
+        </thead>
+          <tbody>
+            { data && 
+              data.map((item: any, index: any) => {
+                return (
+                  <tr key={index}>
+                    <td><img src={item.image} width="20" height="20" /></td>
+                    <td>{item.symbol}</td>
+                    <td>{item.id}</td>
+                    <td>{item.name}</td>
+                    <td>{item.high_24h}</td>
+                    <td>{item.low_24h}</td>
+                    <td>{item.price_change_percentage_24h}</td>
+                  </tr>
+                )
+              })
+            }
+          </tbody>
+        </table>
+        <Pager />
       </div>
     )
   }
   
-  export default CoinList;
+  export default CoinList;

Front/src/coinList/coinListPager.tsx

@@ -0,0 +1,16 @@
+import { useGetCountQuery } from './coinList-api';
+
+
+const Pager = (): JSX.Element => {
+    
+    const { data, error, isLoading, isSuccess, refetch } = useGetCountQuery();
+
+    return (
+        <div>
+            pager
+            coins: {JSON.stringify(data)}
+        </div>
+    )
+}
+  
+export default Pager;

Front/src/index.tsx

@@ -4,6 +4,7 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
+import {BrowserRouter as Router} from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { store } from './store';
 
@@ -12,9 +13,11 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <React.StrictMode>
-    <Provider store={store}>
-      <App />
-    </Provider>
+    {/* <Router> */}
+      <Provider store={store}>
+        <App />
+      </Provider>
+    {/* </Router> */}
   </React.StrictMode>
 );