Introduce useMidgardHistoryActions hook (#1842)

to keep state handling in `view` instead of `service` level. It keeps `PoolHistoryView` + `PoolActionsHistoryView` more clean by removing (duplicated) logic from there. No need of calling `resetActionsData` anymore.

- [x] `useMidgardHistoryActions` hook
- [x] Remove state handling from `services/midgard&poolHistoryActions`
- [x] Some renaming: `poolActionXYZ` -> `actionXYZ`, `actionsXYZ` -> `historyXYZ`, `view/wallet/PoolActionsHistory` ->
`view/wallet/history`

src/renderer/components/pool/PoolDetails.stories.tsx

@@ -1,16 +1,28 @@
 import React from 'react'
 
+import * as RD from '@devexperts/remote-data-ts'
 import { storiesOf } from '@storybook/react'
 import { AssetETH } from '@xchainjs/xchain-util'
 import * as O from 'fp-ts/Option'
 
 import { ONE_BN } from '../../const'
+import { PoolHistoryActions } from '../../views/pool/PoolHistoryView.types'
 import { PoolDetails } from './PoolDetails'
 import { getEmptyPoolDetail, getEmptyPoolStatsDetail } from './PoolDetails.helpers'
 
+export const historyActions: PoolHistoryActions = {
+  requestParams: { itemsPerPage: 0, page: 0 },
+  loadHistory: (params) => console.log('load history', params),
+  setFilter: (filter) => console.log('filter', filter),
+  setPage: (page) => console.log('page', page),
+  historyPage: RD.initial,
+  prevHistoryPage: O.none
+}
+
 export const PoolDetailsStory = () => {
   return (
     <PoolDetails
+      historyActions={historyActions}
       poolDetail={getEmptyPoolDetail()}
       poolStatsDetail={getEmptyPoolStatsDetail()}
       network={'testnet'}

src/renderer/components/pool/PoolDetails.tsx

@@ -7,20 +7,25 @@ import * as O from 'fp-ts/Option'
 
 import { Network } from '../../../shared/api/types'
 import { EarningsHistoryItemPool, PoolDetail, PoolStatsDetail } from '../../types/generated/midgard/models'
+import { PoolHistoryActions } from '../../views/pool/PoolHistoryView.types'
 import { stringToGetPoolsStatus } from '../../views/pools/Pools.utils'
 import { PoolCards } from './PoolCards'
 import * as H from './PoolDetails.helpers'
 import { PoolTitle } from './PoolTitle'
 
 export type Props = {
   asset: Asset
+  historyActions: PoolHistoryActions
   poolStatsDetail: PoolStatsDetail
   poolDetail: PoolDetail
   priceRatio: BigNumber
   priceSymbol?: string
   earningsHistory: O.Option<EarningsHistoryItemPool>
   isLoading?: boolean
-  HistoryView: React.ComponentType<{ poolAsset: Asset }>
+  HistoryView: React.ComponentType<{
+    poolAsset: Asset
+    historyActions: PoolHistoryActions
+  }>
   ChartView: React.ComponentType<{ isLoading?: boolean; priceRatio: BigNumber }>
   disableTradingPoolAction: boolean
   disableAllPoolActions: boolean
@@ -30,6 +35,7 @@ export type Props = {
 
 export const PoolDetails: React.FC<Props> = ({
   asset,
+  historyActions,
   priceSymbol = '',
   priceRatio,
   poolDetail,
@@ -71,7 +77,7 @@ export const PoolDetails: React.FC<Props> = ({
         <ChartView priceRatio={priceRatio} />
       </A.Col>
       <A.Col span={24}>
-        <HistoryView poolAsset={asset} />
+        <HistoryView poolAsset={asset} historyActions={historyActions} />
       </A.Col>
     </A.Row>
   )

src/renderer/components/poolActionsHistory/PoolActionsHistory.helper.test.ts

@@ -2,10 +2,10 @@ import { AssetBNB, AssetBTC, AssetRuneNative, baseAmount } from '@xchainjs/xchai
 import * as O from 'fp-ts/Option'
 
 import { eqAssetsWithAmount } from '../../helpers/fp/eq'
-import { PoolAction, Tx } from '../../services/midgard/types'
+import { Action, Tx } from '../../services/midgard/types'
 import { getTxId, getValues, getRowKey } from './PoolActionsHistory.helper'
 
-const defaultPoolAction: PoolAction = {
+const defaultPoolAction: Action = {
   date: new Date(0),
   in: [],
   out: [],

src/renderer/components/poolActionsHistory/PoolActionsHistory.helper.tsx

@@ -6,11 +6,11 @@ import * as FP from 'fp-ts/function'
 import * as O from 'fp-ts/Option'
 import { FormattedDate, FormattedTime } from 'react-intl'
 
-import { PoolAction, PoolActions, PoolActionsHistoryPage, Tx } from '../../services/midgard/types'
+import { Action, Actions, ActionsPage, Tx } from '../../services/midgard/types'
 import { AssetWithAmount } from '../../types/asgardex'
 import * as Styled from './PoolActionsHistory.styles'
 
-export const getTxId = (action: PoolAction): O.Option<TxHash> => {
+export const getTxId = (action: Action): O.Option<TxHash> => {
   return FP.pipe(
     action.in,
     A.head,
@@ -36,12 +36,12 @@ export const renderDate = (date: Date) => (
   </Styled.DateContainer>
 )
 
-export const getRowKey = (action: PoolAction) =>
+export const getRowKey = (action: Action) =>
   FP.pipe(
     action,
     getTxId,
     O.map(FP.identity),
     O.getOrElse(() => `${action.date.toString()}-${action.type}`)
   )
 
-export const emptyData: PoolActionsHistoryPage = { total: 0, actions: [] as PoolActions }
+export const emptyData: ActionsPage = { total: 0, actions: [] as Actions }

src/renderer/components/poolActionsHistory/PoolActionsHistory.stories.tsx

@@ -8,13 +8,13 @@ import * as O from 'fp-ts/lib/Option'
 import { getMockRDValueFactory, RDStatus, rdStatusOptions } from '../../../shared/mock/rdByStatus'
 import { MOCK_WALLET_ADDRESSES } from '../../../shared/mock/wallet'
 import { WalletAddress } from '../../../shared/wallet/types'
-import { PoolActions } from '../../services/midgard/types'
+import { Actions } from '../../services/midgard/types'
 import { ErrorId } from '../../services/wallet/types'
 import { PoolActionsHistory } from './PoolActionsHistory'
 import { Filter } from './types'
 import { WalletPoolActionsHistoryHeader } from './WalletPoolActionsHistoryHeader'
 
-const actions: PoolActions = [
+const actions: Actions = [
   {
     date: new Date(Date.now()),
     /**
@@ -170,7 +170,7 @@ export const History: Story<{ dataStatus: RDStatus }> = ({ dataStatus }) => {
         console.log(`Open explorer - tx hash ${txHash}`)
         return Promise.resolve(true)
       }}
-      actionsPageRD={res}
+      historyPageRD={res}
       changePaginationHandler={setCurrentPage}
       currentPage={currentPage}
     />

src/renderer/components/poolActionsHistory/PoolActionsHistory.tsx

@@ -6,16 +6,16 @@ import * as FP from 'fp-ts/lib/function'
 import * as O from 'fp-ts/Option'
 
 import { OpenExplorerTxUrl } from '../../services/clients'
-import { PoolActionsHistoryPage, PoolActionsHistoryPageRD } from '../../services/midgard/types'
+import { ActionsPage, ActionsPageRD } from '../../services/midgard/types'
 import * as Styled from './PoolActionsHistory.styles'
 import { PoolActionsHistoryList } from './PoolActionsHistoryList'
 import { PoolActionsHistoryTable, Props as PoolActionsHistoryTableProps } from './PoolActionsHistoryTable'
 
 type Props = {
   headerContent?: React.ReactNode
   currentPage: number
-  actionsPageRD: PoolActionsHistoryPageRD
-  prevActionsPage?: O.Option<PoolActionsHistoryPage>
+  historyPageRD: ActionsPageRD
+  prevHistoryPage?: O.Option<ActionsPage>
   openExplorerTxUrl: OpenExplorerTxUrl
   changePaginationHandler: (page: number) => void
   className?: string
@@ -24,30 +24,30 @@ type Props = {
 export const PoolActionsHistory: React.FC<Props> = (props) => {
   const {
     headerContent: HeaderContent,
-    actionsPageRD,
+    historyPageRD,
     currentPage,
-    prevActionsPage,
+    prevHistoryPage,
     changePaginationHandler,
     openExplorerTxUrl
   } = props
   const isDesktopView = Grid.useBreakpoint()?.lg ?? false
   // store previous data of Txs to render these while reloading
-  const previousTxs = useRef<O.Option<PoolActionsHistoryPage>>(O.none)
+  const prevHistoryPageRef = useRef<O.Option<ActionsPage>>(O.none)
 
   useEffect(() => {
     FP.pipe(
-      actionsPageRD,
+      historyPageRD,
       RD.map((data) => {
-        previousTxs.current = O.some(data)
+        prevHistoryPageRef.current = O.some(data)
         return true
       })
     )
-  }, [actionsPageRD])
+  }, [historyPageRD])
 
   const tableProps: PoolActionsHistoryTableProps = {
     currentPage,
-    actionsPageRD,
-    prevActionsPage,
+    historyPageRD,
+    prevHistoryPage,
     openExplorerTxUrl,
     changePaginationHandler
   }
@@ -56,9 +56,9 @@ export const PoolActionsHistory: React.FC<Props> = (props) => {
     <>
       {HeaderContent && <Styled.Header>{HeaderContent}</Styled.Header>}
       {isDesktopView ? (
-        <PoolActionsHistoryTable prevActionsPage={previousTxs.current} {...tableProps} />
+        <PoolActionsHistoryTable prevHistoryPage={prevHistoryPageRef.current} {...tableProps} />
       ) : (
-        <PoolActionsHistoryList prevActionsPage={previousTxs.current} {...tableProps} />
+        <PoolActionsHistoryList prevHistoryPage={prevHistoryPageRef.current} {...tableProps} />
       )}
     </>
   )

src/renderer/components/poolActionsHistory/PoolActionsHistoryList.styles.ts

@@ -4,14 +4,14 @@ import { ListProps } from 'antd/lib/list'
 import styled from 'styled-components'
 import { palette } from 'styled-theme'
 
-import { PoolAction } from '../../services/midgard/types'
+import { Action } from '../../services/midgard/types'
 import { Button as UIButton } from '../uielements/button'
 import { TxType as TxTypeUI } from '../uielements/txType'
 
 export const List = styled(A.List)`
   background: ${palette('background', 0)};
   color: ${palette('text', 0)};
-` as React.FC<ListProps<PoolAction>>
+` as React.FC<ListProps<Action>>
 
 export const ListItem = styled(A.List.Item)`
   &:last-item {

src/renderer/components/poolActionsHistory/PoolActionsHistoryList.tsx

@@ -5,15 +5,15 @@ import * as FP from 'fp-ts/function'
 import * as O from 'fp-ts/Option'
 
 import { OpenExplorerTxUrl } from '../../services/clients'
-import { PoolAction, PoolActionsHistoryPage, PoolActionsHistoryPageRD } from '../../services/midgard/types'
+import { Action, ActionsPage, ActionsPageRD } from '../../services/midgard/types'
 import { ErrorView } from '../shared/error'
 import { Pagination } from '../uielements/pagination'
 import { TxDetail } from '../uielements/txDetail'
 import { DEFAULT_PAGE_SIZE } from './PoolActionsHistory.const'
 import * as H from './PoolActionsHistory.helper'
 import * as Styled from './PoolActionsHistoryList.styles'
 
-const renderItem = (goToTx: (txId: string) => void) => (action: PoolAction) => {
+const renderItem = (goToTx: (txId: string) => void) => (action: Action) => {
   const date = H.renderDate(action.date)
 
   const titleExtra = (
@@ -43,24 +43,24 @@ const renderItem = (goToTx: (txId: string) => void) => (action: PoolAction) => {
 
 type Props = {
   currentPage: number
-  actionsPageRD: PoolActionsHistoryPageRD
-  prevActionsPage?: O.Option<PoolActionsHistoryPage>
+  historyPageRD: ActionsPageRD
+  prevHistoryPage?: O.Option<ActionsPage>
   openExplorerTxUrl: OpenExplorerTxUrl
   changePaginationHandler: (page: number) => void
   className?: string
 }
 
 export const PoolActionsHistoryList: React.FC<Props> = ({
   changePaginationHandler,
-  actionsPageRD,
-  prevActionsPage = O.none,
+  historyPageRD,
+  prevHistoryPage = O.none,
   openExplorerTxUrl: goToTx,
   currentPage,
   className
 }) => {
   const renderListItem = useMemo(() => renderItem(goToTx), [goToTx])
   const renderList = useCallback(
-    ({ total, actions }: PoolActionsHistoryPage, loading = false) => {
+    ({ total, actions }: ActionsPage, loading = false) => {
       return (
         <>
           <Styled.List loading={loading} itemLayout="vertical" dataSource={actions} renderItem={renderListItem} />
@@ -82,12 +82,12 @@ export const PoolActionsHistoryList: React.FC<Props> = ({
   return (
     <div className={className}>
       {FP.pipe(
-        actionsPageRD,
+        historyPageRD,
         RD.fold(
           () => renderList(H.emptyData, true),
           () => {
             const data = FP.pipe(
-              prevActionsPage,
+              prevHistoryPage,
               O.getOrElse(() => H.emptyData)
             )
             return renderList(data, true)