Closing a Callout takes the user to Callout Location (#5461)

* Closing a Callout takes the user to Callout Location

* rename

---------

Co-authored-by: Carlos Cano <[email protected]>

src/domain/shared/utils/useBackToParentPage.ts → src/core/routing/deprecated/useBackToParentPage.ts

@@ -1,6 +1,6 @@
 import { To, useLocation, useNavigate } from 'react-router-dom';
 import { useCallback } from 'react';
-import { LinkWithState } from '../types/LinkWithState';
+import { LinkWithState } from '../../../domain/shared/types/LinkWithState';
 
 const LOCATION_STATE_PARAM_PARENT_PAGE = 'parentPage';
 
@@ -11,15 +11,14 @@ interface Options {
 }
 
 /**
+ * @deprecated - try to start using useBackToPath instead which doesn't require to navigate forward in a special way
  * Returns a tuple of 2 functions:
  * First is a callback that takes a user to the previous page only if the user got to the current page from that parent.
  * Second is a function that produces a link with history item state that holds the info about the parent page.
  * Useful for scenarios when there's a back navigation action, but we really only want to go back when "back" leads
  * to the given "parent" page. E.g. we may not want to go "back" when current page was opened in a new tab.
  * @param parentPageUrl
  */
-
-// TODO: Temporarily simplified to just hold a flag; add some identifier instead
 const useBackToParentPage = (parentPageUrl: string, { keepScroll }: Options = {}): ReturnTuple => {
   const navigate = useNavigate();
   const location = useLocation();

src/core/routing/useBackToPath.ts

@@ -0,0 +1,28 @@
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import useCanGoBack from './useCanGoBack';
+
+/**
+ * Goes back only if the previous history item has the specified URL.
+ * This is based on the native browser history API, so it may not work with all flavors of react-router.
+ */
+const useBackToPath = () => {
+  const navigate = useNavigate();
+  const canGoBack = useCanGoBack();
+
+  return useCallback((parentPagePath: string) => {
+    if (!canGoBack) {
+      navigate(parentPagePath);
+    }
+    const handlePopState = () => {
+      window.removeEventListener('popstate', handlePopState);
+      if (window.location.pathname !== parentPagePath) {
+        navigate(parentPagePath);
+      }
+    };
+    window.addEventListener('popstate', handlePopState);
+    navigate(-1);
+  }, []);
+};
+
+export default useBackToPath;

src/domain/collaboration/CalloutPage/CalloutPage.tsx

@@ -7,15 +7,15 @@ import { AuthorizationPrivilege, CalloutVisibility } from '../../../core/apollo/
 import { useCalloutEdit } from '../callout/edit/useCalloutEdit/useCalloutEdit';
 import { TypedCallout } from '../callout/useCallouts/useCallouts';
 import DialogWithGrid from '../../../core/ui/dialog/DialogWithGrid';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { buildCalloutUrl } from '../../../main/routing/urlBuilders';
-import useCanGoBack from '../../../core/routing/useCanGoBack';
 import { Theme, useMediaQuery } from '@mui/material';
 import { getCalloutDisplayLocationValue } from '../callout/utils/getCalloutDisplayLocationValue';
 import Loading from '../../../core/ui/loading/Loading';
 import { isApolloNotFoundError } from '../../../core/apollo/hooks/useApolloErrorHandler';
 import { NotFoundPageLayout } from '../../journey/common/EntityPageLayout';
 import { Error404 } from '../../../core/pages/Errors/Error404';
+import useBackToPath from '../../../core/routing/useBackToPath';
 
 interface CalloutLocation {
   journeyTypeName: JourneyTypeName;
@@ -75,8 +75,6 @@ const CalloutPage = ({ journeyTypeName, parentRoute, renderPage, children }: Cal
     fetchPolicy: 'cache-first',
   });
 
-  const navigate = useNavigate();
-
   const [callout] =
     (
       calloutData?.space.opportunity?.collaboration ??
@@ -102,7 +100,7 @@ const CalloutPage = ({ journeyTypeName, parentRoute, renderPage, children }: Cal
     } as unknown as TypedCallout;
   }, [callout, locationState]);
 
-  const canGoBack = useCanGoBack();
+  const backOrElse = useBackToPath();
 
   const isSmallScreen = useMediaQuery<Theme>(theme => theme.breakpoints.down('sm'));
 
@@ -129,7 +127,7 @@ const CalloutPage = ({ journeyTypeName, parentRoute, renderPage, children }: Cal
   const parentPagePath = typeof parentRoute === 'function' ? parentRoute(calloutDisplayLocation) : parentRoute;
 
   const handleClose = () => {
-    canGoBack ? navigate(-1) : navigate(parentPagePath);
+    backOrElse(parentPagePath);
   };
 
   const calloutUri = buildCalloutUrl(typedCallout.nameID, {

src/domain/collaboration/post/views/PostRoute.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { JourneyTypeName } from '../../../journey/JourneyTypeName';
-import useBackToParentPage from '../../../shared/utils/useBackToParentPage';
+import useBackToParentPage from '../../../../core/routing/deprecated/useBackToParentPage';
 import PostDashboardPage from '../pages/PostDashboardPage';
 import PostSettingsPage from '../pages/PostSettingsPage';
 import PostSharePage from '../pages/PostSharePage';

src/domain/collaboration/whiteboard/EntityWhiteboardPage/WhiteboardsView.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import WhiteboardsManagementViewWrapper from '../WhiteboardsManagement/WhiteboardsManagementViewWrapper';
-import useBackToParentPage from '../../../shared/utils/useBackToParentPage';
+import useBackToParentPage from '../../../../core/routing/deprecated/useBackToParentPage';
 import { JourneyTypeName } from '../../../journey/JourneyTypeName';
 import { WhiteboardProvider } from '../containers/WhiteboardProvider';
 import { buildWhiteboardUrl, JourneyLocation } from '../../../../main/routing/urlBuilders';

src/domain/journey/challenge/pages/ChallengeAboutPage.tsx

@@ -2,7 +2,7 @@ import React, { FC, useState } from 'react';
 import { useChallenge } from '../hooks/useChallenge';
 import AboutPageContainer from '../../common/AboutPageContainer/AboutPageContainer';
 import ChallengeDashboardPage from './ChallengeDashboardPage';
-import useBackToParentPage from '../../../shared/utils/useBackToParentPage';
+import useBackToParentPage from '../../../../core/routing/deprecated/useBackToParentPage';
 import JourneyAboutDialog from '../../common/JourneyAboutDialog/JourneyAboutDialog';
 import { IconButton } from '@mui/material';
 import { Close } from '@mui/icons-material';

src/domain/journey/challenge/pages/ChallengeDashboardPage.tsx

@@ -3,7 +3,7 @@ import { useResolvedPath } from 'react-router-dom';
 import ChallengePageContainer from '../containers/ChallengePageContainer';
 import ChallengePageLayout from '../layout/ChallengePageLayout';
 import { EntityPageSection } from '../../../shared/layout/EntityPageSection';
-import useBackToParentPage from '../../../shared/utils/useBackToParentPage';
+import useBackToParentPage from '../../../../core/routing/deprecated/useBackToParentPage';
 import CommunityUpdatesDialog from '../../../community/community/CommunityUpdatesDialog/CommunityUpdatesDialog';
 import ContributorsDialog from '../../../community/community/ContributorsDialog/ContributorsDialog';
 import ChallengeContributorsDialogContent from '../../../community/community/entities/ChallengeContributorsDialogContent';

src/domain/journey/opportunity/pages/OpportunityDashboardPage.tsx

@@ -5,7 +5,7 @@ import CommunityUpdatesDialog from '../../../community/community/CommunityUpdate
 import ContributorsDialog from '../../../community/community/ContributorsDialog/ContributorsDialog';
 import OpportunityContributorsDialogContent from '../../../community/community/entities/OpportunityContributorsDialogContent';
 import { EntityPageSection } from '../../../shared/layout/EntityPageSection';
-import useBackToParentPage from '../../../shared/utils/useBackToParentPage';
+import useBackToParentPage from '../../../../core/routing/deprecated/useBackToParentPage';
 import OpportunityPageLayout from '../layout/OpportunityPageLayout';
 import JourneyDashboardView from '../../common/tabs/Dashboard/JourneyDashboardView';
 import { useUrlParams } from '../../../../core/routing/useUrlParams';

src/domain/journey/space/SpaceDashboard/SpaceDashboardPage.tsx

@@ -5,7 +5,7 @@ import CommunityUpdatesDialog from '../../../community/community/CommunityUpdate
 import ContributorsDialog from '../../../community/community/ContributorsDialog/ContributorsDialog';
 import SpaceContributorsDialogContent from '../../../community/community/entities/SpaceContributorsDialogContent';
 import { EntityPageSection } from '../../../shared/layout/EntityPageSection';
-import useBackToParentPage from '../../../shared/utils/useBackToParentPage';
+import useBackToParentPage from '../../../../core/routing/deprecated/useBackToParentPage';
 import SpacePageLayout from '../layout/SpacePageLayout';
 import SpaceDashboardView from './SpaceDashboardView';
 import CalendarDialog from '../../../timeline/calendar/CalendarDialog';

src/domain/platform/admin/space/SpaceTemplatesAdminPage.tsx

@@ -8,7 +8,7 @@ import {
   useInnovationPacksLazyQuery,
 } from '../../../../core/apollo/generated/apollo-hooks';
 import { useParams } from 'react-router-dom';
-import useBackToParentPage from '../../../shared/utils/useBackToParentPage';
+import useBackToParentPage from '../../../../core/routing/deprecated/useBackToParentPage';
 import AdminPostTemplatesSection from '../templates/PostTemplates/AdminPostTemplatesSection';
 import Gutters from '../../../../core/ui/grid/Gutters';
 import AdminInnovationTemplatesSection from '../templates/InnovationTemplates/AdminInnovationTemplatesSection';

src/domain/platform/admin/templates/InnovationPacks/admin/AdminInnovationPackPage.tsx

@@ -9,7 +9,7 @@ import {
 } from '../../../../../../core/apollo/generated/apollo-hooks';
 import { useUrlParams } from '../../../../../../core/routing/useUrlParams';
 import { useNotification } from '../../../../../../core/ui/notifications/useNotification';
-import useBackToParentPage from '../../../../../shared/utils/useBackToParentPage';
+import useBackToParentPage from '../../../../../../core/routing/deprecated/useBackToParentPage';
 import AdminInnovationTemplatesSection from '../../InnovationTemplates/AdminInnovationTemplatesSection';
 import AdminPostTemplatesSection from '../../PostTemplates/AdminPostTemplatesSection';
 import AdminWhiteboardTemplatesSection from '../../WhiteboardTemplates/AdminWhiteboardTemplatesSection';