From d2ed5525d97df1ee3094233fb0efdfa695efcd37 Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Fri, 3 Apr 2026 23:18:07 +0700
Subject: [PATCH] feat: auto-fetch exchange rates on page load

---
 src/app/components/ExchangeRateViewer.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/app/components/ExchangeRateViewer.js b/src/app/components/ExchangeRateViewer.js
index 5876bc2..96ee079 100644
--- a/src/app/components/ExchangeRateViewer.js
+++ b/src/app/components/ExchangeRateViewer.js
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { format, subDays, startOfMonth } from "date-fns";
@@ -105,7 +105,7 @@ export default function ExchangeRateViewer() {
   const [hasFetched, setHasFetched] = useState(false);
   const [progress, setProgress] = useState(null);
 
-  const handleFetch = async () => {
+  const handleFetch = useCallback(async () => {
     if (!startDate || !endDate) {
       setError("Please select both start and end dates");
       return;
@@ -148,7 +148,12 @@ export default function ExchangeRateViewer() {
       setIsLoading(false);
       setProgress(null);
     }
-  };
+  }, [startDate, endDate, selectedBank]);
+
+  // Auto-fetch on initial load
+  useEffect(() => {
+    handleFetch();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   const escapeCsv = (value) => {
     const str = String(value ?? "");