Implement remote sorting

0xPolygonID · Jan 30, 2024 · 9fec695 · 9fec695
1 parent dac42ee
commit 9fec695
Show file tree

Hide file tree

Showing 10 changed files with 98 additions and 25 deletions.
diff --git a/ui/src/adapters/api/connections.ts b/ui/src/adapters/api/connections.ts
@@ -2,7 +2,13 @@ import axios from "axios";
 import { z } from "zod";
 
 import { Response, buildErrorResponse, buildSuccessResponse } from "src/adapters";
-import { Message, buildAuthorizationHeader, messageParser } from "src/adapters/api";
+import {
+  Message,
+  Sorter,
+  buildAuthorizationHeader,
+  messageParser,
+  serializeSorters,
+} from "src/adapters/api";
 import { credentialParser } from "src/adapters/api/credentials";
 import {
   datetimeParser,
@@ -57,7 +63,7 @@ export async function getConnection({
 export async function getConnections({
   credentials,
   env,
-  params: { maxResults, page, query },
+  params: { maxResults, page, query, sorters },
   signal,
 }: {
   credentials: boolean;
@@ -66,6 +72,7 @@ export async function getConnections({
     maxResults?: number;
     page?: number;
     query?: string;
+    sorters?: Sorter[];
   };
   signal?: AbortSignal;
 }): Promise<Response<Resource<Connection>>> {
@@ -81,6 +88,7 @@ export async function getConnections({
         ...(credentials ? { credentials: "true" } : {}),
         ...(maxResults !== undefined ? { max_results: maxResults.toString() } : {}),
         ...(page !== undefined ? { page: page.toString() } : {}),
+        ...(sorters !== undefined && sorters.length ? { sort: serializeSorters(sorters) } : {}),
       }),
       signal,
       url: `${API_VERSION}/connections`,

diff --git a/ui/src/adapters/api/credentials.ts b/ui/src/adapters/api/credentials.ts
@@ -2,7 +2,15 @@ import axios from "axios";
 import { z } from "zod";
 
 import { Response, buildErrorResponse, buildSuccessResponse } from "src/adapters";
-import { ID, IDParser, Message, buildAuthorizationHeader, messageParser } from "src/adapters/api";
+import {
+  ID,
+  IDParser,
+  Message,
+  Sorter,
+  buildAuthorizationHeader,
+  messageParser,
+  serializeSorters,
+} from "src/adapters/api";
 import {
   datetimeParser,
   getListParser,
@@ -103,7 +111,7 @@ export async function getCredential({
 
 export async function getCredentials({
   env,
-  params: { did, maxResults, page, query, status },
+  params: { did, maxResults, page, query, sorters, status },
   signal,
 }: {
   env: Env;
@@ -112,6 +120,7 @@ export async function getCredentials({
     maxResults?: number;
     page?: number;
     query?: string;
+    sorters?: Sorter[];
     status?: CredentialStatus;
   };
   signal?: AbortSignal;
@@ -129,6 +138,7 @@ export async function getCredentials({
         ...(status !== undefined && status !== "all" ? { [STATUS_SEARCH_PARAM]: status } : {}),
         ...(maxResults !== undefined ? { max_results: maxResults.toString() } : {}),
         ...(page !== undefined ? { page: page.toString() } : {}),
+        ...(sorters !== undefined && sorters.length ? { sort: serializeSorters(sorters) } : {}),
       }),
       signal,
       url: `${API_VERSION}/credentials`,

diff --git a/ui/src/adapters/api/index.ts b/ui/src/adapters/api/index.ts
@@ -3,6 +3,18 @@ import { z } from "zod";
 import { getStrictParser } from "src/adapters/parsers";
 import { Env } from "src/domain";
 
+export type Sorter = { field: string; order?: "ascend" | "descend" };
+
+export const sorterParser = getStrictParser<Sorter>()(
+  z.object({
+    field: z.string(),
+    order: z.union([z.literal("ascend"), z.literal("descend")]).optional(),
+  })
+);
+
+export const serializeSorters = (sorters: Sorter[]) =>
+  sorters.map(({ field, order }) => `${order === "descend" ? "-" : ""}${field}`).join(",");
+
 export type ID = {
   id: string;
 };

diff --git a/ui/src/adapters/parsers/index.ts b/ui/src/adapters/parsers/index.ts
@@ -35,7 +35,7 @@ export function getListParser<Input, Output = Input>(
   );
 }
 
-const metaParser = getStrictParser<ResourceMeta>()(
+const resourceMetaParser = getStrictParser<ResourceMeta>()(
   z.object({
     max_results: z.number().int().min(1),
     page: z.number().int().min(1),
@@ -52,7 +52,7 @@ export function getResourceParser<Input, Output = Input>(
   >()(
     z.object({
       items: getListParser(parser),
-      meta: metaParser,
+      meta: resourceMetaParser,
     })
   );
 }

diff --git a/ui/src/adapters/parsers/forms.ts → ui/src/adapters/parsers/view.ts b/ui/src/adapters/parsers/forms.ts → ui/src/adapters/parsers/view.ts
@@ -1,6 +1,7 @@
 import dayjs, { isDayjs } from "dayjs";
 import { z } from "zod";
 
+import { Sorter, sorterParser } from "src/adapters/api";
 import { CreateCredential, CreateLink } from "src/adapters/api/credentials";
 import { jsonParser } from "src/adapters/json";
 import { getStrictParser } from "src/adapters/parsers";
@@ -42,6 +43,24 @@ export type CredentialLinkIssuance = CredentialIssuance & {
 };
 
 // Parsers
+
+export const tableSorterParser = getStrictParser<Sorter | unknown[], Sorter[]>()(
+  z.union([
+    z
+      .unknown()
+      .array()
+      .transform((unknowns) =>
+        unknowns.reduce((acc: Sorter[], curr): Sorter[] => {
+          const parsedSorter = sorterParser.safeParse(curr);
+          return parsedSorter.success && parsedSorter.data.order !== undefined
+            ? [...acc, parsedSorter.data]
+            : acc;
+        }, [])
+      ),
+    sorterParser.transform((sorter) => (sorter.order !== undefined ? [sorter] : [])),
+  ])
+);
+
 export const dayjsInstanceParser = getStrictParser<dayjs.Dayjs>()(
   z.custom<dayjs.Dayjs>(isDayjs, {
     message: "The provided input is not a valid Dayjs instance",

diff --git a/ui/src/components/connections/ConnectionsTable.tsx b/ui/src/components/connections/ConnectionsTable.tsx
@@ -14,8 +14,10 @@ import {
 import { useCallback, useEffect, useState } from "react";
 import { generatePath, useNavigate, useSearchParams } from "react-router-dom";
 
+import { Sorter } from "src/adapters/api";
 import { getConnections } from "src/adapters/api/connections";
 import { positiveIntegerFromStringParser } from "src/adapters/parsers";
+import { tableSorterParser } from "src/adapters/parsers/view";
 import IconCreditCardPlus from "src/assets/icons/credit-card-plus.svg?react";
 import IconDots from "src/assets/icons/dots-vertical.svg?react";
 import IconInfoCircle from "src/assets/icons/info-circle.svg?react";
@@ -67,6 +69,7 @@ export function ConnectionsTable() {
   );
 
   const [paginationTotal, setPaginationTotal] = useState<number>(DEFAULT_PAGINATION_TOTAL);
+  const [sorters, setSorters] = useState<Sorter[]>();
 
   const paginationPage = paginationPageParsed.success
     ? paginationPageParsed.data
@@ -87,7 +90,9 @@ export function ConnectionsTable() {
           <Typography.Text strong>{userID.split(":").pop()}</Typography.Text>
         </Tooltip>
       ),
-      sorter: ({ id: a }, { id: b }) => a.localeCompare(b),
+      sorter: {
+        multiple: 1,
+      },
       title: IDENTIFIER,
     },
     {
@@ -180,14 +185,20 @@ export function ConnectionsTable() {
 
   const fetchConnections = useCallback(
     async (signal?: AbortSignal) => {
-      setConnections({ status: "loading" });
+      setConnections((previousConnections) =>
+        isAsyncTaskDataAvailable(previousConnections)
+          ? { data: previousConnections.data, status: "reloading" }
+          : { status: "loading" }
+      );
+
       const response = await getConnections({
         credentials: true,
         env,
         params: {
           maxResults: paginationMaxResults,
           page: paginationPage,
           query: queryParam || undefined,
+          sorters,
         },
         signal,
       });
@@ -208,7 +219,7 @@ export function ConnectionsTable() {
         }
       }
     },
-    [env, paginationMaxResults, paginationPage, queryParam, updatePaginationParams]
+    [env, paginationMaxResults, paginationPage, queryParam, sorters, updatePaginationParams]
   );
 
   const onSearch = useCallback(
@@ -287,7 +298,11 @@ export function ConnectionsTable() {
                     <NoResults searchQuery={queryParam} />
                   ),
               }}
-              onChange={({ current, pageSize, total }) => {
+              onChange={({ current, pageSize, total }, _, sorters) => {
+                const parsedSorters = tableSorterParser.safeParse(sorters);
+                if (parsedSorters.success) {
+                  setSorters(parsedSorters.data);
+                }
                 setPaginationTotal(total || DEFAULT_PAGINATION_TOTAL);
                 updatePaginationParams({ maxResults: pageSize, page: current });
               }}

diff --git a/ui/src/components/credentials/CredentialsTable.tsx b/ui/src/components/credentials/CredentialsTable.tsx
@@ -17,8 +17,10 @@ import dayjs from "dayjs";
 import { useCallback, useEffect, useState } from "react";
 import { Link, generatePath, useNavigate, useSearchParams } from "react-router-dom";
 
+import { Sorter } from "src/adapters/api";
 import { credentialStatusParser, getCredentials } from "src/adapters/api/credentials";
 import { positiveIntegerFromStringParser } from "src/adapters/parsers";
+import { tableSorterParser } from "src/adapters/parsers/view";
 import IconCreditCardPlus from "src/assets/icons/credit-card-plus.svg?react";
 import IconCreditCardRefresh from "src/assets/icons/credit-card-refresh.svg?react";
 import IconDots from "src/assets/icons/dots-vertical.svg?react";
@@ -82,6 +84,7 @@ export function CredentialsTable() {
   );
 
   const [paginationTotal, setPaginationTotal] = useState<number>(DEFAULT_PAGINATION_TOTAL);
+  const [sorters, setSorters] = useState<Sorter[]>();
 
   const paginationPage = paginationPageParsed.success
     ? paginationPageParsed.data
@@ -104,7 +107,9 @@ export function CredentialsTable() {
           <Typography.Text strong>{schemaType}</Typography.Text>
         </Tooltip>
       ),
-      sorter: ({ schemaType: a }, { schemaType: b }) => a.localeCompare(b),
+      sorter: {
+        multiple: 1,
+      },
       title: "Credential",
     },
     {
@@ -113,7 +118,9 @@ export function CredentialsTable() {
       render: (createdAt: Credential["createdAt"]) => (
         <Typography.Text>{formatDate(createdAt)}</Typography.Text>
       ),
-      sorter: ({ createdAt: a }, { createdAt: b }) => a.getTime() - b.getTime(),
+      sorter: {
+        multiple: 2,
+      },
       title: ISSUE_DATE,
     },
     {
@@ -130,14 +137,8 @@ export function CredentialsTable() {
           "-"
         ),
       responsive: ["md"],
-      sorter: ({ expiresAt: a }, { expiresAt: b }) => {
-        if (a && b) {
-          return a.getTime() - b.getTime();
-        } else if (a) {
-          return -1;
-        } else {
-          return 1;
-        }
+      sorter: {
+        multiple: 3,
       },
       title: EXPIRATION,
     },
@@ -148,7 +149,9 @@ export function CredentialsTable() {
         <Typography.Text>{revoked ? "Revoked" : "-"}</Typography.Text>
       ),
       responsive: ["sm"],
-      sorter: ({ revoked: a }, { revoked: b }) => (a === b ? 0 : a ? 1 : -1),
+      sorter: {
+        multiple: 4,
+      },
       title: REVOCATION,
     },
     {
@@ -236,6 +239,7 @@ export function CredentialsTable() {
           maxResults: paginationMaxResults,
           page: paginationPage,
           query: queryParam || undefined,
+          sorters,
           status: credentialStatus,
         },
         signal,
@@ -262,6 +266,7 @@ export function CredentialsTable() {
       paginationMaxResults,
       paginationPage,
       queryParam,
+      sorters,
       credentialStatus,
       updatePaginationParams,
     ]
@@ -356,7 +361,11 @@ export function CredentialsTable() {
                   <NoResults searchQuery={queryParam} />
                 ),
             }}
-            onChange={({ current, pageSize, total }) => {
+            onChange={({ current, pageSize, total }, _, sorters) => {
+              const parsedSorters = tableSorterParser.safeParse(sorters);
+              if (parsedSorters.success) {
+                setSorters(parsedSorters.data);
+              }
               setPaginationTotal(total || DEFAULT_PAGINATION_TOTAL);
               updatePaginationParams({ maxResults: pageSize, page: current });
             }}

diff --git a/ui/src/components/credentials/IssuanceMethodForm.tsx b/ui/src/components/credentials/IssuanceMethodForm.tsx
@@ -17,7 +17,7 @@ import dayjs from "dayjs";
 import { useCallback, useEffect, useState } from "react";
 
 import { getConnections } from "src/adapters/api/connections";
-import { IssuanceMethodFormData, issuanceMethodFormDataParser } from "src/adapters/parsers/forms";
+import { IssuanceMethodFormData, issuanceMethodFormDataParser } from "src/adapters/parsers/view";
 import IconRight from "src/assets/icons/arrow-narrow-right.svg?react";
 import { useEnvContext } from "src/contexts/Env";
 import { AppError, Connection } from "src/domain";

diff --git a/ui/src/components/credentials/IssueCredential.tsx b/ui/src/components/credentials/IssueCredential.tsx
@@ -11,7 +11,7 @@ import {
   credentialFormParser,
   serializeCredentialIssuance,
   serializeCredentialLinkIssuance,
-} from "src/adapters/parsers/forms";
+} from "src/adapters/parsers/view";
 import { IssuanceMethodForm } from "src/components/credentials/IssuanceMethodForm";
 import { IssueCredentialForm } from "src/components/credentials/IssueCredentialForm";
 import { Summary } from "src/components/credentials/Summary";

diff --git a/ui/src/components/credentials/IssueCredentialForm.tsx b/ui/src/components/credentials/IssueCredentialForm.tsx
@@ -27,7 +27,7 @@ import {
   IssueCredentialFormData,
   dayjsInstanceParser,
   serializeSchemaForm,
-} from "src/adapters/parsers/forms";
+} from "src/adapters/parsers/view";
 import IconBack from "src/assets/icons/arrow-narrow-left.svg?react";
 import IconRight from "src/assets/icons/arrow-narrow-right.svg?react";
 import IconCheckMark from "src/assets/icons/check.svg?react";