Convert App to TypeScript

(cherry picked from commit d6d90a64a39d3b9d3a95fb6b265517693a70fdd7)

Closes #10233

frontend/src/App/App.tsx

@@ -1,20 +1,25 @@
-import { ConnectedRouter } from 'connected-react-router';
+import { ConnectedRouter, ConnectedRouterProps } from 'connected-react-router';
-import PropTypes from 'prop-types';
 import React from 'react';
 import DocumentTitle from 'react-document-title';
 import { Provider } from 'react-redux';
+import { Store } from 'redux';
 import PageConnector from 'Components/Page/PageConnector';
 import ApplyTheme from './ApplyTheme';
 import AppRoutes from './AppRoutes';
 
-function App({ store, history }) {
+interface AppProps {
+  store: Store;
+  history: ConnectedRouterProps['history'];
+}
+
+function App({ store, history }: AppProps) {
   return (
     <DocumentTitle title={window.Radarr.instanceName}>
       <Provider store={store}>
         <ConnectedRouter history={history}>
           <ApplyTheme />
           <PageConnector>
-            <AppRoutes app={App} />
+            <AppRoutes />
           </PageConnector>
         </ConnectedRouter>
       </Provider>
@@ -22,9 +27,4 @@ function App({ store, history }) {
   );
 }
 
-App.propTypes = {
-  store: PropTypes.object.isRequired,
-  history: PropTypes.object.isRequired
-};
-
 export default App;

frontend/src/App/AppRoutes.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Redirect, Route } from 'react-router-dom';
 import Blocklist from 'Activity/Blocklist/Blocklist';
@@ -36,141 +35,85 @@ import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
 import CutoffUnmetConnector from 'Wanted/CutoffUnmet/CutoffUnmetConnector';
 import MissingConnector from 'Wanted/Missing/MissingConnector';
 
-function AppRoutes(props) {
+function RedirectWithUrlBase() {
-  const {
+  return <Redirect to={getPathWithUrlBase('/')} />;
-    app
+}
-  } = props;
 
+function AppRoutes() {
   return (
     <Switch>
       {/*
         Movies
       */}
 
-      <Route
+      <Route exact={true} path="/" component={MovieIndex} />
-        exact={true}
-        path="/"
-        component={MovieIndex}
-      />
 
-      {
+      {window.Radarr.urlBase && (
-        window.Radarr.urlBase &&
         <Route
           exact={true}
           path="/"
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
           addUrlBase={false}
-            render={() => {
+          render={RedirectWithUrlBase}
-              return (
-                <Redirect
-                  to={getPathWithUrlBase('/')}
-                  component={app}
         />
-              );
+      )}
-            }}
-          />
-      }
 
-      <Route
+      <Route path="/add/new" component={AddNewMovieConnector} />
-        path="/add/new"
-        component={AddNewMovieConnector}
-      />
 
-      <Route
+      <Route path="/collections" component={CollectionConnector} />
-        path="/collections"
-        component={CollectionConnector}
-      />
 
-      <Route
+      <Route path="/add/import" component={ImportMovies} />
-        path="/add/import"
-        component={ImportMovies}
-      />
 
-      <Route
+      <Route path="/add/discover" component={DiscoverMovieConnector} />
-        path="/add/discover"
-        component={DiscoverMovieConnector}
-      />
 
-      <Route
+      <Route path="/movie/:titleSlug" component={MovieDetailsPageConnector} />
-        path="/movie/:titleSlug"
-        component={MovieDetailsPageConnector}
-      />
 
       {/*
         Calendar
       */}
 
-      <Route
+      <Route path="/calendar" component={CalendarPageConnector} />
-        path="/calendar"
-        component={CalendarPageConnector}
-      />
 
       {/*
         Activity
       */}
 
-      <Route
+      <Route path="/activity/history" component={HistoryConnector} />
-        path="/activity/history"
-        component={HistoryConnector}
-      />
 
-      <Route
+      <Route path="/activity/queue" component={Queue} />
-        path="/activity/queue"
-        component={Queue}
-      />
 
-      <Route
+      <Route path="/activity/blocklist" component={Blocklist} />
-        path="/activity/blocklist"
-        component={Blocklist}
-      />
 
       {/*
         Wanted
       */}
 
-      <Route
+      <Route path="/wanted/missing" component={MissingConnector} />
-        path="/wanted/missing"
-        component={MissingConnector}
-      />
 
-      <Route
+      <Route path="/wanted/cutoffunmet" component={CutoffUnmetConnector} />
-        path="/wanted/cutoffunmet"
-        component={CutoffUnmetConnector}
-      />
 
       {/*
         Settings
       */}
 
-      <Route
+      <Route exact={true} path="/settings" component={Settings} />
-        exact={true}
-        path="/settings"
-        component={Settings}
-      />
 
       <Route
         path="/settings/mediamanagement"
         component={MediaManagementConnector}
       />
 
-      <Route
+      <Route path="/settings/profiles" component={Profiles} />
-        path="/settings/profiles"
-        component={Profiles}
-      />
 
-      <Route
+      <Route path="/settings/quality" component={QualityConnector} />
-        path="/settings/quality"
-        component={QualityConnector}
-      />
 
       <Route
         path="/settings/customformats"
         component={CustomFormatSettingsPage}
       />
 
-      <Route
+      <Route path="/settings/indexers" component={IndexerSettingsConnector} />
-        path="/settings/indexers"
-        component={IndexerSettingsConnector}
-      />
 
       <Route
         path="/settings/downloadclients"
@@ -182,79 +125,39 @@ function AppRoutes(props) {
         component={ImportListSettingsConnector}
       />
 
-      <Route
+      <Route path="/settings/connect" component={NotificationSettings} />
-        path="/settings/connect"
-        component={NotificationSettings}
-      />
 
-      <Route
+      <Route path="/settings/metadata" component={MetadataSettings} />
-        path="/settings/metadata"
-        component={MetadataSettings}
-      />
 
-      <Route
+      <Route path="/settings/tags" component={TagSettings} />
-        path="/settings/tags"
-        component={TagSettings}
-      />
 
-      <Route
+      <Route path="/settings/general" component={GeneralSettingsConnector} />
-        path="/settings/general"
-        component={GeneralSettingsConnector}
-      />
 
-      <Route
+      <Route path="/settings/ui" component={UISettingsConnector} />
-        path="/settings/ui"
-        component={UISettingsConnector}
-      />
 
       {/*
         System
       */}
 
-      <Route
+      <Route path="/system/status" component={Status} />
-        path="/system/status"
-        component={Status}
-      />
 
-      <Route
+      <Route path="/system/tasks" component={Tasks} />
-        path="/system/tasks"
-        component={Tasks}
-      />
 
-      <Route
+      <Route path="/system/backup" component={BackupsConnector} />
-        path="/system/backup"
-        component={BackupsConnector}
-      />
 
-      <Route
+      <Route path="/system/updates" component={Updates} />
-        path="/system/updates"
-        component={Updates}
-      />
 
-      <Route
+      <Route path="/system/events" component={LogsTableConnector} />
-        path="/system/events"
-        component={LogsTableConnector}
-      />
 
-      <Route
+      <Route path="/system/logs/files" component={Logs} />
-        path="/system/logs/files"
-        component={Logs}
-      />
 
       {/*
         Not Found
       */}
 
-      <Route
+      <Route path="*" component={NotFound} />
-        path="*"
-        component={NotFound}
-      />
     </Switch>
   );
 }
 
-AppRoutes.propTypes = {
-  app: PropTypes.func.isRequired
-};
-
 export default AppRoutes;

frontend/src/App/AppUpdatedModal.js

@@ -1,30 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Modal from 'Components/Modal/Modal';
-import AppUpdatedModalContentConnector from './AppUpdatedModalContentConnector';
-
-function AppUpdatedModal(props) {
-  const {
-    isOpen,
-    onModalClose
-  } = props;
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      closeOnBackgroundClick={false}
-      onModalClose={onModalClose}
-    >
-      <AppUpdatedModalContentConnector
-        onModalClose={onModalClose}
-      />
-    </Modal>
-  );
-}
-
-AppUpdatedModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default AppUpdatedModal;

frontend/src/App/AppUpdatedModal.tsx

@@ -0,0 +1,28 @@
+import React, { useCallback } from 'react';
+import Modal from 'Components/Modal/Modal';
+import AppUpdatedModalContent from './AppUpdatedModalContent';
+
+interface AppUpdatedModalProps {
+  isOpen: boolean;
+  onModalClose: (...args: unknown[]) => unknown;
+}
+
+function AppUpdatedModal(props: AppUpdatedModalProps) {
+  const { isOpen, onModalClose } = props;
+
+  const handleModalClose = useCallback(() => {
+    location.reload();
+  }, []);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      closeOnBackgroundClick={false}
+      onModalClose={onModalClose}
+    >
+      <AppUpdatedModalContent onModalClose={handleModalClose} />
+    </Modal>
+  );
+}
+
+export default AppUpdatedModal;

frontend/src/App/AppUpdatedModalConnector.js

@@ -1,12 +0,0 @@
-import { connect } from 'react-redux';
-import AppUpdatedModal from './AppUpdatedModal';
-
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    onModalClose() {
-      location.reload();
-    }
-  };
-}
-
-export default connect(null, createMapDispatchToProps)(AppUpdatedModal);

