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

Clean up code

Browse source
This commit is contained in:
Yash Karandikar 2021-10-04 17:56:09 -05:00
parent 57d448a8c8
commit 2d7bfa13fa
Signed by: karx
GPG key ID: A794DA2529474BA5
3 changed files with 21 additions and 180 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
concurrency/public/style.css
View file

@ -1,6 +1,7 @@
.grid-container { .grid-container {
display: grid; display: grid;
grid-template-columns: auto auto; grid-template-columns: auto auto;
} }
div.wrapper{ div.wrapper{
@ -10,13 +11,8 @@ div.wrapper{
padding: 10px; padding: 10px;
} }
.convert-button { /* All inputs preceded by another input */
position: relative; input + input {
left: auto;
right: auto;
}
input + input {
margin-left: 1.5rem; margin-left: 1.5rem;
} }

29
concurrency/src/Exchanger.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import axios from "axios"; import axios from "axios";
import Rates from "./Rates"; import Rates from "./Rates";
@ -6,24 +6,25 @@ import Rates from "./Rates";
function Exchanger() { function Exchanger() {
let [rates, setRates] = useState({} as Rates); let [rates, setRates] = useState({} as Rates);
let [inputOne, setInputOne] = useState("0"); let [inputOne, setInputOne] = useState("");
let [selectedOne, setSelectedOne] = useState("USD"); let [selectedOne, setSelectedOne] = useState("USD");
let [selectedTwo, setSelectedTwo] = useState("EUR"); let [selectedTwo, setSelectedTwo] = useState("EUR");
let [result, setResult] = useState("0.00"); let [result, setResult] = useState("0.00");
const isFirstRender = useRef(true);
useEffect(() => { useEffect(() => {
let saved = Number(localStorage.getItem("saved")); const saved = Number(localStorage.getItem("saved"));
if (Math.floor(Date.now() / 1000) - saved > 86400) { if (Math.floor(Date.now() / 1000) - saved > 86400) {
// If it's been more tha 24 hours, fetch new rates // If it's been more tha 24 hours, fetch new rates
// The timeout is 24 hours because that's how often the exchangerate-api refreshes its data // The timeout is 24 hours because that's how often the exchangerate-api refreshes its data
axios.get(process.env.API_URL).then(resp => { axios.get(process.env.API_URL).then(resp => {
setRates(resp.data); setRates(resp.data);
localStorage.setItem("saved", Math.floor(Date.now() / 1000).toString()); localStorage.setItem("saved", Math.floor(Date.now() / 1000).toString()); // convert milliseconds to seconds
localStorage.setItem("rates", JSON.stringify(resp.data)); localStorage.setItem("rates", JSON.stringify(resp.data));
}); });
} else { } else {
// Otherwise, just grab them from localstorage // Otherwise, just grab them from localstorage
let data = JSON.parse(localStorage.getItem("rates")); const data = JSON.parse(localStorage.getItem("rates"));
setRates(data); setRates(data);
} }
}, []); }, []);
@ -40,7 +41,13 @@ function Exchanger() {
setSelectedTwo(event.target.value); setSelectedTwo(event.target.value);
} }
function handleConvertClick() { useEffect(() => {
if (isFirstRender.current) {
// Do nothing if it's the first render
// This will ensure this effect will only fire on state updates, not the initial state
isFirstRender.current = false;
return;
}
let inp = Number(inputOne); let inp = Number(inputOne);
if (Number.isNaN(inp)) { if (Number.isNaN(inp)) {
alert("Input must be a number!"); alert("Input must be a number!");
@ -57,7 +64,7 @@ function Exchanger() {
// Then, convert the USD to the chosen output currency // Then, convert the USD to the chosen output currency
exchange_rate = rates.conversion_rates[outCurrency]; exchange_rate = rates.conversion_rates[outCurrency];
setResult((usd * exchange_rate).toFixed(2)); // Round to 2 decimal places setResult((usd * exchange_rate).toFixed(2)); // Round to 2 decimal places
} }, [rates, inputOne, selectedOne, selectedTwo]); // Only run this effect if one of these changed
function handleSwapClick() { function handleSwapClick() {
const temp1 = selectedOne; const temp1 = selectedOne;
@ -72,14 +79,15 @@ function Exchanger() {
if (Object.keys(rates).length) { if (Object.keys(rates).length) {
return <> return <>
<div className="grid-container"> <div className="grid-container">
<input type="text" value={inputOne} onChange={handleInputOne} /> <input type="text" value={inputOne} placeholder="0" onChange={handleInputOne} />
<input type="text" value={result} readOnly /> <input type="text" value={result} readOnly />
<select value={selectedOne} onChange={handleSelectedOne}> <select value={selectedOne} onChange={handleSelectedOne}>
{/* Map currency names to dropdown values */} {/* Map currency names to dropdown values */}
{Object.keys(rates.conversion_rates).map((currency, index) => <option key={index}>{currency}</option>)} {Object.keys(rates.conversion_rates).sort((a, b) => a.localeCompare(b)).map((currency, index) => <option key={index}>{currency}</option>)}
</select> </select>
<select value={selectedTwo} onChange={handleSelectedTwo}> <select value={selectedTwo} onChange={handleSelectedTwo}>
{Object.keys(rates.conversion_rates).map((currency, index) => <option key={index}>{currency}</option>)} {Object.keys(rates.conversion_rates).sort((a, b) => a.localeCompare(b)).map((currency, index) => <option key={index}>{currency}</option>)}
</select> </select>
</div> </div>
@ -87,7 +95,6 @@ function Exchanger() {
<br /> <br />
<div style={{ display: "flex", justifyContent: "center" }}> <div style={{ display: "flex", justifyContent: "center" }}>
<button onClick={handleSwapClick}>Swap</button> <button onClick={handleSwapClick}>Swap</button>
<button onClick={handleConvertClick}>Convert!</button>
</div> </div>
</> </>
} else { } else {

162
concurrency/src/Rates.ts
View file

@ -12,168 +12,6 @@ type Rates = {
time_next_update_utc: string, time_next_update_utc: string,
base_code: string, base_code: string,
conversion_rates: ConversionRate 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; export default Rates;