better types

Front/src/coinDetails/coinChart.tsx

@@ -85,8 +85,8 @@ const CoinChart = (props: ICoinChartProps): JSX.Element => {
     });
   }
 
-  function formatChartLabels(data: any): any {
-    return data['prices'].map((value: (string | number | Date)[]) =>
+  function formatChartLabels(data: IChartData): string[] {
+    return data['prices'].map((value: IChartDataItem) =>
       format(new Date(value[0]), 'MM/dd/yyyy')
     );
   }

Front/src/coinDetails/coinDetails.tsx

@@ -19,10 +19,6 @@ const CoinDetails = (): JSX.Element => {
     isSuccess,
   } = useGetCoinInfoQuery(id ? id : '');
 
-  React.useEffect(() => {
-    console.log(data)
-  }, [])
-
   return (
     <div className="details">
       {isLoading && <div>Loading...</div>}

Front/src/coinDetails/coinInfo.tsx

@@ -9,12 +9,24 @@ import Button from '@mui/material/Button';
 
 import Grid from '@mui/material/Grid';
 
+import { IGetCoinInfoResponse } from '../coinApi-types'
+
+// export interface ICoinInfoProps {
+//   [key: string]: any;
+// }
+
+// interface ICoinInfoProps {
+//   data: IGetCoinInfoResponse;
+// }
+
+
 export interface ICoinInfoProps {
   [key: string]: any;
 }
 
 const CoinInfo = (props: ICoinInfoProps): JSX.Element => {
   const { data } = props;
+  console.log("CoinInfo props.data: ", data)
 
   return (
     <div>
@@ -51,7 +63,6 @@ const CoinInfo = (props: ICoinInfoProps): JSX.Element => {
           Object.entries(data.links.chat_url).map(
             ([key, value]) => {
               if (Boolean(value)) {
-                console.log(value);
                 const domain = new URL(String(value));
                 const label = domain.hostname.split(".")[0]
                 return (

Front/src/coinDetails/coinStats.tsx

@@ -5,14 +5,19 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 
-import { IGetCoinInfoResponse, IGetCoinInfoData } from '../coinApi-types'
+import { IGetCoinInfoResponse } from '../coinApi-types'
 
 interface ICoinStatsProps {
   data: IGetCoinInfoResponse;
 }
 
+interface IRow {
+  title: string;
+  value: string;
+}
+
 const CoinStats = (props: ICoinStatsProps): JSX.Element => {
-  console.log("CoinStats props", props)
+  // console.log("CoinStats props", props)
 
   const { data } = props;
 
@@ -37,7 +42,7 @@ const CoinStats = (props: ICoinStatsProps): JSX.Element => {
         <Table size="small" >
           <TableBody>
             {
-              tableData.map((row: any, index: any) => (
+              tableData.map((row: IRow, index: number) => (
                 <TableRow key={row.title}>
                   <TableCell align="left">{row.title}</TableCell>
                   <TableCell align="right">{row.value}</TableCell>

Front/src/coinList/coinList-types.ts

@@ -1,50 +1,50 @@
 export interface IGetAssetsResponse {
   result: { [key: string]: any };
   error: []
-  }
+}
 
-  export interface IGetPairsResponse {
-    [key: string]: any ;
-  }
+export interface IGetPairsResponse {
+  [key: string]: any;
+}
 
-  export interface IGetDataResponse {
+export interface IGetDataResponse {
   result: { [key: string]: any };
   error: []
-  }
+}
 
-  export interface IGetDataRequest {
+export interface IGetDataRequest {
   pair: string;
   interval: number;
-  }
+}
 
-  export interface IOHLCData {
+export interface IOHLCData {
   close: number;
   date: Date;
   high: number;
   low: number;
   open: number;
   volume: number;
-  }
+}
 
-  export interface ChartProps {
+export interface ChartProps {
   data: IOHLCData[];
   itemWidth: number;
-  }
+}
 
-  export interface InitialData {
+export interface InitialData {
   readonly data: IOHLCData[];
   readonly height: number;
   readonly width: number;
   readonly ratio: number;
   readonly crosshair?: boolean;
-  }
+}
 
-  export interface IProps {
+export interface IProps {
   id: string;
   pair: string;
-  }
+}
 
-  export interface IChartState {
+export interface IChartState {
   assets: { [key: string]: any };
   pairs: { [key: string]: any };
   data: { [key: string]: any };
@@ -53,12 +53,12 @@ export interface IGetAssetsResponse {
     pair: string;
     data?: IOHLCData[]
   }[]
-  }
+}
 
 
-  export interface IintervalValue {
+export interface IintervalValue {
   label: string;
   value: number;
-  }
+}
 
-  export interface IintervalValues extends Array<IintervalValue> { }
+export interface IintervalValues extends Array<IintervalValue> { }

Front/src/index.css

@@ -32,12 +32,6 @@ header a {
   color: #e15241
 }
 
-
-/* #chart {
-  position: absolute;
-  height: 400px;
-} */
-
 .coinName {
   font-weight: bold;
   margin-left: 10px;