details info query working

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;

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 }),
@@ -13,7 +16,16 @@ export const coinListApi = createApi({
     getCount: builder.query<any, number | void>({
       query: () => countUrl,
     }),
+    getCoinInfo: builder.query<any, string>({
+      query: (id: string) => coinInfoUrl(id),
+    }),
+    getCoinGraph: builder.query<any, string>({
+      query: (id: string) => coinGraphUrl(id),
+    }), 
   }),
 })
 
-export const { useGetMarketsQuery, useGetCountQuery } = coinListApi;
+export const { 
+  useGetMarketsQuery,
+  useGetCountQuery,
+  useGetCoinInfoQuery } = coinListApi;

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 (
-        <div>CoinDetails</div>
+        <div>CoinDetails
+            {
+                data  &&
+                <div className="info">
+                    <div>ID: {data.id}</div>
+                    <div className="links">
+                        <div>Homepage: {data.links.homepage}</div>
+                    </div>
+                    <div>Description{data.description.en}</div>
+                </div>
+            }
+        </div>
     )
   }