fetch markets

Back/src/application_controller.js

@@ -3,18 +3,20 @@ var router = express.Router();
 const api_helper = require('./thirdparty_api')
 const config = require('./config');
 
-
+// total coins   13081
+// per page coins  100
+// max page        131
+// last lenth       81
 
 router.get('/coins/markets', function (req, res) {
-  // let pair = req.query.pair;
+  let page = req.query.page || 1;
-  // let interval = req.query.interval;
+  let per_page = req.query.per_page || 100;
-  
+  let url = config.coingecko.api_url + `/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=${per_page}&page=${page}&sparkline=false`;
-  let url = config.coingecko.api_url + '/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false';
 
   api_helper.REMOTE_API_call(url)
     .then(response => {
       console.log("url: ", url);
-      console.log("response: ", response);
+      console.log("response.length: ", response.length);
       res.json(response);
     })
     .catch(error => {
@@ -23,4 +25,19 @@ 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);
+
+  api_helper.REMOTE_API_call(url)
+    .then(response => {
+      res.json(response.data.active_cryptocurrencies);
+    })
+    .catch(error => {
+      console.log("error: ", error);
+      res.send(error);
+    })
+})
+
 module.exports = router;

Front/package-lock.json

@@ -20,6 +20,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-redux": "^8.0.5",
+        "react-router-dom": "^6.4.4",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.3",
         "web-vitals": "^2.1.4"
@@ -3097,6 +3098,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.4.tgz",
+      "integrity": "sha512-gTL8H5USTAKOyVA4xczzDJnC3HMssdFa3tRlwBicXynx9XfiXwneHnYQogwSKpdCkjXISrEKSTtX62rLpNEVQg==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -14044,6 +14053,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.4.tgz",
+      "integrity": "sha512-SA6tSrUCRfuLWeYsTJDuriRqfFIsrSvuH7SqAJHegx9ZgxadE119rU8oOX/rG5FYEthpdEaEljdjDlnBxvfr+Q==",
+      "dependencies": {
+        "@remix-run/router": "1.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.4.tgz",
+      "integrity": "sha512-0Axverhw5d+4SBhLqLpzPhNkmv7gahUwlUVIOrRLGJ4/uwt30JVajVJXqv2Qr/LCwyvHhQc7YyK1Do8a9Jj7qA==",
+      "dependencies": {
+        "@remix-run/router": "1.0.4",
+        "react-router": "6.4.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -18957,6 +18996,11 @@
         "reselect": "^4.1.7"
       }
     },
+    "@remix-run/router": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.4.tgz",
+      "integrity": "sha512-gTL8H5USTAKOyVA4xczzDJnC3HMssdFa3tRlwBicXynx9XfiXwneHnYQogwSKpdCkjXISrEKSTtX62rLpNEVQg=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -26755,6 +26799,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.4.tgz",
+      "integrity": "sha512-SA6tSrUCRfuLWeYsTJDuriRqfFIsrSvuH7SqAJHegx9ZgxadE119rU8oOX/rG5FYEthpdEaEljdjDlnBxvfr+Q==",
+      "requires": {
+        "@remix-run/router": "1.0.4"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.4.tgz",
+      "integrity": "sha512-0Axverhw5d+4SBhLqLpzPhNkmv7gahUwlUVIOrRLGJ4/uwt30JVajVJXqv2Qr/LCwyvHhQc7YyK1Do8a9Jj7qA==",
+      "requires": {
+        "@remix-run/router": "1.0.4",
+        "react-router": "6.4.4"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

Front/package.json

@@ -15,6 +15,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.5",
+    "react-router-dom": "^6.4.4",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.3",
     "web-vitals": "^2.1.4"

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>({
+    getMarkets: builder.query<any, number | void>({
-      query: () => marketsUrl,
+      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,22 +1,42 @@
-import { useSelector } from 'react-redux'
+import {useParams, useLocation} from 'react-router-dom';
-import { RootState } from '../store';
+import { useGetMarketsQuery } from './coinList-api';
-import { useGetMarketsQuery } from './coinList-api'
+import Pager from './coinListPager';
 
 const CoinList = (): JSX.Element => {
  
+    const location = useLocation()
+    const { page } = useParams();
+
     const { data, error, isLoading, isSuccess, refetch } = useGetMarketsQuery();
+    console.log(page)
+    console.log(location.search)
     
     return (
       <div>
         CoinList
-        { data && 
+        <table>
-          data.map((item: any, index: any) => {
+        <thead>
-            return <div key={index}>
+
-              {item.id}
+        </thead>
-              {item.name}
+          <tbody>
-              </div>
+            { 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>
     )
   }

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}>
+    {/* <Router> */}
-      <App />
+      <Provider store={store}>
-    </Provider>
+        <App />
+      </Provider>
+    {/* </Router> */}
   </React.StrictMode>
 );