Merge pull request #562 from invariant-labs/refactor-positions-pagina…

…tion

refactor positions pagination

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<IProp> = ({
+  initialPage,
+  setLastPage,
   data,
   onAddPositionClick,
   loading = false,
@@ -32,13 +36,15 @@ export const PositionsList: React.FC<IProp> = ({
 }) => {
   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<HTMLInputElement>) => {
     searchSetValue(e.target.value.toLowerCase())
   }
 
   const handleChangePagination = (page: number): void => {
+    setLastPage(page)
     setPage(page)
   }
 
@@ -60,6 +66,10 @@ export const PositionsList: React.FC<IProp> = ({
     setPage(1)
   }, [searchValue])
 
+  useEffect(() => {
+    setPage(initialPage)
+  }, [])
+
   return (
     <Grid container direction='column' className={classes.root}>
       <Grid
@@ -123,7 +133,7 @@ export const PositionsList: React.FC<IProp> = ({
       {paginator(page).totalPages > 1 ? (
         <PaginationList
           pages={paginator(page).totalPages}
-          defaultPage={1}
+          defaultPage={defaultPage}
           handleChangePage={handleChangePagination}
           variant='end'
         />

src/containers/WrappedPositionsList/WrappedPositionsList.tsx

@@ -1,30 +1,43 @@
-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<string>('')
 
   const handleSearchValue = (value: string) => {
     setValue(value)
   }
 
+  const setLastPage = (page: number) => {
+    dispatch(actions.setLastPage(page))
+  }
+
   return (
     <PositionsList
+      initialPage={lastPage}
+      setLastPage={setLastPage}
       searchValue={value}
       searchSetValue={handleSearchValue}
       onAddPositionClick={() => {

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<number>) {
+      state.lastPage = action.payload
+      return state
+    },
     initPosition(state, _action: PayloadAction<InitPositionData>) {
       state.initPosition.inProgress = true
       return state

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)