fix(explorer): As a user, I want to have a consistent default sorting…

… logic across all the pages in the explorer (#722)
Consensys · Sep 10, 2024 · 19beba6 · 19beba6
1 parent d15e000
commit 19beba6
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/explorer/src/pages/MyAttestations/index.tsx b/explorer/src/pages/MyAttestations/index.tsx
@@ -54,7 +54,7 @@ export const MyAttestations: React.FC = () => {
         undefined,
         { subject: address },
         "attestedDate",
-        sortByDateDirection as OrderDirection,
+        (sortByDateDirection as OrderDirection) || "desc",
       ),
   );
 

diff --git a/explorer/src/pages/Search/components/SearchAttestationsReceived/index.tsx b/explorer/src/pages/Search/components/SearchAttestationsReceived/index.tsx
@@ -3,6 +3,7 @@ import useSWR from "swr";
 
 import { DataTable } from "@/components/DataTable";
 import { columns } from "@/constants/columns/attestation";
+import { EQueryParams } from "@/enums/queryParams.ts";
 import { SWRKeys } from "@/interfaces/swr/enum";
 import { useNetworkContext } from "@/providers/network-provider/context";
 import { APP_ROUTES } from "@/routes/constants";
@@ -17,9 +18,12 @@ export const SearchAttestationsReceived: React.FC<SearchComponentProps> = ({ get
     network: { chain },
   } = useNetworkContext();
 
+  const searchParams = new URLSearchParams(window.location.search);
+  const sortByDateDirection = searchParams.get(EQueryParams.SORT_BY_DATE);
+
   const { data } = useSWR(
-    `${SWRKeys.GET_ATTESTATION_LIST}/${SWRKeys.SEARCH}/${search}/${chain.id}`,
-    async () => loadAttestationReceivedList(sdk.attestation, parsedString),
+    `${SWRKeys.GET_ATTESTATION_LIST}/${SWRKeys.SEARCH}/${search}/${chain.id}/${sortByDateDirection}`,
+    async () => loadAttestationReceivedList(sdk.attestation, parsedString, sortByDateDirection),
     {
       shouldRetryOnError: false,
       revalidateAll: false,

diff --git a/...rer/src/pages/Search/components/SearchAttestationsReceived/loadAttestationReceivedList.ts b/...rer/src/pages/Search/components/SearchAttestationsReceived/loadAttestationReceivedList.ts
@@ -1,3 +1,4 @@
+import { OrderDirection } from "@verax-attestation-registry/verax-sdk/lib/types/.graphclient";
 import AttestationDataMapper from "@verax-attestation-registry/verax-sdk/lib/types/src/dataMapper/AttestationDataMapper";
 
 import { ITEMS_SEARCHED_DEFAULT } from "@/constants";
@@ -8,13 +9,20 @@ import { uniqMap } from "@/utils/searchUtils";
 export const loadAttestationReceivedList = async (
   attestation: AttestationDataMapper,
   parsedString: Partial<ResultParseSearch>,
+  sortByDateDirection: string | null,
 ) => {
   const [listBySubject] = parsedString.address
     ? await Promise.all(
         parsedString.address.map(async (address) => {
-          return attestation.findBy(ITEMS_SEARCHED_DEFAULT, undefined, {
-            subject: address,
-          });
+          return attestation.findBy(
+            ITEMS_SEARCHED_DEFAULT,
+            undefined,
+            {
+              subject: address,
+            },
+            "attestedDate",
+            (sortByDateDirection as OrderDirection) || "desc",
+          );
         }),
       )
     : [];