diff --git a/CHANGELOG.md b/CHANGELOG.md index 5e776c08..9068b0c5 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/src/views/AuthoritiesSearch/AuthoritiesSearch.js b/src/views/AuthoritiesSearch/AuthoritiesSearch.js index 2cd6cad9..19a66337 100644 --- a/src/views/AuthoritiesSearch/AuthoritiesSearch.js +++ b/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,8 +437,17 @@ 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, @@ -447,21 +455,16 @@ const AuthoritiesSearch = ({ }); 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) {