diff --git a/cypress/e2e/movie-details.cy.ts b/cypress/e2e/movie-details.cy.ts index 1d3ecf3f13..0c2eeea56d 100644 --- a/cypress/e2e/movie-details.cy.ts +++ b/cypress/e2e/movie-details.cy.ts @@ -9,4 +9,20 @@ describe('Movie Details', () => { 'Minions: The Rise of Gru (2022)' ); }); + + it('does not reopen the manager panel after closing and going back', () => { + cy.loginAsAdmin(); + + cy.visit('/movie/438148'); + cy.visit('/movie/438148?manage=1'); + + cy.get('button[aria-label="Close panel"]').should('be.visible').click(); + cy.location('search').should('eq', ''); + cy.get('button[aria-label="Close panel"]').should('not.exist'); + + cy.go('back'); + + cy.location('search').should('eq', ''); + cy.get('button[aria-label="Close panel"]').should('not.exist'); + }); }); diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx index 56a3c0a1f7..80aded586e 100644 --- a/src/components/MovieDetails/index.tsx +++ b/src/components/MovieDetails/index.tsx @@ -118,9 +118,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => { const router = useRouter(); const intl = useIntl(); const { locale } = useLocale(); - const [showManager, setShowManager] = useState( - router.query.manage == '1' ? true : false - ); + const [showManager, setShowManager] = useState(false); const minStudios = 3; const [showMoreStudios, setShowMoreStudios] = useState(false); const [showIssueModal, setShowIssueModal] = useState(false); @@ -158,8 +156,14 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => { ); useEffect(() => { - setShowManager(router.query.manage == '1' ? true : false); - }, [router.query.manage]); + if (router.query.manage === '1') { + setShowManager(true); + router.replace({ + pathname: router.pathname, + query: { movieId: router.query.movieId }, + }); + } + }, [router, router.query.manage]); const closeBlocklistModal = useCallback( () => setShowBlocklistModal(false), @@ -469,7 +473,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => { mediaType="movie" onClose={() => { setShowManager(false); - router.push({ + router.replace({ pathname: router.pathname, query: { movieId: router.query.movieId }, }); diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx index d1e88b23c3..3a905dbdf7 100644 --- a/src/components/TvDetails/index.tsx +++ b/src/components/TvDetails/index.tsx @@ -118,7 +118,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => { const intl = useIntl(); const { locale } = useLocale(); const [showRequestModal, setShowRequestModal] = useState(false); - const [showManager, setShowManager] = useState(router.query.manage == '1'); + const [showManager, setShowManager] = useState(false); const [showIssueModal, setShowIssueModal] = useState(false); const [isUpdating, setIsUpdating] = useState(false); const [toggleWatchlist, setToggleWatchlist] = useState( @@ -154,8 +154,14 @@ const TvDetails = ({ tv }: TvDetailsProps) => { ); useEffect(() => { - setShowManager(router.query.manage == '1'); - }, [router.query.manage]); + if (router.query.manage === '1') { + setShowManager(true); + router.replace({ + pathname: router.pathname, + query: { tvId: router.query.tvId }, + }); + } + }, [router, router.query.manage]); const closeBlocklistModal = useCallback( () => setShowBlocklistModal(false), @@ -519,7 +525,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => { mediaType="tv" onClose={() => { setShowManager(false); - router.push({ + router.replace({ pathname: router.pathname, query: { tvId: router.query.tvId }, });