Merge pull request #7171 from weseek/fix/putback

fix: Putback modal & Replace router.reload to router.push

packages/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -302,14 +302,12 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
         // redirect to NotFound Page
         router.push(path);
       }
-      else {
-        // Do not use "router.push(currentPathname)" to avoid `Error: Invariant: attempted to hard navigate to the same URL`
-        // See: https://github.com/weseek/growi/pull/7061
-        router.reload();
+      else if (currentPathname != null) {
+        router.push(currentPathname);
       }
     };
     openDeleteModal([pageWithMeta], { onDeleted: deletedHandler });
-  }, [openDeleteModal, router]);
+  }, [currentPathname, openDeleteModal, router]);
 
   const switchContentWidthHandler = useCallback(async(pageId: string, value: boolean) => {
     await updateContentWidth(pageId, value);

packages/app/src/components/PageAlert/TrashPageAlert.tsx

@@ -45,7 +45,7 @@ export const TrashPageAlert = (): JSX.Element => {
 
 
   const openPutbackPageModalHandler = useCallback(() => {
-    if (pageId === undefined || pagePath === undefined) {
+    if (pageId == null || pagePath == null) {
       return;
     }
     const putBackedHandler = () => {
@@ -54,9 +54,7 @@ export const TrashPageAlert = (): JSX.Element => {
       }
       try {
         unlink(currentPagePath);
-        // Do not use "router.push(`/${pageId}`)" to avoid `Error: Invariant: attempted to hard navigate to the same URL`
-        // See: https://github.com/weseek/growi/pull/7054
-        router.reload();
+        router.push(`/${pageId}`);
       }
       catch (err) {
         toastError(err);

packages/app/src/components/Sidebar/PageTree/ItemsTree.tsx

@@ -4,6 +4,7 @@ import React, {
 
 import { Nullable } from '@growi/core';
 import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
 import { debounce } from 'throttle-debounce';
 
 import { toastError, toastSuccess } from '~/client/util/apiNotification';
@@ -102,6 +103,7 @@ const ItemsTree = (props: ItemsTreeProps): JSX.Element => {
   } = props;
 
   const { t } = useTranslation();
+  const router = useRouter();
 
   const { data: ancestorsChildrenResult, error: error1 } = useSWRxPageAncestorsChildren(targetPath);
   const { data: rootPageResult, error: error2 } = useSWRxRootPage();
@@ -193,11 +195,12 @@ const ItemsTree = (props: ItemsTreeProps): JSX.Element => {
 
       if (currentPagePath === pathOrPathsToDelete) {
         mutateCurrentPage();
+        router.push(`/trash${pathOrPathsToDelete}`);
       }
     };
 
     openDeleteModal([pageToDelete], { onDeleted: onDeletedHandler });
-  }, [advanceDpl, advanceFts, advancePi, advancePt, currentPagePath, mutateCurrentPage, openDeleteModal, t]);
+  }, [advanceDpl, advanceFts, advancePi, advancePt, currentPagePath, mutateCurrentPage, openDeleteModal, router, t]);
 
   // ***************************  Scroll on init ***************************
   const scrollOnInit = useCallback(() => {

packages/app/src/stores/modal.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { SWRResponse } from 'swr';
 
@@ -222,10 +222,10 @@ type PutBackPageModalUtils = {
 }
 
 export const usePutBackPageModal = (status?: PutBackPageModalStatus): SWRResponse<PutBackPageModalStatus, Error> & PutBackPageModalUtils => {
-  const initialData: PutBackPageModalStatus = {
+  const initialData: PutBackPageModalStatus = useMemo(() => ({
     isOpened: false,
     page: { pageId: '', path: '' },
-  };
+  }), []);
   const swrResponse = useStaticSWR<PutBackPageModalStatus, Error>('putBackPageModalStatus', status, { fallbackData: initialData });
 
   return {