10 09 2021 Kusapi.js - b05313fsldsp/web-for-kusapi GitHub Wiki

import React, { useState, useEffect } from "react";
import { Form, Button, Row, Col } from "react-bootstrap";
import MainScreen from "../../components/MainScreen";
import "./Kusapi.css";
import { useDispatch, useSelector } from "react-redux";
import { updateProfile } from "../../actions/userActions";
import Loading from "../../components/Loading";
import ErrorMessage from "../../components/ErrorMessage";

import { render } from "react-dom";
import { Chart } from "react-google-charts";
import Component from 'react-component-component';


  <Component 
    initialState={{dataLoadingStatus: "loading", chartData:[]}}
    didMount={async function(component) {
      const response = await fetch("https://api.exchangeratesapi.io/latest?symbols=USD,GBP,CAD");
      const json = await response.json();
      const rateCurrencyNames = Object.keys(json.rates);
      const rateCurrencyValues = Object.values(json.rates);
      const chartData = [["Currency Name", "Currency Rate"]]
      for (let i = 0; i < rateCurrencyNames.length; i += 1) {
        chartData.push([rateCurrencyNames[i], rateCurrencyValues[i]])
      }
      component.setState({
        dataLoadingStatus: "ready",
        chartData: chartData
      })
    }}
  >


const Kusapi = ({ location, history }) => {

  return (
    <MainScreen title="KUS API">
        <Component 
        initialState={{dataLoadingStatus: "loading", chartData:[]}}
        didMount={async function(component) {
          const response = await fetch("https://api.exchangeratesapi.io/latest?symbols=USD,GBP,CAD");
          const json = await response.json();
          const rateCurrencyNames = Object.keys(json.rates);
          const rateCurrencyValues = Object.values(json.rates);
          const chartData = [["Currency Name", "Currency Rate"]]
          for (let i = 0; i < rateCurrencyNames.length; i += 1) {
            chartData.push([rateCurrencyNames[i], rateCurrencyValues[i]])
          }
          component.setState({
            dataLoadingStatus: "ready",
            chartData: chartData
            })
          }}
        >



             <Chart
                chartType="LineChart"
                data={component.state.chartData}
                options={{
                hAxis: {
                  format: 'yyyy',
                },
                vAxis: {
                  format: 'short',
                },
                title: 'Debt incurred over time.',
              }}
              />
          </Component>
    </MainScreen>
    );
};

 


export default Kusapi;