Add new my markets filter, reconfigure existing filters for greater maintainability

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: Props) => {
   const [state, setState] = useState<MarketStates>(currentFilter.state)
   const [category, setCategory] = useState(currentFilter.category)
   const [title, setTitle] = useState(currentFilter.title)
+  const [sortIndex, setSortIndex] = useState(currentFilter.sortIndex)
   const [sortBy, setSortBy] = useState<Maybe<MarketsSortCriteria>>(currentFilter.sortBy)
   const [sortByDirection, setSortByDirection] = useState<'asc' | 'desc'>(currentFilter.sortByDirection)
   const [showSearch, setShowSearch] = useState<boolean>(currentFilter.title.length > 0 ? true : false)
@@ -270,7 +317,11 @@ export const MarketHome: React.FC<Props> = (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: 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: Props) => {
       templateId,
       currency,
       category,
+      sortIndex,
       sortBy,
       sortByDirection,
       state,
@@ -367,6 +420,7 @@ export const MarketHome: React.FC<Props> = (props: Props) => {
     templateId,
     currency,
     category,
+    sortIndex,
     sortBy,
     sortByDirection,
     state,
@@ -397,61 +451,22 @@ export const MarketHome: React.FC<Props> = (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<DropdownItemProps> = sortOptions.map(item => {
+  const sortItems: Array<DropdownItemProps> = sortOptions.map((item, i) => {
     return {
       content: <CustomDropdownItem>{item.title}</CustomDropdownItem>,
       onClick: () => {
+        setSortIndex(i)
         setSortBy(item.sortBy)
         setSortByDirection(item.direction)
       },
     }
   })
 
-  const myMarketsSortItems: Array<DropdownItemProps> = myMarketsSortOptions.map(item => {
+  const myMarketsSortItems: Array<DropdownItemProps> = myMarketsSortOptions.map((item, i) => {
     return {
       content: <CustomDropdownItem>{item.title}</CustomDropdownItem>,
       onClick: () => {
+        setSortIndex(i)
         setSortBy(item.sortBy)
         setSortByDirection(item.direction)
       },
@@ -555,8 +570,8 @@ export const MarketHome: React.FC<Props> = (props: Props) => {
               <SortDropdown
                 currentItem={
                   fetchMyMarkets
-                    ? myMarketsSortOptions.findIndex(i => 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}

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

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<MarketsSortCriteria> = 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,
       }
     }