refactor: links uses URL object instead of string manipulations

felixmosh · May 1, 2024 · e05fd57 · e05fd57
1 parent d920e47
commit e05fd57
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 13 deletions.
diff --git a/packages/ui/src/components/JobCard/JobCard.tsx b/packages/ui/src/components/JobCard/JobCard.tsx
@@ -17,7 +17,7 @@ import { Timeline } from './Timeline/Timeline';
 
 interface JobCardProps {
   job: AppJob;
-  jobUrl?: string;
+  jobUrl?: { pathname: string; search: string };
   status: Status;
   readOnlyMode: boolean;
   allowRetries: boolean;

diff --git a/packages/ui/src/components/StatusMenu/StatusMenu.tsx b/packages/ui/src/components/StatusMenu/StatusMenu.tsx
@@ -1,12 +1,12 @@
 import { AppQueue } from '@bull-board/api/typings/app';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { NavLink, useRouteMatch } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
+import { links } from '../../utils/links';
 import { QueueDropdownActions } from '../QueueDropdownActions/QueueDropdownActions';
 import s from './StatusMenu.module.css';
 
 export const StatusMenu = ({ queue, actions }: { queue: AppQueue; actions: any }) => {
-  const { url } = useRouteMatch();
   const { t } = useTranslation();
 
   return (
@@ -16,7 +16,7 @@ export const StatusMenu = ({ queue, actions }: { queue: AppQueue; actions: any }
         const displayStatus = t(`QUEUE.STATUS.${status.toUpperCase()}`).toLocaleUpperCase();
         return (
           <NavLink
-            to={`${url}${isLatest ? '' : `?status=${status}`}`}
+            to={links.queuePage(queue.name, { [queue.name]: status })}
             activeClassName={s.active}
             isActive={(_path, { search }) => {
               const query = new URLSearchParams(search);

diff --git a/packages/ui/src/utils/links.ts b/packages/ui/src/utils/links.ts
@@ -1,15 +1,32 @@
 import { SelectedStatuses } from '../../typings/app';
 
 export const links = {
-  queuePage(queueName: string, selectedStatuses: SelectedStatuses = {}): string {
-    const withoutStatus =
-      !selectedStatuses[queueName] || selectedStatuses[queueName] === 'latest';
-    return `/queue/${encodeURIComponent(queueName)}${
-      withoutStatus ? '' : `?status=${selectedStatuses[queueName]}`
-    }`;
+  queuePage(
+    queueName: string,
+    selectedStatuses: SelectedStatuses = {}
+  ): { pathname: string; search: string } {
+    const { pathname, searchParams } = new URL(`/queue/${queueName}`, 'http://fake.com');
+
+    const withStatus = selectedStatuses[queueName] && selectedStatuses[queueName] !== 'latest';
+    if (withStatus) {
+      searchParams.set('status', selectedStatuses[queueName]);
+    }
+
+    return {
+      pathname,
+      search: searchParams.toString(),
+    };
   },
-  jobPage(queueName: string, jobId: string, selectedStatuses: SelectedStatuses = {}): string {
-    const [queuePage, search] = links.queuePage(queueName, selectedStatuses).split('?');
-    return [`${queuePage}/${encodeURIComponent(jobId)}`, search].filter(Boolean).join('?');
+  jobPage(
+    queueName: string,
+    jobId: string,
+    selectedStatuses: SelectedStatuses = {}
+  ): { pathname: string; search: string } {
+    const { pathname: queuePath, search } = links.queuePage(queueName, selectedStatuses);
+    const { pathname } = new URL(`${queuePath}/${jobId}`, 'http://fake.com');
+    return {
+      pathname,
+      search,
+    };
   },
 };