karx/rgl
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Create input mechanisms and conversion logic

Browse source
This commit is contained in:
Yash Karandikar 2021-10-03 14:24:25 -05:00
parent 00fef4a9e2
commit 07c9f23db6
Signed by: karx
GPG key ID: A794DA2529474BA5
5 changed files with 238 additions and 178 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
concurrency/dist/bundle.js vendored
View file

@ -432,7 +432,7 @@ eval("\n\nif (false) {} else {\n module.exports = __webpack_require__(/*! ./cjs
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! axios */ \"./node_modules/axios/index.js\");\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_1__);\n\n\nfunction Exchanger() {\n var _a = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({}), rates = _a[0], setRates = _a[1];\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n axios__WEBPACK_IMPORTED_MODULE_1___default().get(\"https://v6.exchangerate-api.com/v6/73d1538c56a21d7c686156c7/latest/USD/\").then(function (resp) {\n setRates(resp.data);\n });\n }, []);\n if (Object.keys(rates).length) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"h1\", null, rates.conversion_rates.EUR);\n }\n else {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"h1\", null, \"Loading...\");\n }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Exchanger);\n\n\n//# sourceURL=webpack://concurrency/./src/Exchanger.tsx?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! axios */ \"./node_modules/axios/index.js\");\n/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_1__);\n\n\nfunction Exchanger() {\n var _a = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({}), rates = _a[0], setRates = _a[1];\n var _b = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\"), inputOne = _b[0], setInputOne = _b[1];\n var _c = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"USD\"), selectedOne = _c[0], setSelectedOne = _c[1];\n var _d = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"EUR\"), selectedTwo = _d[0], setSelectedTwo = _d[1];\n var _e = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"\"), result = _e[0], setResult = _e[1];\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n axios__WEBPACK_IMPORTED_MODULE_1___default().get(\"https://v6.exchangerate-api.com/v6/73d1538c56a21d7c686156c7/latest/USD/\").then(function (resp) {\n setRates(resp.data);\n });\n }, []);\n function handleSelectedOne(event) {\n setSelectedOne(event.target.value);\n }\n function handleInputOne(event) {\n setInputOne(event.target.value);\n }\n function handleSelectedTwo(event) {\n setSelectedTwo(event.target.value);\n }\n function handleConvertClick() {\n var inp = Number(inputOne);\n if (Number.isNaN(inp)) {\n alert(\"Input must be a number!\");\n return;\n }\n var inpCurrency = selectedOne;\n var outCurrency = selectedTwo;\n // First, convert the input to USD\n var exchange_rate = rates.conversion_rates[inpCurrency];\n var usd = inp / exchange_rate;\n // Then, convert the USD to the chosen output currency\n exchange_rate = rates.conversion_rates[outCurrency];\n setResult((usd * exchange_rate).toFixed(2)); // Round to 2 decimal places\n }\n if (Object.keys(rates).length) {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { type: \"text\", defaultValue: inputOne, onChange: handleInputOne }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"input\", { type: \"text\", value: result, readOnly: true }),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"br\", null),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"select\", { defaultValue: selectedOne, onChange: handleSelectedOne }, Object.keys(rates.conversion_rates).map(function (currency, index) { return react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"option\", { key: index }, currency); })),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"select\", { defaultValue: selectedTwo, onChange: handleSelectedTwo }, Object.keys(rates.conversion_rates).map(function (currency, index) { return react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"option\", { key: index }, currency); })),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"button\", { onClick: handleConvertClick }, \"Convert!\"));\n }\n else {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"h1\", null, \"Loading...\");\n }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Exchanger);\n\n\n//# sourceURL=webpack://concurrency/./src/Exchanger.tsx?");
/***/ }),
@ -443,7 +443,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n/* harmony import */ var _Exchanger__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Exchanger */ \"./src/Exchanger.tsx\");\n\n\n\nfunction App() {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Exchanger__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null);\n}\nreact_dom__WEBPACK_IMPORTED_MODULE_1__.render(react__WEBPACK_IMPORTED_MODULE_0__.createElement(App, null), document.getElementById(\"root\"));\n\n\n//# sourceURL=webpack://concurrency/./src/index.tsx?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n/* harmony import */ var _Exchanger__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Exchanger */ \"./src/Exchanger.tsx\");\n\n\n\nfunction App() {\n return react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null,\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(\"h1\", null, \"ConCurrency\"),\n react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Exchanger__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null));\n}\nreact_dom__WEBPACK_IMPORTED_MODULE_1__.render(react__WEBPACK_IMPORTED_MODULE_0__.createElement(App, null), document.getElementById(\"root\"));\n\n\n//# sourceURL=webpack://concurrency/./src/index.tsx?");
/***/ })

2
concurrency/public/index.html
View file

@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>React Starter</title>
<title>ConCurrency</title>
</head>
<body>

226
concurrency/src/Exchanger.tsx
View file

@ -1,190 +1,68 @@
import React, { useEffect, useState } from "react";
import axios from "axios";
import Rates from "./Rates";
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);
let [inputOne, setInputOne] = useState("");
let [selectedOne, setSelectedOne] = useState("USD");
let [selectedTwo, setSelectedTwo] = useState("EUR");
let [result, setResult] = useState("");
useEffect(() => {
axios.get(process.env.API_URL).then(resp => {
setRates(resp.data);
})
});
}, []);
function handleSelectedOne(event: any) {
setSelectedOne(event.target.value);
}
function handleInputOne(event: any) {
setInputOne(event.target.value);
}
function handleSelectedTwo(event: any) {
setSelectedTwo(event.target.value);
}
function handleConvertClick() {
let inp = Number(inputOne);
if (Number.isNaN(inp)) {
alert("Input must be a number!");
return;
}
let inpCurrency = selectedOne;
let outCurrency = selectedTwo;
// First, convert the input to USD
let exchange_rate = rates.conversion_rates[inpCurrency];
let usd = inp / exchange_rate;
// Then, convert the USD to the chosen output currency
exchange_rate = rates.conversion_rates[outCurrency];
setResult((usd * exchange_rate).toFixed(2)); // Round to 2 decimal places
}
if (Object.keys(rates).length) {
return <h1>{rates.conversion_rates.EUR}</h1>
return <>
<input type="text" defaultValue={inputOne} onChange={handleInputOne} />
<input type="text" value={result} readOnly />
<br />
<select defaultValue={selectedOne} onChange={handleSelectedOne}>
{Object.keys(rates.conversion_rates).map((currency, index) => <option key={index}>{currency}</option>)}
</select>
<select defaultValue={selectedTwo} onChange={handleSelectedTwo}>
{Object.keys(rates.conversion_rates).map((currency, index) => <option key={index}>{currency}</option>)}
</select>
<button onClick={handleConvertClick}>Convert!</button>
</>
} else {
return <h1>Loading...</h1>
}

179
concurrency/src/Rates.ts Normal file
View file

@ -0,0 +1,179 @@
interface ConversionRate {
[index: string]: number
}
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: ConversionRate
// 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
// }
}
export default Rates;

5
concurrency/src/index.tsx
View file

@ -4,7 +4,10 @@ import ReactDOM from "react-dom";
import Exchanger from "./Exchanger";
function App() {
return <Exchanger />
return <>
<h1>ConCurrency</h1>
<Exchanger />
</>
}
ReactDOM.render(<App />, document.getElementById("root"));