Now we can fetch conversion rates from the API

This commit is contained in:
Yash Karandikar 2021-10-03 12:05:47 -05:00
parent 9bf06c5a41
commit 00fef4a9e2
Signed by: karx
GPG key ID: A794DA2529474BA5
6 changed files with 593 additions and 7 deletions

File diff suppressed because one or more lines are too long

View file

@ -5,16 +5,17 @@
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"run": "webpack"
"build": "webpack"
},
"keywords": [],
"author": "",
"dependencies": {
"axios": "^0.22.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@types/react": "^17.0.26",
"@types/react": "^17.0.27",
"@types/react-dom": "^17.0.9",
"ts-loader": "^9.2.6",
"typescript": "^4.4.3",

View file

@ -0,0 +1,193 @@
import React, { useEffect, useState } from "react";
import axios from "axios";
type Rates = {
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: {
USD: number,
AED: number,
AFN: number,
ALL: number,
AMD: number,
ANG: number,
AOA: number,
ARS: number,
AUD: number,
AWG: number,
AZN: number,
BAM: number,
BBD: number,
BDT: number,
BGN: number,
BHD: number,
BIF: number,
BMD: number,
BND: number,
BOB: number,
BRL: number,
BSD: number,
BTN: number,
BWP: number,
BYN: number,
BZD: number,
CAD: number,
CDF: number,
CHF: number,
CLP: number,
CNY: number,
COP: number,
CRC: number,
CUC: number,
CUP: number,
CVE: number,
CZK: number,
DJF: number,
DKK: number,
DOP: number,
DZD: number,
EGP: number,
ERN: number,
ETB: number,
EUR: number,
FJD: number,
FKP: number,
FOK: number,
GBP: number,
GEL: number,
GGP: number,
GHS: number,
GIP: number,
GMD: number,
GNF: number,
GTQ: number,
GYD: number,
HKD: number,
HNL: number,
HRK: number,
HTG: number,
HUF: number,
IDR: number,
ILS: number,
IMP: number,
INR: number,
IQD: number,
IRR: number,
ISK: number,
JMD: number,
JOD: number,
JPY: number,
KES: number,
KGS: number,
KHR: number,
KID: number,
KMF: number,
KRW: number,
KWD: number,
KYD: number,
KZT: number,
LAK: number,
LBP: number,
LKR: number,
LRD: number,
LSL: number,
LYD: number,
MAD: number,
MDL: number,
MGA: number,
MKD: number,
MMK: number,
MNT: number,
MOP: number,
MRU: number,
MUR: number,
MVR: number,
MWK: number,
MXN: number,
MYR: number,
MZN: number,
NAD: number,
NGN: number,
NIO: number,
NOK: number,
NPR: number,
NZD: number,
OMR: number,
PAB: number,
PEN: number,
PGK: number,
PHP: number,
PKR: number,
PLN: number,
PYG: number,
QAR: number,
RON: number,
RSD: number,
RUB: number,
RWF: number,
SAR: number,
SBD: number,
SCR: number,
SDG: number,
SEK: number,
SGD: number,
SHP: number,
SLL: number,
SOS: number,
SRD: number,
SSP: number,
STN: number,
SYP: number,
SZL: number,
THB: number,
TJS: number,
TMT: number,
TND: number,
TOP: number,
TRY: number,
TTD: number,
TVD: number,
TWD: number,
TZS: number,
UAH: number,
UGX: number,
UYU: number,
UZS: number,
VES: number,
VND: number,
VUV: number,
WST: number,
XAF: number,
XCD: number,
XDR: number,
XOF: number,
XPF: number,
YER: number,
ZAR: number,
ZMW: number
}
}
function Exchanger() {
let [rates, setRates] = useState({} as Rates);
useEffect(() => {
axios.get(process.env.API_URL).then(resp => {
setRates(resp.data);
})
}, []);
if (Object.keys(rates).length) {
return <h1>{rates.conversion_rates.EUR}</h1>
} else {
return <h1>Loading...</h1>
}
}
export default Exchanger;

View file

@ -1,9 +1,10 @@
import React from "react";
import ReactDOM from "react-dom";
import Exchanger from "./Exchanger";
function App() {
return <h1>Hello, world!</h1>
return <Exchanger />
}
ReactDOM.render(<App />, document.getElementById("root"));

View file

@ -1,4 +1,5 @@
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.tsx',
@ -18,5 +19,8 @@ module.exports = {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
mode: 'development'
mode: 'development',
plugins: [
new webpack.EnvironmentPlugin(["API_URL"])
]
};

View file

@ -50,7 +50,7 @@
dependencies:
"@types/react" "*"
"@types/react@*", "@types/react@^17.0.26":
"@types/react@*":
version "17.0.26"
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.26.tgz#960ea4b3518cc154ed7df3b35656c508df653331"
integrity sha512-MXxuXrH2xOcv5cp/su4oz69dNQnSA90JjFw5HBd5wifw6Ihi94j7dRJm7qNsB30tnruXSCPc9qmlhGop4nh9Hw==
@ -59,6 +59,15 @@
"@types/scheduler" "*"
csstype "^3.0.2"
"@types/react@^17.0.27":
version "17.0.27"
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.27.tgz#6498ed9b3ad117e818deb5525fa1946c09f2e0e6"
integrity sha512-zgiJwtsggVGtr53MndV7jfiUESTqrbxOcBvwfe6KS/9bzaVPCTDieTWnFNecVNx6EAaapg5xsLLWFfHHR437AA==
dependencies:
"@types/prop-types" "*"
"@types/scheduler" "*"
csstype "^3.0.2"
"@types/scheduler@*":
version "0.16.2"
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
@ -244,6 +253,13 @@ ansi-styles@^4.1.0:
dependencies:
color-convert "^2.0.1"
axios@^0.22.0:
version "0.22.0"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.22.0.tgz#bf702c41fb50fbca4539589d839a077117b79b25"
integrity sha512-Z0U3uhqQeg1oNcihswf4ZD57O3NrR1+ZXhxaROaWpDmsDTx7T2HNBV2ulBtie2hwJptu8UvgnJoK+BIqdzh/1w==
dependencies:
follow-redirects "^1.14.4"
braces@^3.0.1:
version "3.0.2"
resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
@ -438,6 +454,11 @@ find-up@^4.0.0:
locate-path "^5.0.0"
path-exists "^4.0.0"
follow-redirects@^1.14.4:
version "1.14.4"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.4.tgz#838fdf48a8bbdd79e52ee51fb1c94e3ed98b9379"
integrity sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==
function-bind@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"