chore: prevent navigation (#8)

* chore: prevent navigation component with useBlocker and modal * chore: prevent navigation component on bids, grants, and updates, remove usePreventNavigation hook * chore: add navigate to hooks deps * chore: remove unnecessary fragment * chore: internationalization
decentraland · Apr 22, 2024 · 23e0d28 · 23e0d28
1 parent d66329f
commit 23e0d28
Show file tree

Hide file tree

Showing 17 changed files with 67 additions and 105 deletions.
diff --git a/src/components/Layout/ContentLayout.tsx b/src/components/Layout/ContentLayout.tsx
@@ -4,39 +4,31 @@ import classNames from 'classnames'
 import { Back } from 'decentraland-ui/dist/components/Back/Back'
 import { Container } from 'decentraland-ui/dist/components/Container/Container'
 
-import usePreventNavigation from '../../hooks/usePreventNavigation'
-import locations from '../../utils/locations'
-
 import './ContentLayout.css'
+import PreventNavigation from './PreventNavigation.tsx'
 
 type Props = {
   className?: string
   small?: boolean
   children?: React.ReactNode
-  navigateHref?: string
+  navigateBackUrl?: string
   preventNavigation?: boolean
 }
 
-export default function ContentLayout({ navigateHref, className, small, preventNavigation, children }: Props) {
+export default function ContentLayout({ navigateBackUrl, className, small, preventNavigation, children }: Props) {
   const navigate = useNavigate()
-  const handleBack = () => {
-    if (preventNavigation) {
-      window.history.back()
-    } else {
-      navigate(navigateHref || locations.proposals())
-    }
-  }
-
-  usePreventNavigation(!!preventNavigation)
 
   return (
     <Container className={classNames('ContentLayout', className)}>
-      <div className="ContentLayout__Back">
-        <Back onClick={handleBack} />
-      </div>
+      {navigateBackUrl && (
+        <div className="ContentLayout__Back">
+          <Back onClick={() => navigate(navigateBackUrl)} />
+        </div>
+      )}
       <div className={classNames('ContentLayout__Container', small && 'ContentLayout__Container--small')}>
         {children}
       </div>
+      <PreventNavigation preventNavigation={preventNavigation} />
     </Container>
   )
 }

diff --git a/src/components/Layout/PreventNavigation.tsx b/src/components/Layout/PreventNavigation.tsx
@@ -0,0 +1,30 @@
+import { useBlocker } from 'react-router-dom'
+
+import useFormatMessage from '../../hooks/useFormatMessage.ts'
+import ConfirmationModal from '../Modal/ConfirmationModal.tsx'
+
+type Props = { preventNavigation: boolean | undefined }
+
+export default function PreventNavigation({ preventNavigation }: Props) {
+  const t = useFormatMessage()
+
+  const blocker = useBlocker(
+    ({ currentLocation, nextLocation }) => !!preventNavigation && currentLocation.pathname !== nextLocation.pathname
+  )
+
+  return blocker.state === 'blocked' ? (
+    <div>
+      <ConfirmationModal
+        isOpen={true}
+        title={t('navigation.prevent_navigation.title')}
+        description={t('navigation.prevent_navigation.description')}
+        isLoading={false}
+        onPrimaryClick={() => blocker.proceed()}
+        onSecondaryClick={() => blocker.reset()}
+        onClose={() => blocker.reset()}
+        primaryButtonText={t('navigation.prevent_navigation.confirm')}
+        secondaryButtonText={t('navigation.prevent_navigation.cancel')}
+      />
+    </div>
+  ) : null
+}
diff --git a/src/components/Proposal/Submit/ProposalSubmitCatalystPage.tsx b/src/components/Proposal/Submit/ProposalSubmitCatalystPage.tsx
@@ -163,7 +163,7 @@ export default function ProposalSubmitCatalystPage({ catalystType }: Props) {
   }
 
   return (
-    <ContentLayout small preventNavigation={preventNavigation.current}>
+    <ContentLayout small preventNavigation={preventNavigation.current} navigateBackUrl="/submit">
       <Head
         title={title}
         description={description}

diff --git a/src/components/Proposal/Submit/ProposalSubmitHiringPage.tsx b/src/components/Proposal/Submit/ProposalSubmitHiringPage.tsx
@@ -135,7 +135,7 @@ export default function ProposalSubmitHiringPage({ type, committees, isCommittee
   }
 
   return (
-    <ContentLayout small preventNavigation={preventNavigation.current}>
+    <ContentLayout small preventNavigation={preventNavigation.current} navigateBackUrl="/submit">
       <Head
         title={title}
         description={description}

diff --git a/src/components/Proposal/Submit/ProposalSubmitPoiPage.tsx b/src/components/Proposal/Submit/ProposalSubmitPoiPage.tsx
@@ -150,7 +150,7 @@ export default function ProposalSubmitPoiPage({ poiType }: Props) {
   }
 
   return (
-    <ContentLayout small preventNavigation={preventNavigation.current}>
+    <ContentLayout small preventNavigation={preventNavigation.current} navigateBackUrl="/submit">
       <Head
         title={t(`page.submit_poi.${action}.title`)}
         description={t('page.submit_poi.description')}

diff --git a/src/hooks/usePreventNavigation.ts b/src/hooks/usePreventNavigation.ts
diff --git a/src/intl/en.json b/src/intl/en.json
@@ -89,7 +89,12 @@
       "empty": "No notifications at this time",
       "load_more": "Load more"
     },
-    "exit": "Are you sure you want to exit? You will lose the changes you have made."
+    "prevent_navigation": {
+      "title": "Are you sure you want to leave?",
+      "description": "You will lose the changes you have made.",
+      "confirm": "Yes, leave",
+      "cancel": "Cancel"
+    }
   },
   "mobile_login": {
     "exclamation": "Oh oh...",

diff --git a/src/main.tsx b/src/main.tsx
@@ -4,7 +4,7 @@ import 'semantic-ui-css/semantic.min.css'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { IntlProvider } from 'react-intl'
-import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom'
+import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom'
 
 import { QueryClient } from '@tanstack/query-core'
 import { QueryClientProvider } from '@tanstack/react-query'
@@ -98,14 +98,12 @@ const component = (
 
 function LayoutShell() {
   return (
-    <>
       <IntlProvider defaultLocale="en" locale="en" messages={flattenMessages(en)}>
         <SnapshotStatus />
         <Layout>
           <Outlet />
         </Layout>
       </IntlProvider>
-    </>
   )
 }
 

diff --git a/src/pages/submit/ban-name.tsx b/src/pages/submit/ban-name.tsx
@@ -80,7 +80,7 @@ export default function SubmitBanName() {
   }
 
   return (
-    <ContentLayout small preventNavigation={preventNavigation.current}>
+    <ContentLayout small preventNavigation={preventNavigation.current} navigateBackUrl="/submit">
       <Head
         title={t('page.submit_ban_name.title')}
         description={t('page.submit_ban_name.description')}

diff --git a/src/pages/submit/bid.tsx b/src/pages/submit/bid.tsx
@@ -31,11 +31,11 @@ import { ContentSection } from '../../components/Layout/ContentLayout'
 import Head from '../../components/Layout/Head'
 import LoadingView from '../../components/Layout/LoadingView'
 import LogIn from '../../components/Layout/LogIn'
+import PreventNavigation from '../../components/Layout/PreventNavigation.tsx'
 import { BID_MIN_PROJECT_DURATION } from '../../constants/bids'
 import { useAuthContext } from '../../context/AuthProvider'
 import useBidsInfoOnTender from '../../hooks/useBidsInfoOnTender'
 import useFormatMessage from '../../hooks/useFormatMessage'
-import usePreventNavigation from '../../hooks/usePreventNavigation'
 import useProjectRequestSectionNumber from '../../hooks/useProjectRequestSectionNumber'
 import useProposal from '../../hooks/useProposal'
 import useProposalOutcome from '../../hooks/useProposalOutcome'
@@ -123,14 +123,8 @@ export default function SubmitBid() {
     }
   }, [linkedProposalId, patchBidRequest])
 
-  usePreventNavigation(!!preventNavigation.current)
-
   const handleCancel = () => {
-    if (preventNavigation.current) {
-      window.history.back()
-    } else {
-      navigate(locations.submit())
-    }
+    navigate(locations.submit())
   }
 
   const submit = useCallback(async () => {
@@ -314,6 +308,8 @@ export default function SubmitBid() {
           </ContentSection>
         </Container>
       )}
+
+      <PreventNavigation preventNavigation={preventNavigation.current} />
     </div>
   )
 }
diff --git a/src/pages/submit/draft.tsx b/src/pages/submit/draft.tsx
@@ -105,7 +105,7 @@ export default function SubmitDraftProposal() {
   }
 
   return (
-    <ContentLayout small preventNavigation={preventNavigation.current}>
+    <ContentLayout small preventNavigation={preventNavigation.current} navigateBackUrl="/submit">
       <Head
         title={t('page.submit_draft.title')}
         description={t('page.submit_draft.description')}

diff --git a/src/pages/submit/governance.tsx b/src/pages/submit/governance.tsx
@@ -125,7 +125,7 @@ export default function SubmitGovernanceProposal() {
   }
 
   return (
-    <ContentLayout small preventNavigation={preventNavigation.current}>
+    <ContentLayout small preventNavigation={preventNavigation.current} navigateBackUrl="/submit">
       <Head
         title={t('page.submit_governance.title')}
         description={t('page.submit_governance.description')}

diff --git a/src/pages/submit/grant.tsx b/src/pages/submit/grant.tsx
@@ -29,11 +29,11 @@ import { ContentSection } from '../../components/Layout/ContentLayout'
 import Head from '../../components/Layout/Head'
 import LoadingView from '../../components/Layout/LoadingView'
 import LogIn from '../../components/Layout/LogIn'
+import PreventNavigation from '../../components/Layout/PreventNavigation.tsx'
 import CategorySelector from '../../components/Projects/CategorySelector'
 import { SUBMISSION_THRESHOLD_GRANT } from '../../constants/proposals'
 import { useAuthContext } from '../../context/AuthProvider'
 import useFormatMessage from '../../hooks/useFormatMessage'
-import usePreventNavigation from '../../hooks/usePreventNavigation'
 import useProjectRequestSectionNumber from '../../hooks/useProjectRequestSectionNumber'
 import useVotingPowerDistribution from '../../hooks/useVotingPowerDistribution'
 import {
@@ -122,7 +122,7 @@ export default function SubmitGrant() {
         navigate('/submit/grant')
       }
     }
-  }, [])
+  }, [navigate])
 
   const [grantRequest, patchGrantRequest] = useState<GrantRequest>(initialState)
   const [validationState, setValidationState] = useState<GrantRequestValidationState>(initialValidationState)
@@ -141,15 +141,9 @@ export default function SubmitGrant() {
   }, [grantRequest])
 
   const handleCancel = () => {
-    if (preventNavigation.current) {
-      window.history.back()
-    } else {
-      navigate(locations.submit())
-    }
+    navigate(locations.submit())
   }
 
-  usePreventNavigation(!!preventNavigation.current)
-
   if (!isGrantProposalSubmitEnabled(Date.now())) {
     navigate('/submit')
   }
@@ -171,7 +165,7 @@ export default function SubmitGrant() {
           setIsFormDisabled(false)
         })
     }