frontend/src/App/AppUpdatedModalContent.js

@@ -1,139 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Button from 'Components/Link/Button';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
-import ModalBody from 'Components/Modal/ModalBody';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalFooter from 'Components/Modal/ModalFooter';
-import ModalHeader from 'Components/Modal/ModalHeader';
-import { kinds } from 'Helpers/Props';
-import UpdateChanges from 'System/Updates/UpdateChanges';
-import translate from 'Utilities/String/translate';
-import styles from './AppUpdatedModalContent.css';
-
-function mergeUpdates(items, version, prevVersion) {
-  let installedIndex = items.findIndex((u) => u.version === version);
-  let installedPreviouslyIndex = items.findIndex((u) => u.version === prevVersion);
-
-  if (installedIndex === -1) {
-    installedIndex = 0;
-  }
-
-  if (installedPreviouslyIndex === -1) {
-    installedPreviouslyIndex = items.length;
-  } else if (installedPreviouslyIndex === installedIndex && items.length) {
-    installedPreviouslyIndex += 1;
-  }
-
-  const appliedUpdates = items.slice(installedIndex, installedPreviouslyIndex);
-
-  if (!appliedUpdates.length) {
-    return null;
-  }
-
-  const appliedChanges = { new: [], fixed: [] };
-  appliedUpdates.forEach((u) => {
-    if (u.changes) {
-      appliedChanges.new.push(... u.changes.new);
-      appliedChanges.fixed.push(... u.changes.fixed);
-    }
-  });
-
-  const mergedUpdate = Object.assign({}, appliedUpdates[0], { changes: appliedChanges });
-
-  if (!appliedChanges.new.length && !appliedChanges.fixed.length) {
-    mergedUpdate.changes = null;
-  }
-
-  return mergedUpdate;
-}
-
-function AppUpdatedModalContent(props) {
-  const {
-    version,
-    prevVersion,
-    isPopulated,
-    error,
-    items,
-    onSeeChangesPress,
-    onModalClose
-  } = props;
-
-  const update = mergeUpdates(items, version, prevVersion);
-
-  return (
-    <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>
-        {translate('AppUpdated')}
-      </ModalHeader>
-
-      <ModalBody>
-        <div>
-          <InlineMarkdown data={translate('AppUpdatedVersion', { version })} blockClassName={styles.version} />
-        </div>
-
-        {
-          isPopulated && !error && !!update &&
-            <div>
-              {
-                !update.changes &&
-                  <div className={styles.maintenance}>{translate('MaintenanceRelease')}</div>
-              }
-
-              {
-                !!update.changes &&
-                  <div>
-                    <div className={styles.changes}>
-                      {translate('WhatsNew')}
-                    </div>
-
-                    <UpdateChanges
-                      title={translate('New')}
-                      changes={update.changes.new}
-                    />
-
-                    <UpdateChanges
-                      title={translate('Fixed')}
-                      changes={update.changes.fixed}
-                    />
-                  </div>
-              }
-            </div>
-        }
-
-        {
-          !isPopulated && !error &&
-            <LoadingIndicator />
-        }
-      </ModalBody>
-
-      <ModalFooter>
-        <Button
-          onPress={onSeeChangesPress}
-        >
-          {translate('RecentChanges')}
-        </Button>
-
-        <Button
-          kind={kinds.PRIMARY}
-          onPress={onModalClose}
-        >
-          {translate('Reload')}
-        </Button>
-      </ModalFooter>
-    </ModalContent>
-  );
-}
-
-AppUpdatedModalContent.propTypes = {
-  version: PropTypes.string.isRequired,
-  prevVersion: PropTypes.string,
-  isPopulated: PropTypes.bool.isRequired,
-  error: PropTypes.object,
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onSeeChangesPress: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default AppUpdatedModalContent;

frontend/src/App/AppUpdatedModalContent.tsx

@@ -0,0 +1,145 @@
+import React, { useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import Button from 'Components/Link/Button';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import { kinds } from 'Helpers/Props';
+import { fetchUpdates } from 'Store/Actions/systemActions';
+import UpdateChanges from 'System/Updates/UpdateChanges';
+import Update from 'typings/Update';
+import translate from 'Utilities/String/translate';
+import AppState from './State/AppState';
+import styles from './AppUpdatedModalContent.css';
+
+function mergeUpdates(items: Update[], version: string, prevVersion?: string) {
+  let installedIndex = items.findIndex((u) => u.version === version);
+  let installedPreviouslyIndex = items.findIndex(
+    (u) => u.version === prevVersion
+  );
+
+  if (installedIndex === -1) {
+    installedIndex = 0;
+  }
+
+  if (installedPreviouslyIndex === -1) {
+    installedPreviouslyIndex = items.length;
+  } else if (installedPreviouslyIndex === installedIndex && items.length) {
+    installedPreviouslyIndex += 1;
+  }
+
+  const appliedUpdates = items.slice(installedIndex, installedPreviouslyIndex);
+
+  if (!appliedUpdates.length) {
+    return null;
+  }
+
+  const appliedChanges: Update['changes'] = { new: [], fixed: [] };
+
+  appliedUpdates.forEach((u: Update) => {
+    if (u.changes) {
+      appliedChanges.new.push(...u.changes.new);
+      appliedChanges.fixed.push(...u.changes.fixed);
+    }
+  });
+
+  const mergedUpdate: Update = Object.assign({}, appliedUpdates[0], {
+    changes: appliedChanges,
+  });
+
+  if (!appliedChanges.new.length && !appliedChanges.fixed.length) {
+    mergedUpdate.changes = null;
+  }
+
+  return mergedUpdate;
+}
+
+interface AppUpdatedModalContentProps {
+  onModalClose: () => void;
+}
+
+function AppUpdatedModalContent(props: AppUpdatedModalContentProps) {
+  const dispatch = useDispatch();
+  const { version, prevVersion } = useSelector((state: AppState) => state.app);
+  const { isPopulated, error, items } = useSelector(
+    (state: AppState) => state.system.updates
+  );
+  const previousVersion = usePrevious(version);
+
+  const { onModalClose } = props;
+
+  const update = mergeUpdates(items, version, prevVersion);
+
+  const handleSeeChangesPress = useCallback(() => {
+    window.location.href = `${window.Radarr.urlBase}/system/updates`;
+  }, []);
+
+  useEffect(() => {
+    dispatch(fetchUpdates());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (version !== previousVersion) {
+      dispatch(fetchUpdates());
+    }
+  }, [version, previousVersion, dispatch]);
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('AppUpdated')}</ModalHeader>
+
+      <ModalBody>
+        <div>
+          <InlineMarkdown
+            data={translate('AppUpdatedVersion', { version })}
+            blockClassName={styles.version}
+          />
+        </div>
+
+        {isPopulated && !error && !!update ? (
+          <div>
+            {update.changes ? (
+              <div className={styles.maintenance}>
+                {translate('MaintenanceRelease')}
+              </div>
+            ) : null}
+
+            {update.changes ? (
+              <div>
+                <div className={styles.changes}>{translate('WhatsNew')}</div>
+
+                <UpdateChanges
+                  title={translate('New')}
+                  changes={update.changes.new}
+                />
+
+                <UpdateChanges
+                  title={translate('Fixed')}
+                  changes={update.changes.fixed}
+                />
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        {!isPopulated && !error ? <LoadingIndicator /> : null}
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={handleSeeChangesPress}>
+          {translate('RecentChanges')}
+        </Button>
+
+        <Button kind={kinds.PRIMARY} onPress={onModalClose}>
+          {translate('Reload')}
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default AppUpdatedModalContent;

frontend/src/App/AppUpdatedModalContentConnector.js

@@ -1,78 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { fetchUpdates } from 'Store/Actions/systemActions';
-import AppUpdatedModalContent from './AppUpdatedModalContent';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.app.version,
-    (state) => state.app.prevVersion,
-    (state) => state.system.updates,
-    (version, prevVersion, updates) => {
-      const {
-        isPopulated,
-        error,
-        items
-      } = updates;
-
-      return {
-        version,
-        prevVersion,
-        isPopulated,
-        error,
-        items
-      };
-    }
-  );
-}
-
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    dispatchFetchUpdates() {
-      dispatch(fetchUpdates());
-    },
-
-    onSeeChangesPress() {
-      window.location = `${window.Radarr.urlBase}/system/updates`;
-    }
-  };
-}
-
-class AppUpdatedModalContentConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.dispatchFetchUpdates();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.version !== this.props.version) {
-      this.props.dispatchFetchUpdates();
-    }
-  }
-
-  //
-  // Render
-
-  render() {
-    const {
-      dispatchFetchUpdates,
-      ...otherProps
-    } = this.props;
-
-    return (
-      <AppUpdatedModalContent {...otherProps} />
-    );
-  }
-}
-
-AppUpdatedModalContentConnector.propTypes = {
-  version: PropTypes.string.isRequired,
-  dispatchFetchUpdates: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, createMapDispatchToProps)(AppUpdatedModalContentConnector);

