feat: dougnut component with new exchange api

src/components/Converter.tsx

@@ -1,20 +1,7 @@
 import axios from 'axios';
-import React, { ChangeEvent, useEffect, useState } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
 import { Card, CardBody, CardTitle, FormGroup, Input } from 'reactstrap';
-
-interface ExchangeRateData {
-  result: string;
-  documentation: string;
-  terms_of_use: string;
-  time_last_update_unix: number;
-  time_last_update_utc: string;
-  time_next_update_unix: number;
-  time_next_update_utc: string;
-  base_code: string;
-  conversion_rates: {
-    [currencyCode: string]: number;
-  };
-}
+import { ExchangeRateData } from '../shared/interfaces';
 
 export default function Converter() {
   const [unselected, setUnselected] = useState(['USD', 'EUR', 'CHF']);

src/components/Doughnut.tsx

@@ -3,20 +3,28 @@ import React, { useEffect, useState } from 'react';
 import { Doughnut } from 'react-chartjs-2';
 import { useSelector } from 'react-redux';
 import { RootState } from '../store/store';
+import { ExchangeRateData } from '../shared/interfaces';
 
 export default function DoughnutChart() {
   const portfolioData = useSelector((state: RootState) => state.portfolioData);
-  const [rateUSD, setRateUSD] = useState<any>([]);
+  const [rateUSD, setRateUSD] = useState<ExchangeRateData>();
 
   useEffect(() => {
-    axios.get(`https://api.exchangerate.host/latest?base=USD`).then((res) => {
-      setRateUSD(res.data.rates);
-    });
+    axios
+      .get(
+        `https://v6.exchangerate-api.com/v6/858c938bf29b829232f96699/latest/USD`
+      )
+      .then((res) => {
+        setRateUSD(res.data);
+      });
   }, []);
 
+  if (!rateUSD) {
+    return <div>Loading...</div>;
+  }
+
   const portfolioToUsd = portfolioData.map((e) => {
-    //burda patlayabilir
-    return (e.totalAsset / rateUSD[e.acronym]).toFixed(2);
+    return (e.totalAsset / rateUSD.conversion_rates[e.acronym]).toFixed(2);
   });
   const data: any = {
     datasets: [

src/shared/interfaces/index.ts

@@ -26,3 +26,17 @@ export type Theme = {
   toggleBorder: string;
   gradient: string;
 };
+
+export interface ExchangeRateData {
+  result: string;
+  documentation: string;
+  terms_of_use: string;
+  time_last_update_unix: number;
+  time_last_update_utc: string;
+  time_next_update_unix: number;
+  time_next_update_utc: string;
+  base_code: string;
+  conversion_rates: {
+    [currencyCode: string]: number;
+  };
+}