From d22a21caecd850046651dafb75139013a23e6fa9 Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Mon, 24 Jan 2022 00:31:52 -0600
Subject: [PATCH] Add 24 hour sort option. Rearrange options

---
 web/components/contracts-list.tsx       | 18 +++++++++++-------
 web/hooks/use-sort-and-query-params.tsx |  1 +
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/web/components/contracts-list.tsx b/web/components/contracts-list.tsx
index d758899e..7917d463 100644
--- a/web/components/contracts-list.tsx
+++ b/web/components/contracts-list.tsx
@@ -227,11 +227,16 @@ export function SearchableGrid(props: {
       (contract) => -1 * (contract.resolutionTime ?? 0)
     )
   } else if (sort === 'close-date') {
+    matches = _.sortBy(matches, ({ volume24Hours }) => -1 * volume24Hours)
     matches = _.sortBy(matches, (contract) => contract.closeTime)
   } else if (sort === 'most-traded') {
     matches.sort(
       (a, b) => contractMetrics(b).truePool - contractMetrics(a).truePool
     )
+  } else if (sort === '24-hour-vol') {
+    // Use lodash for stable sort, so previous sort breaks all ties.
+    matches = _.sortBy(matches, ({ volume7Days }) => -1 * volume7Days)
+    matches = _.sortBy(matches, ({ volume24Hours }) => -1 * volume24Hours)
   } else if (sort === 'creator' || sort === 'tag') {
     matches.sort((a, b) => b.volume7Days - a.volume7Days)
   }
@@ -259,16 +264,15 @@ export function SearchableGrid(props: {
           value={sort}
           onChange={(e) => setSort(e.target.value as Sort)}
         >
-          {byOneCreator ? (
-            <option value="all">All markets</option>
-          ) : (
-            <option value="creator">By creator</option>
-          )}
-          <option value="tag">By tag</option>
           <option value="most-traded">Most traded</option>
+          <option value="24-hour-vol">24 hour volume</option>
+          <option value="close-date">Closing soon</option>
           <option value="newest">Newest</option>
+
+          <option value="tag">By tag</option>
+          {!byOneCreator && <option value="creator">By creator</option>}
           <option value="resolved">Resolved</option>
-          <option value="close-date">Close date</option>
+          {byOneCreator && <option value="all">All markets</option>}
         </select>
       </div>
 
diff --git a/web/hooks/use-sort-and-query-params.tsx b/web/hooks/use-sort-and-query-params.tsx
index 6ff6aa5e..17cf33b4 100644
--- a/web/hooks/use-sort-and-query-params.tsx
+++ b/web/hooks/use-sort-and-query-params.tsx
@@ -5,6 +5,7 @@ export type Sort =
   | 'tag'
   | 'newest'
   | 'most-traded'
+  | '24-hour-vol'
   | 'close-date'
   | 'resolved'
   | 'all'