refactor(console): build url by buildUrl util (#2899)

packages/console/src/components/AuditLogTable/index.tsx

@@ -1,6 +1,6 @@
 import type { Log } from '@logto/schemas';
 import { LogResult } from '@logto/schemas';
-import { conditional, conditionalString } from '@silverhand/essentials';
+import { conditional } from '@silverhand/essentials';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
@@ -14,6 +14,7 @@ import TableLoading from '@/components/Table/TableLoading';
 import UserName from '@/components/UserName';
 import type { RequestError } from '@/hooks/use-api';
 import * as tableStyles from '@/scss/table.module.scss';
+import { buildUrl } from '@/utilities/url';
 
 import ApplicationSelector from './components/ApplicationSelector';
 import EventName from './components/EventName';
@@ -36,16 +37,16 @@ const AuditLogTable = ({ userId, className }: Props) => {
   const pageIndex = Number(query.get('page') ?? '1');
   const event = query.get('event');
   const applicationId = query.get('applicationId');
-  const queryString = [
-    `page=${pageIndex}`,
-    `page_size=${pageSize}`,
-    conditionalString(event && `logType=${event}`),
-    conditionalString(applicationId && `applicationId=${applicationId}`),
-    conditionalString(userId && `userId=${userId}`),
-  ]
-    .filter(Boolean)
-    .join('&');
-  const { data, error, mutate } = useSWR<[Log[], number], RequestError>(`/api/logs?${queryString}`);
+
+  const url = buildUrl('/api/logs', {
+    page: `${pageIndex}`,
+    page_size: `${pageSize}`,
+    ...conditional(event && { logType: event }),
+    ...conditional(applicationId && { applicationId }),
+    ...conditional(userId && { userId }),
+  });
+
+  const { data, error, mutate } = useSWR<[Log[], number], RequestError>(url);
   const isLoading = !data && !error;
   const navigate = useNavigate();
   const [logs, totalCount] = data ?? [];

packages/console/src/components/RoleUsersTransfer/SourceUsersBox.tsx

@@ -1,5 +1,5 @@
 import type { User } from '@logto/schemas';
-import { conditionalString } from '@silverhand/essentials';
+import { conditional } from '@silverhand/essentials';
 import type { ChangeEvent } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -8,6 +8,7 @@ import useSWR from 'swr';
 import Search from '@/assets/images/search.svg';
 import type { RequestError } from '@/hooks/use-api';
 import { onKeyDownHandler } from '@/utilities/a11y';
+import { buildUrl } from '@/utilities/url';
 
 import Checkbox from '../Checkbox';
 import Pagination from '../Pagination';
@@ -43,11 +44,15 @@ const SourceUsersBox = ({ roleId, selectedUsers, onAddUser, onRemoveUser }: Prop
     };
   }, []);
 
-  const { data } = useSWR<[User[], number], RequestError>(
-    `/api/users?excludeRoleId=${roleId}&page=${pageIndex}&page_size=${pageSize}&hideAdminUser=true${conditionalString(
-      keyword && `&search=${encodeURIComponent(`%${keyword}%`)}`
-    )}`
-  );
+  const url = buildUrl('/api/users', {
+    excludeRoleId: roleId,
+    hideAdminUser: 'true',
+    page: `${pageIndex}`,
+    page_size: `${pageSize}`,
+    ...conditional(keyword && { search: `%${keyword}%` }),
+  });
+
+  const { data } = useSWR<[User[], number], RequestError>(url);
 
   const [dataSource = [], totalCount] = data ?? [];
 

packages/console/src/pages/ApiResources/index.tsx

@@ -20,6 +20,7 @@ import type { RequestError } from '@/hooks/use-api';
 import { useTheme } from '@/hooks/use-theme';
 import * as modalStyles from '@/scss/modal.module.scss';
 import * as resourcesStyles from '@/scss/resources.module.scss';
+import { buildUrl } from '@/utilities/url';
 
 import CreateForm from './components/CreateForm';
 import * as styles from './index.module.scss';
@@ -38,9 +39,14 @@ const ApiResources = () => {
   const [query, setQuery] = useSearchParams();
   const search = query.toString();
   const pageIndex = Number(query.get('page') ?? '1');
-  const { data, error, mutate } = useSWR<[Resource[], number], RequestError>(
-    `/api/resources?page=${pageIndex}&page_size=${pageSize}`
-  );
+
+  const url = buildUrl('/api/resources', {
+    page: `${pageIndex}`,
+    page_size: `${pageSize}`,
+  });
+
+  const { data, error, mutate } = useSWR<[Resource[], number], RequestError>(url);
+
   const isLoading = !data && !error;
   const navigate = useNavigate();
   const theme = useTheme();

packages/console/src/pages/Applications/index.tsx

@@ -17,6 +17,7 @@ import type { RequestError } from '@/hooks/use-api';
 import * as modalStyles from '@/scss/modal.module.scss';
 import * as resourcesStyles from '@/scss/resources.module.scss';
 import { applicationTypeI18nKey } from '@/types/applications';
+import { buildUrl } from '@/utilities/url';
 
 import CreateForm from './components/CreateForm';
 import * as styles from './index.module.scss';
@@ -35,9 +36,13 @@ const Applications = () => {
   const [query, setQuery] = useSearchParams();
   const search = query.toString();
   const pageIndex = Number(query.get('page') ?? '1');
-  const { data, error, mutate } = useSWR<[Application[], number], RequestError>(
-    `/api/applications?page=${pageIndex}&page_size=${pageSize}`
-  );
+  const url = buildUrl('/api/applications', {
+    page: `${pageIndex}`,
+    page_size: `${pageSize}`,
+  });
+
+  const { data, error, mutate } = useSWR<[Application[], number], RequestError>(url);
+
   const isLoading = !data && !error;
   const [applications, totalCount] = data ?? [];
 

packages/console/src/pages/Users/index.tsx

@@ -1,5 +1,5 @@
 import type { User } from '@logto/schemas';
-import { conditional, conditionalString } from '@silverhand/essentials';
+import { conditional } from '@silverhand/essentials';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
@@ -21,6 +21,7 @@ import { UserDetailsTabs } from '@/consts/page-tabs';
 import type { RequestError } from '@/hooks/use-api';
 import * as resourcesStyles from '@/scss/resources.module.scss';
 import * as tableStyles from '@/scss/table.module.scss';
+import { buildUrl } from '@/utilities/url';
 
 import CreateForm from './components/CreateForm';
 import * as styles from './index.module.scss';
@@ -41,11 +42,15 @@ const Users = () => {
   const search = query.toString();
   const pageIndex = Number(query.get('page') ?? '1');
   const keyword = query.get('search') ?? '';
-  const { data, error, mutate } = useSWR<[User[], number], RequestError>(
-    `/api/users?page=${pageIndex}&page_size=${pageSize}&hideAdminUser=true${conditionalString(
-      keyword && `&search=${encodeURIComponent(`%${keyword}%`)}`
-    )}`
-  );
+
+  const url = buildUrl('/api/users', {
+    hideAdminUser: 'true',
+    page: `${pageIndex}`,
+    page_size: `${pageSize}`,
+    ...conditional(keyword && { search: `%${keyword}%` }),
+  });
+
+  const { data, error, mutate } = useSWR<[User[], number], RequestError>(url);
   const isLoading = !data && !error;
   const navigate = useNavigate();
   const [users, totalCount] = data ?? [];

packages/console/src/utilities/url.ts

@@ -0,0 +1,2 @@
+export const buildUrl = (path: string, searchParameters: Record<string, string>) =>
+  `${path}?${new URLSearchParams(searchParameters).toString()}`;