Clean up code
This commit is contained in:
parent
57d448a8c8
commit
2d7bfa13fa
|
@ -1,6 +1,7 @@
|
|||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
|
||||
}
|
||||
|
||||
div.wrapper{
|
||||
|
@ -10,13 +11,8 @@ div.wrapper{
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
.convert-button {
|
||||
position: relative;
|
||||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
input + input {
|
||||
/* All inputs preceded by another input */
|
||||
input + input {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import axios from "axios";
|
||||
import Rates from "./Rates";
|
||||
|
||||
|
@ -6,24 +6,25 @@ import Rates from "./Rates";
|
|||
|
||||
function Exchanger() {
|
||||
let [rates, setRates] = useState({} as Rates);
|
||||
let [inputOne, setInputOne] = useState("0");
|
||||
let [inputOne, setInputOne] = useState("");
|
||||
let [selectedOne, setSelectedOne] = useState("USD");
|
||||
let [selectedTwo, setSelectedTwo] = useState("EUR");
|
||||
let [result, setResult] = useState("0.00");
|
||||
const isFirstRender = useRef(true);
|
||||
|
||||
useEffect(() => {
|
||||
let saved = Number(localStorage.getItem("saved"));
|
||||
const saved = Number(localStorage.getItem("saved"));
|
||||
if (Math.floor(Date.now() / 1000) - saved > 86400) {
|
||||
// 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
|
||||
axios.get(process.env.API_URL).then(resp => {
|
||||
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));
|
||||
});
|
||||
} else {
|
||||
// Otherwise, just grab them from localstorage
|
||||
let data = JSON.parse(localStorage.getItem("rates"));
|
||||
const data = JSON.parse(localStorage.getItem("rates"));
|
||||
setRates(data);
|
||||
}
|
||||
}, []);
|
||||
|
@ -40,7 +41,13 @@ function Exchanger() {
|
|||
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);
|
||||
if (Number.isNaN(inp)) {
|
||||
alert("Input must be a number!");
|
||||
|
@ -57,7 +64,7 @@ function Exchanger() {
|
|||
// 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
|
||||
}
|
||||
}, [rates, inputOne, selectedOne, selectedTwo]); // Only run this effect if one of these changed
|
||||
|
||||
function handleSwapClick() {
|
||||
const temp1 = selectedOne;
|
||||
|
@ -72,14 +79,15 @@ function Exchanger() {
|
|||
if (Object.keys(rates).length) {
|
||||
return <>
|
||||
<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 />
|
||||
<select value={selectedOne} onChange={handleSelectedOne}>
|
||||
{/* 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 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>
|
||||
|
||||
</div>
|
||||
|
@ -87,7 +95,6 @@ function Exchanger() {
|
|||
<br />
|
||||
<div style={{ display: "flex", justifyContent: "center" }}>
|
||||
<button onClick={handleSwapClick}>Swap</button>
|
||||
<button onClick={handleConvertClick}>Convert!</button>
|
||||
</div>
|
||||
</>
|
||||
} else {
|
||||
|
|
|
@ -12,168 +12,6 @@ type Rates = {
|
|||
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;
|
Loading…
Reference in a new issue