2024-05-28 02:13:04 +02:00
|
|
|
import Head from "next/head";
|
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
|
import { fetchData } from "../utils/api";
|
2024-01-14 16:30:19 +01:00
|
|
|
|
|
|
|
|
export default function Rates() {
|
|
|
|
|
const [data, setData] = useState(null);
|
2024-01-14 16:53:56 +01:00
|
|
|
const [loading, setLoading] = useState(true);
|
2024-01-14 16:30:19 +01:00
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const fetchDataFromApi = async () => {
|
|
|
|
|
try {
|
|
|
|
|
const apiData = await fetchData();
|
|
|
|
|
setData(apiData);
|
|
|
|
|
} catch (error) {
|
2024-05-28 02:13:04 +02:00
|
|
|
console.error("Error fetching data:", error);
|
2024-01-14 16:53:56 +01:00
|
|
|
} finally {
|
|
|
|
|
setLoading(false); // Set loading to false regardless of success or error
|
2024-01-14 16:30:19 +01:00
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
fetchDataFromApi();
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
const formatCurrency = (value) => {
|
2024-05-28 02:13:04 +02:00
|
|
|
return new Intl.NumberFormat("en-NG", {
|
|
|
|
|
style: "currency",
|
|
|
|
|
currency: "NGN",
|
2024-01-14 16:30:19 +01:00
|
|
|
}).format(value);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Your UI rendering logic here, using the 'data' state
|
|
|
|
|
return (
|
|
|
|
|
<div className="container">
|
|
|
|
|
<Head>
|
|
|
|
|
<title>EUR Rates</title>
|
|
|
|
|
<link rel="icon" href="/favicon.ico" />
|
|
|
|
|
</Head>
|
|
|
|
|
<header className="header">
|
|
|
|
|
<nav className="header__navbar">
|
|
|
|
|
<p className="header__logo">
|
|
|
|
|
<a href="https://twitter.com/jesseinit">init</a>
|
|
|
|
|
</p>
|
|
|
|
|
</nav>
|
|
|
|
|
</header>
|
|
|
|
|
<main>
|
|
|
|
|
<h2>For €1 you'll get the following rates</h2>
|
|
|
|
|
<section className="hero">
|
2024-01-14 16:53:56 +01:00
|
|
|
{loading ? (
|
2024-05-28 02:13:04 +02:00
|
|
|
<div>
|
|
|
|
|
<p>Loading...</p>
|
2024-01-14 16:30:19 +01:00
|
|
|
</div>
|
2024-05-28 02:13:04 +02:00
|
|
|
) : (
|
|
|
|
|
data && (
|
|
|
|
|
<div className="currency__container">
|
|
|
|
|
{data.map((item) => (
|
|
|
|
|
<p
|
|
|
|
|
key={item.provider}
|
|
|
|
|
className={
|
|
|
|
|
item.bestRate ? "best-rate" : ""
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<a href={item.href}>{item.provider}:</a>
|
|
|
|
|
<span className="rate">
|
|
|
|
|
{formatCurrency(item.rate)}
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
)
|
2024-01-14 16:30:19 +01:00
|
|
|
)}
|
|
|
|
|
</section>
|
|
|
|
|
</main>
|
2024-05-28 02:13:04 +02:00
|
|
|
</div>
|
2024-01-14 16:30:19 +01:00
|
|
|
);
|
|
|
|
|
}
|
