types pending

Back/src/application_controller.js

@@ -29,11 +29,11 @@ router.get('/coins/markets', function (req, res) {
 
 router.get('/count', function (req, res) {
   let url = config.coingecko.api_url + '/global';
-//  console.log("url: ", url);
+  console.log("url: ", url);
 
   api_helper.REMOTE_API_call(url)
     .then(response => {
-      res.json(response.data.active_cryptocurrencies);
+      res.json({'count': response.data.active_cryptocurrencies});
     })
     .catch(error => {
       console.log("error: ", error);
@@ -71,8 +71,18 @@ router.get('/coin/:id/chart', function (req, res) {
     })
 })
 
+router.get('/global', function (req, res) {
+  let url = config.coingecko.api_url + '/global';
 
-
+  api_helper.REMOTE_API_call(url)
+    .then(response => {
+      res.json(response.data);
+    })
+    .catch(error => {
+      console.log("error: ", error);
+      res.send(error);
+    })
+})
 
 
 

Front/src/App.tsx

@@ -10,7 +10,6 @@ import * as React from 'react';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
 import Container from '@mui/material/Container';
 
 const ColorModeContext = React.createContext({ toggleColorMode: () => { } });

Front/src/Header.tsx

@@ -15,7 +15,12 @@ import { Link } from "react-router-dom";
 
 const ColorModeContext = React.createContext({ toggleColorMode: () => {} });
 
-const Header = (props: any): JSX.Element => {
+export interface HeaderProps {
+    colorMode: any;
+    theme: any;
+}
+
+const Header = (props: HeaderProps): JSX.Element => {
     const theme = useTheme();
     const colorMode = React.useContext(ColorModeContext);
     return (

Front/src/coinApi.ts

@@ -8,22 +8,52 @@ const globalUrl = '/global';
 const coinInfoUrl = (id:string) => `/coin/${id}`;
 const coinChartUrl = (id:string) => `/coin/${id}/chart`;
 
+export interface IGetGlobalResponse {
+  active_cryptocurrencies: number;
+  markets: number;
+}
+
+export interface IGetCoinsListResponse {
+  [key: string]: any;
+}
+
+export interface IGetCoinsCountResponse {
+  count: number;
+}
+
+export interface IGetCoinsInfoResponse {
+  [key: string]: any;
+}
+
+export interface IGetCoinsInfoRequest {
+  id: string;
+}
+
+export interface IGetCoinsChartRequest {
+  page: number;
+  per_page: number;
+}
+
+export interface IGetCoinsChartResponse {
+  [key: string]: any ;
+}
+
 export const coinListApi = createApi({
   baseQuery: fetchBaseQuery({ baseUrl: baseUrl }),
   endpoints: (builder) => ({
-    getGlobal: builder.query<any, number | void>({
+    getGlobal: builder.query<IGetGlobalResponse, void>({
       query: () => globalUrl,
     }),
-    getCoinsList: builder.query<any, any>({
-      query: (payload: {page: number, per_page: number}) => `${marketsUrl}?per_page=${payload.per_page}&page=${payload.page}`,
+    getCoinsList: builder.query<IGetCoinsListResponse, IGetCoinsChartRequest>({
+      query: (payload: IGetCoinsChartRequest) => `${marketsUrl}?per_page=${payload.per_page}&page=${payload.page}`,
     }),
-    getCoinsCount: builder.query<any, number | void>({
+    getCoinsCount: builder.query<IGetCoinsCountResponse, void>({
       query: () => countUrl,
     }),
-    getCoinInfo: builder.query<any, string>({
+    getCoinInfo: builder.query<IGetCoinsInfoResponse, string>({
       query: (id: string) => coinInfoUrl(id),
     }),
-    getCoinChart: builder.query<any, string>({
+    getCoinChart: builder.query<IGetCoinsChartResponse, string>({
       query: (id: string) => coinChartUrl(id),
     }), 
   }),

Front/src/coinDetails/coinChart.tsx

@@ -37,19 +37,46 @@ export const options = {
   },
 };
 
-const CoinChart = (props: any): JSX.Element => {
-    // console.log("props: ", props);
 
-    // get chart data -------------------------------------------
-    const {
-        data,
-        isSuccess: isSuccessChart
-    } = useGetCoinChartQuery(props.coin || 'btc'); // Todo: 404
+export interface ICoinChartProps {
+  coin: string;
+}
 
-    // format chart data ----------------------------------------
-    function formatChartData(data: any): any {        
-        const chartData = data['prices'].map(function (value: any) {
-            // return value[1];
+// export interface IChartData {
+//   [key: string]: any;
+// }
+
+
+
+// ---------------------------------------- IN
+export interface IChartDataItem {
+  [index: number]: number,
+}
+
+export interface IChartData {
+  market_caps: Array<IChartDataItem>;
+  prices: Array<IChartDataItem>;
+  total_volumes: Array<IChartDataItem>;
+}
+
+// ---------------------------------------- OUT
+export interface IChartDataFormattedItem {
+  x: Date;
+  y: number;
+}
+
+export interface IChartDataFormatted extends Array<IChartDataFormattedItem>{};
+
+
+
+
+const CoinChart = (props: ICoinChartProps): JSX.Element => {
+  console.log("props: ", props);
+
+  const { data, isSuccess: isSuccessChart } = useGetCoinChartQuery(props.coin);
+
+  function formatChartData(data: IChartData): IChartDataFormatted {
+    const chartData = data['prices'].map(function (value: IChartDataItem) {
       return {
         x: new Date(value[0]),
         y: value[1],
@@ -59,10 +86,10 @@ const CoinChart = (props: any): JSX.Element => {
     return chartData;
   }
 
-    // format data ----------------------------------------------
   function formatChartLabels(data: any): any {
+    console.log('data: ', data)
     const labels = data['prices'].map((value: (string | number | Date)[]) => format(new Date(value[0]), 'MM/dd/yyyy'));
-        console.log('formatChartLabels: ', labels)
+    // console.log('formatChartLabels: ', labels)
     return labels;
   }
 
@@ -82,8 +109,6 @@ const CoinChart = (props: any): JSX.Element => {
           />
         </div>
       }
-
-            {/* <Line options={options} data={data} />; */}
     </div>
   )
 }

Front/src/coinDetails/coinDetails.tsx

@@ -4,21 +4,18 @@ import CoinChart from './coinChart';
 
 const CoinDetails = (): JSX.Element => {
   const { id } = useParams();
-  console.log("id: ", id)
-
-  // get info data
   const {
     data: dataInfo,
     error: errorInfo,
     isLoading: isLoadingInfo,
     isSuccess: isSuccessInfo,
     refetch: refetchInfo
-  } = useGetCoinInfoQuery(id || 'btc'); // Todo: 404
+  } = useGetCoinInfoQuery(id ? id : '');
 
   return (
     <div>
       {
-        dataInfo && isSuccessInfo &&
+        dataInfo && isSuccessInfo && <>
           <div className="info">
             <div>ID: {dataInfo.id}</div>
             <div className="links">
@@ -26,12 +23,11 @@ const CoinDetails = (): JSX.Element => {
             </div>
             <div>Description{dataInfo.description.en}</div>
           </div>
-      }
 
-      {
           <div className="chart">
-          <CoinChart coin={'flow'} />
+            <CoinChart coin={dataInfo.id} />
           </div>
+        </>
       }
 
     </div>

Front/src/coinList/coinList.tsx

@@ -1,8 +1,6 @@
-// Route
 import { useSearchParams } from 'react-router-dom';
 import { Link } from "react-router-dom";
 
-// Material UI
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -10,10 +8,8 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 
-// Redux
 import { useGetCoinsListQuery, useGetGlobalQuery } from '../coinApi';
 
-// components
 import Pager from './coinListPager';
 
 
@@ -27,22 +23,23 @@ const CoinList = (): JSX.Element => {
 
   // For Query
   const payload = { page, per_page }
-  const { data, error, isLoading, isSuccess } = useGetCoinsListQuery(payload);
-  const { data: globalData, error: globalError, isLoading: globalIsLoading, isSuccess: lobalSuccess } = useGetGlobalQuery();
+  const { data, isLoading, isSuccess } = useGetCoinsListQuery(payload);
+  const { data: globalData, isLoading: globalIsLoading, isSuccess: lobalSuccess } = useGetGlobalQuery();
 
   return (
     <div>
-      {isLoading && <div>Loading...</div>}
+      {isLoading || globalIsLoading && <div>Loading...</div>}
 
       {
         globalData &&
         <span className="globalText">
-          {`The global cryptocurrency market has currently ${globalData.data.active_cryptocurrencies} active cryptocurrencies, and ${globalData.data.markets} markets`}
+          {`The global cryptocurrency market has currently ${globalData.active_cryptocurrencies} active cryptocurrencies, and ${globalData.markets} markets`}
           <br />
         </span>
       }
 
-      {data && isSuccess &&
+      {
+        data && isSuccess &&
           <TableContainer style={{ marginTop: 20 }}>
             <Table size="small" aria-label="simple table">
               <TableHead>

Front/src/coinList/coinListPager.tsx

@@ -15,23 +15,27 @@ const Pager = (props:any): JSX.Element => {
     const { data, error, isLoading, isSuccess, refetch } = useGetCoinsCountQuery();
     const navigate = useNavigate();
 
-    const lastPage = Math.ceil(data / per_page)
+    const lastPage = (data: number) => Math.ceil(data / per_page)
 
     function handlePager(page: number) {
         const url = `/?page=${page}`
         navigate(url)
     }
 
-    return (
+    return (<>
+        {
+            data && isSuccess &&
                 <Grid container justifyContent="center" style={{marginTop: 60}}>
                     <ButtonGroup variant="contained" aria-label="outlined primary button group">
                         <Button disabled={page === 1} onClick={() => navigate("/")}>First</Button>
                         <Button disabled={page === 1} onClick={() => handlePager(page - 1)}>Prev</Button>
-                <Typography style={{ padding: 10}}>Page {page} from {lastPage}</Typography>
-                <Button disabled={page === lastPage} onClick={() => handlePager(page + 1)}>Next</Button>
-                <Button disabled={page === lastPage} onClick={() => handlePager(lastPage)}>Last</Button>
+                        <Typography style={{ padding: 10}}>Page {page} from {lastPage(data.count)}</Typography>
+                        <Button disabled={page === lastPage(data.count)} onClick={() => handlePager(page + 1)}>Next</Button>
+                        <Button disabled={page === lastPage(data.count)} onClick={() => handlePager(lastPage(data.count))}>Last</Button>
                     </ButtonGroup>
                 </Grid>
+        }
+        </>
     )
 }