-  }, [allSectionsValid, grantRequest])
+  }, [allSectionsValid, grantRequest, navigate])
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
@@ -349,6 +343,8 @@ export default function SubmitGrant() {
           </ContentSection>
         </Container>
       )}
+
+      <PreventNavigation preventNavigation={preventNavigation.current} />
     </div>
   )
 }
diff --git a/src/pages/submit/index.tsx b/src/pages/submit/index.tsx
@@ -60,7 +60,7 @@ export default function SubmitPage() {
         description={t('page.submit.description')}
         links={[{ rel: 'canonical', href: locations.submit() }]}
       />
-      <ContentLayout className="ProposalDetailPage">
+      <ContentLayout className="ProposalDetailPage" navigateBackUrl="/submit">
         <ContentSection>
           <Header size="huge">{t('page.submit.title')}</Header>
           <Text size="lg" weight="normal">

diff --git a/src/pages/submit/linked-wearables.tsx b/src/pages/submit/linked-wearables.tsx
@@ -311,7 +311,7 @@ export default function SubmitLinkedWearables() {
   }
 
   return (
-    <ContentLayout small preventNavigation={preventNavigation.current}>
+    <ContentLayout small preventNavigation={preventNavigation.current} navigateBackUrl="/submit">
       <Head
         title={t('page.submit_linked_wearables.title')}
         description={t('page.submit_linked_wearables.description')}

diff --git a/src/pages/submit/update.tsx b/src/pages/submit/update.tsx
@@ -13,14 +13,14 @@ import ContentSection from '../../components/Layout/ContentSection'
 import Head from '../../components/Layout/Head'
 import LoadingView from '../../components/Layout/LoadingView'
 import NotFound from '../../components/Layout/NotFound'
+import PreventNavigation from '../../components/Layout/PreventNavigation.tsx'
 import { EditUpdateModal } from '../../components/Modal/EditUpdateModal/EditUpdateModal'
 import FinancialSection from '../../components/Updates/FinancialSection'
 import GeneralSection from '../../components/Updates/GeneralSection'
 import UpdateMarkdownView from '../../components/Updates/UpdateMarkdownView'
 import { useAuthContext } from '../../context/AuthProvider'
 import useDclFeatureFlags from '../../hooks/useDclFeatureFlags'
 import useFormatMessage from '../../hooks/useFormatMessage'
-import usePreventNavigation from '../../hooks/usePreventNavigation'
 import useProposal from '../../hooks/useProposal'
 import useProposalUpdate from '../../hooks/useProposalUpdate'
 import useProposalUpdates from '../../hooks/useProposalUpdates'
@@ -104,8 +104,6 @@ export default function SubmitUpdatePage({ isEdit }: Props) {
   const { isFeatureFlagEnabled } = useDclFeatureFlags()
   const isAuthDappEnabled = isFeatureFlagEnabled(FeatureFlags.AuthDapp)
 
-  usePreventNavigation(true)
-
   const releases = useMemo(() => (vestingData ? getReleases(vestingData) : undefined), [vestingData])
 
   const handleGeneralSectionValidation = useCallback(
@@ -310,6 +308,7 @@ export default function SubmitUpdatePage({ isEdit }: Props) {
           }
         />
       )}
+      <PreventNavigation preventNavigation={true} />
     </div>
   )
 }
diff --git a/src/pages/update.tsx b/src/pages/update.tsx
@@ -54,7 +54,7 @@ export default function UpdateDetail() {
         description={update?.introduction}
         links={[{ rel: 'canonical', href: locations.update(update.id) }]}
       />
-      <ContentLayout navigateHref={proposalHref} small>
+      <ContentLayout navigateBackUrl={proposalHref} small>
         <ContentSection className="UpdateDetail__Header">
           <span className="UpdateDetail__ProjectTitle">
             {t('page.update_detail.project_title', { title: <Link href={proposalHref}>{proposal?.title}</Link> })}