changed table to use system name and not id #497

src/api/systems.test.tsx

@@ -17,6 +17,7 @@ import {
   useEditSystem,
   useMoveToSystem,
   useSystem,
+  useSystemIds,
   useSystems,
   useSystemsBreadcrumbs,
 } from './systems';
@@ -106,6 +107,36 @@ describe('System api functions', () => {
     });
   });
 
+  describe('useSystemIds', () => {
+    it('sends a request to fetch system data and returns a successful response', async () => {
+      const { result } = renderHook(
+        () =>
+          useSystemIds([
+            '65328f34a40ff5301575a4e3',
+            '656ef565ed0773f82e44bc6d',
+          ]),
+        {
+          wrapper: hooksWrapperWithProviders(),
+        }
+      );
+
+      await waitFor(() => {
+        result.current.forEach((query) => expect(query.isSuccess).toBeTruthy());
+      });
+
+      expect(result.current[0].data).toEqual(
+        SystemsJSON.filter(
+          (system) => system.id === '65328f34a40ff5301575a4e3'
+        )[0]
+      );
+      expect(result.current[1].data).toEqual(
+        SystemsJSON.filter(
+          (system) => system.id === '656ef565ed0773f82e44bc6d'
+        )[0]
+      );
+    });
+  });
+
   describe('useSystemsBreadcrumbs', () => {
     it('does not send a request to fetch breadcrumbs data for a system when its id is null', async () => {
       const { result } = renderHook(() => useSystemsBreadcrumbs(null), {

src/api/systems.tsx

@@ -2,6 +2,7 @@ import {
   UseMutationResult,
   UseQueryResult,
   useMutation,
+  useQueries,
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query';
@@ -44,6 +45,15 @@ const fetchSystems = async (parent_id?: string): Promise<System[]> => {
   });
 };
 
+export const useSystemIds = (ids: string[]): UseQueryResult<System>[] => {
+  return useQueries({
+    queries: ids.map((id) => ({
+      queryKey: ['Systems', id],
+      queryFn: () => fetchSystem(id),
+    })),
+  });
+};
+
 export const useSystems = (
   parent_id?: string
 ): UseQueryResult<System[], AxiosError> => {