Reintroduce “Random” Sorting in DRep Directory with Pagination Support - frontend

Author: Adam Tomaszczyk

govtool/backend/src/VVA/API.hs

@@ -210,7 +210,7 @@ drepList mSearchQuery statuses mSortMode mPage mPageSize mSeed = do
 
   let sortDReps = case mSortMode of
         Nothing -> id
-        Just Random     -> sortOn randomKey
+        Just Random -> sortOn randomKey
         Just VotingPower -> sortOn $ \Types.DRepRegistration {..} ->
           Down dRepRegistrationVotingPower
         Just Activity -> sortOn $ \Types.DRepRegistration {..} ->

govtool/frontend/src/consts/dRepDirectory/sorting.ts

@@ -15,4 +15,8 @@ export const DREP_DIRECTORY_SORTING = [
     key: "Status",
     label: "Status",
   },
+  {
+    key: "Random",
+    label: "Random",
+  },
 ];

govtool/frontend/src/hooks/queries/useGetDRepListQuery.ts

@@ -24,7 +24,7 @@ type Args = GetDRepListArguments & {
 };
 
 export function useGetDRepListPaginatedQuery(
-  { page, pageSize = 10, filters = [], searchPhrase, sorting, status }: Args,
+  { page, pageSize = 10, filters = [], searchPhrase, sorting, status, sortingSeed }: Args,
   options?: UseQueryOptions<Infinite<DRepData>>,
 ): PaginatedResult {
   const { pendingTransaction } = useCardano();
@@ -47,6 +47,7 @@ export function useGetDRepListPaginatedQuery(
     searchPhrase ?? "",
     sorting ?? "",
     status?.length ? status : "",
+    sortingSeed ?? ""
   ];
 
   const baselineKey = useMemo(
@@ -64,6 +65,7 @@ export function useGetDRepListPaginatedQuery(
         searchPhrase,
         sorting,
         status,
+        sortingSeed,
       }),
     {
       keepPreviousData: true,
@@ -87,6 +89,7 @@ export function useGetDRepListPaginatedQuery(
         searchPhrase: "",
         sorting,
         status,
+        sortingSeed
       }),
     {
       initialData: () =>

govtool/frontend/src/models/api.ts

@@ -148,6 +148,7 @@ export enum DRepListSort {
   VotingPower = "VotingPower",
   RegistrationDate = "RegistrationDate",
   Status = "Status",
+  Random = "Random",
 }
 
 type Reference = {

govtool/frontend/src/pages/DRepDirectoryContent.tsx

@@ -61,6 +61,27 @@ export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
     ...dataActionsBarProps
   } = useDataActionsBar();
 
+  const SEED_STORAGE_KEY = "drep_directory_sorting_seed";
+
+  const makeSeed = () =>
+      (globalThis.crypto?.randomUUID?.() as string | undefined) ??
+      Math.random().toString(36).slice(2);
+
+  const getStoredSeed = () => {
+    if (typeof window === "undefined") return "";
+    return sessionStorage.getItem(SEED_STORAGE_KEY) || "";
+  };
+
+  const [sortingSeed, setSortingSeed] = useState<string>(() => getStoredSeed());
+
+  useEffect(() => {
+    if (lastPath && !lastPath.includes("drep_directory")) {
+      const newSeed = makeSeed();
+      setSortingSeed(newSeed);
+      sessionStorage.setItem(SEED_STORAGE_KEY, newSeed);
+    }
+  }, [sortingSeed]);
+
   const { page, pageSize, setPage, setPageSize } = usePagination();
 
   const { chosenFilters, chosenSorting, setChosenFilters, setChosenSorting } =
@@ -108,6 +129,7 @@ export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
       searchPhrase: debouncedSearchText,
       sorting: chosenSorting as DRepListSort,
       status: chosenFilters as DRepStatus[],
+      sortingSeed
     },
     { enabled: !!chosenSorting },
   );

govtool/frontend/src/services/requests/getDRepList.ts

@@ -14,6 +14,7 @@ export type GetDRepListArguments = {
   sorting?: DRepListSort;
   status?: DRepStatus[];
   searchPhrase?: string;
+  sortingSeed?: string;
 };
 
 export const getDRepList = async ({
@@ -23,6 +24,7 @@ export const getDRepList = async ({
   pageSize = 10,
   searchPhrase: rawSearchPhrase = "",
   status = [],
+  sortingSeed = ""
 }: GetDRepListArguments): Promise<Infinite<DRepData>> => {
   const searchPhrase = await dRepSearchPhraseProcessor(rawSearchPhrase);
 
@@ -34,6 +36,7 @@ export const getDRepList = async ({
       ...(filters.length && { type: filters }),
       ...(sorting && { sort: sorting }),
       ...(status.length && { status }),
+      ...(sortingSeed && { seed: sortingSeed }),
     },
   });