UIMARCAUTH-387: Change auto-open a record functionality. (#386)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change history for ui-marc-authorities
 
+## [5.0.1] IN PROGRESS
+
+- [UIMARCAUTH-387](https://issues.folio.org/browse/UIMARCAUTH-387) Change auto-open a record functionality.
+
 ## [5.0.0](https://github.com/folio-org/ui-marc-authorities/tree/v5.0.0) (2024-03-21)
 
 - [UIMARCAUTH-304](https://issues.folio.org/browse/UIMARCAUTH-304) Remove eslint deps that are already listed in eslint-config-stripes.

src/views/AuthoritiesSearch/AuthoritiesSearch.js

@@ -22,6 +22,7 @@ import {
 } from '@rehooks/local-storage';
 import queryString from 'query-string';
 import pick from 'lodash/pick';
+import omit from 'lodash/omit';
 
 import {
   Button,
@@ -141,7 +142,6 @@ const AuthoritiesSearch = ({
     setIsGoingToBaseURL,
   } = useContext(AuthoritiesSearchContext);
   const callout = useContext(CalloutContext);
-  const prevQuery = useRef('');
   const [, setSelectedAuthorityRecord] = useContext(SelectedAuthorityRecordContext);
   const [selectedRows, setSelectedRows] = useState({});
   const [selectAll, setSelectAll] = useState(false);
@@ -150,7 +150,6 @@ const AuthoritiesSearch = ({
   const filterPaneVisibilityKey = getNamespace({ key: 'marcAuthoritiesFilterPaneVisibility' });
   const [storedFilterPaneVisibility] = useLocalStorage(filterPaneVisibilityKey, true);
   const [isFilterPaneVisible, setIsFilterPaneVisible] = useState(storedFilterPaneVisibility);
-  const [showDetailView, setShowDetailView] = useState(false);
   const [reportsModalOpen, setReportsModalOpen] = useState(false);
   const selectedReport = useRef(null);
 
@@ -438,30 +437,34 @@ const AuthoritiesSearch = ({
     ...options,
   ], [intl, options]);
 
+  /**
+   * The `redirectToAuthorityRecord` function is a dependency in `useEffect` and indirectly depends on `location.search`.
+   * When opening a record, the `headingRef` and `authRefType` are pushed to `location.search`. Closing the record
+   * removes them from there. Thus, when we close a record the `redirectToAuthorityRecord` function is modified by
+   * `location.search`, and it causes the record to be reopened. We can have `location.search` as a dependency without
+   * `headingRef` and `authRefType` because there are taken from the record anyway.
+   * */
+  const trimmedSearch = queryString.stringify(omit(queryString.parse(location.search), ['authRefType', 'headingRef']));
+
   const formatAuthorityRecordLink = useCallback(authority => {
-    const search = queryString.parse(location.search);
+    const search = queryString.parse(trimmedSearch);
     const newSearch = queryString.stringify({
       ...search,
       headingRef: authority.headingRef,
       authRefType: authority.authRefType,
     });
 
     return `${match.path}/authorities/${authority.id}?${newSearch}`;
-  }, [match.path, location.search]);
+  }, [match.path, trimmedSearch]);
 
   const redirectToAuthorityRecord = useCallback(authority => {
     setSelectedAuthorityRecord(null);
     history.push(formatAuthorityRecordLink(authority));
   }, [history, formatAuthorityRecordLink]);
 
-  useEffect(() => {
-    if (!isLoading) {
-      setShowDetailView(prevQuery.current !== query);
-      prevQuery.current = query;
-    }
-  }, [query, prevQuery.current, isLoading]); // don't remove prevQuery.current from deps (linter asks)
+  const urlAuthorityId = location.pathname.split('/')[3];
 
-  useAutoOpenDetailView(isLoading ? [] : authorities, redirectToAuthorityRecord, !showDetailView);
+  useAutoOpenDetailView(authorities, redirectToAuthorityRecord, isLoading, urlAuthorityId);
 
   useEffect(() => {
     if (!recordToHighlight) {