1+ import { FormError } from "@/components/forms/error"
12import { formatCurrency } from "@/lib/utils"
23import { format , startOfDay } from "date-fns"
34import { Loader2 } from "lucide-react"
45import { useEffect , useState } from "react"
5-
66export const FormConvertCurrency = ( {
77 originalTotal,
88 originalCurrencyCode,
@@ -25,18 +25,23 @@ export const FormConvertCurrency = ({
2525 const [ exchangeRate , setExchangeRate ] = useState ( 0 )
2626 const [ convertedTotal , setConvertedTotal ] = useState ( 0 )
2727 const [ isLoading , setIsLoading ] = useState ( false )
28+ const [ error , setError ] = useState < string | null > ( null )
2829
2930 useEffect ( ( ) => {
3031 const fetchData = async ( ) => {
3132 try {
3233 setIsLoading ( true )
34+ setError ( null )
35+
3336 const exchangeRate = await getCurrencyRate ( originalCurrencyCode , targetCurrencyCode , normalizedDate )
37+
3438 setExchangeRate ( exchangeRate )
3539 setConvertedTotal ( Math . round ( originalTotal * exchangeRate * 100 ) / 100 )
3640 } catch ( error ) {
3741 console . error ( "Error fetching currency rates:" , error )
3842 setExchangeRate ( 0 )
3943 setConvertedTotal ( 0 )
44+ setError ( error instanceof Error ? error . message : "Failed to fetch currency rate" )
4045 } finally {
4146 setIsLoading ( false )
4247 }
@@ -74,28 +79,26 @@ export const FormConvertCurrency = ({
7479 className = "w-32 rounded-md border border-input px-2 py-1"
7580 />
7681 </ div >
77- < div className = "text-xs text-muted-foreground" > The exchange rate will be added to the transaction</ div >
82+ { ! error && (
83+ < div className = "text-xs text-muted-foreground" > The exchange rate will be added to the transaction</ div >
84+ ) }
85+ { error && < FormError className = "mt-0 text-sm" > { error } </ FormError > }
7886 </ div >
7987 ) }
8088 </ div >
8189 )
8290}
8391
8492async function getCurrencyRate ( currencyCodeFrom : string , currencyCodeTo : string , date : Date ) : Promise < number > {
85- try {
86- const formattedDate = format ( date , "yyyy-MM-dd" )
87- const response = await fetch ( `/api/currency?from=${ currencyCodeFrom } &to=${ currencyCodeTo } &date=${ formattedDate } ` )
93+ const formattedDate = format ( date , "yyyy-MM-dd" )
94+ const response = await fetch ( `/api/currency?from=${ currencyCodeFrom } &to=${ currencyCodeTo } &date=${ formattedDate } ` )
8895
89- if ( ! response . ok ) {
90- const errorData = await response . json ( )
91- console . error ( "Currency API error:" , errorData . error )
92- return 0
93- }
94-
95- const data = await response . json ( )
96- return data . rate
97- } catch ( error ) {
98- console . error ( "Error fetching currency rate:" , error )
99- return 0
96+ if ( ! response . ok ) {
97+ const errorData = await response . json ( )
98+ console . log ( "Currency API error:" , errorData . error )
99+ throw new Error ( errorData . error || "Failed to fetch currency rate" )
100100 }
101+
102+ const data = await response . json ( )
103+ return data . rate
101104}
0 commit comments