diff --git a/Back/src/application_controller.js b/Back/src/application_controller.js index 153b148..9593282 100644 --- a/Back/src/application_controller.js +++ b/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 interval = req.query.interval; - - let url = config.coingecko.api_url + '/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false'; + let page = req.query.page || 1; + 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`; 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; diff --git a/Front/package-lock.json b/Front/package-lock.json index a6a86da..3495f03 100644 --- a/Front/package-lock.json +++ b/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", diff --git a/Front/package.json b/Front/package.json index 4760a98..719eafa 100644 --- a/Front/package.json +++ b/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" diff --git a/Front/src/App.tsx b/Front/src/App.tsx index a0ec5ba..d27a17b 100644 --- a/Front/src/App.tsx +++ b/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 (
- + + + } /> + } /> + +
); } diff --git a/Front/src/coinDetails/coinDetails.tsx b/Front/src/coinDetails/coinDetails.tsx new file mode 100644 index 0000000..4ba8175 --- /dev/null +++ b/Front/src/coinDetails/coinDetails.tsx @@ -0,0 +1,9 @@ + +const CoinDetails = (props: any): JSX.Element => { + console.log("props: ", props) + return ( +
CoinDetails
+ ) + } + + export default CoinDetails; diff --git a/Front/src/coinList/coinList-api.ts b/Front/src/coinList/coinList-api.ts index 2143089..9be9c72 100644 --- a/Front/src/coinList/coinList-api.ts +++ b/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({ - query: () => marketsUrl, + getMarkets: builder.query({ + query: (page = 1) => `${marketsUrl}?per_page=10&page=${page}`, + }), + getCount: builder.query({ + query: () => countUrl, }), }), }) -export const { useGetMarketsQuery } = coinListApi; +export const { useGetMarketsQuery, useGetCountQuery } = coinListApi; diff --git a/Front/src/coinList/coinList.tsx b/Front/src/coinList/coinList.tsx index 6a7c626..e9466d3 100644 --- a/Front/src/coinList/coinList.tsx +++ b/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 (
CoinList - { data && - data.map((item: any, index: any) => { - return
- {item.id} - {item.name} -
- }) - } + + + + + + { data && + data.map((item: any, index: any) => { + return ( + + + + + + + + + + ) + }) + } + +
{item.symbol}{item.id}{item.name}{item.high_24h}{item.low_24h}{item.price_change_percentage_24h}
+
) } - export default CoinList; \ No newline at end of file + export default CoinList; diff --git a/Front/src/coinList/coinListPager.tsx b/Front/src/coinList/coinListPager.tsx new file mode 100644 index 0000000..88a5e06 --- /dev/null +++ b/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 ( +
+ pager + coins: {JSON.stringify(data)} +
+ ) +} + +export default Pager; diff --git a/Front/src/index.tsx b/Front/src/index.tsx index 593bacc..ba0f406 100644 --- a/Front/src/index.tsx +++ b/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( - - - + {/* */} + + + + {/* */} );