frontend/src/App/ConnectionLostModal.tsx

@@ -1,5 +1,4 @@
-import PropTypes from 'prop-types';
+import React, { useCallback } from 'react';
-import React from 'react';
 import Button from 'Components/Link/Button';
 import Modal from 'Components/Modal/Modal';
 import ModalBody from 'Components/Modal/ModalBody';
@@ -10,36 +9,31 @@ import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import styles from './ConnectionLostModal.css';
 
-function ConnectionLostModal(props) {
+interface ConnectionLostModalProps {
-  const {
+  isOpen: boolean;
-    isOpen,
+}
-    onModalClose
+
-  } = props;
+function ConnectionLostModal(props: ConnectionLostModalProps) {
+  const { isOpen } = props;
+
+  const handleModalClose = useCallback(() => {
+    location.reload();
+  }, []);
 
   return (
-    <Modal
+    <Modal isOpen={isOpen} onModalClose={handleModalClose}>
-      isOpen={isOpen}
+      <ModalContent onModalClose={handleModalClose}>
-      onModalClose={onModalClose}
+        <ModalHeader>{translate('ConnectionLost')}</ModalHeader>
-    >
-      <ModalContent onModalClose={onModalClose}>
-        <ModalHeader>
-          {translate('ConnectionLost')}
-        </ModalHeader>
 
         <ModalBody>
-          <div>
+          <div>{translate('ConnectionLostToBackend')}</div>
-            {translate('ConnectionLostToBackend')}
-          </div>
 
           <div className={styles.automatic}>
             {translate('ConnectionLostReconnect')}
           </div>
         </ModalBody>
         <ModalFooter>
-          <Button
+          <Button kind={kinds.PRIMARY} onPress={handleModalClose}>
-            kind={kinds.PRIMARY}
-            onPress={onModalClose}
-          >
             {translate('Reload')}
           </Button>
         </ModalFooter>
@@ -48,9 +42,4 @@ function ConnectionLostModal(props) {
   );
 }
 
-ConnectionLostModal.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
 export default ConnectionLostModal;

frontend/src/App/ConnectionLostModalConnector.js

@@ -1,12 +0,0 @@
-import { connect } from 'react-redux';
-import ConnectionLostModal from './ConnectionLostModal';
-
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    onModalClose() {
-      location.reload();
-    }
-  };
-}
-
-export default connect(undefined, createMapDispatchToProps)(ConnectionLostModal);

