Fix changelog modal issue going back in the browser (#1670)

Signed-off-by: Cintia Sanchez Garcia <cynthiasg@icloud.com>
artifacthub · Nov 2, 2021 · 3f3b650 · 3f3b650
1 parent 3951db3
commit 3f3b650
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/web/src/layout/package/changelog/Modal.test.tsx b/web/src/layout/package/changelog/Modal.test.tsx
@@ -41,7 +41,6 @@ const markdownMock = `
 
 ### Added
 
-- Support for Tekton pipelines
 - Versions index to changelog modal
 - Allow publishers to include screenshots in packages
 - Repository metadata file is now supported in Helm OCI repositories
@@ -269,6 +268,25 @@ describe('ChangelogModal', () => {
       expect(screen.getByText('Pre-release')).toBeInTheDocument();
     });
 
+    it('calls again to getChangelog to render a different version', async () => {
+      const mockChangelog = getMockChangelog('9');
+      mocked(API).getChangelog.mockResolvedValue(mockChangelog);
+
+      const { rerender } = render(<ChangelogModal {...defaultProps} visibleVersion="0.4.0" visibleChangelog />);
+
+      await waitFor(() => {
+        expect(API.getChangelog).toHaveBeenCalledTimes(1);
+      });
+
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+
+      rerender(<ChangelogModal {...defaultProps} currentVersion="0.6.0" visibleChangelog />);
+
+      await waitFor(() => {
+        expect(API.getChangelog).toHaveBeenCalledTimes(2);
+      });
+    });
+
     it('calls getChangelogMD', async () => {
       const mockChangelog = getMockChangelog('11');
       mocked(API).getChangelog.mockResolvedValue(mockChangelog);

diff --git a/web/src/layout/package/changelog/Modal.tsx b/web/src/layout/package/changelog/Modal.tsx
@@ -39,7 +39,7 @@ const ChangelogModal = (props: Props) => {
   const [isGettingMd, setIsGettingMd] = useState<boolean>(false);
 
   const updateVersionInQueryString = (version?: string, index?: number) => {
-    if (index) {
+    if (!isUndefined(index)) {
       updateActiveVersion(index);
     }
     history.replace({
@@ -49,22 +49,26 @@ const ChangelogModal = (props: Props) => {
   };
 
   useEffect(() => {
-    if (props.visibleChangelog && !openStatus && isUndefined(currentPkgId)) {
-      onOpenModal();
+    setActiveVersionIndex(undefined);
+    if (props.visibleChangelog && !isUndefined(currentPkgId)) {
+      getChangelog();
+    } else if (openStatus && !props.visibleChangelog) {
+      onCloseModal(false);
     }
-  }, []); /* eslint-disable-line react-hooks/exhaustive-deps */
+  }, [props.packageId, props.currentVersion]); /* eslint-disable-line react-hooks/exhaustive-deps */
 
   useEffect(() => {
-    if ((openStatus || props.visibleChangelog) && !isUndefined(currentPkgId)) {
-      onCloseModal(true);
+    if (props.visibleChangelog && !openStatus && isUndefined(currentPkgId)) {
+      onOpenModal();
     }
-  }, [props.packageId, props.currentVersion]); /* eslint-disable-line react-hooks/exhaustive-deps */
+  }, []); /* eslint-disable-line react-hooks/exhaustive-deps */
 
   useEffect(() => {
     if (btnsWrapper && btnsWrapper.current && !isUndefined(activeVersionIndex)) {
-      if (!isUndefined(btnsWrapper.current.children[activeVersionIndex])) {
+      const activeChild = btnsWrapper.current.children[activeVersionIndex];
+      if (!isUndefined(activeChild)) {
         // Scroll to active button
-        btnsWrapper.current.children[activeVersionIndex].scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        activeChild.scrollIntoView({ block: 'nearest' });
       }
     }
   }, [activeVersionIndex]); /* eslint-disable-line react-hooks/exhaustive-deps */
@@ -127,6 +131,8 @@ const ChangelogModal = (props: Props) => {
   const onCloseModal = (replaceUrl: boolean) => {
     setOpenStatus(false);
     setActiveVersionIndex(undefined);
+    setIsGettingMd(false);
+    setIsLoading(false);
     setChangelog(undefined);
     if (replaceUrl) {
       history.replace({
@@ -140,7 +146,7 @@ const ChangelogModal = (props: Props) => {
     if (versionIndex !== activeVersionIndex) {
       const element = document.getElementById(`changelog-${versionIndex}`);
       if (element) {
-        element.scrollIntoView({ block: 'start', inline: 'nearest' });
+        element.scrollIntoView({ block: 'start' });
       }
       setActiveVersionIndex(versionIndex);
     }