Moving Battle Tactics to their own section (fixes #1534)

package.json

@@ -4,9 +4,9 @@
   "private": true,
   "homepage": "./",
   "dependencies": {
-    "@auth0/auth0-react": "2.1.1",
-    "@reduxjs/toolkit": "1.9.5",
-    "@stripe/react-stripe-js": "2.1.1",
+    "@auth0/auth0-react": "2.2.3",
+    "@reduxjs/toolkit": "1.9.7",
+    "@stripe/react-stripe-js": "2.4.0",
     "@stripe/stripe-js": "1.54.1",
     "bootstrap": "4.6.0",
     "core-js": "3.31.0",
@@ -34,7 +34,7 @@
     "redux": "4.2.1",
     "redux-persist": "6.0.0",
     "sass": "1.32.13",
-    "string.prototype.matchall": "4.0.8",
+    "string.prototype.matchall": "4.0.10",
     "superagent": "7.1.6"
   },
   "scripts": {
@@ -93,13 +93,13 @@
     "@types/pdfjs-dist": "2.7.1",
     "@types/qs": "6.9.7",
     "@types/react": "17.0.43",
-    "@types/react-beautiful-dnd": "13.1.4",
-    "@types/react-copy-to-clipboard": "5.0.4",
+    "@types/react-beautiful-dnd": "13.1.7",
+    "@types/react-copy-to-clipboard": "5.0.7",
     "@types/react-dom": "17.0.14",
     "@types/react-modal": "3.13.1",
-    "@types/react-redux": "7.1.25",
+    "@types/react-redux": "7.1.31",
     "@types/react-router-dom": "5.3.3",
-    "@types/superagent": "4.1.18",
+    "@types/superagent": "4.1.24",
     "@types/webpack-env": "1.16.3",
     "babel-jest": "26.6.3",
     "husky": "4.3.8",
@@ -111,12 +111,16 @@
     "source-map-explorer": "2.5.3",
     "ts-node-dev": "1.1.8",
     "tsconfig-paths": "3.13.0",
-    "typescript": "5.1.3",
+    "typescript": "5.3.2",
     "workbox-core": "6.5.4",
     "workbox-expiration": "6.5.4",
     "workbox-precaching": "6.5.4",
     "workbox-routing": "6.5.4",
     "workbox-strategies": "6.5.4",
     "xlsx": "0.17.5"
+  },
+  "resolutions": { 
+    "typescript": "5.3.2",
+    "@typescript-eslint/parser": "^6.7.5"
   }
 }

src/components/helpers/link.tsx

@@ -11,7 +11,7 @@ interface ILinkProps {
   onClick?: (...args: any[]) => void
 }
 
