UILD-484: Fix of incorrect requests for searching and editing records

src/common/hooks/useLoadSearchResults.ts

@@ -1,5 +1,4 @@
 import { useEffect, useRef } from 'react';
-import { useSearchParams } from 'react-router-dom';
 import { SearchQueryParams } from '@common/constants/routes.constants';
 import { SEARCH_RESULTS_LIMIT, SearchIdentifiers } from '@common/constants/search.constants';
 import { useLoadingState, useSearchState } from '@src/store';
@@ -12,7 +11,7 @@ export const useLoadSearchResults = (
     useSearchContext();
   const { setIsLoading } = useLoadingState();
   const { setQuery, setData, setSearchBy, forceRefresh, setForceRefresh, resetFacetsData } = useSearchState();
-  const [searchParams] = useSearchParams();
+  const searchParams = new URLSearchParams(window.location.search);
   const queryParam = searchParams.get(SearchQueryParams.Query);
   const searchByParam = searchParams.get(SearchQueryParams.SearchBy);
   const offsetParam = searchParams.get(SearchQueryParams.Offset);
@@ -68,7 +67,7 @@ export const useLoadSearchResults = (
       await getSearchFacetsData?.();
 
       if (defaultSearchBy && defaultQuery) {
-        await fetchData({ query: defaultQuery as string, searchBy: defaultSearchBy, offset: 0 });
+        await fetchData({ query: defaultQuery, searchBy: defaultSearchBy, offset: 0 });
       }
 
       setIsLoading(false);

src/test/__tests__/common/hooks/useLoadSearchResults.test.ts

@@ -1,14 +1,8 @@
 import { act, renderHook } from '@testing-library/react';
-import { useSearchParams } from 'react-router-dom';
-import { SearchQueryParams } from '@common/constants/routes.constants';
 import { useLoadSearchResults } from '@common/hooks/useLoadSearchResults';
 import { useLoadingStateStore, useSearchStore } from '@src/store';
 import { setInitialGlobalState, setUpdatedGlobalState } from '@src/test/__mocks__/store';
 
-jest.mock('react-router-dom', () => ({
-  useSearchParams: jest.fn(),
-}));
-
 describe('useLoadSearchResults', () => {
   const setData = jest.fn();
   const fetchData = jest.fn();
@@ -38,13 +32,14 @@ describe('useLoadSearchResults', () => {
   });
 
   it('fetches data and updates state with query and searchBy', async () => {
-    const searchParams = new URLSearchParams({
-      [SearchQueryParams.Query]: 'test query',
-      [SearchQueryParams.SearchBy]: 'title',
+    Object.defineProperty(window, 'location', {
+      value: {
+        search: '?query=test%20query&searchBy=title',
+      },
+      writable: true,
     });
 
     fetchData.mockResolvedValue([{ test: ['test value'] }]);
-    (useSearchParams as jest.Mock).mockReturnValue([searchParams]);
     act(() =>
       setUpdatedGlobalState([
         {
@@ -62,9 +57,12 @@ describe('useLoadSearchResults', () => {
   });
 
   it('clears data when no query param', () => {
-    const searchParams = new URLSearchParams({});
-
-    (useSearchParams as jest.Mock).mockReturnValue([searchParams]);
+    Object.defineProperty(window, 'location', {
+      value: {
+        search: '',
+      },
+      writable: true,
+    });
 
     renderHook(() => useLoadSearchResults(fetchData));
 

src/views/Edit/Edit.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { EditSection } from '@components/EditSection';
 import { BibframeEntities, PROFILE_BFIDS } from '@common/constants/bibframe.constants';
 import { scrollEntity } from '@common/helpers/pageScrolling.helper';
@@ -26,7 +26,10 @@ export const Edit = () => {
   const recordStatusType = recordStatus?.type;
   const { setIsLoading } = useLoadingState();
   const { setCurrentlyEditedEntityBfid, setCurrentlyPreviewedEntityBfid } = useUIState();
-  const [queryParams] = useSearchParams();
+  const queryParams = new URLSearchParams(window.location.search);
+  const cloneOfParam = queryParams.get(QueryParams.CloneOf);
+  const typeParam = queryParams.get(QueryParams.Type);
+  const refParam = queryParams.get(QueryParams.Ref);
 
   useResetRecordStatus();
 
@@ -42,8 +45,7 @@ export const Edit = () => {
 
       setIsLoading(true);
 
-      const cloneId = queryParams.get(QueryParams.CloneOf);
-      const fetchableId = resourceId ?? cloneId;
+      const fetchableId = resourceId ?? cloneOfParam;
 
       try {
         if (fetchableId) {
@@ -52,8 +54,8 @@ export const Edit = () => {
           return;
         }
 
-        const resourceDecriptionType = (queryParams.get(QueryParams.Type) as ResourceType) || ResourceType.instance;
-        const resourceReference = queryParams.get(QueryParams.Ref);
+        const resourceDecriptionType = (typeParam as ResourceType) || ResourceType.instance;
+        const resourceReference = refParam;
         const isInstancePageType = resourceDecriptionType === ResourceType.instance;
         const editedEntityBfId = isInstancePageType ? PROFILE_BFIDS.INSTANCE : PROFILE_BFIDS.WORK;
         const previewedEntityBfId = isInstancePageType ? PROFILE_BFIDS.WORK : PROFILE_BFIDS.INSTANCE;
@@ -85,7 +87,7 @@ export const Edit = () => {
     }
 
     loadRecord();
-  }, [resourceId, recordStatusType, queryParams]);
+  }, [resourceId, recordStatusType, cloneOfParam, typeParam, refParam]);
 
   return (
     <div data-testid="edit-page" className="edit-page">