diff --git a/src/components/PositionsList/PositionsList.tsx b/src/components/PositionsList/PositionsList.tsx index b6576d146..eece6edeb 100644 --- a/src/components/PositionsList/PositionsList.tsx +++ b/src/components/PositionsList/PositionsList.tsx @@ -1,15 +1,17 @@ -import React, { useEffect, useState } from 'react' -import { useHistory } from 'react-router-dom' -import { Button, Grid, Typography, InputAdornment, InputBase } from '@material-ui/core' +import EmptyPlaceholder from '@components/EmptyPlaceholder/EmptyPlaceholder' import { INoConnected, NoConnected } from '@components/NoConnected/NoConnected' -import { ILiquidityItem, PositionItem } from './PositionItem/PositionItem' import { PaginationList } from '@components/Pagination/Pagination' -import SearchIcon from '@static/svg/lupaDark.svg' +import { Button, Grid, InputAdornment, InputBase, Typography } from '@material-ui/core' import loader from '@static/gif/loader.gif' +import SearchIcon from '@static/svg/lupaDark.svg' +import React, { useEffect, useState } from 'react' +import { useHistory } from 'react-router-dom' +import { ILiquidityItem, PositionItem } from './PositionItem/PositionItem' import useStyle from './style' -import EmptyPlaceholder from '@components/EmptyPlaceholder/EmptyPlaceholder' interface IProp { + initialPage: number + setLastPage: (page: number) => void data: ILiquidityItem[] onAddPositionClick: () => void loading?: boolean @@ -21,6 +23,8 @@ interface IProp { } export const PositionsList: React.FC = ({ + initialPage, + setLastPage, data, onAddPositionClick, loading = false, @@ -32,13 +36,15 @@ export const PositionsList: React.FC = ({ }) => { const classes = useStyle() const history = useHistory() - const [page, setPage] = useState(1) + const [defaultPage] = useState(initialPage) + const [page, setPage] = useState(initialPage) const handleChangeInput = (e: React.ChangeEvent) => { searchSetValue(e.target.value.toLowerCase()) } const handleChangePagination = (page: number): void => { + setLastPage(page) setPage(page) } @@ -60,6 +66,10 @@ export const PositionsList: React.FC = ({ setPage(1) }, [searchValue]) + useEffect(() => { + setPage(initialPage) + }, []) + return ( = ({ {paginator(page).totalPages > 1 ? ( diff --git a/src/containers/WrappedPositionsList/WrappedPositionsList.tsx b/src/containers/WrappedPositionsList/WrappedPositionsList.tsx index b6651cdb0..8f9094ba4 100644 --- a/src/containers/WrappedPositionsList/WrappedPositionsList.tsx +++ b/src/containers/WrappedPositionsList/WrappedPositionsList.tsx @@ -1,21 +1,28 @@ -import React, { useState } from 'react' -import { useSelector } from 'react-redux' -import { useHistory } from 'react-router-dom' -import { isLoadingPositionsList, positionsWithPoolsData } from '@selectors/positions' -import { status } from '@selectors/solanaWallet' +import { PositionsList } from '@components/PositionsList/PositionsList' import { calcYPerXPrice, printBN } from '@consts/utils' import { calculatePriceSqrt } from '@invariant-labs/sdk' -import { Status } from '@reducers/solanaWallet' -import { PositionsList } from '@components/PositionsList/PositionsList' import { getX, getY } from '@invariant-labs/sdk/lib/math' import { DECIMAL } from '@invariant-labs/sdk/lib/utils' +import { actions } from '@reducers/positions' +import { Status } from '@reducers/solanaWallet' +import { + isLoadingPositionsList, + lastPageSelector, + positionsWithPoolsData +} from '@selectors/positions' +import { status } from '@selectors/solanaWallet' import { openWalletSelectorModal } from '@web3/selector' +import React, { useState } from 'react' +import { useDispatch, useSelector } from 'react-redux' +import { useHistory } from 'react-router-dom' export const WrappedPositionsList: React.FC = () => { const list = useSelector(positionsWithPoolsData) const isLoading = useSelector(isLoadingPositionsList) + const lastPage = useSelector(lastPageSelector) const walletStatus = useSelector(status) const history = useHistory() + const dispatch = useDispatch() const [value, setValue] = useState('') @@ -23,8 +30,14 @@ export const WrappedPositionsList: React.FC = () => { setValue(value) } + const setLastPage = (page: number) => { + dispatch(actions.setLastPage(page)) + } + return ( { diff --git a/src/store/reducers/positions.ts b/src/store/reducers/positions.ts index e15fe8a5a..b1a06cf32 100644 --- a/src/store/reducers/positions.ts +++ b/src/store/reducers/positions.ts @@ -1,8 +1,8 @@ -import { createSlice, PayloadAction } from '@reduxjs/toolkit' +import { InitPosition, Position, Tick } from '@invariant-labs/sdk/lib/market' +import { BN } from '@project-serum/anchor' import { PayloadType } from '@reducers/types' -import { Position, InitPosition, Tick } from '@invariant-labs/sdk/lib/market' +import { PayloadAction, createSlice } from '@reduxjs/toolkit' import { PublicKey } from '@solana/web3.js' -import { BN } from '@project-serum/anchor' export interface PositionWithAddress extends Position { address: PublicKey @@ -35,6 +35,7 @@ export interface CurrentPositionRangeTicksStore { loading: boolean } export interface IPositionsStore { + lastPage: number plotTicks: PlotTicks positionsList: PositionsListStore currentPositionRangeTicks: CurrentPositionRangeTicksStore @@ -71,6 +72,7 @@ export interface SetPositionData { } export const defaultState: IPositionsStore = { + lastPage: 1, plotTicks: { data: [], loading: false @@ -95,6 +97,10 @@ const positionsSlice = createSlice({ name: 'positions', initialState: defaultState, reducers: { + setLastPage(state, action: PayloadAction) { + state.lastPage = action.payload + return state + }, initPosition(state, _action: PayloadAction) { state.initPosition.inProgress = true return state diff --git a/src/store/selectors/positions.ts b/src/store/selectors/positions.ts index d34ec0b4a..9d9bd5cf7 100644 --- a/src/store/selectors/positions.ts +++ b/src/store/selectors/positions.ts @@ -1,16 +1,22 @@ import { PoolWithAddress } from '@reducers/pools' import { createSelector } from 'reselect' import { IPositionsStore, positionsSliceName, PositionWithAddress } from '../reducers/positions' -import { keySelectors, AnyProps } from './helpers' +import { AnyProps, keySelectors } from './helpers' import { poolsArraySortedByFees } from './pools' import { SwapToken, swapTokensDict } from './solanaWallet' const store = (s: AnyProps) => s[positionsSliceName] as IPositionsStore -export const { positionsList, plotTicks, currentPositionRangeTicks, initPosition } = keySelectors( - store, - ['positionsList', 'plotTicks', 'currentPositionRangeTicks', 'initPosition'] -) +export const { lastPage, positionsList, plotTicks, currentPositionRangeTicks, initPosition } = + keySelectors(store, [ + 'lastPage', + 'positionsList', + 'plotTicks', + 'currentPositionRangeTicks', + 'initPosition' + ]) + +export const lastPageSelector = createSelector(lastPage, s => s) export const isLoadingPositionsList = createSelector(positionsList, s => s.loading)