From 5723504845192b2c7d9068415e7e296847758ee2 Mon Sep 17 00:00:00 2001
From: FleetingOrchard <55274008+FleetingOrchard@users.noreply.github.com>
Date: Fri, 24 Apr 2020 14:30:41 +1000
Subject: [PATCH] Add "reshuffle button" when sortby is random (#497)

---
 ui/v2.5/src/components/List/ListFilter.tsx | 16 ++++++++++++++++
 ui/v2.5/src/hooks/ListHook.tsx             |  8 ++++++++
 2 files changed, 24 insertions(+)

diff --git a/ui/v2.5/src/components/List/ListFilter.tsx b/ui/v2.5/src/components/List/ListFilter.tsx
index 8fd5950ee3f..c878c3141fd 100644
--- a/ui/v2.5/src/components/List/ListFilter.tsx
+++ b/ui/v2.5/src/components/List/ListFilter.tsx
@@ -28,6 +28,7 @@ interface IListFilterProps {
   onChangeQuery: (query: string) => void;
   onChangeSortDirection: (sortDirection: SortDirectionEnum) => void;
   onChangeSortBy: (sortBy: string) => void;
+  onSortReshuffle: () => void;
   onChangeDisplayMode: (displayMode: DisplayMode) => void;
   onAddCriterion: (criterion: Criterion, oldId?: string) => void;
   onRemoveCriterion: (criterion: Criterion) => void;
@@ -77,6 +78,10 @@ export const ListFilter: React.FC<IListFilterProps> = (
     props.onChangeSortBy(target.text);
   }
 
+  function onReshuffleRandomSort() {
+    props.onSortReshuffle();
+  }
+
   function onChangeDisplayMode(displayMode: DisplayMode) {
     props.onChangeDisplayMode(displayMode);
   }
@@ -318,6 +323,17 @@ export const ListFilter: React.FC<IListFilterProps> = (
                   />
                 </Button>
               </OverlayTrigger>
+              {props.filter.sortBy === "random" && (
+                <OverlayTrigger
+                  overlay={
+                    <Tooltip id="sort-reshuffle-tooltip">Reshuffle</Tooltip>
+                  }
+                >
+                  <Button variant="secondary" onClick={onReshuffleRandomSort}>
+                    <Icon icon="random" />
+                  </Button>
+                </OverlayTrigger>
+              )}
             </Dropdown>
           </ButtonGroup>
 
diff --git a/ui/v2.5/src/hooks/ListHook.tsx b/ui/v2.5/src/hooks/ListHook.tsx
index 578e538ed5b..e423c31f416 100644
--- a/ui/v2.5/src/hooks/ListHook.tsx
+++ b/ui/v2.5/src/hooks/ListHook.tsx
@@ -211,6 +211,13 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
     updateQueryParams(newFilter);
   }
 
+  function onSortReshuffle() {
+    const newFilter = _.cloneDeep(filter);
+    newFilter.currentPage = 1;
+    newFilter.randomSeed = -1;
+    updateQueryParams(newFilter);
+  }
+
   function onChangeDisplayMode(displayMode: DisplayMode) {
     const newFilter = _.cloneDeep(filter);
     newFilter.displayMode = displayMode;
@@ -370,6 +377,7 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
         onChangeQuery={onChangeQuery}
         onChangeSortDirection={onChangeSortDirection}
         onChangeSortBy={onChangeSortBy}
+        onSortReshuffle={onSortReshuffle}
         onChangeDisplayMode={onChangeDisplayMode}
         onAddCriterion={onAddCriterion}
         onRemoveCriterion={onRemoveCriterion}