Move document redirect logic one component up (outline#11917)

* fix: move redirect logic one component up

* fix: use <Redirect>

Author: apoorv-mishra

app/scenes/Document/components/DataLoader.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import type { RouteComponentProps, StaticContext } from "react-router";
-import { useLocation } from "react-router";
+import { Redirect, useLocation } from "react-router";
 import { TeamPreference } from "@shared/types";
 import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
 import { RevisionHelper } from "@shared/utils/RevisionHelper";
@@ -27,7 +27,11 @@ import {
   PaymentRequiredError,
 } from "~/utils/errors";
 import history from "~/utils/history";
-import { matchDocumentEdit, settingsPath } from "~/utils/routeHelpers";
+import {
+  matchDocumentEdit,
+  settingsPath,
+  updateDocumentPath,
+} from "~/utils/routeHelpers";
 import useDocumentSidebar from "../hooks/useDocumentSidebar";
 import Loading from "./Loading";
 import MarkAsViewed from "./MarkAsViewed";
@@ -240,6 +244,21 @@ function DataLoader({ match, children }: Props) {
     );
   }
 
+  // Redirect to the canonical URL if the document slug has changed, e.g.
+  // after a rename, so the browser address bar stays in sync.
+  const canonicalUrl = updateDocumentPath(match.url, document);
+  if (location.pathname !== canonicalUrl) {
+    return (
+      <Redirect
+        to={{
+          pathname: canonicalUrl,
+          state: location.state,
+          hash: location.hash,
+        }}
+      />
+    );
+  }
+
   const canEdit = can.update && !document.isArchived && !revisionId;
   const readOnly = !isEditing || !canEdit;
 

app/scenes/Document/components/Document.tsx

@@ -10,7 +10,7 @@ import * as React from "react";
 import type { WithTranslation } from "react-i18next";
 import { withTranslation } from "react-i18next";
 import type { RouteComponentProps, StaticContext } from "react-router";
-import { Prompt, withRouter, Redirect } from "react-router";
+import { Prompt, withRouter } from "react-router";
 import { toast } from "sonner";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -40,11 +40,7 @@ import type { Editor as TEditor } from "~/editor";
 import type { Properties } from "~/types";
 import { client } from "~/utils/ApiClient";
 import { emojiToUrl } from "~/utils/emoji";
-import {
-  documentHistoryPath,
-  documentEditPath,
-  updateDocumentPath,
-} from "~/utils/routeHelpers";
+import { documentHistoryPath, documentEditPath } from "~/utils/routeHelpers";
 import Container from "./Container";
 import Contents from "./Contents";
 import Editor from "./Editor";
@@ -476,10 +472,6 @@ class DocumentScene extends React.Component<Props> {
     const multiplayerEditor =
       !document.isArchived && !document.isDeleted && !revision && !isShare;
 
-    const canonicalUrl = shareId
-      ? this.props.match.url
-      : updateDocumentPath(this.props.match.url, document);
-
     const hasEmojiInTitle = determineIconType(document.icon) === IconType.Emoji;
     const title = hasEmojiInTitle
       ? document.titleWithDefault.replace(document.icon!, "")
@@ -492,15 +484,6 @@ class DocumentScene extends React.Component<Props> {
 
     return (
       <ErrorBoundary showTitle>
-        {this.props.location.pathname !== canonicalUrl && (
-          <Redirect
-            to={{
-              pathname: canonicalUrl,
-              state: this.props.location.state,
-              hash: this.props.location.hash,
-            }}
-          />
-        )}
         <RegisterKeyDown trigger="m" handler={this.onMove} />
         <RegisterKeyDown trigger="z" handler={this.onUndoRedo} />
         <RegisterKeyDown trigger="e" handler={this.goToEdit} />
@@ -670,10 +653,9 @@ const Main = styled.div<MainProps>`
   @media print {
     display: block;
     max-width: ${({ fullWidth }: MainProps) =>
-    fullWidth
-      ? `100%`
-      : `calc(${EditorStyleHelper.documentWidth} + ${EditorStyleHelper.documentGutter})`
-    };
+      fullWidth
+        ? `100%`
+        : `calc(${EditorStyleHelper.documentWidth} + ${EditorStyleHelper.documentGutter})`};
   }
 `;
 
@@ -722,10 +704,10 @@ const EditorContainer = styled.div<EditorContainerProps>`
 
     // Decides the editor column position & span
     grid-column: ${({
-  docFullWidth,
-  showContents,
-  tocPosition,
-}: EditorContainerProps) =>
+      docFullWidth,
+      showContents,
+      tocPosition,
+    }: EditorContainerProps) =>
       docFullWidth
         ? showContents
           ? tocPosition === TOCPosition.Left