CODEBASE: Refactor code related to in-game documentation link (#2422)

Nice!

src/Documentation/ui/DocumentationRoot.tsx

@@ -84,6 +84,10 @@ export function DocumentationRoot({ docPage }: { docPage?: string }): React.Reac
     setDeepLink(undefined);
   }, [deepLink, history]);
 
+  useEffect(() => {
+    setDeepLink(docPage);
+  }, [docPage]);
+
   useEffect(() => {
     /**
      * Using setTimeout is a workaround. window.scrollTo does not work when we switch from Documentation tab to another

src/GameOptions/ui/RemoteAPIPage.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from "react";
-import { Button, Link, TextField, Tooltip, Typography } from "@mui/material";
+import { Button, TextField, Tooltip, Typography } from "@mui/material";
 import { GameOptionsPage } from "./GameOptionsPage";
 import { isValidConnectionHostname, isValidConnectionPort, Settings } from "../../Settings/Settings";
 import { ConnectionBauble } from "./ConnectionBauble";
 import { isRemoteFileApiConnectionLive, newRemoteFileApiConnection } from "../../RemoteFileAPI/RemoteFileAPI";
 import { OptionSwitch } from "../../ui/React/OptionSwitch";
+import { DocumentationLink } from "../../ui/React/DocumentationLink";
 
 export const RemoteAPIPage = (): React.ReactElement => {
   const [remoteFileApiHostname, setRemoteFileApiHostname] = useState(Settings.RemoteFileApiAddress);
@@ -66,12 +67,7 @@ export const RemoteAPIPage = (): React.ReactElement => {
         text editor and then upload files to the home server.
       </Typography>
       <Typography>
-        <Link
-          href="https://github.com/bitburner-official/bitburner-src/blob/stable/src/Documentation/doc/en/programming/remote_api.md"
-          target="_blank"
-        >
-          Documentation
-        </Link>
+        <DocumentationLink page="programming/remote_api.md">Documentation</DocumentationLink>
       </Typography>
       <ConnectionBauble isConnected={isRemoteFileApiConnectionLive} />
       <Tooltip

src/Go/ui/GoInstructionsPage.tsx

@@ -5,9 +5,8 @@ import { GoOpponent, GoColor } from "@enums";
 import { boardStyles } from "../boardState/goStyles";
 import { boardStateFromSimpleBoard } from "../boardAnalysis/boardAnalysis";
 import { GoTutorialChallenge } from "./GoTutorialChallenge";
-import { Router } from "../../ui/GameRoot";
-import { Page } from "../../ui/Router";
 import { getMaxRep } from "../effects/effect";
+import { DocumentationLink } from "../../ui/React/DocumentationLink";
 
 const captureChallenge = (
   <GoTutorialChallenge
@@ -82,14 +81,9 @@ export const GoInstructionsPage = (): React.ReactElement => {
           subnets are very valuable in the right hands, if you can wrest them from their current owners.
           <br />
           <br />
-          (For details about how to automate with the API, and for a working starter script, visit the IPvGO section of
-          the in-game{" "}
-          <Link
-            style={{ cursor: "pointer" }}
-            onClick={() => Router.toPage(Page.Documentation, { docPage: "programming/go_algorithms.md" })}
-          >
-            Bitburner Documentation)
-          </Link>
+          (For details about how to automate with the API, and for a working starter script, visit the{" "}
+          <DocumentationLink page="programming/go_algorithms.md">IPvGO</DocumentationLink> section of the in-game
+          documentation.)
         </Typography>
         <br />
         <br />
@@ -208,14 +202,9 @@ export const GoInstructionsPage = (): React.ReactElement => {
             <br />
             <br />
             <Typography>
-              * You can place routers and look at the board state via the "ns.go" api. For more details, go to the IPvGO
-              page in the{" "}
-              <Link
-                style={{ cursor: "pointer" }}
-                onClick={() => Router.toPage(Page.Documentation, { docPage: "programming/go_algorithms.md" })}
-              >
-                Bitburner Documentation
-              </Link>
+              * You can place routers and look at the board state via the "ns.go" api. For more details, go to the{" "}
+              <DocumentationLink page="programming/go_algorithms.md">IPvGO</DocumentationLink> page in the documentation
+              tab.
               <br />
               <br />
               * If a network surrounds a single empty node, the opponent can eventually capture it by filling in that

src/Terminal/commands/common/deprecation.tsx

@@ -1,21 +1,16 @@
 import React from "react";
 import { Terminal } from "../../../Terminal";
 import { Settings } from "../../../Settings/Settings";
-import { Link, Typography } from "@mui/material";
-import { Router } from "../../../ui/GameRoot";
-import { Page } from "../../../ui/Router";
+import { Typography } from "@mui/material";
+import { DocumentationLink } from "../../../ui/React/DocumentationLink";
 
 export function sendDeprecationNotice() {
   return Terminal.printRaw(
     <Typography sx={{ color: Settings.theme.error }}>
       Running .script files is unsupported.{" "}
-      <Link
-        style={{ cursor: "pointer" }}
-        color="inherit"
-        onClick={() => Router.toPage(Page.Documentation, { docPage: "migrations/ns2.md" })}
-      >
+      <DocumentationLink page="migrations/ns2.md" color="inherit">
         Here are instructions
-      </Link>{" "}
+      </DocumentationLink>{" "}
       to migrate your scripts to .js files instead.
     </Typography>,
   );

src/ui/React/DocumentationLink.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Link, type LinkProps } from "@mui/material";
+import { Settings } from "../../Settings/Settings";
+import { Router } from "../GameRoot";
+import { Page } from "../Router";
+import { openDocExternally } from "./Documentation";
+
+export function DocumentationLink(
+  props: React.PropsWithChildren<
+    {
+      page: string;
+    } & LinkProps
+  >,
+): React.ReactElement {
+  return (
+    <Link
+      target="_blank"
+      color={Settings.theme.info}
+      onClick={(event) => {
+        if (event.ctrlKey) {
+          openDocExternally(props.page);
+          return;
+        }
+        Router.toPage(Page.Documentation, { docPage: props.page });
+      }}
+      {...props}
+      sx={{ cursor: "pointer", ...props.sx }}
+    >
+      {props.children}
+    </Link>
+  );
+}

src/ui/React/NsApiDocumentationLink.tsx

@@ -1,29 +1,18 @@
 import React from "react";
-import { Link } from "@mui/material";
-import { Settings } from "../../Settings/Settings";
-import { Router } from "../GameRoot";
-import { Page } from "../Router";
-import { defaultNsApiPage, openDocExternally } from "./Documentation";
+import { defaultNsApiPage } from "./Documentation";
+import { DocumentationLink } from "./DocumentationLink";
 
 export function NsApiDocumentationLink(): React.ReactElement {
   return (
-    <Link
-      target="_blank"
-      onClick={(event) => {
-        if (event.ctrlKey) {
-          openDocExternally(defaultNsApiPage);
-          return;
-        }
-        Router.toPage(Page.Documentation, { docPage: defaultNsApiPage });
-      }}
+    <DocumentationLink
+      page={defaultNsApiPage}
       fontSize="1.2rem"
-      color={Settings.theme.info}
       sx={{
         textDecorationThickness: "3px",
         textUnderlineOffset: "5px",
       }}
     >
       NS API documentation
-    </Link>
+    </DocumentationLink>
   );
 }

src/utils/V2Modal.tsx

@@ -1,6 +1,7 @@
 import { Button, Typography } from "@mui/material";
 import React, { useState } from "react";
 import { Modal } from "../ui/React/Modal";
+import { DocumentationLink } from "../ui/React/DocumentationLink";
 
 let v2ModalOpen = false;
 
@@ -20,20 +21,8 @@ export const V2Modal = (): React.ReactElement => {
       </Typography>{" "}
       <Typography>
         You should also take a look at{" "}
-        <a
-          target="_"
-          href="https://github.com/bitburner-official/bitburner-src/blob/stable/src/Documentation/doc/en/migrations/v2.md"
-        >
-          {" "}
-          the migration guide
-        </a>{" "}
-        as well as{" "}
-        <a
-          target="_"
-          href="https://github.com/bitburner-official/bitburner-src/blob/stable/src/Documentation/doc/en/changelog.md"
-        >
-          the changelog
-        </a>
+        <DocumentationLink page="migrations/v2.md">the migration guide</DocumentationLink> as well as{" "}
+        <DocumentationLink page="changelog.md">the changelog</DocumentationLink>.
       </Typography>
       <Button onClick={() => setOpen(false)}>I understand</Button>
     </Modal>