New source found from dndbeyond.com

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

@@ -1,6 +1,7 @@
 import { spring, TransitionMotion } from "@serprex/react-motion";
 import React from "react";
 import { connect, DispatchProp } from "react-redux";
+import { AnyAction } from "redux";
 
 import { ThemeStyles } from "@dndbeyond/character-components/es";
 import {
@@ -20,7 +21,7 @@ import { AppEnvDimensionsState } from "../../../Shared/stores/typings";
 import Subsections from "../../components/Subsections";
 import { DESKTOP_LARGE_COMPONENT_START_WIDTH } from "../../config";
 import { SheetAppState } from "../../typings";
-import BackdropStyles from "../BackdropStyles";
+import { BackdropStyles } from "../BackdropStyles";
 import { CharacterHeaderDesktop } from "../CharacterHeaderDesktop";
 import Combat from "../Combat";
 import PrimaryBox from "../PrimaryBox";
@@ -30,7 +31,9 @@ import SavingThrowsDesktop from "../SavingThrowsDesktop";
 import SensesDesktop from "../SensesDesktop";
 import SkillsDesktop from "../SkillsDesktop";
 
-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> {
   sidebarInfo: SidebarInfo;
   sidebarPosition: SidebarPositionInfo;
   decorationInfo: DecorationInfo;
@@ -64,7 +67,7 @@ class CharacterSheetDesktop extends React.PureComponent<Props, State> {
 
   renderContent = (): React.ReactNode => {
     return (
-      <React.Fragment>
+      <>
         <CharacterHeaderDesktop />
         <QuickInfo />
         <Subsections>
@@ -75,7 +78,7 @@ class CharacterSheetDesktop extends React.PureComponent<Props, State> {
           <Combat />
           <PrimaryBox />
         </Subsections>
-      </React.Fragment>
+      </>
     );
   };
 
@@ -100,22 +103,20 @@ class CharacterSheetDesktop extends React.PureComponent<Props, State> {
           ]}
         >
           {(interpolatedStyles) => (
-            <React.Fragment>
+            <>
               {interpolatedStyles.map((config) => (
-                <>
-                  <Sidebar
-                    key={config.key}
-                    style={{
-                      ...sidebarPosition,
-                      transform: `translateX(${config.style.transform}px)`,
-                    }}
-                    setSwipedAmount={(swipedAmount) =>
-                      this.setState({ swipedAmount })
-                    }
-                  />
-                </>
+                <Sidebar
+                  key={config.key}
+                  style={{
+                    ...sidebarPosition,
+                    transform: `translateX(${config.style.transform}px)`,
+                  }}
+                  setSwipedAmount={(swipedAmount) =>
+                    this.setState({ swipedAmount })
+                  }
+                />
               ))}
-            </React.Fragment>
+            </>
           )}
         </TransitionMotion>
       </div>
@@ -147,13 +148,13 @@ class CharacterSheetDesktop extends React.PureComponent<Props, State> {
     const { decorationInfo } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         {this.renderSheet()}
         <BackdropStyles
           backdrop={DecorationUtils.getBackdropInfo(decorationInfo)}
         />
         <ThemeStyles decorationInfo={decorationInfo} />
-      </React.Fragment>
+      </>
     );
   }
 }