Resolve dependency mobx-react

Use mobx-react-lite

Signed-off-by: Marcin Maj <marcinmajsc@gmail.com>

Author: marcinmajsc

client/src/javascript/components/modals/settings-modal/UITab.tsx

@@ -1,10 +1,9 @@
-import {FC, useRef, useState} from 'react';
+import {FC, useState} from 'react';
 import {Trans, useLingui} from '@lingui/react';
 
 import {Form, FormRow, Select, SelectItem, Radio} from '@client/ui';
 import Languages from '@client/constants/Languages';
 import SettingStore from '@client/stores/SettingStore';
-import ToggleList from '@client/components/general/ToggleList';
 
 import type {Language} from '@client/constants/Languages';
 
@@ -24,9 +23,6 @@ const UITab: FC<UITabProps> = ({onSettingsChange}: UITabProps) => {
   const [torrentListViewSize, setTorrentListViewSize] = useState(SettingStore.floodSettings.torrentListViewSize);
   const [selectedLanguage, setSelectedLanguage] = useState(SettingStore.floodSettings.language);
   const [UITagSelectorMode, setUITagSelectorMode] = useState(SettingStore.floodSettings.UITagSelectorMode);
-  const UITorrentDetailsPanelRef = useRef<FloodSettings['UITorrentDetailsPanel']>(
-    SettingStore.floodSettings.UITorrentDetailsPanel ?? true,
-  );
 
   return (
     <Form
@@ -74,23 +70,6 @@ const UITab: FC<UITabProps> = ({onSettingsChange}: UITabProps) => {
           <Trans id="settings.ui.tag.selector.mode.multi" />
         </Radio>
       </FormRow>
-      <ModalFormSectionHeader>
-        <Trans id="settings.ui.torrent.details" />
-      </ModalFormSectionHeader>
-      <FormRow>
-        <ToggleList
-          items={[
-            {
-              label: 'settings.ui.torrent.details.panel',
-              defaultChecked: UITorrentDetailsPanelRef.current,
-              onClick: () => {
-                UITorrentDetailsPanelRef.current = !UITorrentDetailsPanelRef.current;
-                onSettingsChange({UITorrentDetailsPanel: UITorrentDetailsPanelRef.current});
-              },
-            },
-          ]}
-        />
-      </FormRow>
       <ModalFormSectionHeader>
         <Trans id="settings.ui.torrent.list" />
       </ModalFormSectionHeader>

client/src/javascript/components/modals/settings-modal/lists/MiscUISettingsList.tsx

@@ -22,6 +22,9 @@ const MiscUISettingsList: FC<MiscUISettingsListProps> = ({onSettingsChange}: Mis
   const [filterTagEnabled, setFilterTagEnabled] = useState<FloodSettings['UISidebarFilterTag']>(
     SettingStore.floodSettings.UISidebarFilterTag,
   );
+  const [torrentDetailsPanelEnabled, setTorrentDetailsPanelEnabled] = useState<FloodSettings['UITorrentDetailsPanel']>(
+    SettingStore.floodSettings.UITorrentDetailsPanel ?? true,
+  );
 
   const handlePageTitleSpeedToggle = () => {
     const nextValue = !pageTitleSpeedEnabled;
@@ -43,6 +46,11 @@ const MiscUISettingsList: FC<MiscUISettingsListProps> = ({onSettingsChange}: Mis
     setFilterTagEnabled(nextValue);
     onSettingsChange({UISidebarFilterTag: nextValue});
   };
+  const handleTorrentDetailsPanelToggle = () => {
+    const nextValue = !torrentDetailsPanelEnabled;
+    setTorrentDetailsPanelEnabled(nextValue);
+    onSettingsChange({UITorrentDetailsPanel: nextValue});
+  };
   return (
     <ToggleList
       items={[
@@ -66,6 +74,11 @@ const MiscUISettingsList: FC<MiscUISettingsListProps> = ({onSettingsChange}: Mis
           checked: filterTagEnabled,
           onClick: handleFilterTagToggle,
         },
+        {
+          label: 'settings.ui.torrent.details.panel',
+          checked: torrentDetailsPanelEnabled,
+          onClick: handleTorrentDetailsPanelToggle,
+        },
       ]}
     />
   );

client/src/javascript/components/modals/torrent-details-modal/TorrentContents.tsx

@@ -2,14 +2,14 @@ import classnames from 'classnames';
 import {observer} from 'mobx-react-lite';
 import {FC, useEffect, useState} from 'react';
 import {Trans, useLingui} from '@lingui/react';
+import getTorrentDetailsHash from './getTorrentDetailsHash';
 
 import {Button, Checkbox, Form, FormRow, FormRowItem, Select, SelectItem} from '@client/ui';
 import ConfigStore from '@client/stores/ConfigStore';
 import {Disk} from '@client/ui/icons';
 import selectionTree from '@client/util/selectionTree';
 import TorrentActions from '@client/actions/TorrentActions';
 import TorrentStore from '@client/stores/TorrentStore';
-import UIStore from '@client/stores/UIStore';
 
 import type {TorrentContent, TorrentContentSelection, TorrentContentSelectionTree} from '@shared/types/TorrentContent';
 
@@ -21,8 +21,7 @@ const TorrentContents: FC = observer(() => {
   const [selectedIndices, setSelectedIndices] = useState<number[]>([]);
   const {i18n} = useLingui();
 
-  const torrentHash =
-    UIStore.detailsPanelHash || (UIStore.activeModal?.id === 'torrent-details' ? UIStore.activeModal.hash : null);
+  const torrentHash = getTorrentDetailsHash();
 
   useEffect(() => {
     if (torrentHash) {
@@ -39,7 +38,7 @@ const TorrentContents: FC = observer(() => {
     return null;
   }
 
-  const {hash} = UIStore.activeModal;
+  const hash = torrentHash;
 
   let directoryHeadingIconContent = null;
   let fileDetailContent = null;

client/src/javascript/components/modals/torrent-details-modal/TorrentGeneralInfo.tsx

@@ -1,13 +1,13 @@
 import {FC} from 'react';
 import {observer} from 'mobx-react-lite';
 import {Trans, useLingui} from '@lingui/react';
+import getTorrentDetailsHash from './getTorrentDetailsHash';
 
 import type {TorrentProperties} from '@shared/types/Torrent';
 
 import LinkedText from '../../general/LinkedText';
 import Size from '../../general/Size';
 import TorrentStore from '../../../stores/TorrentStore';
-import UIStore from '../../../stores/UIStore';
 
 const getTags = (tags: TorrentProperties['tags']) =>
   tags.map((tag) => (
@@ -19,8 +19,7 @@ const getTags = (tags: TorrentProperties['tags']) =>
 const TorrentGeneralInfo: FC = observer(() => {
   const {i18n} = useLingui();
 
-  const torrentHash =
-    UIStore.detailsPanelHash || (UIStore.activeModal?.id === 'torrent-details' ? UIStore.activeModal.hash : null);
+  const torrentHash = getTorrentDetailsHash();
   const torrent = torrentHash ? TorrentStore.torrents[torrentHash] : undefined;
 
   if (torrent == null) {

client/src/javascript/components/modals/torrent-details-modal/TorrentHeading.tsx

@@ -3,12 +3,12 @@ import {computed} from 'mobx';
 import {FC, useEffect, useState} from 'react';
 import {observer} from 'mobx-react-lite';
 import {Trans, useLingui} from '@lingui/react';
+import getTorrentDetailsHash from './getTorrentDetailsHash';
 
 import {Clock, DownloadThick, Ratio, Start, Stop, UploadThick} from '@client/ui/icons';
 import TorrentActions from '@client/actions/TorrentActions';
 import {torrentStatusClasses, torrentStatusEffective} from '@client/util/torrentStatus';
 import TorrentStore from '@client/stores/TorrentStore';
-import UIStore from '@client/stores/UIStore';
 
 import Duration from '../../general/Duration';
 import PriorityMeter from '../../general/PriorityMeter';
@@ -17,8 +17,7 @@ import Size from '../../general/Size';
 
 const TorrentHeading: FC = observer(() => {
   const {i18n} = useLingui();
-  const torrentHash =
-    UIStore.detailsPanelHash || (UIStore.activeModal?.id === 'torrent-details' ? UIStore.activeModal.hash : null);
+  const torrentHash = getTorrentDetailsHash();
   const torrent = torrentHash ? TorrentStore.torrents[torrentHash] : undefined;
   const [torrentStatus, setTorrentStatus] = useState<'start' | 'stop'>('stop');
 

client/src/javascript/components/modals/torrent-details-modal/TorrentMediainfo.tsx

@@ -1,11 +1,11 @@
 import axios, {CancelTokenSource} from 'axios';
 import {FC, useEffect, useRef, useState} from 'react';
 import {Trans, useLingui} from '@lingui/react';
+import getTorrentDetailsHash from './getTorrentDetailsHash';
 
 import {Button} from '@client/ui';
 import {Checkmark, Clipboard} from '@client/ui/icons';
 import TorrentActions from '@client/actions/TorrentActions';
-import UIStore from '@client/stores/UIStore';
 
 import Tooltip from '../../general/Tooltip';
 
@@ -18,8 +18,7 @@ const TorrentMediainfo: FC = () => {
   const [isFetchingMediainfo, setIsFetchingMediainfo] = useState<boolean>(true);
   const [isCopiedToClipboard, setIsCopiedToClipboard] = useState<boolean>(false);
 
-  const torrentHash =
-    UIStore.detailsPanelHash || (UIStore.activeModal?.id === 'torrent-details' ? UIStore.activeModal.hash : null);
+  const torrentHash = getTorrentDetailsHash();
 
   useEffect(() => {
     const {current: currentCancelToken} = cancelToken;

client/src/javascript/components/modals/torrent-details-modal/TorrentPeers.tsx

@@ -1,12 +1,12 @@
-import {FC, Suspense, useEffect, useState} from 'react';
+import {FC, Suspense, useCallback, useEffect, useState} from 'react';
 import {Trans} from '@lingui/react';
 import {useInterval} from 'react-use';
+import getTorrentDetailsHash from './getTorrentDetailsHash';
 
 import {css} from '@client/styled-system/css';
 import {CheckmarkThick, CountryFlag, Lock, Spinner} from '@client/ui/icons';
 import ConfigStore from '@client/stores/ConfigStore';
 import TorrentActions from '@client/actions/TorrentActions';
-import UIStore from '@client/stores/UIStore';
 
 import type {TorrentPeer} from '@shared/types/TorrentPeer';
 
@@ -17,10 +17,9 @@ const TorrentPeers: FC = () => {
   const [peers, setPeers] = useState<Array<TorrentPeer>>([]);
   const [pollingDelay, setPollingDelay] = useState<number | null>(null);
 
-  const torrentHash =
-    UIStore.detailsPanelHash || (UIStore.activeModal?.id === 'torrent-details' ? UIStore.activeModal.hash : null);
+  const torrentHash = getTorrentDetailsHash();
 
-  const fetchPeers = () => {
+  const fetchPeers = useCallback(() => {
     setPollingDelay(null);
     if (torrentHash) {
       TorrentActions.fetchTorrentPeers(torrentHash).then((data) => {
@@ -30,9 +29,9 @@ const TorrentPeers: FC = () => {
       });
     }
     setPollingDelay(ConfigStore.pollInterval);
-  };
+  }, [torrentHash]);
 
-  useEffect(() => fetchPeers(), [torrentHash]);
+  useEffect(() => fetchPeers(), [fetchPeers]);
   useInterval(() => fetchPeers(), pollingDelay);
 
   return (

client/src/javascript/components/modals/torrent-details-modal/TorrentTrackers.tsx

@@ -1,17 +1,16 @@
 import {FC, useEffect, useState} from 'react';
 import {Trans} from '@lingui/react';
+import getTorrentDetailsHash from './getTorrentDetailsHash';
 
 import type {TorrentTracker} from '@shared/types/TorrentTracker';
 
 import Badge from '../../general/Badge';
 import TorrentActions from '../../../actions/TorrentActions';
-import UIStore from '../../../stores/UIStore';
 
 const TorrentTrackers: FC = () => {
   const [trackers, setTrackers] = useState<Array<TorrentTracker>>([]);
 
-  const torrentHash =
-    UIStore.detailsPanelHash || (UIStore.activeModal?.id === 'torrent-details' ? UIStore.activeModal.hash : null);
+  const torrentHash = getTorrentDetailsHash();
 
   const trackerCount = trackers.length;
   const trackerTypes = ['http', 'udp', 'dht'];

client/src/javascript/components/modals/torrent-details-modal/getTorrentDetailsHash.ts

@@ -0,0 +1,13 @@
+import UIStore from '@client/stores/UIStore';
+
+const getTorrentDetailsHash = (): string | null => {
+  const {activeModal} = UIStore;
+
+  if (activeModal?.id === 'torrent-details') {
+    return activeModal.hash;
+  }
+
+  return UIStore.detailsPanelHash;
+};
+
+export default getTorrentDetailsHash;

client/src/javascript/components/torrent-details-panel/TorrentDetailsPanel.tsx

@@ -1,8 +1,7 @@
 import {FC, useEffect, useState} from 'react';
-import {observer} from 'mobx-react';
+import {observer} from 'mobx-react-lite';
 import {Trans, useLingui} from '@lingui/react';
 
-import ConfigStore from '@client/stores/ConfigStore';
 import TorrentStore from '@client/stores/TorrentStore';
 import UIStore from '@client/stores/UIStore';
 import SettingStore from '@client/stores/SettingStore';