diff --git a/app/src/components/market/market_list/market_home.tsx b/app/src/components/market/market_list/market_home.tsx index 34a959f463..d5c9abe73b 100644 --- a/app/src/components/market/market_list/market_home.tsx +++ b/app/src/components/market/market_list/market_home.tsx @@ -210,6 +210,52 @@ const FiltersLeftWrapper = styled.div` } ` +export const sortOptions = [ + { + title: '24h volume', + sortBy: `sort24HourVolume${Math.floor(Date.now() / (1000 * 60 * 60)) % 24}` as MarketsSortCriteria, + direction: 'desc', + }, + { + title: 'Total volume', + sortBy: 'usdVolume', + direction: 'desc', + }, + { + title: 'Highest liquidity', + sortBy: 'usdLiquidityParameter', + direction: 'desc', + }, + { + title: 'Newest', + sortBy: 'creationTimestamp', + direction: 'desc', + }, + { + title: 'Closing soon', + sortBy: 'openingTimestamp', + direction: 'asc', + }, +] as const + +export const myMarketsSortOptions = [ + { + title: 'Newest', + sortBy: 'creationTimestamp', + direction: 'desc', + }, + { + title: 'Ended recently', + sortBy: 'openingTimestamp', + direction: 'desc', + }, + { + title: 'Ending soon', + sortBy: 'openingTimestamp', + direction: 'asc', + }, +] as const + interface Props { context: ConnectedWeb3Context count: number @@ -250,6 +296,7 @@ export const MarketHome: React.FC = (props: Props) => { const [state, setState] = useState(currentFilter.state) const [category, setCategory] = useState(currentFilter.category) const [title, setTitle] = useState(currentFilter.title) + const [sortIndex, setSortIndex] = useState(currentFilter.sortIndex) const [sortBy, setSortBy] = useState>(currentFilter.sortBy) const [sortByDirection, setSortByDirection] = useState<'asc' | 'desc'>(currentFilter.sortByDirection) const [showSearch, setShowSearch] = useState(currentFilter.title.length > 0 ? true : false) @@ -270,7 +317,11 @@ export const MarketHome: React.FC = (props: Props) => { state: MarketStates.open, title: 'Open', active: state === MarketStates.open, - onClick: () => setState(MarketStates.open), + onClick: () => { + setState(MarketStates.open) + setSortIndex(2) + setSortBy('usdLiquidityParameter') + }, }, { state: MarketStates.pending, @@ -327,8 +378,9 @@ export const MarketHome: React.FC = (props: Props) => { active: state === MarketStates.myMarkets, onClick: () => { setState(MarketStates.myMarkets) + setSortIndex(1) setSortBy('openingTimestamp') - setSortByDirection('asc') + setSortByDirection('desc') }, }) } @@ -356,6 +408,7 @@ export const MarketHome: React.FC = (props: Props) => { templateId, currency, category, + sortIndex, sortBy, sortByDirection, state, @@ -367,6 +420,7 @@ export const MarketHome: React.FC = (props: Props) => { templateId, currency, category, + sortIndex, sortBy, sortByDirection, state, @@ -397,61 +451,22 @@ export const MarketHome: React.FC = (props: Props) => { setShowAdvancedFilters(!showAdvancedFilters) }, [showAdvancedFilters]) - const sortOptions = [ - { - title: '24h volume', - sortBy: `sort24HourVolume${Math.floor(Date.now() / (1000 * 60 * 60)) % 24}` as MarketsSortCriteria, - direction: 'desc', - }, - { - title: 'Total volume', - sortBy: 'usdVolume', - direction: 'desc', - }, - { - title: 'Highest liquidity', - sortBy: 'usdLiquidityParameter', - direction: 'desc', - }, - { - title: 'Newest', - sortBy: 'creationTimestamp', - direction: 'desc', - }, - { - title: 'Closing soon', - sortBy: 'openingTimestamp', - direction: 'asc', - }, - ] as const - - const myMarketsSortOptions = [ - { - title: 'Newest', - sortBy: 'creationTimestamp', - direction: 'desc', - }, - { - title: 'Ending soon', - sortBy: 'openingTimestamp', - direction: 'asc', - }, - ] as const - - const sortItems: Array = sortOptions.map(item => { + const sortItems: Array = sortOptions.map((item, i) => { return { content: {item.title}, onClick: () => { + setSortIndex(i) setSortBy(item.sortBy) setSortByDirection(item.direction) }, } }) - const myMarketsSortItems: Array = myMarketsSortOptions.map(item => { + const myMarketsSortItems: Array = myMarketsSortOptions.map((item, i) => { return { content: {item.title}, onClick: () => { + setSortIndex(i) setSortBy(item.sortBy) setSortByDirection(item.direction) }, @@ -555,8 +570,8 @@ export const MarketHome: React.FC = (props: Props) => { i.sortBy === sortBy) - : sortOptions.findIndex(i => i.sortBy === sortBy) + ? myMarketsSortOptions.findIndex((item, i) => i == sortIndex) + : sortOptions.findIndex((item, i) => i == sortIndex) } dirty={true} dropdownPosition={DropdownPosition.center} diff --git a/app/src/hooks/market_data/useMarkets.tsx b/app/src/hooks/market_data/useMarkets.tsx index df6a4df265..33b70af402 100644 --- a/app/src/hooks/market_data/useMarkets.tsx +++ b/app/src/hooks/market_data/useMarkets.tsx @@ -44,6 +44,7 @@ export const useMarkets = (options: Options): any => { skip: skipFromOptions, sortBy, sortByDirection, + sortIndex, state, templateId, title, @@ -63,6 +64,7 @@ export const useMarkets = (options: Options): any => { title, sortBy, sortByDirection, + sortIndex, arbitrator, templateId, currency, @@ -137,7 +139,7 @@ export const useMarkets = (options: Options): any => { setMarkets({ fixedProductMarketMakers: [], }) - }, [arbitrator, currency, curationSource, category, state, sortBy, templateId]) + }, [arbitrator, currency, curationSource, category, state, sortIndex, templateId, loading]) return { markets, error, fetchMore, loading: internalLoading, moreMarkets } } diff --git a/app/src/pages/market_sections/market_home_container.tsx b/app/src/pages/market_sections/market_home_container.tsx index 02c561d21a..5b02da620d 100644 --- a/app/src/pages/market_sections/market_home_container.tsx +++ b/app/src/pages/market_sections/market_home_container.tsx @@ -12,7 +12,7 @@ import { MAX_MARKET_FEE } from '../../common/constants' import { ButtonCSS } from '../../components/button/button_styling_types' import { IconClose } from '../../components/common/icons' import xDaiIntergation from '../../components/market/market_list/img/xDaiIntegration.svg' -import { MarketHome } from '../../components/market/market_list/market_home' +import { MarketHome, myMarketsSortOptions } from '../../components/market/market_list/market_home' import { useConnectedWeb3Context } from '../../contexts' import { useMarkets } from '../../hooks/market_data/useMarkets' import { queryCategories } from '../../queries/markets_home' @@ -117,8 +117,15 @@ const MarketHomeContainer: React.FC = () => { const location = useLocation() - const sortRoute = location.pathname.split('/')[1] + const stateFilter = location.search.includes('state') + let stateRoute = location.search.split('state=')[1] + if (stateRoute) stateRoute = stateRoute.split('&')[0] + + let sortRoute let sortDirection: 'desc' | 'asc' = 'desc' + if (stateRoute !== 'MY_MARKETS') { + sortRoute = location.pathname.split('/')[1] + } const currencyFilter = location.pathname.includes('currency') let currencyRoute = location.pathname.split('/currency/')[1] @@ -140,26 +147,39 @@ const MarketHomeContainer: React.FC = () => { let typeRoute = location.pathname.split('/type/')[1] if (typeRoute) typeRoute = typeRoute.split('/')[0] - const stateFilter = location.search.includes('state') - let stateRoute = location.search.split('state=')[1] - if (stateRoute) stateRoute = stateRoute.split('&')[0] - const searchFilter = location.search.includes('tag') let searchRoute = location.search.split('tag=')[1] if (searchRoute) searchRoute = searchRoute.split('&')[0] let sortParam: Maybe = stateRoute === 'MY_MARKETS' ? 'openingTimestamp' : 'usdLiquidityParameter' - if (sortRoute === '24h-volume') { - sortParam = `sort24HourVolume${Math.floor(Date.now() / (1000 * 60 * 60)) % 24}` as MarketsSortCriteria - } else if (sortRoute === 'volume') { - sortParam = 'usdVolume' - } else if (sortRoute === 'newest') { - sortParam = 'creationTimestamp' - } else if (sortRoute === 'ending') { - sortParam = 'openingTimestamp' - sortDirection = 'asc' - } else if (sortRoute === 'liquidity') { - sortParam = 'usdLiquidityParameter' + let sortIndex: number = stateRoute === 'MY_MARKETS' ? 1 : 2 + + if (stateRoute !== 'MY_MARKETS') { + switch (sortRoute) { + case '24h-volume': + sortIndex = 0 + sortParam = `sort24HourVolume${Math.floor(Date.now() / (1000 * 60 * 60)) % 24}` as MarketsSortCriteria + break + case 'volume': + sortIndex = 1 + sortParam = 'usdVolume' + break + case 'liquidity': + sortIndex = 2 + sortParam = 'usdLiquidityParameter' + break + case 'newest': + sortIndex = 3 + sortParam = 'creationTimestamp' + break + case 'ending': + sortIndex = 4 + sortParam = 'openingTimestamp' + sortDirection = 'asc' + break + default: + console.warn('Unknown state route') + } } let currencyParam: string | null @@ -192,12 +212,28 @@ const MarketHomeContainer: React.FC = () => { let stateParam: MarketStates = MarketStates.open if (stateFilter) { - if (stateRoute === 'OPEN') stateParam = MarketStates.open - if (stateRoute === 'PENDING') stateParam = MarketStates.pending - if (stateRoute === 'FINALIZING') stateParam = MarketStates.finalizing - if (stateRoute === 'ARBITRATING') stateParam = MarketStates.arbitrating - if (stateRoute === 'CLOSED') stateParam = MarketStates.closed - if (stateRoute === 'MY_MARKETS') stateParam = MarketStates.myMarkets + switch (stateRoute) { + case 'OPEN': + stateParam = MarketStates.open + break + case 'PENDING': + stateParam = MarketStates.pending + break + case 'FINALIZING': + stateParam = MarketStates.finalizing + break + case 'ARBITRATING': + stateParam = MarketStates.arbitrating + break + case 'CLOSED': + stateParam = MarketStates.closed + break + case 'MY_MARKETS': + stateParam = MarketStates.myMarkets + break + default: + console.warn('Unknown stateRoute') + } } else { stateParam = MarketStates.open } @@ -220,6 +256,7 @@ const MarketHomeContainer: React.FC = () => { state: stateParam, category: categoryParam, title: searchParam, + sortIndex: sortIndex, sortBy: sortParam, sortByDirection: sortDirection, arbitrator: arbitratorParam, @@ -304,16 +341,26 @@ const MarketHomeContainer: React.FC = () => { const routeQueryStart = '?' const routeQueryArray: string[] = [] - if (filter.sortBy === `sort24HourVolume${Math.floor(Date.now() / (1000 * 60 * 60)) % 24}`) { - route += '/24h-volume' - } else if (filter.sortBy === 'usdVolume') { - route += '/volume' - } else if (filter.sortBy === 'creationTimestamp') { - route += '/newest' - } else if (filter.sortBy === 'openingTimestamp') { - route += '/ending' - } else if (filter.sortBy === 'usdLiquidityParameter') { - route += '/liquidity' + if (filter.state !== 'MY_MARKETS') { + switch (filter.sortBy) { + case `sort24HourVolume${Math.floor(Date.now() / (1000 * 60 * 60)) % 24}`: + route += '/24h-volume' + break + case 'usdVolume': + route += '/volume' + break + case 'creationTimestamp': + route += '/newest' + break + case 'openingTimestamp': + route += '/ending' + break + case 'usdLiquidityParameter': + route += '/liquidity' + break + default: + console.warn('Unknown sortBy filter') + } } if (filter.currency) { @@ -359,12 +406,12 @@ const MarketHomeContainer: React.FC = () => { let newFilter = filter if ( filter.state === MarketStates.myMarkets && - filter.sortBy !== 'openingTimestamp' && - filter.sortBy !== 'creationTimestamp' + filter.sortIndex && + filter.sortIndex >= myMarketsSortOptions.length ) { newFilter = { ...filter, - sortBy: 'openingTimestamp', + sortIndex: 1, } } diff --git a/app/src/queries/markets_home.ts b/app/src/queries/markets_home.ts index 370dfff940..9d0b59f90c 100644 --- a/app/src/queries/markets_home.ts +++ b/app/src/queries/markets_home.ts @@ -43,6 +43,7 @@ export const DEFAULT_OPTIONS = { templateId: null as Maybe, currency: null as Maybe, curationSource: CurationSource.ALL_SOURCES, + sortIndex: null as Maybe, sortBy: null as Maybe, sortByDirection: 'desc' as 'asc' | 'desc', networkId: 1 as Maybe, @@ -50,10 +51,10 @@ export const DEFAULT_OPTIONS = { } export const buildQueryMyMarkets = (options: BuildQueryType = DEFAULT_OPTIONS) => { - const { arbitrator, category, currency, sortBy, title } = options + const { arbitrator, category, currency, sortIndex, title } = options const myMarketsWhereClause = [ - sortBy === 'openingTimestamp' ? 'openingTimestamp_gt: $now' : '', + sortIndex === 1 ? 'openingTimestamp_lt: $now, ' : sortIndex === 2 ? 'openingTimestamp_gt: $now, ' : '', category === 'All' ? '' : 'category: $category', arbitrator ? 'arbitrator: $arbitrator' : 'arbitrator_in: $knownArbitrators', currency ? 'collateralToken: $currency' : '', diff --git a/app/src/util/types.ts b/app/src/util/types.ts index 80281828bc..46a5cb3876 100644 --- a/app/src/util/types.ts +++ b/app/src/util/types.ts @@ -272,6 +272,7 @@ export interface MarketFilters { state: MarketStates category: string title: Maybe + sortIndex: Maybe sortBy: Maybe sortByDirection: 'desc' | 'asc' arbitrator: Maybe