New source found from dndbeyond.com

ddb_main/tools/js/CharacterSheet/containers/CharacterHeaderDesktop/CharacterHeaderDesktop.tsx

@@ -1,6 +1,8 @@
-import React from "react";
+import clsx from "clsx";
+import React, { FC } from "react";
 import { connect, DispatchProp } from "react-redux";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink, useSearchParams } from "react-router-dom";
+import { AnyAction } from "redux";
 
 import { Tooltip } from "@dndbeyond/character-common-components/es";
 import {
@@ -25,15 +27,17 @@ import {
 import { useSidebar } from "~/contexts/Sidebar";
 import { PaneInfo } from "~/contexts/Sidebar/Sidebar";
 import { PaneComponentEnum } from "~/subApps/sheet/components/Sidebar/types";
+import { WatchTourDialog } from "~/subApps/sheet/components/WatchTourDialog/WatchTourDialog";
 
 import { appEnvSelectors } from "../../../Shared/selectors";
 import { GameLogState } from "../../../Shared/stores/typings";
-import WatchTourDialog from "../../components/WatchTourDialog";
 import { sheetAppSelectors } from "../../selectors";
 import { SheetAppState } from "../../typings";
 import CharacterHeaderInfo from "../CharacterHeaderInfo";
 
-interface Props extends DispatchProp {
+// TODO: We are typing with AnyAction here to work around issues with UnknownAction, the type that was introduced in Redux 5.
+// If we decide to modernize to Redux 5, we will need to refactor much of the Rules Engine redux usage.
+interface Props extends DispatchProp<AnyAction> {
   campaign: CampaignDataContract | null;
   builderUrl: string;
   items: Array<Item>;
@@ -45,88 +49,69 @@ interface Props extends DispatchProp {
   paneHistoryStart: PaneInfo["paneHistoryStart"];
 }
 
-class CharacterHeaderDesktop extends React.PureComponent<Props> {
-  constructor(props: Props) {
-    super(props);
-  }
-
-  handleCampaignShow = (): void => {
-    const { paneHistoryStart } = this.props;
+const CharacterHeaderDesktop: FC<Props> = ({
+  paneHistoryStart,
+  items,
+  builderUrl,
+  campaign,
+  preferences,
+  isReadonly,
+  theme,
+  gameLog,
+  status,
+}) => {
+  const [searchParams] = useSearchParams();
+  const isVttView = searchParams.get("view") === "vtt";
+  const handleCampaignShow = (): void => {
     paneHistoryStart(PaneComponentEnum.CAMPAIGN);
   };
-
-  handleShortResetClick = (evt: React.MouseEvent): void => {
-    const { paneHistoryStart } = this.props;
-
+  const handleShortResetClick = (evt: React.MouseEvent): void => {
     evt.stopPropagation();
     evt.nativeEvent.stopImmediatePropagation();
 
     paneHistoryStart(PaneComponentEnum.SHORT_REST);
   };
-
-  handleLongResetClick = (evt: React.MouseEvent): void => {
-    const { paneHistoryStart } = this.props;
-
+  const handleLongResetClick = (evt: React.MouseEvent): void => {
     evt.stopPropagation();
     evt.nativeEvent.stopImmediatePropagation();
 
     paneHistoryStart(PaneComponentEnum.LONG_REST);
   };
-
-  handleShareClick = (evt: React.MouseEvent): void => {
-    const { paneHistoryStart } = this.props;
-
+  const handleShareClick = (evt: React.MouseEvent): void => {
     evt.stopPropagation();
     evt.nativeEvent.stopImmediatePropagation();
 
     paneHistoryStart(PaneComponentEnum.SHARE_URL);
   };
-
-  hasMagicItem = (): boolean => {
-    const { items } = this.props;
-
+  const hasMagicItem = (): boolean => {
     return !!items.find((item) => ItemUtils.isMagic(item));
   };
-
-  renderSideContent = (): React.ReactNode => {
-    const {
-      builderUrl,
-      campaign,
-      preferences,
-      isReadonly,
-      theme,
-      gameLog,
-      status,
-    } = this.props;
-
+  const renderSideContent = (): React.ReactNode => {
     if (isReadonly) {
       if (status === CharacterStatusSlug.PREMADE) {
         return <WatchTourDialog />;
       }
 
-      if (!campaign) {
-        return null;
-      }
-
       return (
         <CampaignSummary
           campaign={campaign}
-          onCampaignShow={this.handleCampaignShow}
+          onCampaignShow={handleCampaignShow}
           gameLog={gameLog}
           theme={theme}
+          isDesktop
         />
       );
     }
 
     return (
-      <React.Fragment>
+      <>
         {preferences !== null &&
           preferences.privacyType ===
             Constants.PreferencePrivacyTypeEnum.PUBLIC && (
             <div className="ct-character-header-desktop__group ct-character-header-desktop__group--share">
               <div
                 className="ct-character-header-desktop__button"
-                onClick={this.handleShareClick}
+                onClick={handleShareClick}
                 role="button"
                 tabIndex={0}
               >
@@ -142,7 +127,7 @@ class CharacterHeaderDesktop extends React.PureComponent<Props> {
         <div className="ct-character-header-desktop__group ct-character-header-desktop__group--short-rest">
           <div
             className="ct-character-header-desktop__button"
-            onClick={this.handleShortResetClick}
+            onClick={handleShortResetClick}
             role="button"
             tabIndex={0}
           >
@@ -156,8 +141,11 @@ class CharacterHeaderDesktop extends React.PureComponent<Props> {
         </div>
         <div className="ct-character-header-desktop__group ct-character-header-desktop__group--long-rest">
           <div
-            className="ct-character-header-desktop__button"
-            onClick={this.handleLongResetClick}
+            className={clsx([
+              "ct-character-header-desktop__button",
+              isVttView && "ct-character-header-desktop__button--vttView",
+            ])}
+            onClick={handleLongResetClick}
             role="button"
             tabIndex={0}
           >
@@ -177,45 +165,46 @@ class CharacterHeaderDesktop extends React.PureComponent<Props> {
         {/*</div>*/}
         {/*</div>*/}
         {/*}*/}
-        {campaign !== null && (
+        {!isVttView && (
           <CampaignSummary
             campaign={campaign}
-            onCampaignShow={this.handleCampaignShow}
+            onCampaignShow={handleCampaignShow}
             gameLog={gameLog}
             theme={theme}
+            isDesktop
           />
         )}
-        <div className="ct-character-header-desktop__group ct-character-header-desktop__group--builder">
-          <Tooltip
-            isDarkMode={theme.isDarkMode}
-            title="Go to builder"
-            className="ct-character-header-desktop__builder"
-          >
-            <RouterLink
-              to={builderUrl}
-              className="ct-character-header-desktop__builder-link"
-              aria-label="Go to builder"
+        {!isVttView && (
+          <div className="ct-character-header-desktop__group ct-character-header-desktop__group--builder">
+            <Tooltip
+              isDarkMode={theme.isDarkMode}
+              title="Go to builder"
+              className="ct-character-header-desktop__builder"
             >
-              <LightBuilderSvg />
-            </RouterLink>
-          </Tooltip>
-        </div>
-      </React.Fragment>
+              <RouterLink
+                to={builderUrl}
+                className="ct-character-header-desktop__builder-link"
+                aria-label="Go to builder"
+              >
+                <LightBuilderSvg />
+              </RouterLink>
+            </Tooltip>
+          </div>
+        )}
+      </>
     );
   };
 
-  render() {
-    return (
-      <div className="ct-character-header-desktop">
-        <div className="ct-character-header-desktop__group ct-character-header-desktop__group-tidbits">
-          <CharacterHeaderInfo />
-        </div>
-        <div className="ct-character-header-desktop__group ct-character-header-desktop__group--gap" />
-        {this.renderSideContent()}
+  return (
+    <div className="ct-character-header-desktop">
+      <div className="ct-character-header-desktop__group ct-character-header-desktop__group-tidbits">
+        <CharacterHeaderInfo />
       </div>
-    );
-  }
-}
+      <div className="ct-character-header-desktop__group ct-character-header-desktop__group--gap" />
+      {renderSideContent()}
+    </div>
+  );
+};
 
 function mapStateToProps(state: SheetAppState) {
   return {