From 73bc640c8e04b63e6e52e305d40ddf75de5dd5f4 Mon Sep 17 00:00:00 2001 From: Jesse Chan Date: Wed, 20 Jan 2021 12:39:44 +0800 Subject: [PATCH] client: move to new React JSX factory styles --- client/config/webpack.config.dev.js | 1 + client/config/webpack.config.prod.js | 1 + client/src/javascript/actions/AuthActions.ts | 5 +-- .../src/javascript/actions/ClientActions.ts | 8 ++--- client/src/javascript/actions/FeedActions.ts | 6 ++-- client/src/javascript/actions/FloodActions.ts | 18 +++++----- .../src/javascript/actions/SettingActions.ts | 8 ++--- .../src/javascript/actions/TorrentActions.ts | 8 ++--- client/src/javascript/actions/UIActions.ts | 4 +-- client/src/javascript/app.tsx | 18 +++++----- .../javascript/components/auth/AuthForm.tsx | 11 +++--- .../components/general/SortableList.tsx | 8 ++--- .../javascript/components/general/Tooltip.tsx | 10 +++--- .../ClientConnectionSettingsForm.tsx | 12 +++---- .../QBittorrentConnectionSettingsForm.tsx | 6 ++-- .../RTorrentConnectionSettingsForm.tsx | 6 ++-- .../TransmissionConnectionSettingsForm.tsx | 6 ++-- .../general/filesystem/DirectoryFileList.tsx | 6 ++-- .../general/filesystem/FilesystemBrowser.tsx | 8 ++--- .../modals/settings-modal/BandwidthTab.tsx | 4 +-- .../modals/settings-modal/SettingsTab.tsx | 6 ++-- .../modals/settings-modal/UITab.tsx | 4 +-- .../lists/TorrentListColumnsList.tsx | 8 ++--- .../components/sidebar/SearchBox.tsx | 8 ++--- .../views/TorrentClientOverview.tsx | 36 ------------------- client/src/javascript/i18n/languages.tsx | 17 ++++----- .../{components/views => routes}/Login.tsx | 4 +-- .../{components/views => routes}/Register.tsx | 4 +-- .../routes/TorrentClientOverview.tsx | 36 +++++++++++++++++++ client/src/javascript/stores/AuthStore.ts | 4 +-- client/src/javascript/stores/TorrentStore.ts | 9 ++--- client/src/javascript/stores/UIStore.ts | 2 +- .../src/javascript/ui/components/Button.tsx | 26 +++++++------- .../ui/components/ContextMenuItem.tsx | 6 ++-- client/src/javascript/ui/components/Form.tsx | 12 +++---- .../javascript/ui/components/FormGroup.tsx | 6 ++-- .../javascript/ui/components/FormRowGroup.tsx | 6 ++-- .../javascript/ui/components/FormRowItem.tsx | 6 ++-- .../src/javascript/ui/components/Portal.tsx | 6 ++-- client/src/javascript/util/detectLocale.ts | 4 +-- client/src/javascript/util/history.ts | 3 +- client/src/javascript/util/selectTorrents.ts | 4 +-- .../util/torrentListCellContents.tsx | 12 +++---- .../javascript/util/torrentPropertyIcons.tsx | 30 ++++++++-------- .../javascript/util/torrentStatusIcons.tsx | 8 ++--- client/src/javascript/util/userPreferences.ts | 6 ++-- tsconfig.json | 4 ++- 47 files changed, 218 insertions(+), 213 deletions(-) delete mode 100644 client/src/javascript/components/views/TorrentClientOverview.tsx rename client/src/javascript/{components/views => routes}/Login.tsx (58%) rename client/src/javascript/{components/views => routes}/Register.tsx (58%) create mode 100644 client/src/javascript/routes/TorrentClientOverview.tsx diff --git a/client/config/webpack.config.dev.js b/client/config/webpack.config.dev.js index 8cd5e659..5a8cc436 100644 --- a/client/config/webpack.config.dev.js +++ b/client/config/webpack.config.dev.js @@ -93,6 +93,7 @@ module.exports = { resolve: { extensions: ['.cjs', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.json'], alias: { + '@client': path.resolve('./client/src/javascript'), '@shared': path.resolve('./shared'), }, }, diff --git a/client/config/webpack.config.prod.js b/client/config/webpack.config.prod.js index 167e4063..9e6dc820 100644 --- a/client/config/webpack.config.prod.js +++ b/client/config/webpack.config.prod.js @@ -112,6 +112,7 @@ module.exports = { extensions: ['.cjs', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.json'], alias: { 'react-intl': 'react-intl/react-intl-no-parser.umd.min.js', + '@client': path.resolve('./client/src/javascript'), '@shared': path.resolve('./shared'), }, }, diff --git a/client/src/javascript/actions/AuthActions.ts b/client/src/javascript/actions/AuthActions.ts index 5efcaf76..f29ce82e 100644 --- a/client/src/javascript/actions/AuthActions.ts +++ b/client/src/javascript/actions/AuthActions.ts @@ -1,5 +1,8 @@ import axios, {AxiosError, AxiosResponse} from 'axios'; +import AuthStore from '@client/stores/AuthStore'; +import ConfigStore from '@client/stores/ConfigStore'; + import type { AuthAuthenticationOptions, AuthRegistrationOptions, @@ -8,9 +11,7 @@ import type { } from '@shared/schema/api/auth'; import type {Credentials} from '@shared/schema/Auth'; -import AuthStore from '../stores/AuthStore'; import ClientActions from './ClientActions'; -import ConfigStore from '../stores/ConfigStore'; import FloodActions from './FloodActions'; import SettingActions from './SettingActions'; diff --git a/client/src/javascript/actions/ClientActions.ts b/client/src/javascript/actions/ClientActions.ts index d5aaca74..c4348f86 100644 --- a/client/src/javascript/actions/ClientActions.ts +++ b/client/src/javascript/actions/ClientActions.ts @@ -1,12 +1,12 @@ import axios from 'axios'; +import ConfigStore from '@client/stores/ConfigStore'; +import SettingStore from '@client/stores/SettingStore'; +import AlertStore from '@client/stores/AlertStore'; + import type {ClientSetting, ClientSettings} from '@shared/types/ClientSettings'; import type {SetClientSettingsOptions} from '@shared/types/api/client'; -import ConfigStore from '../stores/ConfigStore'; -import SettingStore from '../stores/SettingStore'; -import AlertStore from '../stores/AlertStore'; - const {baseURI} = ConfigStore; const ClientActions = { diff --git a/client/src/javascript/actions/FeedActions.ts b/client/src/javascript/actions/FeedActions.ts index cd810f76..6a0d95bb 100644 --- a/client/src/javascript/actions/FeedActions.ts +++ b/client/src/javascript/actions/FeedActions.ts @@ -1,9 +1,9 @@ import axios from 'axios'; -import type {AddFeedOptions, AddRuleOptions, ModifyFeedOptions} from '@shared/types/api/feed-monitor'; +import ConfigStore from '@client/stores/ConfigStore'; +import FeedStore from '@client/stores/FeedStore'; -import ConfigStore from '../stores/ConfigStore'; -import FeedStore from '../stores/FeedStore'; +import type {AddFeedOptions, AddRuleOptions, ModifyFeedOptions} from '@shared/types/api/feed-monitor'; const {baseURI} = ConfigStore; diff --git a/client/src/javascript/actions/FloodActions.ts b/client/src/javascript/actions/FloodActions.ts index ea500ef1..cc2d7881 100644 --- a/client/src/javascript/actions/FloodActions.ts +++ b/client/src/javascript/actions/FloodActions.ts @@ -1,18 +1,18 @@ import axios from 'axios'; +import ClientStatusStore from '@client/stores/ClientStatusStore'; +import ConfigStore from '@client/stores/ConfigStore'; +import DiskUsageStore from '@client/stores/DiskUsageStore'; +import NotificationStore from '@client/stores/NotificationStore'; +import TorrentFilterStore from '@client/stores/TorrentFilterStore'; +import TorrentStore from '@client/stores/TorrentStore'; +import TransferDataStore from '@client/stores/TransferDataStore'; +import UIStore from '@client/stores/UIStore'; + import type {HistorySnapshot} from '@shared/constants/historySnapshotTypes'; import type {NotificationFetchOptions} from '@shared/types/Notification'; import type {ServerEvents} from '@shared/types/ServerEvents'; -import ClientStatusStore from '../stores/ClientStatusStore'; -import ConfigStore from '../stores/ConfigStore'; -import DiskUsageStore from '../stores/DiskUsageStore'; -import NotificationStore from '../stores/NotificationStore'; -import TorrentFilterStore from '../stores/TorrentFilterStore'; -import TorrentStore from '../stores/TorrentStore'; -import TransferDataStore from '../stores/TransferDataStore'; -import UIStore from '../stores/UIStore'; - interface ActivityStreamOptions { historySnapshot: HistorySnapshot; } diff --git a/client/src/javascript/actions/SettingActions.ts b/client/src/javascript/actions/SettingActions.ts index 20dd8c3e..1d82e2f0 100644 --- a/client/src/javascript/actions/SettingActions.ts +++ b/client/src/javascript/actions/SettingActions.ts @@ -1,12 +1,12 @@ import axios from 'axios'; +import AlertStore from '@client/stores/AlertStore'; +import ConfigStore from '@client/stores/ConfigStore'; +import SettingStore from '@client/stores/SettingStore'; + import type {FloodSetting, FloodSettings} from '@shared/types/FloodSettings'; import type {SetFloodSettingsOptions} from '@shared/types/api/index'; -import AlertStore from '../stores/AlertStore'; -import ConfigStore from '../stores/ConfigStore'; -import SettingStore from '../stores/SettingStore'; - const {baseURI} = ConfigStore; const SettingActions = { diff --git a/client/src/javascript/actions/TorrentActions.ts b/client/src/javascript/actions/TorrentActions.ts index 00e7d607..6570b1f4 100644 --- a/client/src/javascript/actions/TorrentActions.ts +++ b/client/src/javascript/actions/TorrentActions.ts @@ -1,6 +1,10 @@ import axios, {CancelToken} from 'axios'; import download from 'js-file-download'; +import AlertStore from '@client/stores/AlertStore'; +import ConfigStore from '@client/stores/ConfigStore'; +import UIStore from '@client/stores/UIStore'; + import type { AddTorrentByFileOptions, AddTorrentByURLOptions, @@ -24,10 +28,6 @@ import type {TorrentPeer} from '@shared/types/TorrentPeer'; import type {TorrentTracker} from '@shared/types/TorrentTracker'; import type {TorrentProperties} from '@shared/types/Torrent'; -import AlertStore from '../stores/AlertStore'; -import ConfigStore from '../stores/ConfigStore'; -import UIStore from '../stores/UIStore'; - const {baseURI} = ConfigStore; const emitTorrentAddedAlert = (count: number) => { diff --git a/client/src/javascript/actions/UIActions.ts b/client/src/javascript/actions/UIActions.ts index 5a5acc44..5169d749 100644 --- a/client/src/javascript/actions/UIActions.ts +++ b/client/src/javascript/actions/UIActions.ts @@ -1,5 +1,5 @@ import debounce from 'lodash/debounce'; -import * as React from 'react'; +import {MouseEvent, TouchEvent} from 'react'; import type {TorrentStatus} from '@shared/constants/torrentStatusMap'; @@ -30,7 +30,7 @@ const UIActions = { UIStore.dismissModal(); }, - handleTorrentClick: (data: {event: React.MouseEvent | React.TouchEvent; hash: string}) => { + handleTorrentClick: (data: {event: MouseEvent | TouchEvent; hash: string}) => { TorrentStore.setSelectedTorrents(data); }, diff --git a/client/src/javascript/app.tsx b/client/src/javascript/app.tsx index 4bd8be80..6d5e1cb4 100644 --- a/client/src/javascript/app.tsx +++ b/client/src/javascript/app.tsx @@ -1,25 +1,25 @@ import {observer} from 'mobx-react'; -import {QueryParamProvider} from 'use-query-params'; import {FC, lazy, Suspense, useEffect} from 'react'; -import {Router} from 'react-router-dom'; -import {Route, Switch} from 'react-router'; import ReactDOM from 'react-dom'; +import {Route, Switch} from 'react-router'; +import {Router} from 'react-router-dom'; import {useMedia} from 'react-use'; +import {QueryParamProvider} from 'use-query-params'; -import AsyncIntlProvider from './i18n/languages'; -import AppWrapper from './components/AppWrapper'; import AuthActions from './actions/AuthActions'; -import history from './util/history'; +import AppWrapper from './components/AppWrapper'; import LoadingOverlay from './components/general/LoadingOverlay'; +import AsyncIntlProvider from './i18n/languages'; import ConfigStore from './stores/ConfigStore'; import SettingStore from './stores/SettingStore'; import UIStore from './stores/UIStore'; +import history from './util/history'; import '../sass/style.scss'; -const Login = lazy(() => import(/* webpackPrefetch: true */ './components/views/Login')); -const Register = lazy(() => import(/* webpackPrefetch: true */ './components/views/Register')); -const TorrentClientOverview = lazy(() => import(/* webpackPreload: true */ './components/views/TorrentClientOverview')); +const Login = lazy(() => import(/* webpackPrefetch: true */ './routes/Login')); +const Register = lazy(() => import(/* webpackPrefetch: true */ './routes/Register')); +const TorrentClientOverview = lazy(() => import(/* webpackPreload: true */ './routes/TorrentClientOverview')); const FloodApp: FC = observer(() => { useEffect(() => { diff --git a/client/src/javascript/components/auth/AuthForm.tsx b/client/src/javascript/components/auth/AuthForm.tsx index c849296e..872ac784 100644 --- a/client/src/javascript/components/auth/AuthForm.tsx +++ b/client/src/javascript/components/auth/AuthForm.tsx @@ -1,5 +1,5 @@ +import {Component, createRef, FormEvent, RefObject} from 'react'; import {injectIntl, WrappedComponentProps} from 'react-intl'; -import * as React from 'react'; import {AccessLevel} from '@shared/schema/constants/Auth'; @@ -24,9 +24,9 @@ interface AuthFormStates { errorMessage?: string; } -class AuthForm extends React.Component { +class AuthForm extends Component { formRef?: Form | null; - settingsFormRef: React.RefObject = React.createRef(); + settingsFormRef: RefObject = createRef(); constructor(props: AuthFormProps) { super(props); @@ -63,10 +63,7 @@ class AuthForm extends React.Component { }); } - handleFormSubmit = (submission: { - event: Event | React.FormEvent; - formData: Record; - }) => { + handleFormSubmit = (submission: {event: Event | FormEvent; formData: Record}) => { submission.event.preventDefault(); this.setState({isSubmitting: true}); diff --git a/client/src/javascript/components/general/SortableList.tsx b/client/src/javascript/components/general/SortableList.tsx index a10b5f76..4d0ba36c 100644 --- a/client/src/javascript/components/general/SortableList.tsx +++ b/client/src/javascript/components/general/SortableList.tsx @@ -1,8 +1,8 @@ import classnames from 'classnames'; +import {Component, MouseEvent} from 'react'; import {DndProvider} from 'react-dnd-multi-backend'; import HTML5toTouch from 'react-dnd-multi-backend/dist/esm/HTML5toTouch'; import {injectIntl, WrappedComponentProps} from 'react-intl'; -import * as React from 'react'; import SortableListItem from './SortableListItem'; @@ -18,7 +18,7 @@ interface SortableListProps extends WrappedComponentProps { items: Array; isDraggable?: boolean; renderItem: (item: ListItem, index: number) => void; - onMouseDown?: (event: React.MouseEvent) => void; + onMouseDown?: (event: MouseEvent) => void; onMove?: (items: this['items']) => void; onDrop?: (items: this['items']) => void; } @@ -27,7 +27,7 @@ interface SortableListStates { items: SortableListProps['items']; } -class SortableList extends React.Component { +class SortableList extends Component { sortableListRef: HTMLUListElement | null = null; constructor(props: SortableListProps) { @@ -77,7 +77,7 @@ class SortableList extends React.Component) => { + handleMouseDown = (event: MouseEvent) => { const {onMouseDown} = this.props; if (onMouseDown) { onMouseDown(event); diff --git a/client/src/javascript/components/general/Tooltip.tsx b/client/src/javascript/components/general/Tooltip.tsx index 9ab6c286..243318f9 100644 --- a/client/src/javascript/components/general/Tooltip.tsx +++ b/client/src/javascript/components/general/Tooltip.tsx @@ -1,6 +1,6 @@ +import {Component, CSSProperties, ReactNode} from 'react'; import classnames from 'classnames'; import ReactDOM from 'react-dom'; -import * as React from 'react'; type Align = 'start' | 'center' | 'end'; @@ -29,7 +29,7 @@ interface TooltipProps { className?: string; contentClassName?: string; wrapperClassName?: string; - content: React.ReactNode; + content: ReactNode; onOpen: () => void; onClose: () => void; onClick: () => void; @@ -139,7 +139,7 @@ const getAnchor = ( const ARROW_SIZE = 7; -class Tooltip extends React.Component { +class Tooltip extends Component { container = window; triggerNode: HTMLDivElement | null = null; tooltipNode: HTMLDivElement | null = null; @@ -342,7 +342,7 @@ class Tooltip extends React.Component { } } - render(): React.ReactNode { + render(): ReactNode { const { anchor: defaultAnchor, position: defaultPosition, @@ -359,7 +359,7 @@ class Tooltip extends React.Component { onClick, } = this.props; const {anchor: stateAnchor, position: statePosition, coordinates, isOpen} = this.state; - let tooltipStyle: React.CSSProperties = {}; + let tooltipStyle: CSSProperties = {}; // Get the anchor and position from state if possible. If not, get it from // the props. diff --git a/client/src/javascript/components/general/connection-settings/ClientConnectionSettingsForm.tsx b/client/src/javascript/components/general/connection-settings/ClientConnectionSettingsForm.tsx index f8922480..4f46a09e 100644 --- a/client/src/javascript/components/general/connection-settings/ClientConnectionSettingsForm.tsx +++ b/client/src/javascript/components/general/connection-settings/ClientConnectionSettingsForm.tsx @@ -1,5 +1,5 @@ +import {Component, createRef, ReactNode, ReactNodeArray, RefObject} from 'react'; import {FormattedMessage, injectIntl, WrappedComponentProps} from 'react-intl'; -import * as React from 'react'; import {SUPPORTED_CLIENTS} from '@shared/schema/constants/ClientConnectionSettings'; @@ -12,7 +12,7 @@ import {FormRow, Select, SelectItem} from '../../../ui'; const DEFAULT_SELECTION: ClientConnectionSettings['client'] = 'rTorrent' as const; -const getClientSelectItems = (): React.ReactNodeArray => +const getClientSelectItems = (): ReactNodeArray => SUPPORTED_CLIENTS.map((client) => ( @@ -28,8 +28,8 @@ interface ClientConnectionSettingsFormStates { client: ClientConnectionSettings['client']; } -class ClientConnectionSettingsForm extends React.Component { - settingsRef: React.RefObject = React.createRef(); +class ClientConnectionSettingsForm extends Component { + settingsRef: RefObject = createRef(); constructor(props: WrappedComponentProps) { super(props); @@ -40,7 +40,7 @@ class ClientConnectionSettingsForm extends React.Component; + const settingsForm = this.settingsRef as RefObject; if (settingsForm.current == null) { return null; @@ -53,7 +53,7 @@ class ClientConnectionSettingsForm extends React.Component; diff --git a/client/src/javascript/components/general/connection-settings/QBittorrentConnectionSettingsForm.tsx b/client/src/javascript/components/general/connection-settings/QBittorrentConnectionSettingsForm.tsx index 7004e9e5..8e2b67de 100644 --- a/client/src/javascript/components/general/connection-settings/QBittorrentConnectionSettingsForm.tsx +++ b/client/src/javascript/components/general/connection-settings/QBittorrentConnectionSettingsForm.tsx @@ -1,5 +1,5 @@ +import {Component, ChangeEvent, MouseEvent} from 'react'; import {FormattedMessage, IntlShape} from 'react-intl'; -import * as React from 'react'; import type {QBittorrentConnectionSettings} from '@shared/schema/ClientConnectionSettings'; @@ -15,7 +15,7 @@ export interface QBittorrentConnectionSettingsFormData { password: string; } -class QBittorrentConnectionSettingsForm extends React.Component< +class QBittorrentConnectionSettingsForm extends Component< QBittorrentConnectionSettingsProps, QBittorrentConnectionSettingsFormData > { @@ -47,7 +47,7 @@ class QBittorrentConnectionSettingsForm extends React.Component< }; handleFormChange = ( - event: React.MouseEvent | KeyboardEvent | React.ChangeEvent, + event: MouseEvent | KeyboardEvent | ChangeEvent, field: keyof QBittorrentConnectionSettingsFormData, ): void => { const inputElement = event.target as HTMLInputElement; diff --git a/client/src/javascript/components/general/connection-settings/RTorrentConnectionSettingsForm.tsx b/client/src/javascript/components/general/connection-settings/RTorrentConnectionSettingsForm.tsx index 5cb291ec..04e0b2a4 100644 --- a/client/src/javascript/components/general/connection-settings/RTorrentConnectionSettingsForm.tsx +++ b/client/src/javascript/components/general/connection-settings/RTorrentConnectionSettingsForm.tsx @@ -1,5 +1,5 @@ +import {Component, ChangeEvent, MouseEvent} from 'react'; import {FormattedMessage, IntlShape} from 'react-intl'; -import * as React from 'react'; import type { RTorrentConnectionSettings, @@ -20,7 +20,7 @@ export interface RTorrentConnectionSettingsFormData { port?: string; } -class RTorrentConnectionSettingsForm extends React.Component< +class RTorrentConnectionSettingsForm extends Component< RTorrentConnectionSettingsProps, RTorrentConnectionSettingsFormData > { @@ -67,7 +67,7 @@ class RTorrentConnectionSettingsForm extends React.Component< }; handleFormChange = ( - event: React.MouseEvent | KeyboardEvent | React.ChangeEvent, + event: MouseEvent | KeyboardEvent | ChangeEvent, field: keyof RTorrentConnectionSettingsFormData, ) => { const inputElement = event.target as HTMLInputElement; diff --git a/client/src/javascript/components/general/connection-settings/TransmissionConnectionSettingsForm.tsx b/client/src/javascript/components/general/connection-settings/TransmissionConnectionSettingsForm.tsx index 54c331fc..34eae345 100644 --- a/client/src/javascript/components/general/connection-settings/TransmissionConnectionSettingsForm.tsx +++ b/client/src/javascript/components/general/connection-settings/TransmissionConnectionSettingsForm.tsx @@ -1,5 +1,5 @@ +import {Component, ChangeEvent, MouseEvent} from 'react'; import {FormattedMessage, IntlShape} from 'react-intl'; -import * as React from 'react'; import type {TransmissionConnectionSettings} from '@shared/schema/ClientConnectionSettings'; @@ -15,7 +15,7 @@ export interface TransmissionConnectionSettingsFormData { password: string; } -class TransmissionConnectionSettingsForm extends React.Component< +class TransmissionConnectionSettingsForm extends Component< TransmissionConnectionSettingsProps, TransmissionConnectionSettingsFormData > { @@ -47,7 +47,7 @@ class TransmissionConnectionSettingsForm extends React.Component< }; handleFormChange = ( - event: React.MouseEvent | KeyboardEvent | React.ChangeEvent, + event: MouseEvent | KeyboardEvent | ChangeEvent, field: keyof TransmissionConnectionSettingsFormData, ): void => { const inputElement = event.target as HTMLInputElement; diff --git a/client/src/javascript/components/general/filesystem/DirectoryFileList.tsx b/client/src/javascript/components/general/filesystem/DirectoryFileList.tsx index f44c4985..4bc781c9 100644 --- a/client/src/javascript/components/general/filesystem/DirectoryFileList.tsx +++ b/client/src/javascript/components/general/filesystem/DirectoryFileList.tsx @@ -1,5 +1,5 @@ import classnames from 'classnames'; -import * as React from 'react'; +import {Component, ReactText} from 'react'; import type {TorrentContent, TorrentContentSelection, TorrentContentSelectionTree} from '@shared/types/TorrentContent'; import type {TorrentProperties} from '@shared/types/Torrent'; @@ -19,7 +19,7 @@ interface DirectoryFilesProps { onItemSelect: (selection: TorrentContentSelection) => void; } -class DirectoryFiles extends React.Component { +class DirectoryFiles extends Component { static defaultProps = { path: [], items: {}, @@ -48,7 +48,7 @@ class DirectoryFiles extends React.Component { ); } - handlePriorityChange = (fileIndex: React.ReactText, priorityLevel: number): void => { + handlePriorityChange = (fileIndex: ReactText, priorityLevel: number): void => { const {hash} = this.props; TorrentActions.setFilePriority(hash, { diff --git a/client/src/javascript/components/general/filesystem/FilesystemBrowser.tsx b/client/src/javascript/components/general/filesystem/FilesystemBrowser.tsx index ac9e8d00..57723f02 100644 --- a/client/src/javascript/components/general/filesystem/FilesystemBrowser.tsx +++ b/client/src/javascript/components/general/filesystem/FilesystemBrowser.tsx @@ -1,5 +1,5 @@ import {defineMessages, WrappedComponentProps} from 'react-intl'; -import * as React from 'react'; +import {PureComponent, ReactNodeArray} from 'react'; import ArrowIcon from '../../icons/ArrowIcon'; import File from '../../icons/File'; @@ -37,7 +37,7 @@ interface FilesystemBrowserStates { files?: Array; } -class FilesystemBrowser extends React.PureComponent { +class FilesystemBrowser extends PureComponent { constructor(props: FilesystemBrowserProps) { super(props); @@ -150,7 +150,7 @@ class FilesystemBrowser extends React.PureComponent (
  • (
  • ; + event: Event | FormEvent; formData: Record; }) => { const inputElement = event.target as HTMLInputElement; diff --git a/client/src/javascript/components/modals/settings-modal/SettingsTab.tsx b/client/src/javascript/components/modals/settings-modal/SettingsTab.tsx index de5ed651..12cbc69e 100644 --- a/client/src/javascript/components/modals/settings-modal/SettingsTab.tsx +++ b/client/src/javascript/components/modals/settings-modal/SettingsTab.tsx @@ -1,5 +1,5 @@ +import {Component, FormEvent} from 'react'; import {WrappedComponentProps} from 'react-intl'; -import * as React from 'react'; import type {ClientSetting, ClientSettings} from '@shared/types/ClientSettings'; import type {FloodSettings} from '@shared/types/FloodSettings'; @@ -15,7 +15,7 @@ interface SettingsTabStates { changedClientSettings: Partial; } -class SettingsTab extends React.Component { +class SettingsTab extends Component { constructor(props: SettingsTabProps) { super(props); @@ -32,7 +32,7 @@ class SettingsTab extends React.Component { return SettingStore.clientSettings?.[property]; } - handleClientSettingChange(event: React.FormEvent | Event) { + handleClientSettingChange(event: FormEvent | Event) { const inputElement = event.target as HTMLInputElement; const property = inputElement.name as ClientSetting; const {value, type, checked} = inputElement; diff --git a/client/src/javascript/components/modals/settings-modal/UITab.tsx b/client/src/javascript/components/modals/settings-modal/UITab.tsx index e8f6e3c5..b36adae0 100644 --- a/client/src/javascript/components/modals/settings-modal/UITab.tsx +++ b/client/src/javascript/components/modals/settings-modal/UITab.tsx @@ -1,5 +1,5 @@ import {FormattedMessage, injectIntl} from 'react-intl'; -import * as React from 'react'; +import {FormEvent} from 'react'; import type {FloodSettings} from '@shared/types/FloodSettings'; @@ -34,7 +34,7 @@ class UITab extends SettingsTab { event, formData, }: { - event: Event | React.FormEvent; + event: Event | FormEvent; formData: Record; }) => { const inputElement = event.target as HTMLInputElement; diff --git a/client/src/javascript/components/modals/settings-modal/lists/TorrentListColumnsList.tsx b/client/src/javascript/components/modals/settings-modal/lists/TorrentListColumnsList.tsx index 3e1ee481..b5450e8e 100644 --- a/client/src/javascript/components/modals/settings-modal/lists/TorrentListColumnsList.tsx +++ b/client/src/javascript/components/modals/settings-modal/lists/TorrentListColumnsList.tsx @@ -1,5 +1,5 @@ +import {Component, ReactNode} from 'react'; import {FormattedMessage} from 'react-intl'; -import * as React from 'react'; import type {FloodSettings} from '@shared/types/FloodSettings'; @@ -22,7 +22,7 @@ interface TorrentListColumnsListStates { torrentListColumns: FloodSettings['torrentListColumns']; } -class TorrentListColumnsList extends React.Component { +class TorrentListColumnsList extends Component { tooltipRef: Tooltip | null = null; constructor(props: TorrentListColumnsListProps) { @@ -82,7 +82,7 @@ class TorrentListColumnsList extends React.Component { + renderItem = (item: ListItem, index: number): ReactNode => { const {id, visible} = item as FloodSettings['torrentListColumns'][number]; let checkbox = null; let warning = null; @@ -135,7 +135,7 @@ class TorrentListColumnsList extends React.Component { +class SearchBox extends Component { constructor(props: WrappedComponentProps) { super(props); @@ -32,7 +32,7 @@ class SearchBox extends React.Component }; } - handleSearchChange = (event: React.ChangeEvent) => { + handleSearchChange = (event: ChangeEvent) => { const {value} = event.target; this.setState({isSearchActive: value !== ''}); UIActions.setTorrentsSearchFilter(value); diff --git a/client/src/javascript/components/views/TorrentClientOverview.tsx b/client/src/javascript/components/views/TorrentClientOverview.tsx deleted file mode 100644 index 311e383b..00000000 --- a/client/src/javascript/components/views/TorrentClientOverview.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import {FC, lazy, useEffect} from 'react'; - -import ActionBar from '../torrent-list/ActionBar'; -import ApplicationContent from '../layout/ApplicationContent'; -import ApplicationPanel from '../layout/ApplicationPanel'; -import ApplicationView from '../layout/ApplicationView'; -import FloodActions from '../../actions/FloodActions'; -import Sidebar from '../sidebar/Sidebar'; -import TorrentList from '../torrent-list/TorrentList'; - -import 'overlayscrollbars/css/OverlayScrollbars.css'; - -const Alerts = lazy(() => import('../alerts/Alerts')); -const Modals = lazy(() => import('../modals/Modals')); - -const TorrentClientOverview: FC = () => { - useEffect(() => { - FloodActions.startActivityStream(); - }, []); - - return ( - - - - - - - - - - - - ); -}; - -export default TorrentClientOverview; diff --git a/client/src/javascript/i18n/languages.tsx b/client/src/javascript/i18n/languages.tsx index c0255cc7..a463f004 100644 --- a/client/src/javascript/i18n/languages.tsx +++ b/client/src/javascript/i18n/languages.tsx @@ -1,14 +1,15 @@ +import {FC, ReactNode} from 'react'; import {IntlProvider} from 'react-intl'; -import * as React from 'react'; import type {MessageFormatElement} from 'intl-messageformat-parser'; -import detectLocale from '../util/detectLocale'; -import EN from './strings.compiled.json'; -import Languages from '../constants/Languages'; +import detectLocale from '@client/util/detectLocale'; +import Languages from '@client/constants/Languages'; -import type {Language} from '../constants/Languages'; -import type {LocaleConfig} from '../util/detectLocale'; +import type {Language} from '@client/constants/Languages'; +import type {LocaleConfig} from '@client/util/detectLocale'; + +import EN from './strings.compiled.json'; const messagesCache: Partial, Record>> = {en: EN}; @@ -47,10 +48,10 @@ function getMessages(locale: Exclude) { interface AsyncIntlProviderProps { language?: Language; - children: React.ReactNode; + children: ReactNode; } -const AsyncIntlProvider: React.FC = ({language, children}: AsyncIntlProviderProps) => { +const AsyncIntlProvider: FC = ({language, children}: AsyncIntlProviderProps) => { let validatedLocale: LocaleConfig; if (language == null || language === 'auto' || !Object.prototype.hasOwnProperty.call(Languages, language)) { validatedLocale = detectLocale(); diff --git a/client/src/javascript/components/views/Login.tsx b/client/src/javascript/routes/Login.tsx similarity index 58% rename from client/src/javascript/components/views/Login.tsx rename to client/src/javascript/routes/Login.tsx index 8c5d905a..32c699a8 100644 --- a/client/src/javascript/components/views/Login.tsx +++ b/client/src/javascript/routes/Login.tsx @@ -1,7 +1,7 @@ import {FC} from 'react'; -import ApplicationView from '../layout/ApplicationView'; -import AuthForm from '../auth/AuthForm'; +import ApplicationView from '@client/components/layout/ApplicationView'; +import AuthForm from '@client/components/auth/AuthForm'; const LoginView: FC = () => ( diff --git a/client/src/javascript/components/views/Register.tsx b/client/src/javascript/routes/Register.tsx similarity index 58% rename from client/src/javascript/components/views/Register.tsx rename to client/src/javascript/routes/Register.tsx index 1381633b..593e1bcd 100644 --- a/client/src/javascript/components/views/Register.tsx +++ b/client/src/javascript/routes/Register.tsx @@ -1,7 +1,7 @@ import {FC} from 'react'; -import ApplicationView from '../layout/ApplicationView'; -import AuthForm from '../auth/AuthForm'; +import AuthForm from '@client/components/auth/AuthForm'; +import ApplicationView from '@client/components/layout/ApplicationView'; const LoginView: FC = () => ( diff --git a/client/src/javascript/routes/TorrentClientOverview.tsx b/client/src/javascript/routes/TorrentClientOverview.tsx new file mode 100644 index 00000000..83b99da2 --- /dev/null +++ b/client/src/javascript/routes/TorrentClientOverview.tsx @@ -0,0 +1,36 @@ +import {FC, lazy, useEffect} from 'react'; + +import ActionBar from '@client/components/torrent-list/ActionBar'; +import ApplicationContent from '@client/components/layout/ApplicationContent'; +import ApplicationPanel from '@client/components/layout/ApplicationPanel'; +import ApplicationView from '@client/components/layout/ApplicationView'; +import FloodActions from '@client/actions/FloodActions'; +import Sidebar from '@client/components/sidebar/Sidebar'; +import TorrentList from '@client/components/torrent-list/TorrentList'; + +import 'overlayscrollbars/css/OverlayScrollbars.css'; + +const Alerts = lazy(() => import('@client/components/alerts/Alerts')); +const Modals = lazy(() => import('@client/components/modals/Modals')); + +const TorrentClientOverview: FC = () => { + useEffect(() => { + FloodActions.startActivityStream(); + }, []); + + return ( + + + + + + + + + + + + ); +}; + +export default TorrentClientOverview; diff --git a/client/src/javascript/stores/AuthStore.ts b/client/src/javascript/stores/AuthStore.ts index 31eef40f..555543c0 100644 --- a/client/src/javascript/stores/AuthStore.ts +++ b/client/src/javascript/stores/AuthStore.ts @@ -1,12 +1,12 @@ import {makeAutoObservable} from 'mobx'; +import FloodActions from '@client/actions/FloodActions'; + import {AccessLevel} from '@shared/schema/constants/Auth'; import type {AuthAuthenticationResponse, AuthVerificationResponse} from '@shared/schema/api/auth'; import type {Credentials} from '@shared/schema/Auth'; -import FloodActions from '../actions/FloodActions'; - class AuthStore { isAuthenticating = false; isAuthenticated = false; diff --git a/client/src/javascript/stores/TorrentStore.ts b/client/src/javascript/stores/TorrentStore.ts index 90931428..5b21b318 100644 --- a/client/src/javascript/stores/TorrentStore.ts +++ b/client/src/javascript/stores/TorrentStore.ts @@ -1,13 +1,14 @@ import {applyPatch, Operation} from 'fast-json-patch'; import {computed, makeAutoObservable} from 'mobx'; +import filterTorrents from '@client/util/filterTorrents'; +import searchTorrents from '@client/util/searchTorrents'; +import selectTorrents from '@client/util/selectTorrents'; +import sortTorrents from '@client/util/sortTorrents'; + import type {TorrentProperties, TorrentList} from '@shared/types/Torrent'; -import filterTorrents from '../util/filterTorrents'; -import searchTorrents from '../util/searchTorrents'; -import selectTorrents from '../util/selectTorrents'; import SettingStore from './SettingStore'; -import sortTorrents from '../util/sortTorrents'; import TorrentFilterStore from './TorrentFilterStore'; class TorrentStore { diff --git a/client/src/javascript/stores/UIStore.ts b/client/src/javascript/stores/UIStore.ts index 1fb09ba7..922b2574 100644 --- a/client/src/javascript/stores/UIStore.ts +++ b/client/src/javascript/stores/UIStore.ts @@ -1,7 +1,7 @@ import {makeAutoObservable} from 'mobx'; import {FC, MouseEvent} from 'react'; -import type {TorrentContextMenuAction} from '../constants/TorrentContextMenuActions'; +import type {TorrentContextMenuAction} from '@client/constants/TorrentContextMenuActions'; export type ContextMenuItem = | { diff --git a/client/src/javascript/ui/components/Button.tsx b/client/src/javascript/ui/components/Button.tsx index 84f8af78..0322e14e 100644 --- a/client/src/javascript/ui/components/Button.tsx +++ b/client/src/javascript/ui/components/Button.tsx @@ -1,13 +1,13 @@ +import {ButtonHTMLAttributes, Children, cloneElement, Component, FC, ReactElement, ReactNodeArray, Ref} from 'react'; import classnames from 'classnames'; -import * as React from 'react'; import FadeIn from './FadeIn'; import FormElementAddon from './FormElementAddon'; import FormRowItem from './FormRowItem'; import LoadingRing from '../icons/LoadingRing'; -export type ButtonProps = Pick, 'disabled' | 'onClick' | 'onChange'> & { - buttonRef?: React.Ref; +export type ButtonProps = Pick, 'disabled' | 'onClick' | 'onChange'> & { + buttonRef?: Ref; isLoading?: boolean; additionalClassNames?: string; labelOffset?: boolean; @@ -16,13 +16,13 @@ export type ButtonProps = Pick, 'd type?: 'submit' | 'button'; wrap?: boolean; - wrapper?: string | React.FunctionComponent; + wrapper?: string | FC; wrapperProps?: Record; grow?: boolean; shrink?: boolean; }; -export default class Button extends React.Component { +export default class Button extends Component { static defaultProps = { additionalClassNames: '', disabled: false, @@ -38,18 +38,18 @@ export default class Button extends React.Component { getButtonContent() { const {children, addonPlacement} = this.props; - const buttonContent = React.Children.toArray(children).reduce( + const buttonContent = Children.toArray(children).reduce( ( accumulator: { - addonNodes: Array; - childNodes: Array; + addonNodes: ReactNodeArray; + childNodes: ReactNodeArray; }, child, ) => { - const childAsElement = child as React.ReactElement; + const childAsElement = child as ReactElement; if (childAsElement.type === FormElementAddon) { accumulator.addonNodes.push( - React.cloneElement(childAsElement, { + cloneElement(childAsElement, { addonPlacement, key: childAsElement.props.className, }), @@ -78,8 +78,8 @@ export default class Button extends React.Component { doesButtonContainIcon() { const {children} = this.props; - return React.Children.toArray(children).some((child) => { - const childAsElement = child as React.ReactElement; + return Children.toArray(children).some((child) => { + const childAsElement = child as ReactElement; return childAsElement.type === FormElementAddon; }); } @@ -129,7 +129,7 @@ export default class Button extends React.Component { ); if (wrap) { - const WrapperComponent = wrapper as React.FunctionComponent; + const WrapperComponent = wrapper as FC; return ( ; + onClick: MouseEventHandler; }> { render() { const {onClick, children, className} = this.props; diff --git a/client/src/javascript/ui/components/Form.tsx b/client/src/javascript/ui/components/Form.tsx index 54087ce8..25005384 100644 --- a/client/src/javascript/ui/components/Form.tsx +++ b/client/src/javascript/ui/components/Form.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import {Component, FormEvent} from 'react'; import {getDataFromForm, resetFormData} from './util/forms'; @@ -8,19 +8,19 @@ interface FormProps { event, formData, }: { - event: Event | React.FormEvent; + event: Event | FormEvent; formData: Record; }) => void; onSubmit?: ({ event, formData, }: { - event: Event | React.FormEvent; + event: Event | FormEvent; formData: Record; }) => void; } -class Form extends React.Component { +class Form extends Component { formRef?: HTMLFormElement | null = null; componentDidMount() { if (this.formRef != null) { @@ -47,14 +47,14 @@ class Form extends React.Component { } }; - handleFormChange = (event: Event | React.FormEvent) => { + handleFormChange = (event: Event | FormEvent) => { if (this.formRef != null && this.props.onChange) { const formData = getDataFromForm(this.formRef); this.props.onChange({event, formData}); } }; - handleFormSubmit = (event: Event | React.FormEvent) => { + handleFormSubmit = (event: Event | FormEvent) => { event.preventDefault(); if (this.props.onSubmit) { diff --git a/client/src/javascript/ui/components/FormGroup.tsx b/client/src/javascript/ui/components/FormGroup.tsx index e35681f2..1234cc46 100644 --- a/client/src/javascript/ui/components/FormGroup.tsx +++ b/client/src/javascript/ui/components/FormGroup.tsx @@ -1,14 +1,14 @@ -import * as React from 'react'; +import {Component, ReactNode} from 'react'; import FormRowItem from './FormRowItem'; import type {FormRowItemProps} from './FormRowItem'; -export default class FormRowItemGroup extends React.Component<{ +export default class FormRowItemGroup extends Component<{ label?: string; width?: FormRowItemProps['width']; }> { - getLabel(): React.ReactNode { + getLabel(): ReactNode { const {label} = this.props; if (label) { diff --git a/client/src/javascript/ui/components/FormRowGroup.tsx b/client/src/javascript/ui/components/FormRowGroup.tsx index 425796d1..ad5738d2 100644 --- a/client/src/javascript/ui/components/FormRowGroup.tsx +++ b/client/src/javascript/ui/components/FormRowGroup.tsx @@ -1,10 +1,10 @@ -import * as React from 'react'; +import {forwardRef, ReactNode} from 'react'; interface FormRowGroupProps { - children: React.ReactNode; + children: ReactNode; } -const FormRowGroup = React.forwardRef(({children}: FormRowGroupProps, ref) => ( +const FormRowGroup = forwardRef(({children}: FormRowGroupProps, ref) => (
    {children}
    diff --git a/client/src/javascript/ui/components/FormRowItem.tsx b/client/src/javascript/ui/components/FormRowItem.tsx index fad6df19..34151496 100644 --- a/client/src/javascript/ui/components/FormRowItem.tsx +++ b/client/src/javascript/ui/components/FormRowItem.tsx @@ -1,8 +1,8 @@ import classnames from 'classnames'; -import * as React from 'react'; +import {forwardRef, ReactNode} from 'react'; export interface FormRowItemProps { - children?: React.ReactNode; + children?: ReactNode; className?: string; type?: string; @@ -20,7 +20,7 @@ export interface FormRowItemProps { | 'seven-eighths'; } -const FormRowItem = React.forwardRef( +const FormRowItem = forwardRef( ({children, className, type, width, grow, shrink}: FormRowItemProps, ref) => { const classes = classnames('form__row__item', className, { [`form__row__item--${width}`]: width, diff --git a/client/src/javascript/ui/components/Portal.tsx b/client/src/javascript/ui/components/Portal.tsx index 387aa698..86ae3ed9 100644 --- a/client/src/javascript/ui/components/Portal.tsx +++ b/client/src/javascript/ui/components/Portal.tsx @@ -1,11 +1,11 @@ +import {Component, ReactNode} from 'react'; import ReactDOM from 'react-dom'; -import * as React from 'react'; interface PortalProps { - children: React.ReactNode; + children: ReactNode; } -class Portal extends React.Component { +class Portal extends Component { mountPoint: HTMLDivElement | null = null; componentDidMount() { diff --git a/client/src/javascript/util/detectLocale.ts b/client/src/javascript/util/detectLocale.ts index 14bdece4..677decb3 100644 --- a/client/src/javascript/util/detectLocale.ts +++ b/client/src/javascript/util/detectLocale.ts @@ -1,7 +1,7 @@ import {getUserLocales} from 'get-user-locale'; -import Languages from '../constants/Languages'; -import type {Language} from '../constants/Languages'; +import Languages from '@client/constants/Languages'; +import type {Language} from '@client/constants/Languages'; export interface LocaleConfig { locale: string; diff --git a/client/src/javascript/util/history.ts b/client/src/javascript/util/history.ts index e92aed84..7835b2d6 100644 --- a/client/src/javascript/util/history.ts +++ b/client/src/javascript/util/history.ts @@ -1,7 +1,8 @@ import {createBrowserHistory} from 'history'; +import ConfigStore from '@client/stores/ConfigStore'; + import stringUtil from '@shared/util/stringUtil'; -import ConfigStore from '../stores/ConfigStore'; const history = createBrowserHistory({ basename: stringUtil.withoutTrailingSlash(ConfigStore.baseURI), diff --git a/client/src/javascript/util/selectTorrents.ts b/client/src/javascript/util/selectTorrents.ts index e984011c..dba2c10d 100644 --- a/client/src/javascript/util/selectTorrents.ts +++ b/client/src/javascript/util/selectTorrents.ts @@ -1,9 +1,9 @@ -import * as React from 'react'; +import {MouseEvent, TouchEvent} from 'react'; import type {TorrentProperties} from '@shared/types/Torrent'; interface SelectTorrentOptions { - event: React.MouseEvent | React.TouchEvent; + event: MouseEvent | TouchEvent; hash: string; selectedTorrents: Array; torrentList: Array; diff --git a/client/src/javascript/util/torrentListCellContents.tsx b/client/src/javascript/util/torrentListCellContents.tsx index b5234602..86e3eeee 100644 --- a/client/src/javascript/util/torrentListCellContents.tsx +++ b/client/src/javascript/util/torrentListCellContents.tsx @@ -1,13 +1,13 @@ import {FormattedDate, FormattedMessage, FormattedNumber} from 'react-intl'; +import Checkmark from '@client/components/icons/Checkmark'; +import Duration from '@client/components/general/Duration'; +import Size from '@client/components/general/Size'; + +import type {TorrentListColumn} from '@client/constants/TorrentListColumns'; + import type {TorrentProperties} from '@shared/types/Torrent'; -import Checkmark from '../components/icons/Checkmark'; -import Duration from '../components/general/Duration'; -import Size from '../components/general/Size'; - -import type {TorrentListColumn} from '../constants/TorrentListColumns'; - const booleanTransformer = (value: boolean) => value ? : null; const dateTransformer = (date: number) => ; diff --git a/client/src/javascript/util/torrentPropertyIcons.tsx b/client/src/javascript/util/torrentPropertyIcons.tsx index 0d3ae7d5..c89df618 100644 --- a/client/src/javascript/util/torrentPropertyIcons.tsx +++ b/client/src/javascript/util/torrentPropertyIcons.tsx @@ -1,19 +1,19 @@ -import CalendarCreatedIcon from '../components/icons/CalendarCreatedIcon'; -import CalendarIcon from '../components/icons/CalendarIcon'; -import ClockIcon from '../components/icons/ClockIcon'; -import DiskIcon from '../components/icons/DiskIcon'; -import DownloadThickIcon from '../components/icons/DownloadThickIcon'; -import HashIcon from '../components/icons/HashIcon'; -import FolderClosedSolid from '../components/icons/FolderClosedSolid'; -import PeersIcon from '../components/icons/PeersIcon'; -import LockIcon from '../components/icons/LockIcon'; -import RadarIcon from '../components/icons/RadarIcon'; -import RatioIcon from '../components/icons/RatioIcon'; -import SeedsIcon from '../components/icons/SeedsIcon'; -import TrackerMessageIcon from '../components/icons/TrackerMessageIcon'; -import UploadThickIcon from '../components/icons/UploadThickIcon'; +import CalendarCreatedIcon from '@client/components/icons/CalendarCreatedIcon'; +import CalendarIcon from '@client/components/icons/CalendarIcon'; +import ClockIcon from '@client/components/icons/ClockIcon'; +import DiskIcon from '@client/components/icons/DiskIcon'; +import DownloadThickIcon from '@client/components/icons/DownloadThickIcon'; +import HashIcon from '@client/components/icons/HashIcon'; +import FolderClosedSolid from '@client/components/icons/FolderClosedSolid'; +import PeersIcon from '@client/components/icons/PeersIcon'; +import LockIcon from '@client/components/icons/LockIcon'; +import RadarIcon from '@client/components/icons/RadarIcon'; +import RatioIcon from '@client/components/icons/RatioIcon'; +import SeedsIcon from '@client/components/icons/SeedsIcon'; +import TrackerMessageIcon from '@client/components/icons/TrackerMessageIcon'; +import UploadThickIcon from '@client/components/icons/UploadThickIcon'; -import type {TorrentListColumn} from '../constants/TorrentListColumns'; +import type {TorrentListColumn} from '@client/constants/TorrentListColumns'; const ICONS: Partial> = { eta: , diff --git a/client/src/javascript/util/torrentStatusIcons.tsx b/client/src/javascript/util/torrentStatusIcons.tsx index 4d80dfb4..248be842 100644 --- a/client/src/javascript/util/torrentStatusIcons.tsx +++ b/client/src/javascript/util/torrentStatusIcons.tsx @@ -1,9 +1,9 @@ import type {TorrentStatus} from '@shared/constants/torrentStatusMap'; -import ErrorIcon from '../components/icons/ErrorIcon'; -import SpinnerIcon from '../components/icons/SpinnerIcon'; -import StartIcon from '../components/icons/StartIcon'; -import StopIcon from '../components/icons/StopIcon'; +import ErrorIcon from '@client/components/icons/ErrorIcon'; +import SpinnerIcon from '@client/components/icons/SpinnerIcon'; +import StartIcon from '@client/components/icons/StartIcon'; +import StopIcon from '@client/components/icons/StopIcon'; const STATUS_ICON_MAP: Partial> = { error: , diff --git a/client/src/javascript/util/userPreferences.ts b/client/src/javascript/util/userPreferences.ts index e4bc254b..9bcc059c 100644 --- a/client/src/javascript/util/userPreferences.ts +++ b/client/src/javascript/util/userPreferences.ts @@ -1,9 +1,9 @@ +import SettingActions from '@client/actions/SettingActions'; +import SettingStore from '@client/stores/SettingStore'; + import type {FloodSettings} from '@shared/types/FloodSettings'; import type {TorrentProperties} from '@shared/types/Torrent'; -import SettingActions from '../actions/SettingActions'; -import SettingStore from '../stores/SettingStore'; - export const saveAddTorrentsUserPreferences = ({ start, destination, diff --git a/tsconfig.json b/tsconfig.json index d12af2c2..db89a663 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "jsx": "preserve", + "jsx": "react-jsx", "sourceMap": true, "target": "esnext", "moduleResolution": "node", @@ -16,6 +16,8 @@ "useDefineForClassFields": true, "baseUrl": "./", "paths": { + "@client/*": ["client/src/javascript/*"], + "@server/*": ["server/*"], "@shared/*": ["shared/*"] } },