-export const LinkNewTab: React.FC<ILinkProps> = ({ href, children, label, ...props }) => (
+export const LinkNewTab = ({ href, children, label, ...props }: React.PropsWithChildren<ILinkProps>) => (
   <a href={href} target="_blank" rel="noopener noreferrer" aria-label={label} {...props}>
     {children}
   </a>
@@ -24,7 +24,7 @@ interface ILinkBtnProps {
   text: string
 }
 
-export const LinkButton: React.FC<ILinkBtnProps> = props => {
+export const LinkButton = (props: ILinkBtnProps) => {
   const { Icon, href, btnClass, text } = props
   const { isMobile } = useWindowSize()
 

src/components/helpers/spinner.tsx

@@ -6,7 +6,7 @@ interface ISpinnerProps {
   className?: string
 }
 
-const Spinner: React.FC<ISpinnerProps> = ({ variant = 'dark', size = 'normal', className = '' }) => {
+const Spinner = ({ variant = 'dark', size = 'normal', className = '' }: ISpinnerProps) => {
   const colorClass = {
     light: 'text-light',
     dark: 'text-dark',

src/components/info/banners/notification_banner.tsx

@@ -18,7 +18,7 @@ interface IBannerProps {
  * Can be hidden - will be stored in local storage
  * @param props
  */
-export const NotificationBanner: React.FC<IBannerProps> = props => {
+export const NotificationBanner = (props: React.PropsWithChildren<IBannerProps>) => {
   const {
     children,
     displayOnce = false,

src/components/info/card.tsx

@@ -19,7 +19,7 @@ interface ICardProps extends IBaseCardProps {
   selectionCount: number
 }
 
-const CardComponent: React.FC<ICardProps> = props => {
+const CardComponent = (props: React.PropsWithChildren<ICardProps>) => {
   const { title, isVisible, mobileTitle, children, selectionCount } = props
   const { isMobile } = useWindowSize()
   const { theme } = useTheme()
@@ -85,7 +85,7 @@ interface ICardSingleSelectProps extends IBaseCardProps {
   value?: string | null
 }
 
-export const CardSingleSelect: React.FC<ICardSingleSelectProps> = props => {
+export const CardSingleSelect = (props: ICardSingleSelectProps) => {
   const hiddenSelectors = useSelector(selectors.selectSelectors)
   const { enableLog = false, items, label = null, mobileTitle = null, setValue, title, value = null } = props
   const isVisible = useMemo(() => !hiddenSelectors.find(x => x === title), [hiddenSelectors, title])

src/components/info/reminder.tsx

@@ -34,7 +34,7 @@ interface IReminderProps {
   when: TTurnWhen
 }
 
-export const Reminder: React.FC<IReminderProps> = props => {
+export const Reminder = (props: IReminderProps) => {
   const { actions, isMobile, when, factionRuleSource } = props
   const { loadedArmy, setHasOrderChanges } = useSavedArmies()
   const dispatch = useDispatch()
@@ -267,7 +267,7 @@ const ActionDescription = (props: { text: string }) => {
   )
 }
 
-const RulesSource: React.FC<{ rule_sources: TRuleSource[] }> = ({ rule_sources }) => {
+const RulesSource = ({ rule_sources }: { rule_sources: TRuleSource[] }) => {
   const { isMobile } = useWindowSize()
   const numRuleSources = rule_sources.length
 

src/components/info/visibilityToggle.tsx

@@ -46,7 +46,7 @@ const icons: Record<TVisibilityIconType, { visible: IconType; hidden: IconType }
   },
 }
 
-export const VisibilityToggle: React.FC<IVisibilityToggleProps> = props => {
+export const VisibilityToggle = (props: IVisibilityToggleProps) => {
   const {
     isVisible,
     setVisibility,

src/components/input/generic_button.tsx

@@ -4,7 +4,7 @@ import { centerContentClass } from 'theme/helperClasses'
 
 type ButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
 
-const GenericButton: React.FC<ButtonProps> = ({ children, ...props }) => {
+const GenericButton = ({ children, ...props }: React.PropsWithChildren<ButtonProps>) => {
   const { theme } = useTheme()
 
   return (

src/components/input/importPdf/drop_zone.tsx

@@ -24,7 +24,7 @@ interface IDropzoneProps {
   handleDrop: (army: IImportedArmy) => void
 }
 
-const ImportDropzone: React.FC<IDropzoneProps> = ({ handleDrop }) => {
+const ImportDropzone = ({ handleDrop }: IDropzoneProps) => {
   const { isMobile } = useWindowSize()
   const { isOnline } = useAppStatus()
   const { setLoadedArmy } = useSavedArmies()

src/components/input/importPdf/textarea.tsx

@@ -2,7 +2,7 @@ import { PreferenceApi } from 'api/preferenceApi'
 import GenericButton from 'components/input/generic_button'
 import { useAppStatus } from 'context/useAppStatus'
 import { useTheme } from 'context/useTheme'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { IImportedArmy, TXT_FILE, WARHAMMER_APP } from 'types/import'
 import { logEvent } from 'utils/analytics'
 import { isValidFactionName } from 'utils/armyUtils'
@@ -14,7 +14,7 @@ interface IImportTextAreaProps {
   handleDrop: (army: IImportedArmy) => void
 }
 
-export const ImportTextarea: React.FC<IImportTextAreaProps> = ({ handleDrop }) => {
+export const ImportTextarea = ({ handleDrop }: IImportTextAreaProps) => {
   const { isOnline } = useAppStatus()
   const { isDark } = useTheme()
   const [text, setText] = useState('')

src/components/input/savedArmies/load_army_btn.tsx

@@ -10,7 +10,7 @@ interface ILoadButtonProps {
   army: ISavedArmyFromApi
 }
 
-export const LoadArmyBtn: React.FC<ILoadButtonProps> = ({ army }) => {
+export const LoadArmyBtn = ({ army }: ILoadButtonProps) => {
   const { isOnline } = useAppStatus()
   const { setLoadedArmy } = useSavedArmies()
 

src/components/input/savedArmies/paginate_buttons.tsx

@@ -8,7 +8,7 @@ interface IPaginateButtonsProps {
   setPageNum: (num: number) => void
 }
 
-export const PaginateButtons: React.FC<IPaginateButtonsProps> = props => {
+export const PaginateButtons = (props: IPaginateButtonsProps) => {
   const { pageNum, setPageNum, numPages } = props
 
   if (numPages < 2) return null

src/components/input/savedArmies/save_army_btn.tsx

@@ -13,7 +13,7 @@ interface ISaveArmyProps {
   showSavedArmies: () => void
 }
 
-const SaveArmyBtn: React.FC<ISaveArmyProps> = ({ showSavedArmies }) => {
+const SaveArmyBtn = ({ showSavedArmies }: ISaveArmyProps) => {
   const { isOffline } = useAppStatus()
   const { isAuthenticated } = useAuth0()
   const { isActive } = useSubscription()

src/components/input/savedArmies/saved_army_card.tsx

@@ -16,7 +16,7 @@ interface ISavedArmyCardProps {
   army: ISavedArmyFromApi
 }
 
-export const SavedArmyCard: React.FC<ISavedArmyCardProps> = props => {
+export const SavedArmyCard = (props: ISavedArmyCardProps) => {
   const { army } = props
   const { isOffline } = useAppStatus()
   const { theme } = useTheme()

src/components/input/savedArmies/saved_army_table.tsx

@@ -13,7 +13,7 @@ interface ISavedArmyTable {
   army: ISavedArmyFromApi | ISavedArmy | ICurrentArmy
 }
 
-export const SavedArmyTable: React.FC<ISavedArmyTable> = ({ army }) => {
+export const SavedArmyTable = ({ army }: ISavedArmyTable) => {
   const {
     factionName,
     subFactionName,

src/components/input/savedArmies/show_saved_armies_btn.tsx

@@ -13,11 +13,11 @@ interface IShowSavedArmiesBtn {
   isShowingSavedArmies: boolean
 }
 
-const ShowSavedArmiesBtn: React.FC<IShowSavedArmiesBtn> = ({
+const ShowSavedArmiesBtn = ({
   isShowingSavedArmies,
   showSavedArmies,
   hideSavedArmies,
-}) => {
+}: IShowSavedArmiesBtn) => {
   const { isOnline, isOffline } = useAppStatus()
   const { isAuthenticated } = useAuth0()
   const { isSubscribed } = useSubscription()

src/components/input/toolbar/add_ally_btn.tsx

@@ -6,7 +6,7 @@ interface IAddAllyButton {
   setAllyClick: (e: any) => void
 }
 
-const AddAllyButton: React.FC<IAddAllyButton> = ({ setAllyClick }) => {
+const AddAllyButton = ({ setAllyClick }: IAddAllyButton) => {
   return (
     <GenericButton onClick={setAllyClick}>
       <FaPlus className="mr-2" /> Add Ally

src/components/input/toolbar/import_army_btn.tsx

@@ -14,7 +14,7 @@ interface IImportArmyButtonProps {
   hide: () => void
 }
 
-const ImportArmyButton: React.FC<IImportArmyButtonProps> = props => {
+const ImportArmyButton = (props: IImportArmyButtonProps) => {
   const { show, hide, isShowing, isSubscribed } = props
   const { theme } = useTheme()
 

src/components/modals/download_pdf_modal.tsx

@@ -23,7 +23,7 @@ const getDefaultName = (name: string) => {
   return `${name.trim().split(' ').join('_')}_Reminders`
 }
 
-export const DownloadPDFModal: React.FC<IModalComponentProps> = props => {
+export const DownloadPDFModal = (props: IModalComponentProps) => {
   const { closeModal, modalIsOpen, factionName, pdf } = props
   const { isOnline } = useAppStatus()
   const { loadedArmy } = useSavedArmies()

src/components/modals/generic/generic_destructive_modal.tsx

@@ -23,7 +23,7 @@ interface IModalComponentProps {
  *
  * @param props
  */
-const GenericDestructiveModal: React.FC<IModalComponentProps> = props => {
+const GenericDestructiveModal = (props: React.PropsWithChildren<IModalComponentProps>) => {
   const {
     bodyText = '',
     children,

src/components/modals/generic/generic_modal.tsx

@@ -12,7 +12,7 @@ interface IGenericModalProps {
 
 Modal.setAppElement('#root')
 
-const GenericModal: React.FC<IGenericModalProps> = props => {
+const GenericModal = (props: React.PropsWithChildren<IGenericModalProps>) => {
   const { children, closeModal, isOpen, label, isProcessing = false } = props
   const { isDark } = useTheme()
 

src/components/modals/generic/generic_two_button_modal.tsx

@@ -28,7 +28,7 @@ interface IModalComponentProps {
  *
  * @param props
  */
-const GenericTwoButtonModal: React.FC<IModalComponentProps> = props => {
+const GenericTwoButtonModal = (props: React.PropsWithChildren<IModalComponentProps>) => {
   const { theme } = useTheme()
   const [isProcessing, setIsProcessing] = useState(false)
 

src/components/modals/paypal_cancellation_modal.tsx

@@ -9,8 +9,7 @@ interface IModalComponentProps {
   closeModal: () => void
 }
 
-export const CancelPaypalSubscriptionModal: React.FC<IModalComponentProps> = props => {
-  const { closeModal, modalIsOpen } = props
+export const CancelPaypalSubscriptionModal = ({ closeModal, modalIsOpen }: IModalComponentProps) => {
   const { subscription } = useSubscription()
 
   const handleClick = () => {

src/components/modals/paypal_post_subscribe_modal.tsx

@@ -12,8 +12,7 @@ interface IModalComponentProps {
   closeModal: () => void
 }
 
-export const PaypalPostSubscribeModal: React.FC<IModalComponentProps> = props => {
-  const { closeModal, modalIsOpen } = props
+export const PaypalPostSubscribeModal = ({ closeModal, modalIsOpen }: IModalComponentProps) => {
   const { isActive, subscriptionLoading, getSubscription } = useSubscription()
   const { theme } = useTheme()
 

src/components/modals/save_army_modal.tsx

@@ -19,8 +19,7 @@ interface IModalComponentProps {
   showSavedArmies: () => void
 }
 
-export const SaveArmyModal: React.FC<IModalComponentProps> = props => {
-  const { closeModal, modalIsOpen, showSavedArmies } = props
+export const SaveArmyModal = ({ closeModal, modalIsOpen, showSavedArmies }: IModalComponentProps) => {
   const army = useSelector(selectors.selectCurrentArmy)
   const { relevantNotes } = useGetReminders()
   const hiddenReminders = useSelector(selectors.selectReminders)

src/components/modals/share_army_modal.tsx

@@ -18,7 +18,7 @@ interface IModalComponentProps {
   closeModal: () => void
 }
 
-export const ShareArmyModal: React.FC<IModalComponentProps> = ({ closeModal, modalIsOpen }) => {
+export const ShareArmyModal = ({ closeModal, modalIsOpen }: IModalComponentProps) => {
   const { relevantNotes } = useGetReminders()
   const { saveLink } = useSavedArmies()
   const { theme, isDark } = useTheme()

src/components/modals/stripe_cancellation_modal.tsx

@@ -8,7 +8,7 @@ interface IModalComponentProps {
   closeModal: () => void
 }
 
-export const CancelStripeSubscriptionModal: React.FC<IModalComponentProps> = props => {
+export const CancelStripeSubscriptionModal = (props: IModalComponentProps) => {
   const { closeModal, modalIsOpen } = props
   const { cancelSubscription } = useSubscription()
 

src/components/modals/subscriber_only_modal.tsx

@@ -16,8 +16,7 @@ interface IModalComponentProps {
  * Use this modal when we want to stop non-subscribers from accessing paid functionality
  * @param props
  */
-const SubscriberOnlyModal: React.FC<IModalComponentProps> = props => {
-  const { closeModal, isOpen, featureName } = props
+const SubscriberOnlyModal = ({ closeModal, isOpen, featureName }: IModalComponentProps) => {
   const { theme } = useTheme()
 
   const handleConfirm = () => {

src/components/modals/update_name_modal.tsx

@@ -12,7 +12,7 @@ interface IModalComponentProps {
   id: string
 }
 
-const UpdateArmyNameModal: React.FC<IModalComponentProps> = props => {
+const UpdateArmyNameModal = (props: IModalComponentProps) => {
   const { closeModal, modalIsOpen, currentArmyName, id } = props
   const { updateArmyName } = useSavedArmies()
   const { theme } = useTheme()

src/components/page/contact.tsx

@@ -9,7 +9,7 @@ interface IContactProps {
   size?: 'normal' | 'small' | 'large'
 }
 
-const Contact: React.FC<IContactProps> = ({ size = 'normal' }) => {
+const Contact = ({ size = 'normal' }: IContactProps) => {
   const { isOffline } = useAppStatus()
   const { isDark } = useTheme()
   const btnSize = size === 'small' ? 'btn-sm' : size === 'large' ? 'btn-lg' : ''

src/components/page/homeHeader.tsx

@@ -38,7 +38,7 @@ export const Header = () => {
   )
 }
 
-const Jumbotron: React.FC = () => {
+const Jumbotron = () => {
   const { isGameMode } = useAppStatus()
   const { isMobile } = useWindowSize()
   const { loadedArmy } = useSavedArmies()

src/components/page/navbar_wrapper.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { navbarStyles } from 'theme/helperClasses'
 import useWindowSize from 'utils/hooks/useWindowSize'
 
-const NavbarWrapper: React.FC = ({ children }) => {
+const NavbarWrapper = ({ children }) => {
   const { theme } = useTheme()
   const { isMobile } = useWindowSize()
 

src/components/page/privateRoute.tsx

@@ -1,10 +1,10 @@
 import { withAuthenticationRequired } from '@auth0/auth0-react'
-import React from 'react'
+import { ComponentType } from 'react'
 import { Route } from 'react-router-dom'
 
-type TProps = { component: React.FC; [x: string]: any }
+type TProps = { component: ComponentType; [x: string]: any }
 
-const ProtectedRoute: React.FC<TProps> = ({ component, ...args }) => (
+const ProtectedRoute = ({ component, ...args }: TProps) => (
   <Route component={withAuthenticationRequired(component)} {...args} />
 )