diff --git a/src/features/UserAccount/components/PagePaymentsHistory/hooks.tsx b/src/features/UserAccount/components/PagePaymentsHistory/hooks.tsx index 674bb88c..c6a741ce 100644 --- a/src/features/UserAccount/components/PagePaymentsHistory/hooks.tsx +++ b/src/features/UserAccount/components/PagePaymentsHistory/hooks.tsx @@ -1,7 +1,13 @@ -import { useState, useEffect } from 'react' +import { + useState, + useEffect, + useCallback, +} from 'react' import { useAuthStore } from 'features/AuthStore' +import format from 'date-fns/format' + import { getUserListPayments, PaymentsList } from 'requests/getUserListPayments' export const usePaymentHistory = () => { @@ -9,12 +15,20 @@ export const usePaymentHistory = () => { const timezoneOffset = new Date().getTimezoneOffset() const { user } = useAuthStore() + const formattedDate = useCallback( + (date: string) => format(new Date(date), 'd MMM yyyy'), + [], + ) + useEffect(() => { (async () => { - const allPayments = await getUserListPayments(timezoneOffset, user?.profile?.email || '') + const allPayments = await getUserListPayments( + timezoneOffset, + user?.profile?.email || '', + ) setPayments(allPayments) })() // eslint-disable-next-line react-hooks/exhaustive-deps }, []) - return { payments } + return { formattedDate, payments } } diff --git a/src/features/UserAccount/components/PagePaymentsHistory/index.tsx b/src/features/UserAccount/components/PagePaymentsHistory/index.tsx index d4fb45fa..ddc0088c 100644 --- a/src/features/UserAccount/components/PagePaymentsHistory/index.tsx +++ b/src/features/UserAccount/components/PagePaymentsHistory/index.tsx @@ -2,7 +2,7 @@ import { T9n } from 'features/T9n' import { isMobileDevice } from 'config/userAgent' -import format from 'date-fns/format' +import type { Payment } from 'requests/getUserListPayments' import { usePaymentHistory } from './hooks' @@ -22,9 +22,7 @@ import { } from './styled' export const PagePaymentsHistory = () => { - const { payments } = usePaymentHistory() - - const formattedDate = (date: string) => format(new Date(date), 'd MMM yyyy') + const { formattedDate, payments } = usePaymentHistory() return ( @@ -39,7 +37,7 @@ export const PagePaymentsHistory = () => { sub_name, sub_option, ts_payment, - }: any) => ( + }: Payment) => ( @@ -56,7 +54,9 @@ export const PagePaymentsHistory = () => { - {sub_option} — {sub_name} + + {sub_option} — {sub_name} + @@ -95,7 +95,7 @@ export const PagePaymentsHistory = () => { sub_name, sub_option, ts_payment, - }: any) => ( + }: Payment) => ( {sub_option} — {sub_name} diff --git a/src/requests/getUserListPayments.tsx b/src/requests/getUserListPayments.tsx index 56877550..48e69281 100644 --- a/src/requests/getUserListPayments.tsx +++ b/src/requests/getUserListPayments.tsx @@ -3,7 +3,7 @@ import { callApi } from 'helpers' const proc = PROCEDURES.get_user_payments -type Payment = { +export type Payment = { card: string, currency: string, currency_id: number,