fix(#2429): add usecallback for formatted date

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 }
 }

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, payments } = usePaymentHistory()
-
-  const formattedDate = (date: string) => format(new Date(date), 'd MMM yyyy')
 
   return (
     <Wrapper>
@@ -39,7 +37,7 @@ export const PagePaymentsHistory = () => {
               sub_name,
               sub_option,
               ts_payment,
-            }: any) => (
+            }: Payment) => (
               <ScPayment key={id}>
                 <ScFirstBlock>
                   <Th>
@@ -56,7 +54,9 @@ export const PagePaymentsHistory = () => {
                 <ScSecondBlock>
                   <Th className='subscription'>
                     <T9n t='subscription_plan' />
-                    <ScText>{sub_option} — {sub_name}</ScText>
+                    <ScText>
+                      {sub_option} — {sub_name}
+                    </ScText>
                   </Th>
                   <Th>
                     <T9n t='payment_method' />
@@ -95,7 +95,7 @@ export const PagePaymentsHistory = () => {
                 sub_name,
                 sub_option,
                 ts_payment,
-              }: any) => (
+              }: Payment) => (
                 <TRow key={id}>
                   <Td className='subscription'>
                     {sub_option} — {sub_name}

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,