diff --git a/Back/src/application_controller.js b/Back/src/application_controller.js index 2e6b717..8cbd458 100644 --- a/Back/src/application_controller.js +++ b/Back/src/application_controller.js @@ -27,7 +27,7 @@ router.get('/coins/markets', function (req, res) { }) -router.get('/coins/count', function (req, res) { +router.get('/count', function (req, res) { let url = config.coingecko.api_url + '/global'; // console.log("url: ", url); @@ -41,4 +41,25 @@ router.get('/coins/count', function (req, res) { }) }) + +router.get('/coin/:id', function (req, res) { + let id = req.params['id']; + let url = config.coingecko.api_url + '/coins/' + id; + console.log("id: ", id); + + api_helper.REMOTE_API_call(url) + .then(response => { + res.json(response); + }) + .catch(error => { + console.log("error: ", error); + res.send(error); + }) +}) + + + + + + module.exports = router; diff --git a/Front/src/coinApi.ts b/Front/src/coinApi.ts index 3140813..9ee2cb0 100644 --- a/Front/src/coinApi.ts +++ b/Front/src/coinApi.ts @@ -1,8 +1,11 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react' +// URL's const baseUrl = "http://127.0.0.1:8080"; const marketsUrl = '/coins/markets'; -const countUrl = '/coins/count'; +const countUrl = '/count'; +const coinInfoUrl = (id:string) => `/coin/${id}`; +const coinGraphUrl = (id:string) => `/coin/${id}`; export const coinListApi = createApi({ baseQuery: fetchBaseQuery({ baseUrl: baseUrl }), @@ -12,8 +15,17 @@ export const coinListApi = createApi({ }), getCount: builder.query({ query: () => countUrl, - }), + }), + getCoinInfo: builder.query({ + query: (id: string) => coinInfoUrl(id), + }), + getCoinGraph: builder.query({ + query: (id: string) => coinGraphUrl(id), + }), }), }) -export const { useGetMarketsQuery, useGetCountQuery } = coinListApi; +export const { + useGetMarketsQuery, + useGetCountQuery, + useGetCoinInfoQuery } = coinListApi; diff --git a/Front/src/coinDetails/coinDetails.tsx b/Front/src/coinDetails/coinDetails.tsx index 307b9e7..5bba157 100644 --- a/Front/src/coinDetails/coinDetails.tsx +++ b/Front/src/coinDetails/coinDetails.tsx @@ -1,10 +1,33 @@ import { useParams } from 'react-router-dom'; +import { useGetCoinInfoQuery } from '../coinApi'; const CoinDetails = (): JSX.Element => { const { id } = useParams(); console.log("id: ", id) + + const { + data, + error, + isLoading, + isSuccess, + refetch + } = useGetCoinInfoQuery(id || 'btc'); + + // const { id } = data; + return ( -
CoinDetails
+
CoinDetails + { + data && +
+
ID: {data.id}
+
+
Homepage: {data.links.homepage}
+
+
Description{data.description.en}
+
+ } +
) }