fix: restore selected status on reload from the url

packages/ui/src/hooks/useActiveQueue.ts

@@ -1,23 +1,14 @@
 import { AppQueue } from '@bull-board/api/dist/typings/app';
-import { matchPath } from 'react-router';
-import { useLocation } from 'react-router-dom';
+import { useActiveQueueName } from './useActiveQueueName';
 import { Store } from './useStore';
 
 export function useActiveQueue(data: Store['state']['data']): AppQueue | null {
-  const { pathname } = useLocation();
+  const activeQueueName = useActiveQueueName();
 
   if (!data) {
     return null;
   }
 
-  const match = matchPath<{ name: string }>(pathname, {
-    path: '/queue/:name',
-    exact: true,
-    strict: true,
-  });
-
-  const activeQueueName = decodeURIComponent(match?.params.name || '');
-
   const activeQueue = data?.queues?.find((q) => q.name === activeQueueName);
 
   return activeQueue || null;

packages/ui/src/hooks/useActiveQueueName.ts

@@ -0,0 +1,14 @@
+import { matchPath } from 'react-router';
+import { useLocation } from 'react-router-dom';
+
+export function useActiveQueueName(): string {
+  const { pathname } = useLocation();
+
+  const match = matchPath<{ name: string }>(pathname, {
+    path: '/queue/:name',
+    exact: true,
+    strict: true,
+  });
+
+  return decodeURIComponent(match?.params.name || '');
+}

packages/ui/src/hooks/useSelectedStatuses.ts

@@ -1,22 +1,28 @@
 import { useEffect, useState } from 'react';
-import { useLocation, useRouteMatch } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { SelectedStatuses, Status } from '../../typings/app';
 import { STATUS_LIST } from '../constants/status-list';
+import { useActiveQueueName } from './useActiveQueueName';
+
+function getActiveStatus(search: string) {
+  const query = new URLSearchParams(search);
+  return (query.get('status') as Status) || STATUS_LIST[0];
+}
 
 export function useSelectedStatuses(): SelectedStatuses {
-  const { search, pathname } = useLocation();
-  const match = useRouteMatch<{ name: string }>({ path: '/queue/:name' });
+  const { search } = useLocation();
+  const activeQueueName = useActiveQueueName();
 
-  const [selectedStatuses, setSelectedStatuses] = useState<SelectedStatuses>({});
+  const [selectedStatuses, setSelectedStatuses] = useState<SelectedStatuses>({
+    [activeQueueName]: getActiveStatus(search),
+  });
 
   useEffect(() => {
-    const query = new URLSearchParams(search);
-    const status = (query.get('status') as Status) || STATUS_LIST[0];
-    const queue = match ? decodeURIComponent(match?.params.name) : '';
-    if (queue) {
-      setSelectedStatuses({ ...selectedStatuses, [queue]: status });
+    const status = getActiveStatus(search);
+    if (activeQueueName) {
+      setSelectedStatuses({ ...selectedStatuses, [activeQueueName]: status });
     }
-  }, [search, pathname]);
+  }, [search, activeQueueName]);
 
   return selectedStatuses;
 }

packages/ui/src/hooks/useStore.ts

@@ -2,9 +2,8 @@ import { AppJob } from '@bull-board/api/typings/app';
 import { GetQueuesResponse } from '@bull-board/api/typings/responses';
 import { useState } from 'react';
 import { QueueActions, SelectedStatuses } from '../../typings/app';
-
 import { Api } from '../services/Api';
-import { useActiveQueue } from './useActiveQueue';
+import { useActiveQueueName } from './useActiveQueueName';
 import { ConfirmApi, useConfirm } from './useConfirm';
 import { useInterval } from './useInterval';
 import { useQuery } from './useQuery';
@@ -32,16 +31,16 @@ export const useStore = (api: Api): Store => {
     loading: true,
   });
 
-  const activeQueue = useActiveQueue(state.data);
+  const activeQueueName = useActiveQueueName();
   const { confirmProps, openConfirm } = useConfirm();
 
   const selectedStatuses = useSelectedStatuses();
 
   const update = () =>
     api
       .getQueues({
-        activeQueue: activeQueue?.name,
-        status: activeQueue ? selectedStatuses[activeQueue.name] : undefined,
+        activeQueue: activeQueueName,
+        status: activeQueueName ? selectedStatuses[activeQueueName] : undefined,
         page: query.get('page') || '1',
       })
       .then((data) => {