frontend/src/App/State/AppState.ts

@@ -50,6 +50,7 @@ export interface AppSectionState {
   isConnected: boolean;
   isReconnecting: boolean;
   version: string;
+  prevVersion?: string;
   dimensions: {
     isSmallScreen: boolean;
     width: number;

frontend/src/Components/Page/Page.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import AppUpdatedModalConnector from 'App/AppUpdatedModalConnector';
+import AppUpdatedModal from 'App/AppUpdatedModal';
 import ColorImpairedContext from 'App/ColorImpairedContext';
-import ConnectionLostModalConnector from 'App/ConnectionLostModalConnector';
+import ConnectionLostModal from 'App/ConnectionLostModal';
 import SignalRConnector from 'Components/SignalRConnector';
 import AuthenticationRequiredModal from 'FirstRun/AuthenticationRequiredModal';
 import locationShape from 'Helpers/Props/Shapes/locationShape';
@@ -102,12 +102,12 @@ class Page extends Component {
             {children}
           </div>
 
-          <AppUpdatedModalConnector
+          <AppUpdatedModal
             isOpen={this.state.isUpdatedModalOpen}
             onModalClose={this.onUpdatedModalClose}
           />
 
-          <ConnectionLostModalConnector
+          <ConnectionLostModal
             isOpen={this.state.isConnectionLostModalOpen}
             onModalClose={this.onConnectionLostModalClose}
           />

package.json

@@ -95,6 +95,7 @@
     "@babel/preset-react": "7.25.7",
     "@babel/preset-typescript": "7.25.7",
     "@types/lodash": "4.14.195",
+    "@types/react-document-title": "2.0.10",
     "@types/react-lazyload": "3.2.3",
     "@types/react-router-dom": "5.3.3",
     "@types/react-text-truncate": "0.19.0",

yarn.lock

@@ -1323,6 +1323,13 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.13.tgz#2af91918ee12d9d32914feb13f5326658461b451"
   integrity sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==
 
+"@types/react-document-title@2.0.10":
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/@types/react-document-title/-/react-document-title-2.0.10.tgz#f9c4563744b735750d84519ba1bc7099e1b2d1d0"
+  integrity sha512-a5RYXFccVqVhc429yXUn9zjJvaQwdx3Kueb8v8pEymUyExHoatHv0iS8BlOE3YuS+csA2pHbL2Hatnp7QEtLxQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@18.2.25":
   version "18.2.25"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.25.tgz#2946a30081f53e7c8d585eb138277245caedc521"