better types

Front/src/coinDetails/coinChart.tsx

@@ -85,8 +85,8 @@ const CoinChart = (props: ICoinChartProps): JSX.Element => {
     });
   }
 
-  function formatChartLabels(data: any): any {
+  function formatChartLabels(data: IChartData): string[] {
-    return data['prices'].map((value: (string | number | Date)[]) =>
+    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,64 +1,64 @@
 export interface IGetAssetsResponse {
-    result: { [key: string]: any };
+  result: { [key: string]: any };
-    error: []
+  error: []
-  }
+}
 
-  export interface IGetPairsResponse {
+export interface IGetPairsResponse {
-    [key: string]: any ;
+  [key: string]: any;
-  }
+}
 
-  export interface IGetDataResponse {
+export interface IGetDataResponse {
-    result: { [key: string]: any };
+  result: { [key: string]: any };
-    error: []
+  error: []
-  }
+}
 
-  export interface IGetDataRequest {
+export interface IGetDataRequest {
-    pair: string;
+  pair: string;
-    interval: number;
+  interval: number;
-  }
+}
 
-  export interface IOHLCData {
+export interface IOHLCData {
-    close: number;
+  close: number;
-    date: Date;
+  date: Date;
-    high: number;
+  high: number;
-    low: number;
+  low: number;
-    open: number;
+  open: number;
-    volume: number;
+  volume: number;
-  }
+}
 
-  export interface ChartProps {
+export interface ChartProps {
-    data: IOHLCData[];
+  data: IOHLCData[];
-    itemWidth: number;
+  itemWidth: number;
-  }
+}
 
-  export interface InitialData {
+export interface InitialData {
-    readonly data: IOHLCData[];
+  readonly data: IOHLCData[];
-    readonly height: number;
+  readonly height: number;
-    readonly width: number;
+  readonly width: number;
-    readonly ratio: number;
+  readonly ratio: number;
-    readonly crosshair?: boolean;
+  readonly crosshair?: boolean;
-  }
+}
 
-  export interface IProps {
+export interface IProps {
+  id: string;
+  pair: string;
+}
+
+export interface IChartState {
+  assets: { [key: string]: any };
+  pairs: { [key: string]: any };
+  data: { [key: string]: any };
+  items: {
     id: string;
     pair: string;
-  }
+    data?: IOHLCData[]
-  
+  }[]
-  export interface IChartState {
+}
-    assets: { [key: string]: any };
-    pairs: { [key: string]: any };
-    data: { [key: string]: any };
-    items: {
-      id: string;
-      pair: string;
-      data?: IOHLCData[]
-    }[]
-  }
 
 
-  export interface IintervalValue {
+export interface IintervalValue {
-    label: string;
+  label: string;
-    value: number;
+  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;