- Import series you already have
+ {translate('LibraryImportSeriesHeader')}
- Some tips to ensure the import goes smoothly:
+ {translate('LibraryImportTips')}
- Make sure that your files include the quality in their filenames. eg. episode.s02e15.bluray.mkv
+
- Point Sonarr to the folder containing all of your tv shows, not a specific one. eg. "{isWindows ? 'C:\\tv shows' : '/tv shows'}" and not "{isWindows ? 'C:\\tv shows\\the simpsons' : '/tv shows/the simpsons'}" Additionally, each series must be in its own folder within the root/library folder.
+
- Do not use for importing downloads from your download client, this is only for existing organized libraries, not unsorted files.
+ {translate('LibraryImportTipsDontUseDownloadsFolder')}
@@ -96,7 +100,7 @@ class ImportSeriesSelectFolder extends Component {
{
hasRootFolders ?
-
+
- Unable to add root folder
+ {translate('AddRootFolderError')}
{
@@ -149,8 +153,8 @@ class ImportSeriesSelectFolder extends Component {
/>
{
hasRootFolders ?
- 'Choose another folder' :
- 'Start Import'
+ translate('ChooseAnotherFolder') :
+ translate('StartImport')
}
diff --git a/frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolderConnector.js b/frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolderConnector.js
index 76bb2f34044..1df231f4e74 100644
--- a/frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolderConnector.js
+++ b/frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolderConnector.js
@@ -5,12 +5,13 @@ import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { addRootFolder, fetchRootFolders } from 'Store/Actions/rootFolderActions';
+import createRootFoldersSelector from 'Store/Selectors/createRootFoldersSelector';
import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
import ImportSeriesSelectFolder from './ImportSeriesSelectFolder';
function createMapStateToProps() {
return createSelector(
- (state) => state.rootFolders,
+ createRootFoldersSelector(),
createSystemStatusSelector(),
(rootFolders, systemStatus) => {
return {
diff --git a/frontend/src/AddSeries/SeriesMonitorNewItemsOptionsPopoverContent.js b/frontend/src/AddSeries/SeriesMonitorNewItemsOptionsPopoverContent.js
new file mode 100644
index 00000000000..c70ec0decf2
--- /dev/null
+++ b/frontend/src/AddSeries/SeriesMonitorNewItemsOptionsPopoverContent.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import translate from 'Utilities/String/translate';
+
+function SeriesMonitorNewItemsOptionsPopoverContent() {
+ return (
+
+
+ );
+}
+
+export default SeriesMonitorNewItemsOptionsPopoverContent;
diff --git a/frontend/src/AddSeries/SeriesMonitoringOptionsPopoverContent.js b/frontend/src/AddSeries/SeriesMonitoringOptionsPopoverContent.js
index e889fbb095d..21289fcb807 100644
--- a/frontend/src/AddSeries/SeriesMonitoringOptionsPopoverContent.js
+++ b/frontend/src/AddSeries/SeriesMonitoringOptionsPopoverContent.js
@@ -1,43 +1,64 @@
import React from 'react';
import DescriptionList from 'Components/DescriptionList/DescriptionList';
import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import translate from 'Utilities/String/translate';
function SeriesMonitoringOptionsPopoverContent() {
return (
);
diff --git a/frontend/src/AddSeries/SeriesTypePopoverContent.js b/frontend/src/AddSeries/SeriesTypePopoverContent.js
index e57d49a9e5e..9771bd8dba0 100644
--- a/frontend/src/AddSeries/SeriesTypePopoverContent.js
+++ b/frontend/src/AddSeries/SeriesTypePopoverContent.js
@@ -1,23 +1,24 @@
import React from 'react';
import DescriptionList from 'Components/DescriptionList/DescriptionList';
import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import translate from 'Utilities/String/translate';
function SeriesTypePopoverContent() {
return (
);
diff --git a/frontend/src/App/App.js b/frontend/src/App/App.js
deleted file mode 100644
index 781b2ca1003..00000000000
--- a/frontend/src/App/App.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { ConnectedRouter } 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 PageConnector from 'Components/Page/PageConnector';
-import ApplyTheme from './ApplyTheme';
-import AppRoutes from './AppRoutes';
-
-function App({ store, history }) {
- return (
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-App.propTypes = {
- store: PropTypes.object.isRequired,
- history: PropTypes.object.isRequired
-};
-
-export default App;
diff --git a/frontend/src/App/App.tsx b/frontend/src/App/App.tsx
new file mode 100644
index 00000000000..b71199bb378
--- /dev/null
+++ b/frontend/src/App/App.tsx
@@ -0,0 +1,35 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ConnectedRouter, ConnectedRouterProps } from 'connected-react-router';
+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';
+
+interface AppProps {
+ store: Store;
+ history: ConnectedRouterProps['history'];
+}
+
+const queryClient = new QueryClient();
+
+function App({ store, history }: AppProps) {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default App;
diff --git a/frontend/src/App/AppRoutes.js b/frontend/src/App/AppRoutes.js
deleted file mode 100644
index dd1bca729c4..00000000000
--- a/frontend/src/App/AppRoutes.js
+++ /dev/null
@@ -1,266 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Redirect, Route } from 'react-router-dom';
-import BlocklistConnector from 'Activity/Blocklist/BlocklistConnector';
-import HistoryConnector from 'Activity/History/HistoryConnector';
-import QueueConnector from 'Activity/Queue/QueueConnector';
-import AddNewSeriesConnector from 'AddSeries/AddNewSeries/AddNewSeriesConnector';
-import ImportSeries from 'AddSeries/ImportSeries/ImportSeries';
-import CalendarPageConnector from 'Calendar/CalendarPageConnector';
-import NotFound from 'Components/NotFound';
-import Switch from 'Components/Router/Switch';
-import SeasonPassConnector from 'SeasonPass/SeasonPassConnector';
-import SeriesDetailsPageConnector from 'Series/Details/SeriesDetailsPageConnector';
-import SeriesEditorConnector from 'Series/Editor/SeriesEditorConnector';
-import SeriesIndexConnector from 'Series/Index/SeriesIndexConnector';
-import CustomFormatSettingsConnector from 'Settings/CustomFormats/CustomFormatSettingsConnector';
-import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
-import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
-import ImportListSettingsConnector from 'Settings/ImportLists/ImportListSettingsConnector';
-import IndexerSettingsConnector from 'Settings/Indexers/IndexerSettingsConnector';
-import MediaManagementConnector from 'Settings/MediaManagement/MediaManagementConnector';
-import MetadataSettings from 'Settings/Metadata/MetadataSettings';
-import MetadataSourceSettings from 'Settings/MetadataSource/MetadataSourceSettings';
-import NotificationSettings from 'Settings/Notifications/NotificationSettings';
-import Profiles from 'Settings/Profiles/Profiles';
-import QualityConnector from 'Settings/Quality/QualityConnector';
-import Settings from 'Settings/Settings';
-import TagSettings from 'Settings/Tags/TagSettings';
-import UISettingsConnector from 'Settings/UI/UISettingsConnector';
-import BackupsConnector from 'System/Backup/BackupsConnector';
-import LogsTableConnector from 'System/Events/LogsTableConnector';
-import Logs from 'System/Logs/Logs';
-import Status from 'System/Status/Status';
-import Tasks from 'System/Tasks/Tasks';
-import UpdatesConnector from 'System/Updates/UpdatesConnector';
-import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
-import CutoffUnmetConnector from 'Wanted/CutoffUnmet/CutoffUnmetConnector';
-import MissingConnector from 'Wanted/Missing/MissingConnector';
-
-function AppRoutes(props) {
- const {
- app
- } = props;
-
- return (
-
- {/*
- Series
- */}
-
- {
- return (
-
- );
-}
-
-AppRoutes.propTypes = {
- app: PropTypes.func.isRequired
-};
-
-export default AppRoutes;
diff --git a/frontend/src/App/AppRoutes.tsx b/frontend/src/App/AppRoutes.tsx
new file mode 100644
index 00000000000..fbe4a15bb5e
--- /dev/null
+++ b/frontend/src/App/AppRoutes.tsx
@@ -0,0 +1,167 @@
+import React from 'react';
+import { Redirect, Route } from 'react-router-dom';
+import Blocklist from 'Activity/Blocklist/Blocklist';
+import History from 'Activity/History/History';
+import Queue from 'Activity/Queue/Queue';
+import AddNewSeriesConnector from 'AddSeries/AddNewSeries/AddNewSeriesConnector';
+import ImportSeries from 'AddSeries/ImportSeries/ImportSeries';
+import CalendarPage from 'Calendar/CalendarPage';
+import NotFound from 'Components/NotFound';
+import Switch from 'Components/Router/Switch';
+import SeriesDetailsPageConnector from 'Series/Details/SeriesDetailsPageConnector';
+import SeriesIndex from 'Series/Index/SeriesIndex';
+import CustomFormatSettingsPage from 'Settings/CustomFormats/CustomFormatSettingsPage';
+import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
+import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
+import ImportListSettingsConnector from 'Settings/ImportLists/ImportListSettingsConnector';
+import IndexerSettingsConnector from 'Settings/Indexers/IndexerSettingsConnector';
+import MediaManagementConnector from 'Settings/MediaManagement/MediaManagementConnector';
+import MetadataSettings from 'Settings/Metadata/MetadataSettings';
+import MetadataSourceSettings from 'Settings/MetadataSource/MetadataSourceSettings';
+import NotificationSettings from 'Settings/Notifications/NotificationSettings';
+import Profiles from 'Settings/Profiles/Profiles';
+import QualityConnector from 'Settings/Quality/QualityConnector';
+import Settings from 'Settings/Settings';
+import TagSettings from 'Settings/Tags/TagSettings';
+import UISettingsConnector from 'Settings/UI/UISettingsConnector';
+import BackupsConnector from 'System/Backup/BackupsConnector';
+import LogsTableConnector from 'System/Events/LogsTableConnector';
+import Logs from 'System/Logs/Logs';
+import Status from 'System/Status/Status';
+import Tasks from 'System/Tasks/Tasks';
+import Updates from 'System/Updates/Updates';
+import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
+import CutoffUnmetConnector from 'Wanted/CutoffUnmet/CutoffUnmetConnector';
+import MissingConnector from 'Wanted/Missing/MissingConnector';
+
+function RedirectWithUrlBase() {
+ return
;
+}
+
+function AppRoutes() {
+ return (
+
+ {/*
+ Series
+ */}
+
+
+ );
+}
+
+export default AppRoutes;
diff --git a/frontend/src/App/AppUpdatedModal.js b/frontend/src/App/AppUpdatedModal.js
deleted file mode 100644
index abc7f8832fd..00000000000
--- a/frontend/src/App/AppUpdatedModal.js
+++ /dev/null
@@ -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 (
-
-
- );
-}
-
-AppUpdatedModal.propTypes = {
- isOpen: PropTypes.bool.isRequired,
- onModalClose: PropTypes.func.isRequired
-};
-
-export default AppUpdatedModal;
diff --git a/frontend/src/App/AppUpdatedModal.tsx b/frontend/src/App/AppUpdatedModal.tsx
new file mode 100644
index 00000000000..696d36fb244
--- /dev/null
+++ b/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 (
+
+
+ );
+}
+
+export default AppUpdatedModal;
diff --git a/frontend/src/App/AppUpdatedModalConnector.js b/frontend/src/App/AppUpdatedModalConnector.js
deleted file mode 100644
index a21afbc5aa9..00000000000
--- a/frontend/src/App/AppUpdatedModalConnector.js
+++ /dev/null
@@ -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);
diff --git a/frontend/src/App/AppUpdatedModalContent.css b/frontend/src/App/AppUpdatedModalContent.css
index 37b89c9becf..0df4183a662 100644
--- a/frontend/src/App/AppUpdatedModalContent.css
+++ b/frontend/src/App/AppUpdatedModalContent.css
@@ -1,6 +1,7 @@
.version {
margin: 0 3px;
font-weight: bold;
+ font-family: var(--defaultFontFamily);
}
.maintenance {
diff --git a/frontend/src/App/AppUpdatedModalContent.css.d.ts b/frontend/src/App/AppUpdatedModalContent.css.d.ts
new file mode 100644
index 00000000000..70ddbf6a1a2
--- /dev/null
+++ b/frontend/src/App/AppUpdatedModalContent.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'changes': string;
+ 'maintenance': string;
+ 'version': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/App/AppUpdatedModalContent.js b/frontend/src/App/AppUpdatedModalContent.js
deleted file mode 100644
index 6957f98300f..00000000000
--- a/frontend/src/App/AppUpdatedModalContent.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Button from 'Components/Link/Button';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-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 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 (
-
-
- Sonarr Updated
-
-
-
-
- Sonarr has been updated to version {version} , in order to get the latest changes you'll need to reload Sonarr.
-
-
- {
- isPopulated && !error && !!update &&
-
- {
- !update.changes &&
-
Maintenance release
- }
-
- {
- !!update.changes &&
-
-
- What's new?
-
-
-
-
-
-
- }
-
-
-
-
- Recent Changes
-
-
-
- Reload
-
-
-
- );
-}
-
-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;
diff --git a/frontend/src/App/AppUpdatedModalContent.tsx b/frontend/src/App/AppUpdatedModalContent.tsx
new file mode 100644
index 00000000000..6553d6270c3
--- /dev/null
+++ b/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.Sonarr.urlBase}/system/updates`;
+ }, []);
+
+ useEffect(() => {
+ dispatch(fetchUpdates());
+ }, [dispatch]);
+
+ useEffect(() => {
+ if (version !== previousVersion) {
+ dispatch(fetchUpdates());
+ }
+ }, [version, previousVersion, dispatch]);
+
+ return (
+
+ {translate('AppUpdated')}
+
+
+
+
+
+ {isPopulated && !error && !!update ? (
+
+ {update.changes ? (
+
+ {translate('MaintenanceRelease')}
+
+ ) : null}
+
+ {update.changes ? (
+
+
{translate('WhatsNew')}
+
+
+
+
+
+ ) : null}
+
+
+
+
+ {translate('RecentChanges')}
+
+
+
+ {translate('Reload')}
+
+
+
+ );
+}
+
+export default AppUpdatedModalContent;
diff --git a/frontend/src/App/AppUpdatedModalContentConnector.js b/frontend/src/App/AppUpdatedModalContentConnector.js
deleted file mode 100644
index 4100ee67452..00000000000
--- a/frontend/src/App/AppUpdatedModalContentConnector.js
+++ /dev/null
@@ -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.Sonarr.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 (
-
- );
- }
-}
-
-AppUpdatedModalContentConnector.propTypes = {
- version: PropTypes.string.isRequired,
- dispatchFetchUpdates: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, createMapDispatchToProps)(AppUpdatedModalContentConnector);
diff --git a/frontend/src/App/ApplyTheme.js b/frontend/src/App/ApplyTheme.js
deleted file mode 100644
index ef177749f97..00000000000
--- a/frontend/src/App/ApplyTheme.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Fragment, useCallback, useEffect } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import themes from 'Styles/Themes';
-
-function createMapStateToProps() {
- return createSelector(
- (state) => state.settings.ui.item.theme || window.Sonarr.theme,
- (
- theme
- ) => {
- return {
- theme
- };
- }
- );
-}
-
-function ApplyTheme({ theme, children }) {
- // Update the CSS Variables
-
- const updateCSSVariables = useCallback(() => {
- const arrayOfVariableKeys = Object.keys(themes[theme]);
- const arrayOfVariableValues = Object.values(themes[theme]);
-
- // Loop through each array key and set the CSS Variables
- arrayOfVariableKeys.forEach((cssVariableKey, index) => {
- // Based on our snippet from MDN
- document.documentElement.style.setProperty(
- `--${cssVariableKey}`,
- arrayOfVariableValues[index]
- );
- });
- }, [theme]);
-
- // On Component Mount and Component Update
- useEffect(() => {
- updateCSSVariables(theme);
- }, [updateCSSVariables, theme]);
-
- return
{children} ;
-}
-
-ApplyTheme.propTypes = {
- theme: PropTypes.string.isRequired,
- children: PropTypes.object.isRequired
-};
-
-export default connect(createMapStateToProps)(ApplyTheme);
diff --git a/frontend/src/App/ApplyTheme.tsx b/frontend/src/App/ApplyTheme.tsx
new file mode 100644
index 00000000000..ce598f2dc41
--- /dev/null
+++ b/frontend/src/App/ApplyTheme.tsx
@@ -0,0 +1,33 @@
+import { useCallback, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import themes from 'Styles/Themes';
+import AppState from './State/AppState';
+
+function createThemeSelector() {
+ return createSelector(
+ (state: AppState) => state.settings.ui.item.theme || window.Sonarr.theme,
+ (theme) => {
+ return theme;
+ }
+ );
+}
+
+function ApplyTheme() {
+ const theme = useSelector(createThemeSelector());
+
+ const updateCSSVariables = useCallback(() => {
+ Object.entries(themes[theme]).forEach(([key, value]) => {
+ document.documentElement.style.setProperty(`--${key}`, value);
+ });
+ }, [theme]);
+
+ // On Component Mount and Component Update
+ useEffect(() => {
+ updateCSSVariables();
+ }, [updateCSSVariables, theme]);
+
+ return null;
+}
+
+export default ApplyTheme;
diff --git a/frontend/src/App/ColorImpairedContext.js b/frontend/src/App/ColorImpairedContext.ts
similarity index 100%
rename from frontend/src/App/ColorImpairedContext.js
rename to frontend/src/App/ColorImpairedContext.ts
diff --git a/frontend/src/App/ConnectionLostModal.css.d.ts b/frontend/src/App/ConnectionLostModal.css.d.ts
new file mode 100644
index 00000000000..027f2a9a3ec
--- /dev/null
+++ b/frontend/src/App/ConnectionLostModal.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'automatic': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/App/ConnectionLostModal.js b/frontend/src/App/ConnectionLostModal.js
deleted file mode 100644
index aa886b7722b..00000000000
--- a/frontend/src/App/ConnectionLostModal.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Button from 'Components/Link/Button';
-import Modal from 'Components/Modal/Modal';
-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 styles from './ConnectionLostModal.css';
-
-function ConnectionLostModal(props) {
- const {
- isOpen,
- onModalClose
- } = props;
-
- return (
-
-
-
- Connection Lost
-
-
-
-
- Sonarr has lost its connection to the backend and will need to be reloaded to restore functionality.
-
-
-
- Sonarr will try to connect automatically, or you can click reload below.
-
-
-
-
- Reload
-
-
-
-
- );
-}
-
-ConnectionLostModal.propTypes = {
- isOpen: PropTypes.bool.isRequired,
- onModalClose: PropTypes.func.isRequired
-};
-
-export default ConnectionLostModal;
diff --git a/frontend/src/App/ConnectionLostModal.tsx b/frontend/src/App/ConnectionLostModal.tsx
new file mode 100644
index 00000000000..f08f2c0e205
--- /dev/null
+++ b/frontend/src/App/ConnectionLostModal.tsx
@@ -0,0 +1,45 @@
+import React, { useCallback } from 'react';
+import Button from 'Components/Link/Button';
+import Modal from 'Components/Modal/Modal';
+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 translate from 'Utilities/String/translate';
+import styles from './ConnectionLostModal.css';
+
+interface ConnectionLostModalProps {
+ isOpen: boolean;
+}
+
+function ConnectionLostModal(props: ConnectionLostModalProps) {
+ const { isOpen } = props;
+
+ const handleModalClose = useCallback(() => {
+ location.reload();
+ }, []);
+
+ return (
+
+
+ {translate('ConnectionLost')}
+
+
+ {translate('ConnectionLostToBackend')}
+
+
+ {translate('ConnectionLostReconnect')}
+
+
+
+
+ {translate('Reload')}
+
+
+
+
+ );
+}
+
+export default ConnectionLostModal;
diff --git a/frontend/src/App/ConnectionLostModalConnector.js b/frontend/src/App/ConnectionLostModalConnector.js
deleted file mode 100644
index 8ab8e3cd07c..00000000000
--- a/frontend/src/App/ConnectionLostModalConnector.js
+++ /dev/null
@@ -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);
diff --git a/frontend/src/App/ModelBase.ts b/frontend/src/App/ModelBase.ts
new file mode 100644
index 00000000000..187b12fb239
--- /dev/null
+++ b/frontend/src/App/ModelBase.ts
@@ -0,0 +1,5 @@
+interface ModelBase {
+ id: number;
+}
+
+export default ModelBase;
diff --git a/frontend/src/App/SelectContext.tsx b/frontend/src/App/SelectContext.tsx
new file mode 100644
index 00000000000..66be388ce0a
--- /dev/null
+++ b/frontend/src/App/SelectContext.tsx
@@ -0,0 +1,83 @@
+import { cloneDeep } from 'lodash';
+import React, { useCallback, useEffect } from 'react';
+import useSelectState, { SelectState } from 'Helpers/Hooks/useSelectState';
+import ModelBase from './ModelBase';
+
+export type SelectContextAction =
+ | { type: 'reset' }
+ | { type: 'selectAll' }
+ | { type: 'unselectAll' }
+ | {
+ type: 'toggleSelected';
+ id: number;
+ isSelected: boolean;
+ shiftKey: boolean;
+ }
+ | {
+ type: 'removeItem';
+ id: number;
+ }
+ | {
+ type: 'updateItems';
+ items: ModelBase[];
+ };
+
+export type SelectDispatch = (action: SelectContextAction) => void;
+
+interface SelectProviderOptions
{
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ children: any;
+ items: Array;
+}
+
+const SelectContext = React.createContext<
+ [SelectState, SelectDispatch] | undefined
+>(cloneDeep(undefined));
+
+export function SelectProvider(
+ props: SelectProviderOptions
+) {
+ const { items } = props;
+ const [state, dispatch] = useSelectState();
+
+ const dispatchWrapper = useCallback(
+ (action: SelectContextAction) => {
+ switch (action.type) {
+ case 'reset':
+ case 'removeItem':
+ dispatch(action);
+ break;
+
+ default:
+ dispatch({
+ ...action,
+ items,
+ });
+ break;
+ }
+ },
+ [items, dispatch]
+ );
+
+ const value: [SelectState, SelectDispatch] = [state, dispatchWrapper];
+
+ useEffect(() => {
+ dispatch({ type: 'updateItems', items });
+ }, [items, dispatch]);
+
+ return (
+
+ {props.children}
+
+ );
+}
+
+export function useSelect() {
+ const context = React.useContext(SelectContext);
+
+ if (context === undefined) {
+ throw new Error('useSelect must be used within a SelectProvider');
+ }
+
+ return context;
+}
diff --git a/frontend/src/App/State/AppSectionState.ts b/frontend/src/App/State/AppSectionState.ts
new file mode 100644
index 00000000000..4e9dbe7a099
--- /dev/null
+++ b/frontend/src/App/State/AppSectionState.ts
@@ -0,0 +1,85 @@
+import Column from 'Components/Table/Column';
+import { SortDirection } from 'Helpers/Props/sortDirections';
+import { ValidationFailure } from 'typings/pending';
+import { FilterBuilderProp, PropertyFilter } from './AppState';
+
+export interface Error {
+ status?: number;
+ responseJSON:
+ | {
+ message: string | undefined;
+ }
+ | ValidationFailure[]
+ | undefined;
+}
+
+export interface AppSectionDeleteState {
+ isDeleting: boolean;
+ deleteError: Error;
+}
+
+export interface AppSectionSaveState {
+ isSaving: boolean;
+ saveError: Error;
+}
+
+export interface PagedAppSectionState {
+ page: number;
+ pageSize: number;
+ totalPages: number;
+ totalRecords?: number;
+}
+export interface TableAppSectionState {
+ columns: Column[];
+}
+
+export interface AppSectionFilterState {
+ selectedFilterKey: string;
+ filters: PropertyFilter[];
+ filterBuilderProps: FilterBuilderProp[];
+}
+
+export interface AppSectionSchemaState {
+ isSchemaFetching: boolean;
+ isSchemaPopulated: boolean;
+ schemaError: Error;
+ schema: {
+ items: T[];
+ };
+}
+
+export interface AppSectionItemSchemaState {
+ isSchemaFetching: boolean;
+ isSchemaPopulated: boolean;
+ schemaError: Error;
+ schema: T;
+}
+
+export interface AppSectionItemState {
+ isFetching: boolean;
+ isPopulated: boolean;
+ error: Error;
+ pendingChanges: Partial;
+ item: T;
+}
+
+export interface AppSectionProviderState
+ extends AppSectionDeleteState,
+ AppSectionSaveState {
+ isFetching: boolean;
+ isPopulated: boolean;
+ error: Error;
+ items: T[];
+ pendingChanges: Partial;
+}
+
+interface AppSectionState {
+ isFetching: boolean;
+ isPopulated: boolean;
+ error: Error;
+ items: T[];
+ sortKey: string;
+ sortDirection: SortDirection;
+}
+
+export default AppSectionState;
diff --git a/frontend/src/App/State/AppState.ts b/frontend/src/App/State/AppState.ts
new file mode 100644
index 00000000000..84bd5d0b48a
--- /dev/null
+++ b/frontend/src/App/State/AppState.ts
@@ -0,0 +1,95 @@
+import BlocklistAppState from './BlocklistAppState';
+import CalendarAppState from './CalendarAppState';
+import CaptchaAppState from './CaptchaAppState';
+import CommandAppState from './CommandAppState';
+import EpisodeFilesAppState from './EpisodeFilesAppState';
+import EpisodesAppState from './EpisodesAppState';
+import HistoryAppState from './HistoryAppState';
+import InteractiveImportAppState from './InteractiveImportAppState';
+import OAuthAppState from './OAuthAppState';
+import ParseAppState from './ParseAppState';
+import PathsAppState from './PathsAppState';
+import ProviderOptionsAppState from './ProviderOptionsAppState';
+import QueueAppState from './QueueAppState';
+import ReleasesAppState from './ReleasesAppState';
+import RootFolderAppState from './RootFolderAppState';
+import SeriesAppState, { SeriesIndexAppState } from './SeriesAppState';
+import SettingsAppState from './SettingsAppState';
+import SystemAppState from './SystemAppState';
+import TagsAppState from './TagsAppState';
+import WantedAppState from './WantedAppState';
+
+interface FilterBuilderPropOption {
+ id: string;
+ name: string;
+}
+
+export interface FilterBuilderProp {
+ name: string;
+ label: string;
+ type: string;
+ valueType?: string;
+ optionsSelector?: (items: T[]) => FilterBuilderPropOption[];
+}
+
+export interface PropertyFilter {
+ key: string;
+ value: boolean | string | number | string[] | number[];
+ type: string;
+}
+
+export interface Filter {
+ key: string;
+ label: string;
+ filters: PropertyFilter[];
+}
+
+export interface CustomFilter {
+ id: number;
+ type: string;
+ label: string;
+ filters: PropertyFilter[];
+}
+
+export interface AppSectionState {
+ isConnected: boolean;
+ isReconnecting: boolean;
+ isSidebarVisible: boolean;
+ version: string;
+ prevVersion?: string;
+ dimensions: {
+ isSmallScreen: boolean;
+ isLargeScreen: boolean;
+ width: number;
+ height: number;
+ };
+}
+
+interface AppState {
+ app: AppSectionState;
+ blocklist: BlocklistAppState;
+ calendar: CalendarAppState;
+ captcha: CaptchaAppState;
+ commands: CommandAppState;
+ episodeFiles: EpisodeFilesAppState;
+ episodeHistory: HistoryAppState;
+ episodes: EpisodesAppState;
+ episodesSelection: EpisodesAppState;
+ history: HistoryAppState;
+ interactiveImport: InteractiveImportAppState;
+ oAuth: OAuthAppState;
+ parse: ParseAppState;
+ paths: PathsAppState;
+ providerOptions: ProviderOptionsAppState;
+ queue: QueueAppState;
+ releases: ReleasesAppState;
+ rootFolders: RootFolderAppState;
+ series: SeriesAppState;
+ seriesIndex: SeriesIndexAppState;
+ settings: SettingsAppState;
+ system: SystemAppState;
+ tags: TagsAppState;
+ wanted: WantedAppState;
+}
+
+export default AppState;
diff --git a/frontend/src/App/State/BlocklistAppState.ts b/frontend/src/App/State/BlocklistAppState.ts
new file mode 100644
index 00000000000..004a30732ed
--- /dev/null
+++ b/frontend/src/App/State/BlocklistAppState.ts
@@ -0,0 +1,16 @@
+import Blocklist from 'typings/Blocklist';
+import AppSectionState, {
+ AppSectionFilterState,
+ PagedAppSectionState,
+ TableAppSectionState,
+} from './AppSectionState';
+
+interface BlocklistAppState
+ extends AppSectionState,
+ AppSectionFilterState,
+ PagedAppSectionState,
+ TableAppSectionState {
+ isRemoving: boolean;
+}
+
+export default BlocklistAppState;
diff --git a/frontend/src/App/State/CalendarAppState.ts b/frontend/src/App/State/CalendarAppState.ts
new file mode 100644
index 00000000000..75c8b5e50bf
--- /dev/null
+++ b/frontend/src/App/State/CalendarAppState.ts
@@ -0,0 +1,29 @@
+import moment from 'moment';
+import AppSectionState, {
+ AppSectionFilterState,
+} from 'App/State/AppSectionState';
+import { CalendarView } from 'Calendar/calendarViews';
+import { CalendarItem } from 'typings/Calendar';
+
+interface CalendarOptions {
+ showEpisodeInformation: boolean;
+ showFinaleIcon: boolean;
+ showSpecialIcon: boolean;
+ showCutoffUnmetIcon: boolean;
+ collapseMultipleEpisodes: boolean;
+ fullColorEvents: boolean;
+}
+
+interface CalendarAppState
+ extends AppSectionState,
+ AppSectionFilterState {
+ searchMissingCommandId: number | null;
+ start: moment.Moment;
+ end: moment.Moment;
+ dates: string[];
+ time: string;
+ view: CalendarView;
+ options: CalendarOptions;
+}
+
+export default CalendarAppState;
diff --git a/frontend/src/App/State/CaptchaAppState.ts b/frontend/src/App/State/CaptchaAppState.ts
new file mode 100644
index 00000000000..7252937eb53
--- /dev/null
+++ b/frontend/src/App/State/CaptchaAppState.ts
@@ -0,0 +1,11 @@
+interface CaptchaAppState {
+ refreshing: false;
+ token: string;
+ siteKey: unknown;
+ secretToken: unknown;
+ ray: unknown;
+ stoken: unknown;
+ responseUrl: unknown;
+}
+
+export default CaptchaAppState;
diff --git a/frontend/src/App/State/ClientSideCollectionAppState.ts b/frontend/src/App/State/ClientSideCollectionAppState.ts
new file mode 100644
index 00000000000..f4110ef73bb
--- /dev/null
+++ b/frontend/src/App/State/ClientSideCollectionAppState.ts
@@ -0,0 +1,8 @@
+import { CustomFilter } from './AppState';
+
+interface ClientSideCollectionAppState {
+ totalItems: number;
+ customFilters: CustomFilter[];
+}
+
+export default ClientSideCollectionAppState;
diff --git a/frontend/src/App/State/CommandAppState.ts b/frontend/src/App/State/CommandAppState.ts
new file mode 100644
index 00000000000..1bde3737156
--- /dev/null
+++ b/frontend/src/App/State/CommandAppState.ts
@@ -0,0 +1,6 @@
+import AppSectionState from 'App/State/AppSectionState';
+import Command from 'Commands/Command';
+
+export type CommandAppState = AppSectionState;
+
+export default CommandAppState;
diff --git a/frontend/src/App/State/CustomFiltersAppState.ts b/frontend/src/App/State/CustomFiltersAppState.ts
new file mode 100644
index 00000000000..6ac4820c74c
--- /dev/null
+++ b/frontend/src/App/State/CustomFiltersAppState.ts
@@ -0,0 +1,10 @@
+import AppSectionState, {
+ AppSectionDeleteState,
+} from 'App/State/AppSectionState';
+import { CustomFilter } from './AppState';
+
+interface CustomFiltersAppState
+ extends AppSectionState,
+ AppSectionDeleteState {}
+
+export default CustomFiltersAppState;
diff --git a/frontend/src/App/State/EpisodeFilesAppState.ts b/frontend/src/App/State/EpisodeFilesAppState.ts
new file mode 100644
index 00000000000..5e6e94a06a3
--- /dev/null
+++ b/frontend/src/App/State/EpisodeFilesAppState.ts
@@ -0,0 +1,10 @@
+import AppSectionState, {
+ AppSectionDeleteState,
+} from 'App/State/AppSectionState';
+import { EpisodeFile } from 'EpisodeFile/EpisodeFile';
+
+interface EpisodeFilesAppState
+ extends AppSectionState,
+ AppSectionDeleteState {}
+
+export default EpisodeFilesAppState;
diff --git a/frontend/src/App/State/EpisodesAppState.ts b/frontend/src/App/State/EpisodesAppState.ts
new file mode 100644
index 00000000000..4234c0bcbd5
--- /dev/null
+++ b/frontend/src/App/State/EpisodesAppState.ts
@@ -0,0 +1,6 @@
+import AppSectionState from 'App/State/AppSectionState';
+import Episode from 'Episode/Episode';
+
+type EpisodesAppState = AppSectionState;
+
+export default EpisodesAppState;
diff --git a/frontend/src/App/State/HistoryAppState.ts b/frontend/src/App/State/HistoryAppState.ts
new file mode 100644
index 00000000000..632b8217932
--- /dev/null
+++ b/frontend/src/App/State/HistoryAppState.ts
@@ -0,0 +1,14 @@
+import AppSectionState, {
+ AppSectionFilterState,
+ PagedAppSectionState,
+ TableAppSectionState,
+} from 'App/State/AppSectionState';
+import History from 'typings/History';
+
+interface HistoryAppState
+ extends AppSectionState,
+ AppSectionFilterState,
+ PagedAppSectionState,
+ TableAppSectionState {}
+
+export default HistoryAppState;
diff --git a/frontend/src/App/State/InteractiveImportAppState.ts b/frontend/src/App/State/InteractiveImportAppState.ts
new file mode 100644
index 00000000000..84fd9f4c14c
--- /dev/null
+++ b/frontend/src/App/State/InteractiveImportAppState.ts
@@ -0,0 +1,21 @@
+import AppSectionState from 'App/State/AppSectionState';
+import ImportMode from 'InteractiveImport/ImportMode';
+import InteractiveImport from 'InteractiveImport/InteractiveImport';
+
+interface FavoriteFolder {
+ folder: string;
+}
+
+interface RecentFolder {
+ folder: string;
+ lastUsed: string;
+}
+
+interface InteractiveImportAppState extends AppSectionState {
+ originalItems: InteractiveImport[];
+ importMode: ImportMode;
+ favoriteFolders: FavoriteFolder[];
+ recentFolders: RecentFolder[];
+}
+
+export default InteractiveImportAppState;
diff --git a/frontend/src/App/State/MetadataAppState.ts b/frontend/src/App/State/MetadataAppState.ts
new file mode 100644
index 00000000000..495f109d8b4
--- /dev/null
+++ b/frontend/src/App/State/MetadataAppState.ts
@@ -0,0 +1,6 @@
+import { AppSectionProviderState } from 'App/State/AppSectionState';
+import Metadata from 'typings/Metadata';
+
+type MetadataAppState = AppSectionProviderState;
+
+export default MetadataAppState;
diff --git a/frontend/src/App/State/OAuthAppState.ts b/frontend/src/App/State/OAuthAppState.ts
new file mode 100644
index 00000000000..619767929c6
--- /dev/null
+++ b/frontend/src/App/State/OAuthAppState.ts
@@ -0,0 +1,9 @@
+import { Error } from './AppSectionState';
+
+interface OAuthAppState {
+ authorizing: boolean;
+ result: Record | null;
+ error: Error;
+}
+
+export default OAuthAppState;
diff --git a/frontend/src/App/State/ParseAppState.ts b/frontend/src/App/State/ParseAppState.ts
new file mode 100644
index 00000000000..67fb4cc630e
--- /dev/null
+++ b/frontend/src/App/State/ParseAppState.ts
@@ -0,0 +1,54 @@
+import ModelBase from 'App/ModelBase';
+import { AppSectionItemState } from 'App/State/AppSectionState';
+import Episode from 'Episode/Episode';
+import Language from 'Language/Language';
+import { QualityModel } from 'Quality/Quality';
+import Series from 'Series/Series';
+import CustomFormat from 'typings/CustomFormat';
+
+export interface SeriesTitleInfo {
+ title: string;
+ titleWithoutYear: string;
+ year: number;
+ allTitles: string[];
+}
+
+export interface ParsedEpisodeInfo {
+ releaseTitle: string;
+ seriesTitle: string;
+ seriesTitleInfo: SeriesTitleInfo;
+ quality: QualityModel;
+ seasonNumber: number;
+ episodeNumbers: number[];
+ absoluteEpisodeNumbers: number[];
+ specialAbsoluteEpisodeNumbers: number[];
+ languages: Language[];
+ fullSeason: boolean;
+ isPartialSeason: boolean;
+ isMultiSeason: boolean;
+ isSeasonExtra: boolean;
+ special: boolean;
+ releaseHash: string;
+ seasonPart: number;
+ releaseGroup?: string;
+ releaseTokens: string;
+ airDate?: string;
+ isDaily: boolean;
+ isAbsoluteNumbering: boolean;
+ isPossibleSpecialEpisode: boolean;
+ isPossibleSceneSeasonSpecial: boolean;
+}
+
+export interface ParseModel extends ModelBase {
+ title: string;
+ parsedEpisodeInfo: ParsedEpisodeInfo;
+ series?: Series;
+ episodes: Episode[];
+ languages?: Language[];
+ customFormats?: CustomFormat[];
+ customFormatScore?: number;
+}
+
+type ParseAppState = AppSectionItemState;
+
+export default ParseAppState;
diff --git a/frontend/src/App/State/PathsAppState.ts b/frontend/src/App/State/PathsAppState.ts
new file mode 100644
index 00000000000..068a48dc098
--- /dev/null
+++ b/frontend/src/App/State/PathsAppState.ts
@@ -0,0 +1,29 @@
+interface BasePath {
+ name: string;
+ path: string;
+ size: number;
+ lastModified: string;
+}
+
+interface File extends BasePath {
+ type: 'file';
+}
+
+interface Folder extends BasePath {
+ type: 'folder';
+}
+
+export type PathType = 'file' | 'folder' | 'drive' | 'computer' | 'parent';
+export type Path = File | Folder;
+
+interface PathsAppState {
+ currentPath: string;
+ isFetching: boolean;
+ isPopulated: boolean;
+ error: Error;
+ directories: Folder[];
+ files: File[];
+ parent: string | null;
+}
+
+export default PathsAppState;
diff --git a/frontend/src/App/State/ProviderOptionsAppState.ts b/frontend/src/App/State/ProviderOptionsAppState.ts
new file mode 100644
index 00000000000..7fb5df02b86
--- /dev/null
+++ b/frontend/src/App/State/ProviderOptionsAppState.ts
@@ -0,0 +1,22 @@
+import AppSectionState from 'App/State/AppSectionState';
+import Field, { FieldSelectOption } from 'typings/Field';
+
+export interface ProviderOptions {
+ fields?: Field[];
+}
+
+interface ProviderOptionsDevice {
+ id: string;
+ name: string;
+}
+
+interface ProviderOptionsAppState {
+ devices: AppSectionState;
+ servers: AppSectionState>;
+ newznabCategories: AppSectionState>;
+ getProfiles: AppSectionState>;
+ getTags: AppSectionState>;
+ getRootFolders: AppSectionState>;
+}
+
+export default ProviderOptionsAppState;
diff --git a/frontend/src/App/State/QueueAppState.ts b/frontend/src/App/State/QueueAppState.ts
new file mode 100644
index 00000000000..954d649a2ff
--- /dev/null
+++ b/frontend/src/App/State/QueueAppState.ts
@@ -0,0 +1,44 @@
+import Queue from 'typings/Queue';
+import AppSectionState, {
+ AppSectionFilterState,
+ AppSectionItemState,
+ Error,
+ PagedAppSectionState,
+ TableAppSectionState,
+} from './AppSectionState';
+
+export interface QueueStatus {
+ totalCount: number;
+ count: number;
+ unknownCount: number;
+ errors: boolean;
+ warnings: boolean;
+ unknownErrors: boolean;
+ unknownWarnings: boolean;
+}
+
+export interface QueueDetailsAppState extends AppSectionState {
+ params: unknown;
+}
+
+export interface QueuePagedAppState
+ extends AppSectionState,
+ AppSectionFilterState,
+ PagedAppSectionState,
+ TableAppSectionState {
+ isGrabbing: boolean;
+ grabError: Error;
+ isRemoving: boolean;
+ removeError: Error;
+}
+
+interface QueueAppState {
+ status: AppSectionItemState;
+ details: QueueDetailsAppState;
+ paged: QueuePagedAppState;
+ options: {
+ includeUnknownSeriesItems: boolean;
+ };
+}
+
+export default QueueAppState;
diff --git a/frontend/src/App/State/ReleasesAppState.ts b/frontend/src/App/State/ReleasesAppState.ts
new file mode 100644
index 00000000000..350f6eac8ea
--- /dev/null
+++ b/frontend/src/App/State/ReleasesAppState.ts
@@ -0,0 +1,10 @@
+import AppSectionState, {
+ AppSectionFilterState,
+} from 'App/State/AppSectionState';
+import Release from 'typings/Release';
+
+interface ReleasesAppState
+ extends AppSectionState,
+ AppSectionFilterState {}
+
+export default ReleasesAppState;
diff --git a/frontend/src/App/State/RootFolderAppState.ts b/frontend/src/App/State/RootFolderAppState.ts
new file mode 100644
index 00000000000..9e636c95f47
--- /dev/null
+++ b/frontend/src/App/State/RootFolderAppState.ts
@@ -0,0 +1,12 @@
+import AppSectionState, {
+ AppSectionDeleteState,
+ AppSectionSaveState,
+} from 'App/State/AppSectionState';
+import RootFolder from 'typings/RootFolder';
+
+interface RootFolderAppState
+ extends AppSectionState,
+ AppSectionDeleteState,
+ AppSectionSaveState {}
+
+export default RootFolderAppState;
diff --git a/frontend/src/App/State/SeriesAppState.ts b/frontend/src/App/State/SeriesAppState.ts
new file mode 100644
index 00000000000..5da5987dd75
--- /dev/null
+++ b/frontend/src/App/State/SeriesAppState.ts
@@ -0,0 +1,66 @@
+import AppSectionState, {
+ AppSectionDeleteState,
+ AppSectionSaveState,
+} from 'App/State/AppSectionState';
+import Column from 'Components/Table/Column';
+import { SortDirection } from 'Helpers/Props/sortDirections';
+import Series from 'Series/Series';
+import { Filter, FilterBuilderProp } from './AppState';
+
+export interface SeriesIndexAppState {
+ sortKey: string;
+ sortDirection: SortDirection;
+ secondarySortKey: string;
+ secondarySortDirection: SortDirection;
+ view: string;
+
+ posterOptions: {
+ detailedProgressBar: boolean;
+ size: string;
+ showTitle: boolean;
+ showMonitored: boolean;
+ showQualityProfile: boolean;
+ showTags: boolean;
+ showSearchAction: boolean;
+ };
+
+ overviewOptions: {
+ detailedProgressBar: boolean;
+ size: string;
+ showMonitored: boolean;
+ showNetwork: boolean;
+ showQualityProfile: boolean;
+ showPreviousAiring: boolean;
+ showAdded: boolean;
+ showSeasonCount: boolean;
+ showPath: boolean;
+ showSizeOnDisk: boolean;
+ showTags: boolean;
+ showSearchAction: boolean;
+ };
+
+ tableOptions: {
+ showBanners: boolean;
+ showSearchAction: boolean;
+ };
+
+ selectedFilterKey: string;
+ filterBuilderProps: FilterBuilderProp[];
+ filters: Filter[];
+ columns: Column[];
+}
+
+interface SeriesAppState
+ extends AppSectionState,
+ AppSectionDeleteState,
+ AppSectionSaveState {
+ itemMap: Record;
+
+ deleteOptions: {
+ addImportListExclusion: boolean;
+ };
+
+ pendingChanges: Partial;
+}
+
+export default SeriesAppState;
diff --git a/frontend/src/App/State/SettingsAppState.ts b/frontend/src/App/State/SettingsAppState.ts
new file mode 100644
index 00000000000..b8e6f495416
--- /dev/null
+++ b/frontend/src/App/State/SettingsAppState.ts
@@ -0,0 +1,109 @@
+import AppSectionState, {
+ AppSectionDeleteState,
+ AppSectionItemSchemaState,
+ AppSectionItemState,
+ AppSectionSaveState,
+ PagedAppSectionState,
+} from 'App/State/AppSectionState';
+import Language from 'Language/Language';
+import CustomFormat from 'typings/CustomFormat';
+import DownloadClient from 'typings/DownloadClient';
+import ImportList from 'typings/ImportList';
+import ImportListExclusion from 'typings/ImportListExclusion';
+import ImportListOptionsSettings from 'typings/ImportListOptionsSettings';
+import Indexer from 'typings/Indexer';
+import IndexerFlag from 'typings/IndexerFlag';
+import Notification from 'typings/Notification';
+import QualityProfile from 'typings/QualityProfile';
+import General from 'typings/Settings/General';
+import NamingConfig from 'typings/Settings/NamingConfig';
+import NamingExample from 'typings/Settings/NamingExample';
+import ReleaseProfile from 'typings/Settings/ReleaseProfile';
+import UiSettings from 'typings/Settings/UiSettings';
+import MetadataAppState from './MetadataAppState';
+
+export interface DownloadClientAppState
+ extends AppSectionState,
+ AppSectionDeleteState,
+ AppSectionSaveState {
+ isTestingAll: boolean;
+}
+
+export interface GeneralAppState
+ extends AppSectionItemState,
+ AppSectionSaveState {}
+
+export interface NamingAppState
+ extends AppSectionItemState,
+ AppSectionSaveState {}
+
+export type NamingExamplesAppState = AppSectionItemState;
+
+export interface ImportListAppState
+ extends AppSectionState,
+ AppSectionDeleteState,
+ AppSectionSaveState {}
+
+export interface IndexerAppState
+ extends AppSectionState,
+ AppSectionDeleteState,
+ AppSectionSaveState {
+ isTestingAll: boolean;
+}
+
+export interface NotificationAppState
+ extends AppSectionState,
+ AppSectionDeleteState {}
+
+export interface QualityProfilesAppState
+ extends AppSectionState,
+ AppSectionItemSchemaState {}
+
+export interface ReleaseProfilesAppState
+ extends AppSectionState,
+ AppSectionSaveState {
+ pendingChanges: Partial;
+}
+
+export interface CustomFormatAppState
+ extends AppSectionState,
+ AppSectionDeleteState,
+ AppSectionSaveState {}
+
+export interface ImportListOptionsSettingsAppState
+ extends AppSectionItemState,
+ AppSectionSaveState {}
+
+export interface ImportListExclusionsSettingsAppState
+ extends AppSectionState,
+ AppSectionSaveState,
+ PagedAppSectionState,
+ AppSectionDeleteState {
+ pendingChanges: Partial;
+}
+
+export type IndexerFlagSettingsAppState = AppSectionState;
+export type LanguageSettingsAppState = AppSectionState;
+export type UiSettingsAppState = AppSectionItemState;
+
+interface SettingsAppState {
+ advancedSettings: boolean;
+ customFormats: CustomFormatAppState;
+ downloadClients: DownloadClientAppState;
+ general: GeneralAppState;
+ importListExclusions: ImportListExclusionsSettingsAppState;
+ importListOptions: ImportListOptionsSettingsAppState;
+ importLists: ImportListAppState;
+ indexerFlags: IndexerFlagSettingsAppState;
+ indexers: IndexerAppState;
+ languages: LanguageSettingsAppState;
+ metadata: MetadataAppState;
+ naming: NamingAppState;
+ namingExamples: NamingExamplesAppState;
+ notifications: NotificationAppState;
+ qualityProfiles: QualityProfilesAppState;
+ releaseProfiles: ReleaseProfilesAppState;
+ ui: UiSettingsAppState;
+}
+
+export default SettingsAppState;
diff --git a/frontend/src/App/State/SystemAppState.ts b/frontend/src/App/State/SystemAppState.ts
new file mode 100644
index 00000000000..1161f0e1eed
--- /dev/null
+++ b/frontend/src/App/State/SystemAppState.ts
@@ -0,0 +1,22 @@
+import DiskSpace from 'typings/DiskSpace';
+import Health from 'typings/Health';
+import SystemStatus from 'typings/SystemStatus';
+import Task from 'typings/Task';
+import Update from 'typings/Update';
+import AppSectionState, { AppSectionItemState } from './AppSectionState';
+
+export type DiskSpaceAppState = AppSectionState;
+export type HealthAppState = AppSectionState;
+export type SystemStatusAppState = AppSectionItemState;
+export type TaskAppState = AppSectionState;
+export type UpdateAppState = AppSectionState;
+
+interface SystemAppState {
+ diskSpace: DiskSpaceAppState;
+ health: HealthAppState;
+ status: SystemStatusAppState;
+ tasks: TaskAppState;
+ updates: UpdateAppState;
+}
+
+export default SystemAppState;
diff --git a/frontend/src/App/State/TagsAppState.ts b/frontend/src/App/State/TagsAppState.ts
new file mode 100644
index 00000000000..914df904425
--- /dev/null
+++ b/frontend/src/App/State/TagsAppState.ts
@@ -0,0 +1,32 @@
+import ModelBase from 'App/ModelBase';
+import AppSectionState, {
+ AppSectionDeleteState,
+ AppSectionSaveState,
+} from 'App/State/AppSectionState';
+
+export interface Tag extends ModelBase {
+ label: string;
+}
+
+export interface TagDetail extends ModelBase {
+ label: string;
+ autoTagIds: number[];
+ delayProfileIds: number[];
+ downloadClientIds: [];
+ importListIds: number[];
+ indexerIds: number[];
+ notificationIds: number[];
+ restrictionIds: number[];
+ seriesIds: number[];
+}
+
+export interface TagDetailAppState
+ extends AppSectionState,
+ AppSectionDeleteState,
+ AppSectionSaveState {}
+
+interface TagsAppState extends AppSectionState, AppSectionDeleteState {
+ details: TagDetailAppState;
+}
+
+export default TagsAppState;
diff --git a/frontend/src/App/State/WantedAppState.ts b/frontend/src/App/State/WantedAppState.ts
new file mode 100644
index 00000000000..b543d387906
--- /dev/null
+++ b/frontend/src/App/State/WantedAppState.ts
@@ -0,0 +1,13 @@
+import AppSectionState from 'App/State/AppSectionState';
+import Episode from 'Episode/Episode';
+
+type WantedCutoffUnmetAppState = AppSectionState;
+
+type WantedMissingAppState = AppSectionState;
+
+interface WantedAppState {
+ cutoffUnmet: WantedCutoffUnmetAppState;
+ missing: WantedMissingAppState;
+}
+
+export default WantedAppState;
diff --git a/frontend/src/Calendar/Agenda/Agenda.css.d.ts b/frontend/src/Calendar/Agenda/Agenda.css.d.ts
new file mode 100644
index 00000000000..44421cc994e
--- /dev/null
+++ b/frontend/src/Calendar/Agenda/Agenda.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'agenda': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Calendar/Agenda/Agenda.js b/frontend/src/Calendar/Agenda/Agenda.js
deleted file mode 100644
index 89472301d1c..00000000000
--- a/frontend/src/Calendar/Agenda/Agenda.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import moment from 'moment';
-import PropTypes from 'prop-types';
-import React from 'react';
-import AgendaEventConnector from './AgendaEventConnector';
-import styles from './Agenda.css';
-
-function Agenda(props) {
- const {
- items
- } = props;
-
- return (
-
- {
- items.map((item, index) => {
- const momentDate = moment(item.airDateUtc);
- const showDate = index === 0 ||
- !moment(items[index - 1].airDateUtc).isSame(momentDate, 'day');
-
- return (
-
- );
- })
- }
-
+ {items.map((item, index) => {
+ const momentDate = moment(item.airDateUtc);
+ const showDate =
+ index === 0 ||
+ !moment(items[index - 1].airDateUtc).isSame(momentDate, 'day');
+
+ return
;
+ })}
+
-
-
-
-
- {
- showDate &&
- startTime.format(longDateFormat)
- }
-
-
-
-
- {formatTime(airDateUtc, timeFormat)} - {formatTime(endTime.toISOString(), timeFormat, { includeMinuteZero: true })}
-
-
-
- {series.title}
-
-
- {
- showEpisodeInformation &&
-
- {seasonNumber}x{padNumber(episodeNumber, 2)}
-
- {
- series.seriesType === 'anime' && absoluteEpisodeNumber &&
-
({absoluteEpisodeNumber})
- }
-
-
-
-
- }
-
-
- {
- showEpisodeInformation &&
- title
- }
-
-
- {
- missingAbsoluteNumber &&
-
- }
-
- {
- unverifiedSceneNumbering && !missingAbsoluteNumber ?
-
:
- null
- }
-
- {
- !!queueItem &&
-
-
- }
-
- {
- !queueItem && grabbed &&
-
- }
-
- {
- showCutoffUnmetIcon &&
- !!episodeFile &&
- episodeFile.qualityCutoffNotMet &&
-
- }
-
- {
- episodeNumber === 1 && seasonNumber > 0 &&
-
- }
-
- {
- showFinaleIcon &&
- episodeNumber !== 1 &&
- seasonNumber > 0 &&
- episodeNumber === seasonStatistics.totalEpisodeCount &&
-
- }
-
- {
- showSpecialIcon &&
- (episodeNumber === 0 || seasonNumber === 0) &&
-
- }
-
-
-
-
-
+
+
+
+
+ {showDate && startTime.format(longDateFormat)}
+
+
+
+
+ {formatTime(airDateUtc, timeFormat)} -{' '}
+ {formatTime(endTime.toISOString(), timeFormat, {
+ includeMinuteZero: true,
+ })}
+
+
+
{series.title}
+
+ {showEpisodeInformation ? (
+
+ {seasonNumber}x{padNumber(episodeNumber, 2)}
+ {series.seriesType === 'anime' && absoluteEpisodeNumber && (
+
+ ({absoluteEpisodeNumber})
+
+ )}
+
-
+
+ ) : null}
+
+
+ {showEpisodeInformation ? title : null}
+
+
+ {missingAbsoluteNumber ? (
+
+ ) : null}
+
+ {unverifiedSceneNumbering && !missingAbsoluteNumber ? (
+
+ ) : null}
+
+ {queueItem ? (
+
+
+ ) : null}
+
+ {!queueItem && grabbed ? (
+
+ ) : null}
+
+ {showCutoffUnmetIcon &&
+ episodeFile &&
+ episodeFile.qualityCutoffNotMet ? (
+
+ ) : null}
+
+ {episodeNumber === 1 && seasonNumber > 0 && (
+
+ )}
+
+ {showFinaleIcon && finaleType ? (
+
+ ) : null}
+
+ {showSpecialIcon && (episodeNumber === 0 || seasonNumber === 0) ? (
+
+ ) : null}
+
+
+
+
+
- {
- isFetching && !isPopulated &&
-
- }
-
- {
- !isFetching && !!error &&
-
Unable to load the calendar
- }
-
- {
- !error && isPopulated && view === calendarViews.AGENDA &&
-
- }
-
- {
- !error && isPopulated && view !== calendarViews.AGENDA &&
-
-
- }
-
>();
+
+ const { isFetching, isPopulated, error, items, time, view } = useSelector(
+ (state: AppState) => state.calendar
+ );
+
+ const isRefreshingSeries = useSelector(
+ createCommandExecutingSelector(commandNames.REFRESH_SERIES)
+ );
+
+ const firstDayOfWeek = useSelector(
+ (state: AppState) => state.settings.ui.item.firstDayOfWeek
+ );
+
+ const wasRefreshingSeries = usePrevious(isRefreshingSeries);
+ const previousFirstDayOfWeek = usePrevious(firstDayOfWeek);
+ const previousItems = usePrevious(items);
+
+ const handleScheduleUpdate = useCallback(() => {
+ clearTimeout(updateTimeout.current);
+
+ function updateCalendar() {
+ dispatch(gotoCalendarToday());
+ updateTimeout.current = setTimeout(updateCalendar, UPDATE_DELAY);
+ }
+
+ updateTimeout.current = setTimeout(updateCalendar, UPDATE_DELAY);
+ }, [dispatch]);
+
+ useEffect(() => {
+ handleScheduleUpdate();
+
+ return () => {
+ dispatch(clearCalendar());
+ dispatch(clearQueueDetails());
+ dispatch(clearEpisodeFiles());
+ clearTimeout(updateTimeout.current);
+ };
+ }, [dispatch, handleScheduleUpdate]);
+
+ useEffect(() => {
+ if (requestCurrentPage) {
+ dispatch(fetchCalendar());
+ } else {
+ dispatch(gotoCalendarToday());
+ }
+ }, [requestCurrentPage, dispatch]);
+
+ useEffect(() => {
+ const repopulate = () => {
+ dispatch(fetchQueueDetails({ time, view }));
+ dispatch(fetchCalendar({ time, view }));
+ };
+
+ registerPagePopulator(repopulate, [
+ 'episodeFileUpdated',
+ 'episodeFileDeleted',
+ ]);
+
+ return () => {
+ unregisterPagePopulator(repopulate);
+ };
+ }, [time, view, dispatch]);
+
+ useEffect(() => {
+ handleScheduleUpdate();
+ }, [time, handleScheduleUpdate]);
+
+ useEffect(() => {
+ if (
+ previousFirstDayOfWeek != null &&
+ firstDayOfWeek !== previousFirstDayOfWeek
+ ) {
+ dispatch(fetchCalendar({ time, view }));
+ }
+ }, [time, view, firstDayOfWeek, previousFirstDayOfWeek, dispatch]);
+
+ useEffect(() => {
+ if (wasRefreshingSeries && !isRefreshingSeries) {
+ dispatch(fetchCalendar({ time, view }));
+ }
+ }, [time, view, isRefreshingSeries, wasRefreshingSeries, dispatch]);
+
+ useEffect(() => {
+ if (!previousItems || hasDifferentItems(items, previousItems)) {
+ const episodeIds = selectUniqueIds(items, 'id');
+ const episodeFileIds = selectUniqueIds(
+ items,
+ 'episodeFileId'
+ );
+
+ if (items.length) {
+ dispatch(fetchQueueDetails({ episodeIds }));
+ }
+
+ if (episodeFileIds.length) {
+ dispatch(fetchEpisodeFiles({ episodeFileIds }));
+ }
+ }
+ }, [items, previousItems, dispatch]);
+
+ return (
+
+ {isFetching && !isPopulated ?
: null}
+
+ {!isFetching && error ? (
+
{translate('CalendarLoadError')}
+ ) : null}
+
+ {!error && isPopulated && view === 'agenda' ? (
+
+ ) : null}
+
+ {!error && isPopulated && view !== 'agenda' ? (
+
+
+ ) : null}
+
-
-
-
-
-
-
-
-
-
-
- {
- isMeasured ?
-
- }
-
-
- {
- hasSeries &&
-
-
-
- );
- }
-}
-
-CalendarPage.propTypes = {
- selectedFilterKey: PropTypes.string.isRequired,
- filters: PropTypes.arrayOf(PropTypes.object).isRequired,
- hasSeries: PropTypes.bool.isRequired,
- missingEpisodeIds: PropTypes.arrayOf(PropTypes.number).isRequired,
- isRssSyncExecuting: PropTypes.bool.isRequired,
- isSearchingForMissing: PropTypes.bool.isRequired,
- useCurrentPage: PropTypes.bool.isRequired,
- onSearchMissingPress: PropTypes.func.isRequired,
- onDaysCountChange: PropTypes.func.isRequired,
- onRssSyncPress: PropTypes.func.isRequired,
- onFilterSelect: PropTypes.func.isRequired
-};
-
-export default CalendarPage;
diff --git a/frontend/src/Calendar/CalendarPage.tsx b/frontend/src/Calendar/CalendarPage.tsx
new file mode 100644
index 00000000000..f408b6a60c0
--- /dev/null
+++ b/frontend/src/Calendar/CalendarPage.tsx
@@ -0,0 +1,226 @@
+import moment from 'moment';
+import React, { useCallback, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import * as commandNames from 'Commands/commandNames';
+import Measure from 'Components/Measure';
+import FilterMenu from 'Components/Menu/FilterMenu';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import { align, icons } from 'Helpers/Props';
+import NoSeries from 'Series/NoSeries';
+import {
+ searchMissing,
+ setCalendarDaysCount,
+ setCalendarFilter,
+} from 'Store/Actions/calendarActions';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { createCustomFiltersSelector } from 'Store/Selectors/createClientSideCollectionSelector';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
+import createSeriesCountSelector from 'Store/Selectors/createSeriesCountSelector';
+import { isCommandExecuting } from 'Utilities/Command';
+import isBefore from 'Utilities/Date/isBefore';
+import translate from 'Utilities/String/translate';
+import Calendar from './Calendar';
+import CalendarFilterModal from './CalendarFilterModal';
+import CalendarLinkModal from './iCal/CalendarLinkModal';
+import Legend from './Legend/Legend';
+import CalendarOptionsModal from './Options/CalendarOptionsModal';
+import styles from './CalendarPage.css';
+
+const MINIMUM_DAY_WIDTH = 120;
+
+function createMissingEpisodeIdsSelector() {
+ return createSelector(
+ (state: AppState) => state.calendar.start,
+ (state: AppState) => state.calendar.end,
+ (state: AppState) => state.calendar.items,
+ (state: AppState) => state.queue.details.items,
+ (start, end, episodes, queueDetails) => {
+ return episodes.reduce((acc, episode) => {
+ const airDateUtc = episode.airDateUtc;
+
+ if (
+ !episode.episodeFileId &&
+ moment(airDateUtc).isAfter(start) &&
+ moment(airDateUtc).isBefore(end) &&
+ isBefore(episode.airDateUtc) &&
+ !queueDetails.some(
+ (details) => !!details.episode && details.episode.id === episode.id
+ )
+ ) {
+ acc.push(episode.id);
+ }
+
+ return acc;
+ }, []);
+ }
+ );
+}
+
+function createIsSearchingSelector() {
+ return createSelector(
+ (state: AppState) => state.calendar.searchMissingCommandId,
+ createCommandsSelector(),
+ (searchMissingCommandId, commands) => {
+ if (searchMissingCommandId == null) {
+ return false;
+ }
+
+ return isCommandExecuting(
+ commands.find((command) => {
+ return command.id === searchMissingCommandId;
+ })
+ );
+ }
+ );
+}
+
+function CalendarPage() {
+ const dispatch = useDispatch();
+
+ const { selectedFilterKey, filters } = useSelector(
+ (state: AppState) => state.calendar
+ );
+ const missingEpisodeIds = useSelector(createMissingEpisodeIdsSelector());
+ const isSearchingForMissing = useSelector(createIsSearchingSelector());
+ const isRssSyncExecuting = useSelector(
+ createCommandExecutingSelector(commandNames.RSS_SYNC)
+ );
+ const customFilters = useSelector(createCustomFiltersSelector('calendar'));
+ const hasSeries = !!useSelector(createSeriesCountSelector());
+
+ const [isCalendarLinkModalOpen, setIsCalendarLinkModalOpen] = useState(false);
+ const [isOptionsModalOpen, setIsOptionsModalOpen] = useState(false);
+ const [width, setWidth] = useState(0);
+
+ const isMeasured = width > 0;
+ const PageComponent = hasSeries ? Calendar : NoSeries;
+
+ const handleMeasure = useCallback(
+ ({ width: newWidth }: { width: number }) => {
+ setWidth(newWidth);
+
+ const dayCount = Math.max(
+ 3,
+ Math.min(7, Math.floor(newWidth / MINIMUM_DAY_WIDTH))
+ );
+
+ dispatch(setCalendarDaysCount({ dayCount }));
+ },
+ [dispatch]
+ );
+
+ const handleGetCalendarLinkPress = useCallback(() => {
+ setIsCalendarLinkModalOpen(true);
+ }, []);
+
+ const handleGetCalendarLinkModalClose = useCallback(() => {
+ setIsCalendarLinkModalOpen(false);
+ }, []);
+
+ const handleOptionsPress = useCallback(() => {
+ setIsOptionsModalOpen(true);
+ }, []);
+
+ const handleOptionsModalClose = useCallback(() => {
+ setIsOptionsModalOpen(false);
+ }, []);
+
+ const handleRssSyncPress = useCallback(() => {
+ dispatch(
+ executeCommand({
+ name: commandNames.RSS_SYNC,
+ })
+ );
+ }, [dispatch]);
+
+ const handleSearchMissingPress = useCallback(() => {
+ dispatch(searchMissing({ episodeIds: missingEpisodeIds }));
+ }, [missingEpisodeIds, dispatch]);
+
+ const handleFilterSelect = useCallback(
+ (key: string) => {
+ dispatch(setCalendarFilter({ selectedFilterKey: key }));
+ },
+ [dispatch]
+ );
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {isMeasured ?
}
+
+
+ {hasSeries &&
+
+
+ );
+}
+
+export default CalendarPage;
diff --git a/frontend/src/Calendar/CalendarPageConnector.js b/frontend/src/Calendar/CalendarPageConnector.js
deleted file mode 100644
index 350377c5605..00000000000
--- a/frontend/src/Calendar/CalendarPageConnector.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import moment from 'moment';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import * as commandNames from 'Commands/commandNames';
-import withCurrentPage from 'Components/withCurrentPage';
-import { searchMissing, setCalendarDaysCount, setCalendarFilter } from 'Store/Actions/calendarActions';
-import { executeCommand } from 'Store/Actions/commandActions';
-import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
-import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
-import createSeriesCountSelector from 'Store/Selectors/createSeriesCountSelector';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
-import { isCommandExecuting } from 'Utilities/Command';
-import isBefore from 'Utilities/Date/isBefore';
-import CalendarPage from './CalendarPage';
-
-function createMissingEpisodeIdsSelector() {
- return createSelector(
- (state) => state.calendar.start,
- (state) => state.calendar.end,
- (state) => state.calendar.items,
- (state) => state.queue.details.items,
- (start, end, episodes, queueDetails) => {
- return episodes.reduce((acc, episode) => {
- const airDateUtc = episode.airDateUtc;
-
- if (
- !episode.episodeFileId &&
- moment(airDateUtc).isAfter(start) &&
- moment(airDateUtc).isBefore(end) &&
- isBefore(episode.airDateUtc) &&
- !queueDetails.some((details) => !!details.episode && details.episode.id === episode.id)
- ) {
- acc.push(episode.id);
- }
-
- return acc;
- }, []);
- }
- );
-}
-
-function createIsSearchingSelector() {
- return createSelector(
- (state) => state.calendar.searchMissingCommandId,
- createCommandsSelector(),
- (searchMissingCommandId, commands) => {
- if (searchMissingCommandId == null) {
- return false;
- }
-
- return isCommandExecuting(commands.find((command) => {
- return command.id === searchMissingCommandId;
- }));
- }
- );
-}
-
-function createMapStateToProps() {
- return createSelector(
- (state) => state.calendar.selectedFilterKey,
- (state) => state.calendar.filters,
- createSeriesCountSelector(),
- createUISettingsSelector(),
- createMissingEpisodeIdsSelector(),
- createCommandExecutingSelector(commandNames.RSS_SYNC),
- createIsSearchingSelector(),
- (
- selectedFilterKey,
- filters,
- seriesCount,
- uiSettings,
- missingEpisodeIds,
- isRssSyncExecuting,
- isSearchingForMissing
- ) => {
- return {
- selectedFilterKey,
- filters,
- colorImpairedMode: uiSettings.enableColorImpairedMode,
- hasSeries: !!seriesCount,
- missingEpisodeIds,
- isRssSyncExecuting,
- isSearchingForMissing
- };
- }
- );
-}
-
-function createMapDispatchToProps(dispatch, props) {
- return {
- onRssSyncPress() {
- dispatch(executeCommand({
- name: commandNames.RSS_SYNC
- }));
- },
-
- onSearchMissingPress(episodeIds) {
- dispatch(searchMissing({ episodeIds }));
- },
-
- onDaysCountChange(dayCount) {
- dispatch(setCalendarDaysCount({ dayCount }));
- },
-
- onFilterSelect(selectedFilterKey) {
- dispatch(setCalendarFilter({ selectedFilterKey }));
- }
- };
-}
-
-export default withCurrentPage(
- connect(createMapStateToProps, createMapDispatchToProps)(CalendarPage)
-);
diff --git a/frontend/src/Calendar/Day/CalendarDay.css.d.ts b/frontend/src/Calendar/Day/CalendarDay.css.d.ts
new file mode 100644
index 00000000000..f32def3dd07
--- /dev/null
+++ b/frontend/src/Calendar/Day/CalendarDay.css.d.ts
@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'day': string;
+ 'dayOfMonth': string;
+ 'isDifferentMonth': string;
+ 'isSingleDay': string;
+ 'isToday': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Calendar/Day/CalendarDay.js b/frontend/src/Calendar/Day/CalendarDay.js
deleted file mode 100644
index b3da227dd4f..00000000000
--- a/frontend/src/Calendar/Day/CalendarDay.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import classNames from 'classnames';
-import moment from 'moment';
-import PropTypes from 'prop-types';
-import React from 'react';
-import * as calendarViews from 'Calendar/calendarViews';
-import CalendarEventConnector from 'Calendar/Events/CalendarEventConnector';
-import CalendarEventGroupConnector from 'Calendar/Events/CalendarEventGroupConnector';
-import styles from './CalendarDay.css';
-
-function CalendarDay(props) {
- const {
- date,
- time,
- isTodaysDate,
- events,
- view,
- onEventModalOpenToggle
- } = props;
-
- return (
-
- {
- view === calendarViews.MONTH &&
-
- {moment(date).date()}
-
- }
-
- {
- events.map((event) => {
- if (event.isGroup) {
- return (
-
-
(null);
+
+ React.useEffect(() => {
+ if (isTodaysDate && view === calendarViews.MONTH && ref.current) {
+ ref.current.scrollIntoView();
+ }
+ }, [time, isTodaysDate, view]);
+
+ return (
+
+ {view === calendarViews.MONTH && (
+
+ {moment(date).date()}
+
+ )}
+
+ {events.map((event) => {
+ if (event.isGroup) {
+ return (
+
+
- {
- dates.map((date) => {
- return (
-
- );
- }
-}
-
-CalendarDays.propTypes = {
- dates: PropTypes.arrayOf(PropTypes.string).isRequired,
- view: PropTypes.string.isRequired,
- isSidebarVisible: PropTypes.bool.isRequired,
- onNavigatePrevious: PropTypes.func.isRequired,
- onNavigateNext: PropTypes.func.isRequired
-};
-
-export default CalendarDays;
diff --git a/frontend/src/Calendar/Day/CalendarDays.tsx b/frontend/src/Calendar/Day/CalendarDays.tsx
new file mode 100644
index 00000000000..149dc145557
--- /dev/null
+++ b/frontend/src/Calendar/Day/CalendarDays.tsx
@@ -0,0 +1,135 @@
+import classNames from 'classnames';
+import moment from 'moment';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import * as calendarViews from 'Calendar/calendarViews';
+import {
+ gotoCalendarNextRange,
+ gotoCalendarPreviousRange,
+} from 'Store/Actions/calendarActions';
+import CalendarDay from './CalendarDay';
+import styles from './CalendarDays.css';
+
+function CalendarDays() {
+ const dispatch = useDispatch();
+ const { dates, view } = useSelector((state: AppState) => state.calendar);
+ const isSidebarVisible = useSelector(
+ (state: AppState) => state.app.isSidebarVisible
+ );
+
+ const updateTimeout = useRef>();
+ const touchStart = useRef(null);
+ const isEventModalOpen = useRef(false);
+ const [todaysDate, setTodaysDate] = useState(
+ moment().startOf('day').toISOString()
+ );
+
+ const handleEventModalOpenToggle = useCallback((isOpen: boolean) => {
+ isEventModalOpen.current = isOpen;
+ }, []);
+
+ const scheduleUpdate = useCallback(() => {
+ clearTimeout(updateTimeout.current);
+
+ const todaysDate = moment().startOf('day');
+ const diff = moment().diff(todaysDate.clone().add(1, 'day'));
+
+ setTodaysDate(todaysDate.toISOString());
+
+ updateTimeout.current = setTimeout(scheduleUpdate, diff);
+ }, []);
+
+ const handleTouchStart = useCallback(
+ (event: TouchEvent) => {
+ const touches = event.touches;
+ const currentTouch = touches[0].pageX;
+
+ if (touches.length !== 1) {
+ return;
+ }
+
+ if (currentTouch < 50 || isSidebarVisible || isEventModalOpen.current) {
+ return;
+ }
+
+ touchStart.current = currentTouch;
+ },
+ [isSidebarVisible]
+ );
+
+ const handleTouchEnd = useCallback(
+ (event: TouchEvent) => {
+ const touches = event.changedTouches;
+ const currentTouch = touches[0].pageX;
+
+ if (!touchStart.current) {
+ return;
+ }
+
+ if (
+ currentTouch > touchStart.current &&
+ currentTouch - touchStart.current > 100
+ ) {
+ dispatch(gotoCalendarPreviousRange());
+ } else if (
+ currentTouch < touchStart.current &&
+ touchStart.current - currentTouch > 100
+ ) {
+ dispatch(gotoCalendarNextRange());
+ }
+
+ touchStart.current = null;
+ },
+ [dispatch]
+ );
+
+ const handleTouchCancel = useCallback(() => {
+ touchStart.current = null;
+ }, []);
+
+ const handleTouchMove = useCallback(() => {
+ if (!touchStart.current) {
+ return;
+ }
+ }, []);
+
+ useEffect(() => {
+ if (view === calendarViews.MONTH) {
+ scheduleUpdate();
+ }
+ }, [view, scheduleUpdate]);
+
+ useEffect(() => {
+ window.addEventListener('touchstart', handleTouchStart);
+ window.addEventListener('touchend', handleTouchEnd);
+ window.addEventListener('touchcancel', handleTouchCancel);
+ window.addEventListener('touchmove', handleTouchMove);
+
+ return () => {
+ window.removeEventListener('touchstart', handleTouchStart);
+ window.removeEventListener('touchend', handleTouchEnd);
+ window.removeEventListener('touchcancel', handleTouchCancel);
+ window.removeEventListener('touchmove', handleTouchMove);
+ };
+ }, [handleTouchStart, handleTouchEnd, handleTouchCancel, handleTouchMove]);
+
+ return (
+
+ {dates.map((date) => {
+ return (
+
+ );
+}
+
+export default CalendarDays;
diff --git a/frontend/src/Calendar/Day/CalendarDaysConnector.js b/frontend/src/Calendar/Day/CalendarDaysConnector.js
deleted file mode 100644
index 0acce70b909..00000000000
--- a/frontend/src/Calendar/Day/CalendarDaysConnector.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { gotoCalendarNextRange, gotoCalendarPreviousRange } from 'Store/Actions/calendarActions';
-import CalendarDays from './CalendarDays';
-
-function createMapStateToProps() {
- return createSelector(
- (state) => state.calendar,
- (state) => state.app.isSidebarVisible,
- (calendar, isSidebarVisible) => {
- return {
- dates: calendar.dates,
- view: calendar.view,
- isSidebarVisible
- };
- }
- );
-}
-
-const mapDispatchToProps = {
- onNavigatePrevious: gotoCalendarPreviousRange,
- onNavigateNext: gotoCalendarNextRange
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(CalendarDays);
diff --git a/frontend/src/Calendar/Day/DayOfWeek.css b/frontend/src/Calendar/Day/DayOfWeek.css
index bb73fa3ba87..2d31a30be0c 100644
--- a/frontend/src/Calendar/Day/DayOfWeek.css
+++ b/frontend/src/Calendar/Day/DayOfWeek.css
@@ -1,6 +1,6 @@
.dayOfWeek {
flex: 1 0 14.28%;
- background-color: var(--calendarBackgroudColor);
+ background-color: var(--calendarBackgroundColor);
text-align: center;
}
diff --git a/frontend/src/Calendar/Day/DayOfWeek.css.d.ts b/frontend/src/Calendar/Day/DayOfWeek.css.d.ts
new file mode 100644
index 00000000000..a377e4a8e19
--- /dev/null
+++ b/frontend/src/Calendar/Day/DayOfWeek.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'dayOfWeek': string;
+ 'isSingleDay': string;
+ 'isToday': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Calendar/Day/DayOfWeek.js b/frontend/src/Calendar/Day/DayOfWeek.js
deleted file mode 100644
index 39e40fce85f..00000000000
--- a/frontend/src/Calendar/Day/DayOfWeek.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import classNames from 'classnames';
-import moment from 'moment';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import * as calendarViews from 'Calendar/calendarViews';
-import getRelativeDate from 'Utilities/Date/getRelativeDate';
-import styles from './DayOfWeek.css';
-
-class DayOfWeek extends Component {
-
- //
- // Render
-
- render() {
- const {
- date,
- view,
- isTodaysDate,
- calendarWeekColumnHeader,
- shortDateFormat,
- showRelativeDates
- } = this.props;
-
- const highlightToday = view !== calendarViews.MONTH && isTodaysDate;
- const momentDate = moment(date);
- let formatedDate = momentDate.format('dddd');
-
- if (view === calendarViews.WEEK) {
- formatedDate = momentDate.format(calendarWeekColumnHeader);
- } else if (view === calendarViews.FORECAST) {
- formatedDate = getRelativeDate(date, shortDateFormat, showRelativeDates);
- }
-
- return (
-
- {formatedDate}
-
- );
- }
-}
-
-DayOfWeek.propTypes = {
- date: PropTypes.string.isRequired,
- view: PropTypes.string.isRequired,
- isTodaysDate: PropTypes.bool.isRequired,
- calendarWeekColumnHeader: PropTypes.string.isRequired,
- shortDateFormat: PropTypes.string.isRequired,
- showRelativeDates: PropTypes.bool.isRequired
-};
-
-export default DayOfWeek;
diff --git a/frontend/src/Calendar/Day/DayOfWeek.tsx b/frontend/src/Calendar/Day/DayOfWeek.tsx
new file mode 100644
index 00000000000..c8b493b7c9a
--- /dev/null
+++ b/frontend/src/Calendar/Day/DayOfWeek.tsx
@@ -0,0 +1,54 @@
+import classNames from 'classnames';
+import moment from 'moment';
+import React from 'react';
+import * as calendarViews from 'Calendar/calendarViews';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import styles from './DayOfWeek.css';
+
+interface DayOfWeekProps {
+ date: string;
+ view: string;
+ isTodaysDate: boolean;
+ calendarWeekColumnHeader: string;
+ shortDateFormat: string;
+ showRelativeDates: boolean;
+}
+
+function DayOfWeek(props: DayOfWeekProps) {
+ const {
+ date,
+ view,
+ isTodaysDate,
+ calendarWeekColumnHeader,
+ shortDateFormat,
+ showRelativeDates,
+ } = props;
+
+ const highlightToday = view !== calendarViews.MONTH && isTodaysDate;
+ const momentDate = moment(date);
+ let formatedDate = momentDate.format('dddd');
+
+ if (view === calendarViews.WEEK) {
+ formatedDate = momentDate.format(calendarWeekColumnHeader);
+ } else if (view === calendarViews.FORECAST) {
+ formatedDate = getRelativeDate({
+ date,
+ shortDateFormat,
+ showRelativeDates,
+ });
+ }
+
+ return (
+
+ {formatedDate}
+
+ );
+}
+
+export default DayOfWeek;
diff --git a/frontend/src/Calendar/Day/DaysOfWeek.css.d.ts b/frontend/src/Calendar/Day/DaysOfWeek.css.d.ts
new file mode 100644
index 00000000000..5bc224b68e9
--- /dev/null
+++ b/frontend/src/Calendar/Day/DaysOfWeek.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'daysOfWeek': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Calendar/Day/DaysOfWeek.js b/frontend/src/Calendar/Day/DaysOfWeek.js
deleted file mode 100644
index 9f94b1079d1..00000000000
--- a/frontend/src/Calendar/Day/DaysOfWeek.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import moment from 'moment';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import * as calendarViews from 'Calendar/calendarViews';
-import DayOfWeek from './DayOfWeek';
-import styles from './DaysOfWeek.css';
-
-class DaysOfWeek extends Component {
-
- //
- // Lifecycle
-
- constructor(props, context) {
- super(props, context);
-
- this.state = {
- todaysDate: moment().startOf('day').toISOString()
- };
-
- this.updateTimeoutId = null;
- }
-
- // Lifecycle
-
- componentDidMount() {
- const view = this.props.view;
-
- if (view !== calendarViews.AGENDA || view !== calendarViews.MONTH) {
- this.scheduleUpdate();
- }
- }
-
- componentWillUnmount() {
- this.clearUpdateTimeout();
- }
-
- //
- // Control
-
- scheduleUpdate = () => {
- this.clearUpdateTimeout();
- const todaysDate = moment().startOf('day');
- const diff = todaysDate.clone().add(1, 'day').diff(moment());
-
- this.setState({
- todaysDate: todaysDate.toISOString()
- });
-
- this.updateTimeoutId = setTimeout(this.scheduleUpdate, diff);
- };
-
- clearUpdateTimeout = () => {
- if (this.updateTimeoutId) {
- clearTimeout(this.updateTimeoutId);
- }
- };
-
- //
- // Render
-
- render() {
- const {
- dates,
- view,
- ...otherProps
- } = this.props;
-
- if (view === calendarViews.AGENDA) {
- return null;
- }
-
- return (
-
- {
- dates.map((date) => {
- return (
-
- );
- }
-}
-
-DaysOfWeek.propTypes = {
- dates: PropTypes.arrayOf(PropTypes.string),
- view: PropTypes.string.isRequired
-};
-
-export default DaysOfWeek;
diff --git a/frontend/src/Calendar/Day/DaysOfWeek.tsx b/frontend/src/Calendar/Day/DaysOfWeek.tsx
new file mode 100644
index 00000000000..64bc886ccd3
--- /dev/null
+++ b/frontend/src/Calendar/Day/DaysOfWeek.tsx
@@ -0,0 +1,60 @@
+import moment from 'moment';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import * as calendarViews from 'Calendar/calendarViews';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import DayOfWeek from './DayOfWeek';
+import styles from './DaysOfWeek.css';
+
+function DaysOfWeek() {
+ const { dates, view } = useSelector((state: AppState) => state.calendar);
+ const { calendarWeekColumnHeader, shortDateFormat, showRelativeDates } =
+ useSelector(createUISettingsSelector());
+
+ const updateTimeout = useRef>();
+ const [todaysDate, setTodaysDate] = useState(
+ moment().startOf('day').toISOString()
+ );
+
+ const scheduleUpdate = useCallback(() => {
+ clearTimeout(updateTimeout.current);
+
+ const todaysDate = moment().startOf('day');
+ const diff = moment().diff(todaysDate.clone().add(1, 'day'));
+
+ setTodaysDate(todaysDate.toISOString());
+
+ updateTimeout.current = setTimeout(scheduleUpdate, diff);
+ }, []);
+
+ useEffect(() => {
+ if (view !== calendarViews.AGENDA && view !== calendarViews.MONTH) {
+ scheduleUpdate();
+ }
+ }, [view, scheduleUpdate]);
+
+ if (view === calendarViews.AGENDA) {
+ return null;
+ }
+
+ return (
+
+ {dates.map((date) => {
+ return (
+
+ );
+}
+
+export default DaysOfWeek;
diff --git a/frontend/src/Calendar/Day/DaysOfWeekConnector.js b/frontend/src/Calendar/Day/DaysOfWeekConnector.js
deleted file mode 100644
index 7f5cdef1989..00000000000
--- a/frontend/src/Calendar/Day/DaysOfWeekConnector.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
-import DaysOfWeek from './DaysOfWeek';
-
-function createMapStateToProps() {
- return createSelector(
- (state) => state.calendar,
- createUISettingsSelector(),
- (calendar, UiSettings) => {
- return {
- dates: calendar.dates.slice(0, 7),
- view: calendar.view,
- calendarWeekColumnHeader: UiSettings.calendarWeekColumnHeader,
- shortDateFormat: UiSettings.shortDateFormat,
- showRelativeDates: UiSettings.showRelativeDates
- };
- }
- );
-}
-
-export default connect(createMapStateToProps)(DaysOfWeek);
diff --git a/frontend/src/Calendar/Events/CalendarEvent.css b/frontend/src/Calendar/Events/CalendarEvent.css
index 0cf3900bf31..679b4cc515b 100644
--- a/frontend/src/Calendar/Events/CalendarEvent.css
+++ b/frontend/src/Calendar/Events/CalendarEvent.css
@@ -52,6 +52,10 @@ $fullColorGradient: rgba(244, 245, 246, 0.2);
.statusContainer {
display: flex;
align-items: center;
+
+ &:global(.fullColor) {
+ filter: var(--calendarFullColorFilter)
+ }
}
.statusIcon {
diff --git a/frontend/src/Calendar/Events/CalendarEvent.css.d.ts b/frontend/src/Calendar/Events/CalendarEvent.css.d.ts
new file mode 100644
index 00000000000..f099df21174
--- /dev/null
+++ b/frontend/src/Calendar/Events/CalendarEvent.css.d.ts
@@ -0,0 +1,23 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'absoluteEpisodeNumber': string;
+ 'airTime': string;
+ 'downloaded': string;
+ 'downloading': string;
+ 'episodeInfo': string;
+ 'episodeTitle': string;
+ 'event': string;
+ 'info': string;
+ 'missing': string;
+ 'onAir': string;
+ 'overlay': string;
+ 'seriesTitle': string;
+ 'statusContainer': string;
+ 'statusIcon': string;
+ 'unaired': string;
+ 'underlay': string;
+ 'unmonitored': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Calendar/Events/CalendarEvent.js b/frontend/src/Calendar/Events/CalendarEvent.js
deleted file mode 100644
index 81d2beaf421..00000000000
--- a/frontend/src/Calendar/Events/CalendarEvent.js
+++ /dev/null
@@ -1,261 +0,0 @@
-import classNames from 'classnames';
-import moment from 'moment';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import getStatusStyle from 'Calendar/getStatusStyle';
-import Icon from 'Components/Icon';
-import Link from 'Components/Link/Link';
-import EpisodeDetailsModal from 'Episode/EpisodeDetailsModal';
-import episodeEntities from 'Episode/episodeEntities';
-import { icons, kinds } from 'Helpers/Props';
-import formatTime from 'Utilities/Date/formatTime';
-import padNumber from 'Utilities/Number/padNumber';
-import CalendarEventQueueDetails from './CalendarEventQueueDetails';
-import styles from './CalendarEvent.css';
-
-class CalendarEvent extends Component {
-
- //
- // Lifecycle
-
- constructor(props, context) {
- super(props, context);
-
- this.state = {
- isDetailsModalOpen: false
- };
- }
-
- //
- // Listeners
-
- onPress = () => {
- this.setState({ isDetailsModalOpen: true }, () => {
- this.props.onEventModalOpenToggle(true);
- });
- };
-
- onDetailsModalClose = () => {
- this.setState({ isDetailsModalOpen: false }, () => {
- this.props.onEventModalOpenToggle(false);
- });
- };
-
- //
- // Render
-
- render() {
- const {
- id,
- series,
- episodeFile,
- title,
- seasonNumber,
- episodeNumber,
- absoluteEpisodeNumber,
- airDateUtc,
- monitored,
- unverifiedSceneNumbering,
- hasFile,
- grabbed,
- queueItem,
- showEpisodeInformation,
- showFinaleIcon,
- showSpecialIcon,
- showCutoffUnmetIcon,
- fullColorEvents,
- timeFormat,
- colorImpairedMode
- } = this.props;
-
- if (!series) {
- return null;
- }
-
- const startTime = moment(airDateUtc);
- const endTime = moment(airDateUtc).add(series.runtime, 'minutes');
- const isDownloading = !!(queueItem || grabbed);
- const isMonitored = series.monitored && monitored;
- const statusStyle = getStatusStyle(hasFile, isDownloading, startTime, endTime, isMonitored);
- const missingAbsoluteNumber = series.seriesType === 'anime' && seasonNumber > 0 && !absoluteEpisodeNumber;
- const season = series.seasons.find((s) => s.seasonNumber === seasonNumber);
- const seasonStatistics = season?.statistics || {};
-
- return (
-
-
-
-
-
-
- {series.title}
-
-
-
- {
- missingAbsoluteNumber ?
-
- :
- null
- }
-
- {
- !queueItem && grabbed ?
-
-
-
- {
- showEpisodeInformation ?
-
-
- {title}
-
-
-
- {seasonNumber}x{padNumber(episodeNumber, 2)}
-
- {
- series.seriesType === 'anime' && absoluteEpisodeNumber ?
- ({absoluteEpisodeNumber}) : null
- }
-
-
:
- null
- }
-
-
- {formatTime(airDateUtc, timeFormat)} - {formatTime(endTime.toISOString(), timeFormat, { includeMinuteZero: true })}
-
-
-
-
-
+
+
+
+
+
{series.title}
+
+
+ {missingAbsoluteNumber ? (
+
+
+ ) : null}
+
+ {!queueItem && grabbed ? (
+
+
+
+ {showEpisodeInformation ? (
+
+
{title}
+
+
+ {seasonNumber}x{padNumber(episodeNumber, 2)}
+ {series.seriesType === 'anime' && absoluteEpisodeNumber ? (
+
+ ({absoluteEpisodeNumber})
+
+ ) : null}
+
+
+ ) : null}
+
+
+ {formatTime(airDateUtc, timeFormat)} -{' '}
+ {formatTime(endTime.toISOString(), timeFormat, {
+ includeMinuteZero: true,
+ })}
+
+
+
+
+
- {
- events.map((event) => {
- if (event.isGroup) {
- return null;
- }
-
- return (
-
- );
- }
-
- return (
-
-
-
- {series.title}
-
-
- {
- isMissingAbsoluteNumber &&
-
- }
-
- {
- anyDownloading &&
-
- }
-
- {
- firstEpisode.episodeNumber === 1 && seasonNumber > 0 &&
-
- }
-
- {
- showFinaleIcon &&
- lastEpisode.episodeNumber !== 1 &&
- seasonNumber > 0 &&
- lastEpisode.episodeNumber === series.seasons.find((season) => season.seasonNumber === seasonNumber).statistics.totalEpisodeCount &&
-
- }
-
-
-
-
- {formatTime(airDateUtc, timeFormat)} - {formatTime(endTime.toISOString(), timeFormat, { includeMinuteZero: true })}
-
-
- {
- showEpisodeInformation ?
-
- {seasonNumber}x{padNumber(firstEpisode.episodeNumber, 2)}-{padNumber(lastEpisode.episodeNumber, 2)}
-
- {
- series.seriesType === 'anime' &&
- firstEpisode.absoluteEpisodeNumber &&
- lastEpisode.absoluteEpisodeNumber &&
-
- ({firstEpisode.absoluteEpisodeNumber}-{lastEpisode.absoluteEpisodeNumber})
-
- }
-
:
-
-
-
- }
-
-
- {
- showEpisodeInformation &&
-
-
-
- }
-
+ {events.map((event) => {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
{series.title}
+
+
+ {isMissingAbsoluteNumber ? (
+
+
+
+
+
+ {formatTime(airDateUtc, timeFormat)} -{' '}
+ {formatTime(endTime.toISOString(), timeFormat, {
+ includeMinuteZero: true,
+ })}
+
+
+ {showEpisodeInformation ? (
+
+ {seasonNumber}x{padNumber(firstEpisode.episodeNumber, 2)}-
+ {padNumber(lastEpisode.episodeNumber, 2)}
+ {series.seriesType === 'anime' &&
+ firstEpisode.absoluteEpisodeNumber &&
+ lastEpisode.absoluteEpisodeNumber ? (
+
+ ({firstEpisode.absoluteEpisodeNumber}-
+ {lastEpisode.absoluteEpisodeNumber})
+
+ ) : null}
+
+ ) : (
+
+
+
+ )}
+
+
+ {showEpisodeInformation ? (
+
+
+
+
+
+ ) : null}
+
- {
- isSmallScreen &&
-
- {title}
-
- }
-
-
-
-
-
-
-
-
-
-
- Today
-
-
-
- {
- !isSmallScreen &&
-
- {title}
-
- }
-
-
- {
- isFetching &&
-
- }
-
- {
- collapseViewButtons ?
-
-
-
-
-
- {
- isSmallScreen ?
- null :
-
- Month
-
- }
-
-
- Week
-
-
-
- Forecast
-
-
-
- Day
-
-
-
- Agenda
-
-
- :
-
-
-
- }
-
-
-
+ {isSmallScreen ?
{title}
: null}
+
+
+
+
+
+
+
+
+
+
+ {translate('Today')}
+
+
+
+ {isSmallScreen ? null : (
+
{title}
+ )}
+
+
+ {isFetching ? (
+
+
+
+
+
+ {isSmallScreen ? null : (
+
+ {translate('Month')}
+
+ )}
+
+
+ {translate('Week')}
+
+
+
+ {translate('Forecast')}
+
+
+
+ {translate('Day')}
+
+
+
+ {translate('Agenda')}
+
+
+
+ ) : (
+ <>
+
+
+
- {titleCase(view)}
-
- );
- }
-}
-
-CalendarHeaderViewButton.propTypes = {
- view: PropTypes.oneOf(calendarViews.all).isRequired,
- selectedView: PropTypes.oneOf(calendarViews.all).isRequired,
- onPress: PropTypes.func.isRequired
-};
-
-export default CalendarHeaderViewButton;
diff --git a/frontend/src/Calendar/Header/CalendarHeaderViewButton.tsx b/frontend/src/Calendar/Header/CalendarHeaderViewButton.tsx
new file mode 100644
index 00000000000..c9366f9ef87
--- /dev/null
+++ b/frontend/src/Calendar/Header/CalendarHeaderViewButton.tsx
@@ -0,0 +1,34 @@
+import React, { useCallback } from 'react';
+import { CalendarView } from 'Calendar/calendarViews';
+import Button, { ButtonProps } from 'Components/Link/Button';
+import titleCase from 'Utilities/String/titleCase';
+
+interface CalendarHeaderViewButtonProps
+ extends Omit {
+ view: CalendarView;
+ selectedView: CalendarView;
+ onPress: (view: CalendarView) => void;
+}
+
+function CalendarHeaderViewButton({
+ view,
+ selectedView,
+ onPress,
+ ...otherProps
+}: CalendarHeaderViewButtonProps) {
+ const handlePress = useCallback(() => {
+ onPress(view);
+ }, [view, onPress]);
+
+ return (
+
+ {titleCase(view)}
+
+ );
+}
+
+export default CalendarHeaderViewButton;
diff --git a/frontend/src/Calendar/Legend/Legend.css.d.ts b/frontend/src/Calendar/Legend/Legend.css.d.ts
new file mode 100644
index 00000000000..19c0339b43e
--- /dev/null
+++ b/frontend/src/Calendar/Legend/Legend.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'legend': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Calendar/Legend/Legend.js b/frontend/src/Calendar/Legend/Legend.js
deleted file mode 100644
index ba0e2663a03..00000000000
--- a/frontend/src/Calendar/Legend/Legend.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { icons, kinds } from 'Helpers/Props';
-import LegendIconItem from './LegendIconItem';
-import LegendItem from './LegendItem';
-import styles from './Legend.css';
-
-function Legend(props) {
- const {
- view,
- showFinaleIcon,
- showSpecialIcon,
- showCutoffUnmetIcon,
- fullColorEvents,
- colorImpairedMode
- } = props;
-
- const iconsToShow = [];
- const isAgendaView = view === 'agenda';
-
- if (showFinaleIcon) {
- iconsToShow.push(
-
-
-
-
-
-
-
-
-
-
-
-
-
- {
- iconsToShow.length > 1 &&
-
- {iconsToShow[1]}
- {iconsToShow[2]}
-
- }
-
+
+
+
+
+
+
+
+
+
+
+
+
+ {iconsToShow.length > 1 ? (
+
+ {iconsToShow[1]}
+ {iconsToShow[2]}
+
+ ) : null}
+ {iconsToShow.length > 3 ?
{iconsToShow[3]}
: null}
+
-
- );
-}
-
-LegendIconItem.propTypes = {
- name: PropTypes.string.isRequired,
- icon: PropTypes.object.isRequired,
- kind: PropTypes.string.isRequired,
- darken: PropTypes.bool.isRequired,
- tooltip: PropTypes.string.isRequired
-};
-
-LegendIconItem.defaultProps = {
- darken: false
-};
-
-export default LegendIconItem;
diff --git a/frontend/src/Calendar/Legend/LegendIconItem.tsx b/frontend/src/Calendar/Legend/LegendIconItem.tsx
new file mode 100644
index 00000000000..88a758c4495
--- /dev/null
+++ b/frontend/src/Calendar/Legend/LegendIconItem.tsx
@@ -0,0 +1,33 @@
+import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import React from 'react';
+import Icon, { IconProps } from 'Components/Icon';
+import styles from './LegendIconItem.css';
+
+interface LegendIconItemProps extends Pick {
+ name: string;
+ fullColorEvents: boolean;
+ icon: FontAwesomeIconProps['icon'];
+ tooltip: string;
+}
+
+function LegendIconItem(props: LegendIconItemProps) {
+ const { name, fullColorEvents, icon, kind, tooltip } = props;
+
+ return (
+
+
+ );
+}
+
+export default LegendIconItem;
diff --git a/frontend/src/Calendar/Legend/LegendItem.css.d.ts b/frontend/src/Calendar/Legend/LegendItem.css.d.ts
new file mode 100644
index 00000000000..155e029c6e1
--- /dev/null
+++ b/frontend/src/Calendar/Legend/LegendItem.css.d.ts
@@ -0,0 +1,14 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'downloaded': string;
+ 'downloading': string;
+ 'legendItem': string;
+ 'missing': string;
+ 'onAir': string;
+ 'premiere': string;
+ 'unaired': string;
+ 'unmonitored': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Calendar/Legend/LegendItem.js b/frontend/src/Calendar/Legend/LegendItem.js
deleted file mode 100644
index f0304b9e603..00000000000
--- a/frontend/src/Calendar/Legend/LegendItem.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import titleCase from 'Utilities/String/titleCase';
-import styles from './LegendItem.css';
-
-function LegendItem(props) {
- const {
- name,
- status,
- tooltip,
- isAgendaView,
- fullColorEvents,
- colorImpairedMode
- } = props;
-
- return (
-
- {name ? name : titleCase(status)}
-
- );
-}
-
-LegendItem.propTypes = {
- name: PropTypes.string,
- status: PropTypes.string.isRequired,
- tooltip: PropTypes.string.isRequired,
- isAgendaView: PropTypes.bool.isRequired,
- fullColorEvents: PropTypes.bool.isRequired,
- colorImpairedMode: PropTypes.bool.isRequired
-};
-
-export default LegendItem;
diff --git a/frontend/src/Calendar/Legend/LegendItem.tsx b/frontend/src/Calendar/Legend/LegendItem.tsx
new file mode 100644
index 00000000000..40466ab9dde
--- /dev/null
+++ b/frontend/src/Calendar/Legend/LegendItem.tsx
@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+import React from 'react';
+import { CalendarStatus } from 'typings/Calendar';
+import titleCase from 'Utilities/String/titleCase';
+import styles from './LegendItem.css';
+
+interface LegendItemProps {
+ name?: string;
+ status: CalendarStatus;
+ tooltip: string;
+ isAgendaView: boolean;
+ fullColorEvents: boolean;
+ colorImpairedMode: boolean;
+}
+
+function LegendItem(props: LegendItemProps) {
+ const {
+ name,
+ status,
+ tooltip,
+ isAgendaView,
+ fullColorEvents,
+ colorImpairedMode,
+ } = props;
+
+ return (
+
+ {name ? name : titleCase(status)}
+
+ );
+}
+
+export default LegendItem;
diff --git a/frontend/src/Calendar/Options/CalendarOptionsModal.js b/frontend/src/Calendar/Options/CalendarOptionsModal.js
deleted file mode 100644
index b68c83f3011..00000000000
--- a/frontend/src/Calendar/Options/CalendarOptionsModal.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Modal from 'Components/Modal/Modal';
-import CalendarOptionsModalContentConnector from './CalendarOptionsModalContentConnector';
-
-function CalendarOptionsModal(props) {
- const {
- isOpen,
- onModalClose
- } = props;
-
- return (
-
-
- );
-}
-
-CalendarOptionsModal.propTypes = {
- isOpen: PropTypes.bool.isRequired,
- onModalClose: PropTypes.func.isRequired
-};
-
-export default CalendarOptionsModal;
diff --git a/frontend/src/Calendar/Options/CalendarOptionsModal.tsx b/frontend/src/Calendar/Options/CalendarOptionsModal.tsx
new file mode 100644
index 00000000000..ae782a684b6
--- /dev/null
+++ b/frontend/src/Calendar/Options/CalendarOptionsModal.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import CalendarOptionsModalContent from './CalendarOptionsModalContent';
+
+interface CalendarOptionsModalProps {
+ isOpen: boolean;
+ onModalClose: () => void;
+}
+
+function CalendarOptionsModal({
+ isOpen,
+ onModalClose,
+}: CalendarOptionsModalProps) {
+ return (
+
+
+ );
+}
+
+export default CalendarOptionsModal;
diff --git a/frontend/src/Calendar/Options/CalendarOptionsModalContent.js b/frontend/src/Calendar/Options/CalendarOptionsModalContent.js
deleted file mode 100644
index b7e738e7223..00000000000
--- a/frontend/src/Calendar/Options/CalendarOptionsModalContent.js
+++ /dev/null
@@ -1,275 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import FieldSet from 'Components/FieldSet';
-import Form from 'Components/Form/Form';
-import FormGroup from 'Components/Form/FormGroup';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import FormLabel from 'Components/Form/FormLabel';
-import Button from 'Components/Link/Button';
-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 { inputTypes } from 'Helpers/Props';
-import { firstDayOfWeekOptions, timeFormatOptions, weekColumnOptions } from 'Settings/UI/UISettings';
-
-class CalendarOptionsModalContent extends Component {
-
- //
- // Lifecycle
-
- constructor(props, context) {
- super(props, context);
-
- const {
- firstDayOfWeek,
- calendarWeekColumnHeader,
- timeFormat,
- enableColorImpairedMode,
- fullColorEvents
- } = props;
-
- this.state = {
- firstDayOfWeek,
- calendarWeekColumnHeader,
- timeFormat,
- enableColorImpairedMode,
- fullColorEvents
- };
- }
-
- componentDidUpdate(prevProps) {
- const {
- firstDayOfWeek,
- calendarWeekColumnHeader,
- timeFormat,
- enableColorImpairedMode
- } = this.props;
-
- if (
- prevProps.firstDayOfWeek !== firstDayOfWeek ||
- prevProps.calendarWeekColumnHeader !== calendarWeekColumnHeader ||
- prevProps.timeFormat !== timeFormat ||
- prevProps.enableColorImpairedMode !== enableColorImpairedMode
- ) {
- this.setState({
- firstDayOfWeek,
- calendarWeekColumnHeader,
- timeFormat,
- enableColorImpairedMode
- });
- }
- }
-
- //
- // Listeners
-
- onOptionInputChange = ({ name, value }) => {
- const {
- dispatchSetCalendarOption
- } = this.props;
-
- dispatchSetCalendarOption({ [name]: value });
- };
-
- onGlobalInputChange = ({ name, value }) => {
- const {
- dispatchSaveUISettings
- } = this.props;
-
- const setting = { [name]: value };
-
- this.setState(setting, () => {
- dispatchSaveUISettings(setting);
- });
- };
-
- onLinkFocus = (event) => {
- event.target.select();
- };
-
- //
- // Render
-
- render() {
- const {
- collapseMultipleEpisodes,
- showEpisodeInformation,
- showFinaleIcon,
- showSpecialIcon,
- showCutoffUnmetIcon,
- fullColorEvents,
- onModalClose
- } = this.props;
-
- const {
- firstDayOfWeek,
- calendarWeekColumnHeader,
- timeFormat,
- enableColorImpairedMode
- } = this.state;
-
- return (
-
-
- Calendar Options
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Close
-
-
-
- );
- }
-}
-
-CalendarOptionsModalContent.propTypes = {
- collapseMultipleEpisodes: PropTypes.bool.isRequired,
- showEpisodeInformation: PropTypes.bool.isRequired,
- showFinaleIcon: PropTypes.bool.isRequired,
- showSpecialIcon: PropTypes.bool.isRequired,
- showCutoffUnmetIcon: PropTypes.bool.isRequired,
- firstDayOfWeek: PropTypes.number.isRequired,
- calendarWeekColumnHeader: PropTypes.string.isRequired,
- timeFormat: PropTypes.string.isRequired,
- enableColorImpairedMode: PropTypes.bool.isRequired,
- fullColorEvents: PropTypes.bool.isRequired,
- dispatchSetCalendarOption: PropTypes.func.isRequired,
- dispatchSaveUISettings: PropTypes.func.isRequired,
- onModalClose: PropTypes.func.isRequired
-};
-
-export default CalendarOptionsModalContent;
diff --git a/frontend/src/Calendar/Options/CalendarOptionsModalContent.tsx b/frontend/src/Calendar/Options/CalendarOptionsModalContent.tsx
new file mode 100644
index 00000000000..4f974dda36d
--- /dev/null
+++ b/frontend/src/Calendar/Options/CalendarOptionsModalContent.tsx
@@ -0,0 +1,228 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import FieldSet from 'Components/FieldSet';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Button from 'Components/Link/Button';
+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 { inputTypes } from 'Helpers/Props';
+import {
+ firstDayOfWeekOptions,
+ timeFormatOptions,
+ weekColumnOptions,
+} from 'Settings/UI/UISettings';
+import { setCalendarOption } from 'Store/Actions/calendarActions';
+import { saveUISettings } from 'Store/Actions/settingsActions';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import { InputChanged } from 'typings/inputs';
+import UiSettings from 'typings/Settings/UiSettings';
+import translate from 'Utilities/String/translate';
+
+interface CalendarOptionsModalContentProps {
+ onModalClose: () => void;
+}
+
+function CalendarOptionsModalContent({
+ onModalClose,
+}: CalendarOptionsModalContentProps) {
+ const dispatch = useDispatch();
+
+ const {
+ collapseMultipleEpisodes,
+ showEpisodeInformation,
+ showFinaleIcon,
+ showSpecialIcon,
+ showCutoffUnmetIcon,
+ fullColorEvents,
+ } = useSelector((state: AppState) => state.calendar.options);
+
+ const uiSettings = useSelector(createUISettingsSelector());
+
+ const [state, setState] = useState>({
+ firstDayOfWeek: uiSettings.firstDayOfWeek,
+ calendarWeekColumnHeader: uiSettings.calendarWeekColumnHeader,
+ timeFormat: uiSettings.timeFormat,
+ enableColorImpairedMode: uiSettings.enableColorImpairedMode,
+ });
+
+ const {
+ firstDayOfWeek,
+ calendarWeekColumnHeader,
+ timeFormat,
+ enableColorImpairedMode,
+ } = state;
+
+ const handleOptionInputChange = useCallback(
+ ({ name, value }: InputChanged) => {
+ dispatch(setCalendarOption({ [name]: value }));
+ },
+ [dispatch]
+ );
+
+ const handleGlobalInputChange = useCallback(
+ ({ name, value }: InputChanged) => {
+ setState((prevState) => ({ ...prevState, [name]: value }));
+
+ dispatch(saveUISettings({ [name]: value }));
+ },
+ [dispatch]
+ );
+
+ useEffect(() => {
+ setState({
+ firstDayOfWeek: uiSettings.firstDayOfWeek,
+ calendarWeekColumnHeader: uiSettings.calendarWeekColumnHeader,
+ timeFormat: uiSettings.timeFormat,
+ enableColorImpairedMode: uiSettings.enableColorImpairedMode,
+ });
+ }, [uiSettings]);
+
+ return (
+
+ {translate('CalendarOptions')}
+
+
+
+
+
+
+
+
+
+
+
+
+ {translate('Close')}
+
+
+ );
+}
+
+export default CalendarOptionsModalContent;
diff --git a/frontend/src/Calendar/Options/CalendarOptionsModalContentConnector.js b/frontend/src/Calendar/Options/CalendarOptionsModalContentConnector.js
deleted file mode 100644
index 1f517b69898..00000000000
--- a/frontend/src/Calendar/Options/CalendarOptionsModalContentConnector.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { setCalendarOption } from 'Store/Actions/calendarActions';
-import { saveUISettings } from 'Store/Actions/settingsActions';
-import CalendarOptionsModalContent from './CalendarOptionsModalContent';
-
-function createMapStateToProps() {
- return createSelector(
- (state) => state.calendar.options,
- (state) => state.settings.ui.item,
- (options, uiSettings) => {
- return {
- ...options,
- ...uiSettings
- };
- }
- );
-}
-
-const mapDispatchToProps = {
- dispatchSetCalendarOption: setCalendarOption,
- dispatchSaveUISettings: saveUISettings
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(CalendarOptionsModalContent);
diff --git a/frontend/src/Calendar/calendarViews.js b/frontend/src/Calendar/calendarViews.js
deleted file mode 100644
index 929958b66ca..00000000000
--- a/frontend/src/Calendar/calendarViews.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export const DAY = 'day';
-export const WEEK = 'week';
-export const MONTH = 'month';
-export const FORECAST = 'forecast';
-export const AGENDA = 'agenda';
-
-export const all = [DAY, WEEK, MONTH, FORECAST, AGENDA];
diff --git a/frontend/src/Calendar/calendarViews.ts b/frontend/src/Calendar/calendarViews.ts
new file mode 100644
index 00000000000..4f5549dbd1b
--- /dev/null
+++ b/frontend/src/Calendar/calendarViews.ts
@@ -0,0 +1,9 @@
+export const DAY = 'day';
+export const WEEK = 'week';
+export const MONTH = 'month';
+export const FORECAST = 'forecast';
+export const AGENDA = 'agenda';
+
+export const all = [DAY, WEEK, MONTH, FORECAST, AGENDA];
+
+export type CalendarView = 'agenda' | 'day' | 'forecast' | 'month' | 'week';
diff --git a/frontend/src/Calendar/getStatusStyle.js b/frontend/src/Calendar/getStatusStyle.js
deleted file mode 100644
index b149a8aab46..00000000000
--- a/frontend/src/Calendar/getStatusStyle.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/* eslint max-params: 0 */
-import moment from 'moment';
-
-function getStatusStyle(hasFile, downloading, startTime, endTime, isMonitored) {
- const currentTime = moment();
-
- if (hasFile) {
- return 'downloaded';
- }
-
- if (downloading) {
- return 'downloading';
- }
-
- if (!isMonitored) {
- return 'unmonitored';
- }
-
- if (currentTime.isAfter(startTime) && currentTime.isBefore(endTime)) {
- return 'onAir';
- }
-
- if (endTime.isBefore(currentTime) && !hasFile) {
- return 'missing';
- }
-
- return 'unaired';
-}
-
-export default getStatusStyle;
diff --git a/frontend/src/Calendar/getStatusStyle.ts b/frontend/src/Calendar/getStatusStyle.ts
new file mode 100644
index 00000000000..678e6c2a1b5
--- /dev/null
+++ b/frontend/src/Calendar/getStatusStyle.ts
@@ -0,0 +1,36 @@
+import moment from 'moment';
+import { CalendarStatus } from 'typings/Calendar';
+
+function getStatusStyle(
+ hasFile: boolean,
+ downloading: boolean,
+ startTime: moment.Moment,
+ endTime: moment.Moment,
+ isMonitored: boolean
+): CalendarStatus {
+ const currentTime = moment();
+
+ if (hasFile) {
+ return 'downloaded';
+ }
+
+ if (downloading) {
+ return 'downloading';
+ }
+
+ if (!isMonitored) {
+ return 'unmonitored';
+ }
+
+ if (currentTime.isAfter(startTime) && currentTime.isBefore(endTime)) {
+ return 'onAir';
+ }
+
+ if (endTime.isBefore(currentTime) && !hasFile) {
+ return 'missing';
+ }
+
+ return 'unaired';
+}
+
+export default getStatusStyle;
diff --git a/frontend/src/Calendar/iCal/CalendarLinkModal.js b/frontend/src/Calendar/iCal/CalendarLinkModal.js
deleted file mode 100644
index 8cc487c1622..00000000000
--- a/frontend/src/Calendar/iCal/CalendarLinkModal.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Modal from 'Components/Modal/Modal';
-import CalendarLinkModalContentConnector from './CalendarLinkModalContentConnector';
-
-function CalendarLinkModal(props) {
- const {
- isOpen,
- onModalClose
- } = props;
-
- return (
-
-
- );
-}
-
-CalendarLinkModal.propTypes = {
- isOpen: PropTypes.bool.isRequired,
- onModalClose: PropTypes.func.isRequired
-};
-
-export default CalendarLinkModal;
diff --git a/frontend/src/Calendar/iCal/CalendarLinkModal.tsx b/frontend/src/Calendar/iCal/CalendarLinkModal.tsx
new file mode 100644
index 00000000000..f0eecbd4a47
--- /dev/null
+++ b/frontend/src/Calendar/iCal/CalendarLinkModal.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import CalendarLinkModalContent from './CalendarLinkModalContent';
+
+interface CalendarLinkModalProps {
+ isOpen: boolean;
+ onModalClose: () => void;
+}
+
+function CalendarLinkModal(props: CalendarLinkModalProps) {
+ const { isOpen, onModalClose } = props;
+
+ return (
+
+
+ );
+}
+
+export default CalendarLinkModal;
diff --git a/frontend/src/Calendar/iCal/CalendarLinkModalContent.js b/frontend/src/Calendar/iCal/CalendarLinkModalContent.js
deleted file mode 100644
index 2df0caf6d13..00000000000
--- a/frontend/src/Calendar/iCal/CalendarLinkModalContent.js
+++ /dev/null
@@ -1,221 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Form from 'Components/Form/Form';
-import FormGroup from 'Components/Form/FormGroup';
-import FormInputButton from 'Components/Form/FormInputButton';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import FormLabel from 'Components/Form/FormLabel';
-import Icon from 'Components/Icon';
-import Button from 'Components/Link/Button';
-import ClipboardButton from 'Components/Link/ClipboardButton';
-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 { icons, inputTypes, kinds, sizes } from 'Helpers/Props';
-
-function getUrls(state) {
- const {
- unmonitored,
- premieresOnly,
- asAllDay,
- tags
- } = state;
-
- let icalUrl = `${window.location.host}${window.Sonarr.urlBase}/feed/v3/calendar/Sonarr.ics?`;
-
- if (unmonitored) {
- icalUrl += 'unmonitored=true&';
- }
-
- if (premieresOnly) {
- icalUrl += 'premieresOnly=true&';
- }
-
- if (asAllDay) {
- icalUrl += 'asAllDay=true&';
- }
-
- if (tags.length) {
- icalUrl += `tags=${tags.toString()}&`;
- }
-
- icalUrl += `apikey=${window.Sonarr.apiKey}`;
-
- const iCalHttpUrl = `${window.location.protocol}//${icalUrl}`;
- const iCalWebCalUrl = `webcal://${icalUrl}`;
-
- return {
- iCalHttpUrl,
- iCalWebCalUrl
- };
-}
-
-class CalendarLinkModalContent extends Component {
-
- //
- // Lifecycle
-
- constructor(props, context) {
- super(props, context);
-
- const defaultState = {
- unmonitored: false,
- premieresOnly: false,
- asAllDay: false,
- tags: []
- };
-
- const urls = getUrls(defaultState);
-
- this.state = {
- ...defaultState,
- ...urls
- };
- }
-
- //
- // Listeners
-
- onInputChange = ({ name, value }) => {
- const state = {
- ...this.state,
- [name]: value
- };
-
- const urls = getUrls(state);
-
- this.setState({
- [name]: value,
- ...urls
- });
- };
-
- onLinkFocus = (event) => {
- event.target.select();
- };
-
- //
- // Render
-
- render() {
- const {
- onModalClose
- } = this.props;
-
- const {
- unmonitored,
- premieresOnly,
- asAllDay,
- tags,
- iCalHttpUrl,
- iCalWebCalUrl
- } = this.state;
-
- return (
-
-
- Sonarr Calendar Feed
-
-
-
-
-
-
-
-
- Close
-
-
-
- );
- }
-}
-
-CalendarLinkModalContent.propTypes = {
- tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
- onModalClose: PropTypes.func.isRequired
-};
-
-export default CalendarLinkModalContent;
diff --git a/frontend/src/Calendar/iCal/CalendarLinkModalContent.tsx b/frontend/src/Calendar/iCal/CalendarLinkModalContent.tsx
new file mode 100644
index 00000000000..aa90db30137
--- /dev/null
+++ b/frontend/src/Calendar/iCal/CalendarLinkModalContent.tsx
@@ -0,0 +1,166 @@
+import React, { FocusEvent, useCallback, useMemo, useState } from 'react';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputButton from 'Components/Form/FormInputButton';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Icon from 'Components/Icon';
+import Button from 'Components/Link/Button';
+import ClipboardButton from 'Components/Link/ClipboardButton';
+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 { icons, inputTypes, kinds, sizes } from 'Helpers/Props';
+import { InputChanged } from 'typings/inputs';
+import translate from 'Utilities/String/translate';
+
+interface CalendarLinkModalContentProps {
+ onModalClose: () => void;
+}
+
+function CalendarLinkModalContent({
+ onModalClose,
+}: CalendarLinkModalContentProps) {
+ const [state, setState] = useState({
+ unmonitored: false,
+ premieresOnly: false,
+ asAllDay: false,
+ tags: [],
+ });
+
+ const { unmonitored, premieresOnly, asAllDay, tags } = state;
+
+ const handleInputChange = useCallback(({ name, value }: InputChanged) => {
+ setState((prevState) => ({ ...prevState, [name]: value }));
+ }, []);
+
+ const handleLinkFocus = useCallback(
+ (event: FocusEvent) => {
+ event.target.select();
+ },
+ []
+ );
+
+ const { iCalHttpUrl, iCalWebCalUrl } = useMemo(() => {
+ let icalUrl = `${window.location.host}${window.Sonarr.urlBase}/feed/v3/calendar/Sonarr.ics?`;
+
+ if (unmonitored) {
+ icalUrl += 'unmonitored=true&';
+ }
+
+ if (premieresOnly) {
+ icalUrl += 'premieresOnly=true&';
+ }
+
+ if (asAllDay) {
+ icalUrl += 'asAllDay=true&';
+ }
+
+ if (tags.length) {
+ icalUrl += `tags=${tags.toString()}&`;
+ }
+
+ icalUrl += `apikey=${encodeURIComponent(window.Sonarr.apiKey)}`;
+
+ return {
+ iCalHttpUrl: `${window.location.protocol}//${icalUrl}`,
+ iCalWebCalUrl: `webcal://${icalUrl}`,
+ };
+ }, [unmonitored, premieresOnly, asAllDay, tags]);
+
+ return (
+
+ {translate('CalendarFeed')}
+
+
+
+
+
+
+ {translate('Close')}
+
+
+ );
+}
+
+export default CalendarLinkModalContent;
diff --git a/frontend/src/Calendar/iCal/CalendarLinkModalContentConnector.js b/frontend/src/Calendar/iCal/CalendarLinkModalContentConnector.js
deleted file mode 100644
index e10c5c3f909..00000000000
--- a/frontend/src/Calendar/iCal/CalendarLinkModalContentConnector.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import createTagsSelector from 'Store/Selectors/createTagsSelector';
-import CalendarLinkModalContent from './CalendarLinkModalContent';
-
-function createMapStateToProps() {
- return createSelector(
- createTagsSelector(),
- (tagList) => {
- return {
- tagList
- };
- }
- );
-}
-
-export default connect(createMapStateToProps)(CalendarLinkModalContent);
diff --git a/frontend/src/Commands/Command.ts b/frontend/src/Commands/Command.ts
new file mode 100644
index 00000000000..cd875d56b28
--- /dev/null
+++ b/frontend/src/Commands/Command.ts
@@ -0,0 +1,52 @@
+import ModelBase from 'App/ModelBase';
+
+export type CommandStatus =
+ | 'queued'
+ | 'started'
+ | 'completed'
+ | 'failed'
+ | 'aborted'
+ | 'cancelled'
+ | 'orphaned';
+
+export type CommandResult = 'unknown' | 'successful' | 'unsuccessful';
+
+export interface CommandBody {
+ sendUpdatesToClient: boolean;
+ updateScheduledTask: boolean;
+ completionMessage: string;
+ requiresDiskAccess: boolean;
+ isExclusive: boolean;
+ isLongRunning: boolean;
+ name: string;
+ lastExecutionTime: string;
+ lastStartTime: string;
+ trigger: string;
+ suppressMessages: boolean;
+ seriesId?: number;
+ seriesIds?: number[];
+ seasonNumber?: number;
+ episodeIds?: number[];
+ [key: string]: string | number | boolean | number[] | undefined;
+}
+
+interface Command extends ModelBase {
+ name: string;
+ commandName: string;
+ message: string;
+ body: CommandBody;
+ priority: string;
+ status: CommandStatus;
+ result: CommandResult;
+ queued: string;
+ started: string;
+ ended: string;
+ duration: string;
+ trigger: string;
+ stateChangeTime: string;
+ sendUpdatesToClient: boolean;
+ updateScheduledTask: boolean;
+ lastExecutionTime: string;
+}
+
+export default Command;
diff --git a/frontend/src/Commands/commandNames.js b/frontend/src/Commands/commandNames.js
index c2edf05bd4a..13ac9d62c1f 100644
--- a/frontend/src/Commands/commandNames.js
+++ b/frontend/src/Commands/commandNames.js
@@ -6,7 +6,7 @@ export const CLEAR_LOGS = 'ClearLog';
export const CUTOFF_UNMET_EPISODE_SEARCH = 'CutoffUnmetEpisodeSearch';
export const DELETE_LOG_FILES = 'DeleteLogFiles';
export const DELETE_UPDATE_LOG_FILES = 'DeleteUpdateLogFiles';
-export const DOWNLOADED_EPSIODES_SCAN = 'DownloadedEpisodesScan';
+export const DOWNLOADED_EPISODES_SCAN = 'DownloadedEpisodesScan';
export const EPISODE_SEARCH = 'EpisodeSearch';
export const INTERACTIVE_IMPORT = 'ManualImport';
export const MISSING_EPISODE_SEARCH = 'MissingEpisodeSearch';
diff --git a/frontend/src/Components/Alert.css.d.ts b/frontend/src/Components/Alert.css.d.ts
new file mode 100644
index 00000000000..daffec2e634
--- /dev/null
+++ b/frontend/src/Components/Alert.css.d.ts
@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'alert': string;
+ 'danger': string;
+ 'info': string;
+ 'success': string;
+ 'warning': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Alert.js b/frontend/src/Components/Alert.js
deleted file mode 100644
index 10f124c7856..00000000000
--- a/frontend/src/Components/Alert.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { kinds } from 'Helpers/Props';
-import styles from './Alert.css';
-
-function Alert({ className, kind, children, ...otherProps }) {
- return (
-
- {children}
-
- );
-}
-
-Alert.propTypes = {
- className: PropTypes.string.isRequired,
- kind: PropTypes.oneOf(kinds.all).isRequired,
- children: PropTypes.node.isRequired
-};
-
-Alert.defaultProps = {
- className: styles.alert,
- kind: kinds.INFO
-};
-
-export default Alert;
diff --git a/frontend/src/Components/Alert.tsx b/frontend/src/Components/Alert.tsx
new file mode 100644
index 00000000000..92c89e74134
--- /dev/null
+++ b/frontend/src/Components/Alert.tsx
@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import React from 'react';
+import { Kind } from 'Helpers/Props/kinds';
+import styles from './Alert.css';
+
+interface AlertProps {
+ className?: string;
+ kind?: Extract;
+ children: React.ReactNode;
+}
+
+function Alert(props: AlertProps) {
+ const { className = styles.alert, kind = 'info', children } = props;
+
+ return {children}
;
+}
+
+export default Alert;
diff --git a/frontend/src/Components/Card.css.d.ts b/frontend/src/Components/Card.css.d.ts
new file mode 100644
index 00000000000..fb3ea792e54
--- /dev/null
+++ b/frontend/src/Components/Card.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'card': string;
+ 'overlay': string;
+ 'underlay': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Card.js b/frontend/src/Components/Card.js
deleted file mode 100644
index c5a4d164c14..00000000000
--- a/frontend/src/Components/Card.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Link from 'Components/Link/Link';
-import styles from './Card.css';
-
-class Card extends Component {
-
- //
- // Render
-
- render() {
- const {
- className,
- overlayClassName,
- overlayContent,
- children,
- onPress
- } = this.props;
-
- if (overlayContent) {
- return (
-
- );
- }
-
- return (
- {
+ // TODO: Consider using different properties for classname depending if it's overlaying content or not
+ className?: string;
+ overlayClassName?: string;
+ overlayContent?: boolean;
+ children: React.ReactNode;
+}
+
+function Card(props: CardProps) {
+ const {
+ className = styles.card,
+ overlayClassName = styles.overlay,
+ overlayContent = false,
+ children,
+ onPress,
+ } = props;
+
+ if (overlayContent) {
+ return (
+
+ );
+ }
+
+ return (
+
-
-
-
- {
- showProgressText &&
-
- {progressText}
-
- }
-
(0);
+ const center = size / 2;
+ const radius = center - strokeWidth;
+ const circumference = Math.PI * (radius * 2);
+ const sizeInPixels = `${size}px`;
+ const strokeDashoffset = ((100 - currentProgress) / 100) * circumference;
+ const progressText = `${Math.round(currentProgress)}%`;
+
+ const handleAnimation = useCallback(
+ (p: number) => {
+ setCurrentProgress((prevProgress) => {
+ if (prevProgress < p) {
+ return prevProgress + Math.min(1, p - prevProgress);
+ }
+
+ return prevProgress;
+ });
+ },
+ [setCurrentProgress]
+ );
+
+ useEffect(() => {
+ if (progress > currentProgress) {
+ cancelAnimationFrame(raf.current);
+
+ raf.current = requestAnimationFrame(() => handleAnimation(progress));
+ }
+ }, [progress, currentProgress, handleAnimation]);
+
+ useEffect(
+ () => {
+ return () => cancelAnimationFrame(raf.current);
+ },
+ // We only want to run this effect once
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ []
+ );
+
+ return (
+
+
+
+
+ {showProgressText && (
+
{progressText}
+ )}
+
- {children}
-
- );
- }
-}
-
-DescriptionList.propTypes = {
- className: PropTypes.string.isRequired,
- children: PropTypes.node
-};
-
-DescriptionList.defaultProps = {
- className: styles.descriptionList
-};
-
-export default DescriptionList;
diff --git a/frontend/src/Components/DescriptionList/DescriptionList.tsx b/frontend/src/Components/DescriptionList/DescriptionList.tsx
new file mode 100644
index 00000000000..6deee77e5e9
--- /dev/null
+++ b/frontend/src/Components/DescriptionList/DescriptionList.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './DescriptionList.css';
+
+interface DescriptionListProps {
+ className?: string;
+ children?: React.ReactNode;
+}
+
+function DescriptionList(props: DescriptionListProps) {
+ const { className = styles.descriptionList, children } = props;
+
+ return {children} ;
+}
+
+export default DescriptionList;
diff --git a/frontend/src/Components/DescriptionList/DescriptionListItem.js b/frontend/src/Components/DescriptionList/DescriptionListItem.js
deleted file mode 100644
index 39f634cc95d..00000000000
--- a/frontend/src/Components/DescriptionList/DescriptionListItem.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import DescriptionListItemDescription from './DescriptionListItemDescription';
-import DescriptionListItemTitle from './DescriptionListItemTitle';
-
-class DescriptionListItem extends Component {
-
- //
- // Render
-
- render() {
- const {
- titleClassName,
- descriptionClassName,
- title,
- data
- } = this.props;
-
- return (
-
-
- {title}
-
-
-
- {data}
-
-
- );
- }
-}
-
-DescriptionListItem.propTypes = {
- titleClassName: PropTypes.string,
- descriptionClassName: PropTypes.string,
- title: PropTypes.string,
- data: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node])
-};
-
-export default DescriptionListItem;
diff --git a/frontend/src/Components/DescriptionList/DescriptionListItem.tsx b/frontend/src/Components/DescriptionList/DescriptionListItem.tsx
new file mode 100644
index 00000000000..13a7efdd035
--- /dev/null
+++ b/frontend/src/Components/DescriptionList/DescriptionListItem.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import DescriptionListItemDescription, {
+ DescriptionListItemDescriptionProps,
+} from './DescriptionListItemDescription';
+import DescriptionListItemTitle, {
+ DescriptionListItemTitleProps,
+} from './DescriptionListItemTitle';
+
+interface DescriptionListItemProps {
+ className?: string;
+ titleClassName?: DescriptionListItemTitleProps['className'];
+ descriptionClassName?: DescriptionListItemDescriptionProps['className'];
+ title?: DescriptionListItemTitleProps['children'];
+ data?: DescriptionListItemDescriptionProps['children'];
+}
+
+function DescriptionListItem(props: DescriptionListItemProps) {
+ const { className, titleClassName, descriptionClassName, title, data } =
+ props;
+
+ return (
+
+
+ {title}
+
+
+
+ {data}
+
+
+ );
+}
+
+export default DescriptionListItem;
diff --git a/frontend/src/Components/DescriptionList/DescriptionListItemDescription.css b/frontend/src/Components/DescriptionList/DescriptionListItemDescription.css
index b23415a76d5..786123fb7a4 100644
--- a/frontend/src/Components/DescriptionList/DescriptionListItemDescription.css
+++ b/frontend/src/Components/DescriptionList/DescriptionListItemDescription.css
@@ -1,9 +1,7 @@
-.description {
- line-height: $lineHeight;
-}
-
.description {
margin-left: 0;
+ line-height: $lineHeight;
+ overflow-wrap: break-word;
}
@media (min-width: 768px) {
diff --git a/frontend/src/Components/DescriptionList/DescriptionListItemDescription.css.d.ts b/frontend/src/Components/DescriptionList/DescriptionListItemDescription.css.d.ts
new file mode 100644
index 00000000000..ff7055b0f08
--- /dev/null
+++ b/frontend/src/Components/DescriptionList/DescriptionListItemDescription.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'description': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/DescriptionList/DescriptionListItemDescription.js b/frontend/src/Components/DescriptionList/DescriptionListItemDescription.js
deleted file mode 100644
index 4ef3c015e66..00000000000
--- a/frontend/src/Components/DescriptionList/DescriptionListItemDescription.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styles from './DescriptionListItemDescription.css';
-
-function DescriptionListItemDescription(props) {
- const {
- className,
- children
- } = props;
-
- return (
-
- {children}
-
- );
-}
-
-DescriptionListItemDescription.propTypes = {
- className: PropTypes.string.isRequired,
- children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node])
-};
-
-DescriptionListItemDescription.defaultProps = {
- className: styles.description
-};
-
-export default DescriptionListItemDescription;
diff --git a/frontend/src/Components/DescriptionList/DescriptionListItemDescription.tsx b/frontend/src/Components/DescriptionList/DescriptionListItemDescription.tsx
new file mode 100644
index 00000000000..e08c117dc84
--- /dev/null
+++ b/frontend/src/Components/DescriptionList/DescriptionListItemDescription.tsx
@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+import styles from './DescriptionListItemDescription.css';
+
+export interface DescriptionListItemDescriptionProps {
+ className?: string;
+ children?: ReactNode;
+}
+
+function DescriptionListItemDescription(
+ props: DescriptionListItemDescriptionProps
+) {
+ const { className = styles.description, children } = props;
+
+ return {children} ;
+}
+
+export default DescriptionListItemDescription;
diff --git a/frontend/src/Components/DescriptionList/DescriptionListItemTitle.css.d.ts b/frontend/src/Components/DescriptionList/DescriptionListItemTitle.css.d.ts
new file mode 100644
index 00000000000..86bceec0622
--- /dev/null
+++ b/frontend/src/Components/DescriptionList/DescriptionListItemTitle.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'title': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/DescriptionList/DescriptionListItemTitle.js b/frontend/src/Components/DescriptionList/DescriptionListItemTitle.js
deleted file mode 100644
index e1632c1cfef..00000000000
--- a/frontend/src/Components/DescriptionList/DescriptionListItemTitle.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styles from './DescriptionListItemTitle.css';
-
-function DescriptionListItemTitle(props) {
- const {
- className,
- children
- } = props;
-
- return (
-
- {children}
-
- );
-}
-
-DescriptionListItemTitle.propTypes = {
- className: PropTypes.string.isRequired,
- children: PropTypes.string
-};
-
-DescriptionListItemTitle.defaultProps = {
- className: styles.title
-};
-
-export default DescriptionListItemTitle;
diff --git a/frontend/src/Components/DescriptionList/DescriptionListItemTitle.tsx b/frontend/src/Components/DescriptionList/DescriptionListItemTitle.tsx
new file mode 100644
index 00000000000..59ea6955c05
--- /dev/null
+++ b/frontend/src/Components/DescriptionList/DescriptionListItemTitle.tsx
@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+import styles from './DescriptionListItemTitle.css';
+
+export interface DescriptionListItemTitleProps {
+ className?: string;
+ children?: ReactNode;
+}
+
+function DescriptionListItemTitle(props: DescriptionListItemTitleProps) {
+ const { className = styles.title, children } = props;
+
+ return {children} ;
+}
+
+export default DescriptionListItemTitle;
diff --git a/frontend/src/Components/DragPreviewLayer.css.d.ts b/frontend/src/Components/DragPreviewLayer.css.d.ts
new file mode 100644
index 00000000000..6944a829d15
--- /dev/null
+++ b/frontend/src/Components/DragPreviewLayer.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'dragLayer': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/DragPreviewLayer.js b/frontend/src/Components/DragPreviewLayer.js
deleted file mode 100644
index a111df70e4c..00000000000
--- a/frontend/src/Components/DragPreviewLayer.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styles from './DragPreviewLayer.css';
-
-function DragPreviewLayer({ children, ...otherProps }) {
- return (
-
- {children}
-
- );
-}
-
-DragPreviewLayer.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string
-};
-
-DragPreviewLayer.defaultProps = {
- className: styles.dragLayer
-};
-
-export default DragPreviewLayer;
diff --git a/frontend/src/Components/DragPreviewLayer.tsx b/frontend/src/Components/DragPreviewLayer.tsx
new file mode 100644
index 00000000000..2e578504bc8
--- /dev/null
+++ b/frontend/src/Components/DragPreviewLayer.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import styles from './DragPreviewLayer.css';
+
+interface DragPreviewLayerProps {
+ className?: string;
+ children?: React.ReactNode;
+}
+
+function DragPreviewLayer({
+ className = styles.dragLayer,
+ children,
+ ...otherProps
+}: DragPreviewLayerProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export default DragPreviewLayer;
diff --git a/frontend/src/Components/Error/ErrorBoundary.js b/frontend/src/Components/Error/ErrorBoundary.js
deleted file mode 100644
index 88412ad19a9..00000000000
--- a/frontend/src/Components/Error/ErrorBoundary.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as sentry from '@sentry/browser';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-
-class ErrorBoundary extends Component {
-
- //
- // Lifecycle
-
- constructor(props, context) {
- super(props, context);
-
- this.state = {
- error: null,
- info: null
- };
- }
-
- componentDidCatch(error, info) {
- this.setState({
- error,
- info
- });
-
- sentry.captureException(error);
- }
-
- //
- // Render
-
- render() {
- const {
- children,
- errorComponent: ErrorComponent,
- ...otherProps
- } = this.props;
-
- const {
- error,
- info
- } = this.state;
-
- if (error) {
- return (
- {
+ constructor(props: ErrorBoundaryProps) {
+ super(props);
+
+ this.state = {
+ error: null,
+ info: null,
+ };
+ }
+
+ componentDidCatch(error: Error, info: ErrorInfo) {
+ this.setState({
+ error,
+ info,
+ });
+
+ sentry.captureException(error);
+ }
+
+ render() {
+ const { children, errorComponent: ErrorComponent } = this.props;
+ const { error, info } = this.state;
+
+ if (error) {
+ return
-
- {message}
-
-
-
-
-
-
-
- {
- error &&
-
- {error.toString()}
-
- }
-
-
- {info.componentStack}
-
-
-
+
{message}
+
+
+
+
+
+
+ {error ? {error.message}
: null}
+
+ {detailedError ? (
+ detailedError.map((d, index) => {
+ return (
+
+ {` at ${d.functionName} (${d.fileName}:${d.lineNumber}:${d.columnNumber})`}
+
+ );
+ })
+ ) : (
+ {info.componentStack}
+ )}
+
+ Version: {window.Sonarr.version}
+
+
-
- {legend}
-
- {children}
-
- );
- }
-
-}
-
-FieldSet.propTypes = {
- size: PropTypes.oneOf(sizes.all).isRequired,
- legend: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
- children: PropTypes.node
-};
-
-FieldSet.defaultProps = {
- size: sizes.MEDIUM
-};
-
-export default FieldSet;
diff --git a/frontend/src/Components/FieldSet.tsx b/frontend/src/Components/FieldSet.tsx
new file mode 100644
index 00000000000..c2ff03a7f58
--- /dev/null
+++ b/frontend/src/Components/FieldSet.tsx
@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+import React, { ComponentProps } from 'react';
+import { sizes } from 'Helpers/Props';
+import { Size } from 'Helpers/Props/sizes';
+import styles from './FieldSet.css';
+
+interface FieldSetProps {
+ size?: Size;
+ legend?: ComponentProps<'legend'>['children'];
+ children?: React.ReactNode;
+}
+
+function FieldSet({ size = sizes.MEDIUM, legend, children }: FieldSetProps) {
+ return (
+
+
+ {legend}
+
+ {children}
+
+ );
+}
+
+export default FieldSet;
diff --git a/frontend/src/Components/FileBrowser/FileBrowserModal.css.d.ts b/frontend/src/Components/FileBrowser/FileBrowserModal.css.d.ts
new file mode 100644
index 00000000000..5d00cca7ea5
--- /dev/null
+++ b/frontend/src/Components/FileBrowser/FileBrowserModal.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'modal': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/FileBrowser/FileBrowserModal.js b/frontend/src/Components/FileBrowser/FileBrowserModal.js
deleted file mode 100644
index 6b58dbb8c2a..00000000000
--- a/frontend/src/Components/FileBrowser/FileBrowserModal.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Modal from 'Components/Modal/Modal';
-import FileBrowserModalContentConnector from './FileBrowserModalContentConnector';
-import styles from './FileBrowserModal.css';
-
-class FileBrowserModal extends Component {
-
- //
- // Render
-
- render() {
- const {
- isOpen,
- onModalClose,
- ...otherProps
- } = this.props;
-
- return (
-
-
- );
- }
-}
-
-FileBrowserModal.propTypes = {
- isOpen: PropTypes.bool.isRequired,
- onModalClose: PropTypes.func.isRequired
-};
-
-export default FileBrowserModal;
diff --git a/frontend/src/Components/FileBrowser/FileBrowserModal.tsx b/frontend/src/Components/FileBrowser/FileBrowserModal.tsx
new file mode 100644
index 00000000000..0925890de23
--- /dev/null
+++ b/frontend/src/Components/FileBrowser/FileBrowserModal.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import FileBrowserModalContent, {
+ FileBrowserModalContentProps,
+} from './FileBrowserModalContent';
+import styles from './FileBrowserModal.css';
+
+interface FileBrowserModalProps extends FileBrowserModalContentProps {
+ isOpen: boolean;
+ onModalClose: () => void;
+}
+
+function FileBrowserModal(props: FileBrowserModalProps) {
+ const { isOpen, onModalClose, ...otherProps } = props;
+
+ return (
+
+
+ );
+}
+
+export default FileBrowserModal;
diff --git a/frontend/src/Components/FileBrowser/FileBrowserModalContent.css.d.ts b/frontend/src/Components/FileBrowser/FileBrowserModalContent.css.d.ts
new file mode 100644
index 00000000000..e83c1307526
--- /dev/null
+++ b/frontend/src/Components/FileBrowser/FileBrowserModalContent.css.d.ts
@@ -0,0 +1,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'faqLink': string;
+ 'loading': string;
+ 'mappedDrivesWarning': string;
+ 'modalBody': string;
+ 'pathInput': string;
+ 'scroller': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/FileBrowser/FileBrowserModalContent.js b/frontend/src/Components/FileBrowser/FileBrowserModalContent.js
deleted file mode 100644
index 2fbeaaf8417..00000000000
--- a/frontend/src/Components/FileBrowser/FileBrowserModalContent.js
+++ /dev/null
@@ -1,257 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import Alert from 'Components/Alert';
-import PathInput from 'Components/Form/PathInput';
-import Button from 'Components/Link/Button';
-import Link from 'Components/Link/Link';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-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 Scroller from 'Components/Scroller/Scroller';
-import Table from 'Components/Table/Table';
-import TableBody from 'Components/Table/TableBody';
-import { kinds, scrollDirections } from 'Helpers/Props';
-import FileBrowserRow from './FileBrowserRow';
-import styles from './FileBrowserModalContent.css';
-
-const columns = [
- {
- name: 'type',
- label: 'Type',
- isVisible: true
- },
- {
- name: 'name',
- label: 'Name',
- isVisible: true
- }
-];
-
-class FileBrowserModalContent extends Component {
-
- //
- // Lifecycle
-
- constructor(props, context) {
- super(props, context);
-
- this._scrollerNode = null;
-
- this.state = {
- isFileBrowserModalOpen: false,
- currentPath: props.value
- };
- }
-
- componentDidUpdate(prevProps, prevState) {
- const {
- currentPath
- } = this.props;
-
- if (
- currentPath !== this.state.currentPath &&
- currentPath !== prevState.currentPath
- ) {
- this.setState({ currentPath });
- this._scrollerNode.scrollTop = 0;
- }
- }
-
- //
- // Control
-
- setScrollerRef = (ref) => {
- if (ref) {
- this._scrollerNode = ReactDOM.findDOMNode(ref);
- } else {
- this._scrollerNode = null;
- }
- };
-
- //
- // Listeners
-
- onPathInputChange = ({ value }) => {
- this.setState({ currentPath: value });
- };
-
- onRowPress = (path) => {
- this.props.onFetchPaths(path);
- };
-
- onOkPress = () => {
- this.props.onChange({
- name: this.props.name,
- value: this.state.currentPath
- });
-
- this.props.onClearPaths();
- this.props.onModalClose();
- };
-
- //
- // Render
-
- render() {
- const {
- isFetching,
- isPopulated,
- error,
- parent,
- directories,
- files,
- isWindowsService,
- onModalClose,
- ...otherProps
- } = this.props;
-
- const emptyParent = parent === '';
-
- return (
-
-
- File Browser
-
-
-
- {
- isWindowsService &&
-
- Mapped network drives are not available when running as a Windows Service, see the
- }
-
-
- {
- !!error &&
- Error loading contents
- }
-
- {
- isPopulated && !error &&
-
-
- {
- emptyParent &&
-
-
- }
-
-
-
-
- {
- isFetching &&
-
- Cancel
-
-
-
- Ok
-
-
-
- );
- }
-}
-
-FileBrowserModalContent.propTypes = {
- name: PropTypes.string.isRequired,
- value: PropTypes.string.isRequired,
- isFetching: PropTypes.bool.isRequired,
- isPopulated: PropTypes.bool.isRequired,
- error: PropTypes.object,
- parent: PropTypes.string,
- currentPath: PropTypes.string.isRequired,
- directories: PropTypes.arrayOf(PropTypes.object).isRequired,
- files: PropTypes.arrayOf(PropTypes.object).isRequired,
- isWindowsService: PropTypes.bool.isRequired,
- onFetchPaths: PropTypes.func.isRequired,
- onClearPaths: PropTypes.func.isRequired,
- onChange: PropTypes.func.isRequired,
- onModalClose: PropTypes.func.isRequired
-};
-
-export default FileBrowserModalContent;
diff --git a/frontend/src/Components/FileBrowser/FileBrowserModalContent.tsx b/frontend/src/Components/FileBrowser/FileBrowserModalContent.tsx
new file mode 100644
index 00000000000..41338cb39be
--- /dev/null
+++ b/frontend/src/Components/FileBrowser/FileBrowserModalContent.tsx
@@ -0,0 +1,237 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import Alert from 'Components/Alert';
+import { PathInputInternal } from 'Components/Form/PathInput';
+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 Scroller from 'Components/Scroller/Scroller';
+import Column from 'Components/Table/Column';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import { kinds, scrollDirections } from 'Helpers/Props';
+import { clearPaths, fetchPaths } from 'Store/Actions/pathActions';
+import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
+import { InputChanged } from 'typings/inputs';
+import translate from 'Utilities/String/translate';
+import createPathsSelector from './createPathsSelector';
+import FileBrowserRow from './FileBrowserRow';
+import styles from './FileBrowserModalContent.css';
+
+const columns: Column[] = [
+ {
+ name: 'type',
+ label: () => translate('Type'),
+ isVisible: true,
+ },
+ {
+ name: 'name',
+ label: () => translate('Name'),
+ isVisible: true,
+ },
+];
+
+const handleClearPaths = () => {};
+
+export interface FileBrowserModalContentProps {
+ name: string;
+ value: string;
+ includeFiles?: boolean;
+ onChange: (args: InputChanged) => unknown;
+ onModalClose: () => void;
+}
+
+function FileBrowserModalContent(props: FileBrowserModalContentProps) {
+ const { name, value, includeFiles = true, onChange, onModalClose } = props;
+
+ const dispatch = useDispatch();
+
+ const { isWindows, mode } = useSelector(createSystemStatusSelector());
+ const { isFetching, isPopulated, error, parent, directories, files, paths } =
+ useSelector(createPathsSelector());
+
+ const [currentPath, setCurrentPath] = useState(value);
+ const scrollerRef = useRef(null);
+ const previousValue = usePrevious(value);
+
+ const emptyParent = parent === '';
+ const isWindowsService = isWindows && mode === 'service';
+
+ const handlePathInputChange = useCallback(
+ ({ value }: InputChanged) => {
+ setCurrentPath(value);
+ },
+ []
+ );
+
+ const handleRowPress = useCallback(
+ (path: string) => {
+ setCurrentPath(path);
+
+ dispatch(
+ fetchPaths({
+ path,
+ allowFoldersWithoutTrailingSlashes: true,
+ includeFiles,
+ })
+ );
+ },
+ [includeFiles, dispatch, setCurrentPath]
+ );
+
+ const handleOkPress = useCallback(() => {
+ onChange({
+ name,
+ value: currentPath,
+ });
+
+ dispatch(clearPaths());
+ onModalClose();
+ }, [name, currentPath, dispatch, onChange, onModalClose]);
+
+ const handleFetchPaths = useCallback(
+ (path: string) => {
+ dispatch(
+ fetchPaths({
+ path,
+ allowFoldersWithoutTrailingSlashes: true,
+ includeFiles,
+ })
+ );
+ },
+ [includeFiles, dispatch]
+ );
+
+ useEffect(() => {
+ if (value !== previousValue && value !== currentPath) {
+ setCurrentPath(value);
+ }
+ }, [value, previousValue, currentPath, setCurrentPath]);
+
+ useEffect(
+ () => {
+ dispatch(
+ fetchPaths({
+ path: currentPath,
+ allowFoldersWithoutTrailingSlashes: true,
+ includeFiles,
+ })
+ );
+
+ return () => {
+ dispatch(clearPaths());
+ };
+ },
+ // This should only run once when the component mounts,
+ // so we don't need to include the other dependencies.
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [dispatch]
+ );
+
+ return (
+
+ {translate('FileBrowser')}
+
+
+ {isWindowsService ? (
+
+
+ ) : null}
+
+
+ {error ? {translate('ErrorLoadingContents')}
: null}
+
+ {isPopulated && !error ? (
+
+
+ {emptyParent ? (
+
+
+ ) : null}
+
+
+
+
+ {isFetching ? (
+ {translate('Cancel')}
+
+ {translate('Ok')}
+
+
+ );
+}
+
+export default FileBrowserModalContent;
diff --git a/frontend/src/Components/FileBrowser/FileBrowserModalContentConnector.js b/frontend/src/Components/FileBrowser/FileBrowserModalContentConnector.js
deleted file mode 100644
index 1a3a41ef0af..00000000000
--- a/frontend/src/Components/FileBrowser/FileBrowserModalContentConnector.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { clearPaths, fetchPaths } from 'Store/Actions/pathActions';
-import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
-import FileBrowserModalContent from './FileBrowserModalContent';
-
-function createMapStateToProps() {
- return createSelector(
- (state) => state.paths,
- createSystemStatusSelector(),
- (paths, systemStatus) => {
- const {
- isFetching,
- isPopulated,
- error,
- parent,
- currentPath,
- directories,
- files
- } = paths;
-
- const filteredPaths = _.filter([...directories, ...files], ({ path }) => {
- return path.toLowerCase().startsWith(currentPath.toLowerCase());
- });
-
- return {
- isFetching,
- isPopulated,
- error,
- parent,
- currentPath,
- directories,
- files,
- paths: filteredPaths,
- isWindowsService: systemStatus.isWindows && systemStatus.mode === 'service'
- };
- }
- );
-}
-
-const mapDispatchToProps = {
- dispatchFetchPaths: fetchPaths,
- dispatchClearPaths: clearPaths
-};
-
-class FileBrowserModalContentConnector extends Component {
-
- // Lifecycle
-
- componentDidMount() {
- const {
- value,
- includeFiles,
- dispatchFetchPaths
- } = this.props;
-
- dispatchFetchPaths({
- path: value,
- allowFoldersWithoutTrailingSlashes: true,
- includeFiles
- });
- }
-
- //
- // Listeners
-
- onFetchPaths = (path) => {
- const {
- includeFiles,
- dispatchFetchPaths
- } = this.props;
-
- dispatchFetchPaths({
- path,
- allowFoldersWithoutTrailingSlashes: true,
- includeFiles
- });
- };
-
- onClearPaths = () => {
- // this.props.dispatchClearPaths();
- };
-
- onModalClose = () => {
- this.props.dispatchClearPaths();
- this.props.onModalClose();
- };
-
- //
- // Render
-
- render() {
- return (
-
-
-
-
- {name}
-
- );
- }
-
-}
-
-FileBrowserRow.propTypes = {
- type: PropTypes.string.isRequired,
- name: PropTypes.string.isRequired,
- path: PropTypes.string.isRequired,
- onPress: PropTypes.func.isRequired
-};
-
-export default FileBrowserRow;
diff --git a/frontend/src/Components/FileBrowser/FileBrowserRow.tsx b/frontend/src/Components/FileBrowser/FileBrowserRow.tsx
new file mode 100644
index 00000000000..fe47f1664fe
--- /dev/null
+++ b/frontend/src/Components/FileBrowser/FileBrowserRow.tsx
@@ -0,0 +1,49 @@
+import React, { useCallback } from 'react';
+import { PathType } from 'App/State/PathsAppState';
+import Icon from 'Components/Icon';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableRowButton from 'Components/Table/TableRowButton';
+import { icons } from 'Helpers/Props';
+import styles from './FileBrowserRow.css';
+
+function getIconName(type: PathType) {
+ switch (type) {
+ case 'computer':
+ return icons.COMPUTER;
+ case 'drive':
+ return icons.DRIVE;
+ case 'file':
+ return icons.FILE;
+ case 'parent':
+ return icons.PARENT;
+ default:
+ return icons.FOLDER;
+ }
+}
+
+interface FileBrowserRowProps {
+ type: PathType;
+ name: string;
+ path: string;
+ onPress: (path: string) => void;
+}
+
+function FileBrowserRow(props: FileBrowserRowProps) {
+ const { type, name, path, onPress } = props;
+
+ const handlePress = useCallback(() => {
+ onPress(path);
+ }, [path, onPress]);
+
+ return (
+
+
+
+
+ {name}
+
+ );
+}
+
+export default FileBrowserRow;
diff --git a/frontend/src/Components/FileBrowser/createPathsSelector.ts b/frontend/src/Components/FileBrowser/createPathsSelector.ts
new file mode 100644
index 00000000000..5da830bd5e6
--- /dev/null
+++ b/frontend/src/Components/FileBrowser/createPathsSelector.ts
@@ -0,0 +1,36 @@
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+
+function createPathsSelector() {
+ return createSelector(
+ (state: AppState) => state.paths,
+ (paths) => {
+ const {
+ isFetching,
+ isPopulated,
+ error,
+ parent,
+ currentPath,
+ directories,
+ files,
+ } = paths;
+
+ const filteredPaths = [...directories, ...files].filter(({ path }) => {
+ return path.toLowerCase().startsWith(currentPath.toLowerCase());
+ });
+
+ return {
+ isFetching,
+ isPopulated,
+ error,
+ parent,
+ currentPath,
+ directories,
+ files,
+ paths: filteredPaths,
+ };
+ }
+ );
+}
+
+export default createPathsSelector;
diff --git a/frontend/src/Components/Filter/Builder/DateFilterBuilderRowValue.css.d.ts b/frontend/src/Components/Filter/Builder/DateFilterBuilderRowValue.css.d.ts
new file mode 100644
index 00000000000..d391a1f3092
--- /dev/null
+++ b/frontend/src/Components/Filter/Builder/DateFilterBuilderRowValue.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'container': string;
+ 'numberInput': string;
+ 'selectInput': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderModalContent.css.d.ts b/frontend/src/Components/Filter/Builder/FilterBuilderModalContent.css.d.ts
new file mode 100644
index 00000000000..033d2edca56
--- /dev/null
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderModalContent.css.d.ts
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'label': string;
+ 'labelContainer': string;
+ 'labelInputContainer': string;
+ 'rows': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderModalContent.js b/frontend/src/Components/Filter/Builder/FilterBuilderModalContent.js
index d718aab0cf5..0c4a31657b2 100644
--- a/frontend/src/Components/Filter/Builder/FilterBuilderModalContent.js
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderModalContent.js
@@ -1,3 +1,4 @@
+import { maxBy } from 'lodash';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -8,6 +9,7 @@ import ModalContent from 'Components/Modal/ModalContent';
import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader';
import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
import FilterBuilderRow from './FilterBuilderRow';
import styles from './FilterBuilderModalContent.css';
@@ -49,7 +51,7 @@ class FilterBuilderModalContent extends Component {
if (id) {
dispatchSetFilter({ selectedFilterKey: id });
} else {
- const last = customFilters[customFilters.length -1];
+ const last = maxBy(customFilters, 'id');
dispatchSetFilter({ selectedFilterKey: last.id });
}
@@ -107,7 +109,7 @@ class FilterBuilderModalContent extends Component {
this.setState({
labelErrors: [
{
- message: 'Label is required'
+ message: translate('LabelIsRequired')
}
]
});
@@ -145,13 +147,13 @@ class FilterBuilderModalContent extends Component {
return (
- Custom Filter
+ {translate('CustomFilter')}
- Label
+ {translate('Label')}
@@ -165,7 +167,9 @@ class FilterBuilderModalContent extends Component {
- Filters
+
+ {translate('Filters')}
+
{
@@ -192,7 +196,7 @@ class FilterBuilderModalContent extends Component {
- Cancel
+ {translate('Cancel')}
- Save
+ {translate('Save')}
diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRow.css.d.ts b/frontend/src/Components/Filter/Builder/FilterBuilderRow.css.d.ts
new file mode 100644
index 00000000000..aba698af493
--- /dev/null
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRow.css.d.ts
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'actionsContainer': string;
+ 'filterRow': string;
+ 'inputContainer': string;
+ 'valueInputContainer': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRow.js b/frontend/src/Components/Filter/Builder/FilterBuilderRow.js
index 491829434fd..0b00c0f03e7 100644
--- a/frontend/src/Components/Filter/Builder/FilterBuilderRow.js
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRow.js
@@ -3,13 +3,19 @@ import React, { Component } from 'react';
import SelectInput from 'Components/Form/SelectInput';
import IconButton from 'Components/Link/IconButton';
import { filterBuilderTypes, filterBuilderValueTypes, icons } from 'Helpers/Props';
+import sortByProp from 'Utilities/Array/sortByProp';
import BoolFilterBuilderRowValue from './BoolFilterBuilderRowValue';
import DateFilterBuilderRowValue from './DateFilterBuilderRowValue';
import FilterBuilderRowValueConnector from './FilterBuilderRowValueConnector';
+import HistoryEventTypeFilterBuilderRowValue from './HistoryEventTypeFilterBuilderRowValue';
import IndexerFilterBuilderRowValueConnector from './IndexerFilterBuilderRowValueConnector';
+import LanguageFilterBuilderRowValue from './LanguageFilterBuilderRowValue';
import ProtocolFilterBuilderRowValue from './ProtocolFilterBuilderRowValue';
import QualityFilterBuilderRowValueConnector from './QualityFilterBuilderRowValueConnector';
-import QualityProfileFilterBuilderRowValueConnector from './QualityProfileFilterBuilderRowValueConnector';
+import QualityProfileFilterBuilderRowValue from './QualityProfileFilterBuilderRowValue';
+import QueueStatusFilterBuilderRowValue from './QueueStatusFilterBuilderRowValue';
+import SeasonsMonitoredStatusFilterBuilderRowValue from './SeasonsMonitoredStatusFilterBuilderRowValue';
+import SeriesFilterBuilderRowValue from './SeriesFilterBuilderRowValue';
import SeriesStatusFilterBuilderRowValue from './SeriesStatusFilterBuilderRowValue';
import SeriesTypeFilterBuilderRowValue from './SeriesTypeFilterBuilderRowValue';
import TagFilterBuilderRowValueConnector from './TagFilterBuilderRowValueConnector';
@@ -57,9 +63,15 @@ function getRowValueConnector(selectedFilterBuilderProp) {
case filterBuilderValueTypes.DATE:
return DateFilterBuilderRowValue;
+ case filterBuilderValueTypes.HISTORY_EVENT_TYPE:
+ return HistoryEventTypeFilterBuilderRowValue;
+
case filterBuilderValueTypes.INDEXER:
return IndexerFilterBuilderRowValueConnector;
+ case filterBuilderValueTypes.LANGUAGE:
+ return LanguageFilterBuilderRowValue;
+
case filterBuilderValueTypes.PROTOCOL:
return ProtocolFilterBuilderRowValue;
@@ -67,7 +79,16 @@ function getRowValueConnector(selectedFilterBuilderProp) {
return QualityFilterBuilderRowValueConnector;
case filterBuilderValueTypes.QUALITY_PROFILE:
- return QualityProfileFilterBuilderRowValueConnector;
+ return QualityProfileFilterBuilderRowValue;
+
+ case filterBuilderValueTypes.QUEUE_STATUS:
+ return QueueStatusFilterBuilderRowValue;
+
+ case filterBuilderValueTypes.SEASONS_MONITORED_STATUS:
+ return SeasonsMonitoredStatusFilterBuilderRowValue;
+
+ case filterBuilderValueTypes.SERIES:
+ return SeriesFilterBuilderRowValue;
case filterBuilderValueTypes.SERIES_STATUS:
return SeriesStatusFilterBuilderRowValue;
@@ -206,11 +227,13 @@ class FilterBuilderRow extends Component {
const selectedFilterBuilderProp = this.selectedFilterBuilderProp;
const keyOptions = filterBuilderProps.map((availablePropFilter) => {
+ const { name, label } = availablePropFilter;
+
return {
- key: availablePropFilter.name,
- value: availablePropFilter.label
+ key: name,
+ value: typeof label === 'function' ? label() : label
};
- }).sort((a, b) => a.value.localeCompare(b.value));
+ }).sort(sortByProp('value'));
const ValueComponent = getRowValueConnector(selectedFilterBuilderProp);
diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRowValue.js b/frontend/src/Components/Filter/Builder/FilterBuilderRowValue.js
index 68fa5c557e0..217626c90a1 100644
--- a/frontend/src/Components/Filter/Builder/FilterBuilderRowValue.js
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRowValue.js
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
-import TagInput from 'Components/Form/TagInput';
+import TagInput from 'Components/Form/Tag/TagInput';
import { filterBuilderTypes, filterBuilderValueTypes, kinds } from 'Helpers/Props';
import tagShape from 'Helpers/Props/Shapes/tagShape';
import convertToBytes from 'Utilities/Number/convertToBytes';
diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueConnector.js b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueConnector.js
index a7aed80b6be..d1419327a23 100644
--- a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueConnector.js
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueConnector.js
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { filterBuilderTypes } from 'Helpers/Props';
import * as filterTypes from 'Helpers/Props/filterTypes';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
import FilterBuilderRowValue from './FilterBuilderRowValue';
function createTagListSelector() {
@@ -38,7 +38,7 @@ function createTagListSelector() {
}
return acc;
- }, []).sort(sortByName);
+ }, []).sort(sortByProp('name'));
}
return _.uniqBy(items, 'id');
diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueProps.ts b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueProps.ts
new file mode 100644
index 00000000000..5bf9e57851d
--- /dev/null
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueProps.ts
@@ -0,0 +1,16 @@
+import { FilterBuilderProp } from 'App/State/AppState';
+
+interface FilterBuilderRowOnChangeProps {
+ name: string;
+ value: unknown[];
+}
+
+interface FilterBuilderRowValueProps {
+ filterType?: string;
+ filterValue: string | number | object | string[] | number[] | object[];
+ selectedFilterBuilderProp: FilterBuilderProp
;
+ sectionItem: unknown[];
+ onChange: (payload: FilterBuilderRowOnChangeProps) => void;
+}
+
+export default FilterBuilderRowValueProps;
diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css.d.ts b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css.d.ts
new file mode 100644
index 00000000000..80bcf146406
--- /dev/null
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.css.d.ts
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'isLastTag': string;
+ 'label': string;
+ 'or': string;
+ 'tag': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.js b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.js
index 6b5846594cf..063a973466c 100644
--- a/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.js
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRowValueTag.js
@@ -1,7 +1,8 @@
import PropTypes from 'prop-types';
import React from 'react';
-import TagInputTag from 'Components/Form/TagInputTag';
+import TagInputTag from 'Components/Form/Tag/TagInputTag';
import { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
import styles from './FilterBuilderRowValueTag.css';
function FilterBuilderRowValueTag(props) {
@@ -18,7 +19,7 @@ function FilterBuilderRowValueTag(props) {
props.isLastTag ?
null :
- or
+ {translate('Or')}
}
- Custom Filters
+ {translate('CustomFilters')}
{
- customFilters.map((customFilter) => {
- return (
-
- Add Custom Filter
+ {translate('AddCustomFilter')}
@@ -58,7 +62,7 @@ function CustomFiltersModalContent(props) {
- Close
+ {translate('Close')}
diff --git a/frontend/src/Components/Form/AutoCompleteInput.js b/frontend/src/Components/Form/AutoCompleteInput.js
deleted file mode 100644
index d35969c4c37..00000000000
--- a/frontend/src/Components/Form/AutoCompleteInput.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import jdu from 'jdu';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import AutoSuggestInput from './AutoSuggestInput';
-
-class AutoCompleteInput extends Component {
-
- //
- // Lifecycle
-
- constructor(props, context) {
- super(props, context);
-
- this.state = {
- suggestions: []
- };
- }
-
- //
- // Control
-
- getSuggestionValue(item) {
- return item;
- }
-
- renderSuggestion(item) {
- return item;
- }
-
- //
- // Listeners
-
- onInputChange = (event, { newValue }) => {
- this.props.onChange({
- name: this.props.name,
- value: newValue
- });
- };
-
- onInputBlur = () => {
- this.setState({ suggestions: [] });
- };
-
- onSuggestionsFetchRequested = ({ value }) => {
- const { values } = this.props;
- const lowerCaseValue = jdu.replace(value).toLowerCase();
-
- const filteredValues = values.filter((v) => {
- return jdu.replace(v).toLowerCase().contains(lowerCaseValue);
- });
-
- this.setState({ suggestions: filteredValues });
- };
-
- onSuggestionsClearRequested = () => {
- this.setState({ suggestions: [] });
- };
-
- //
- // Render
-
- render() {
- const {
- name,
- value,
- ...otherProps
- } = this.props;
-
- const { suggestions } = this.state;
-
- return (
- ) => unknown;
+}
+
+function AutoCompleteInput({
+ name,
+ value = '',
+ values,
+ onChange,
+ ...otherProps
+}: AutoCompleteInputProps) {
+ const [suggestions, setSuggestions] = useState([]);
+
+ const getSuggestionValue = useCallback((item: string) => {
+ return item;
+ }, []);
+
+ const renderSuggestion = useCallback((item: string) => {
+ return item;
+ }, []);
+
+ const handleInputChange = useCallback(
+ (_event: SyntheticEvent, { newValue }: ChangeEvent) => {
+ onChange({
+ name,
+ value: newValue,
+ });
+ },
+ [name, onChange]
+ );
+
+ const handleInputBlur = useCallback(() => {
+ setSuggestions([]);
+ }, [setSuggestions]);
+
+ const handleSuggestionsFetchRequested = useCallback(
+ ({ value: newValue }: SuggestionsFetchRequestedParams) => {
+ const lowerCaseValue = jdu.replace(newValue).toLowerCase();
+
+ const filteredValues = values.filter((v) => {
+ return jdu.replace(v).toLowerCase().includes(lowerCaseValue);
+ });
+
+ setSuggestions(filteredValues);
+ },
+ [values, setSuggestions]
+ );
+
+ const handleSuggestionsClearRequested = useCallback(() => {
+ setSuggestions([]);
+ }, [setSuggestions]);
+
+ return (
+
- {({ ref }) => {
- if (renderInputComponent) {
- return renderInputComponent(inputProps, ref);
- }
-
- return (
-
-
- );
- }}
-
- );
- };
-
- renderSuggestionsContainer = ({ containerProps, children }) => {
- return (
-
-
- {({ ref: popperRef, style, scheduleUpdate }) => {
- this._scheduleUpdate = scheduleUpdate;
-
- return (
-
- );
- }}
-
-
- );
- };
-
- //
- // Listeners
-
- onComputeMaxHeight = (data) => {
- const {
- top,
- bottom,
- width
- } = data.offsets.reference;
-
- const windowHeight = window.innerHeight;
-
- if ((/^botton/).test(data.placement)) {
- data.styles.maxHeight = windowHeight - bottom;
- } else {
- data.styles.maxHeight = top;
- }
-
- data.styles.width = width;
-
- return data;
- };
-
- onInputChange = (event, { newValue }) => {
- this.props.onChange({
- name: this.props.name,
- value: newValue
- });
- };
-
- onInputKeyDown = (event) => {
- const {
- name,
- value,
- suggestions,
- onChange
- } = this.props;
-
- if (
- event.key === 'Tab' &&
- suggestions.length &&
- suggestions[0] !== this.props.value
- ) {
- event.preventDefault();
-
- if (value) {
- onChange({
- name,
- value: suggestions[0]
- });
- }
- }
- };
-
- //
- // Render
-
- render() {
- const {
- forwardedRef,
- className,
- inputContainerClassName,
- name,
- value,
- placeholder,
- suggestions,
- hasError,
- hasWarning,
- getSuggestionValue,
- renderSuggestion,
- onInputChange,
- onInputKeyDown,
- onInputFocus,
- onInputBlur,
- onSuggestionsFetchRequested,
- onSuggestionsClearRequested,
- onSuggestionSelected,
- ...otherProps
- } = this.props;
-
- const inputProps = {
- className: classNames(
- className,
- hasError && styles.hasError,
- hasWarning && styles.hasWarning
- ),
- name,
- value,
- placeholder,
- autoComplete: 'off',
- spellCheck: false,
- onChange: onInputChange || this.onInputChange,
- onKeyDown: onInputKeyDown || this.onInputKeyDown,
- onFocus: onInputFocus,
- onBlur: onInputBlur
- };
-
- const theme = {
- container: inputContainerClassName,
- containerOpen: styles.suggestionsContainerOpen,
- suggestionsContainer: styles.suggestionsContainer,
- suggestionsList: styles.suggestionsList,
- suggestion: styles.suggestion,
- suggestionHighlighted: styles.suggestionHighlighted
- };
-
- return (
-
-
- );
- }
-}
-
-AutoSuggestInput.propTypes = {
- forwardedRef: PropTypes.func,
- className: PropTypes.string.isRequired,
- inputContainerClassName: PropTypes.string.isRequired,
- name: PropTypes.string.isRequired,
- value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
- placeholder: PropTypes.string,
- suggestions: PropTypes.array.isRequired,
- hasError: PropTypes.bool,
- hasWarning: PropTypes.bool,
- enforceMaxHeight: PropTypes.bool.isRequired,
- minHeight: PropTypes.number.isRequired,
- maxHeight: PropTypes.number.isRequired,
- getSuggestionValue: PropTypes.func.isRequired,
- renderInputComponent: PropTypes.elementType,
- renderSuggestion: PropTypes.func.isRequired,
- onInputChange: PropTypes.func,
- onInputKeyDown: PropTypes.func,
- onInputFocus: PropTypes.func,
- onInputBlur: PropTypes.func.isRequired,
- onSuggestionsFetchRequested: PropTypes.func.isRequired,
- onSuggestionsClearRequested: PropTypes.func.isRequired,
- onSuggestionSelected: PropTypes.func,
- onChange: PropTypes.func.isRequired
-};
-
-AutoSuggestInput.defaultProps = {
- className: styles.input,
- inputContainerClassName: styles.inputContainer,
- enforceMaxHeight: true,
- minHeight: 50,
- maxHeight: 200
-};
-
-export default AutoSuggestInput;
diff --git a/frontend/src/Components/Form/AutoSuggestInput.tsx b/frontend/src/Components/Form/AutoSuggestInput.tsx
new file mode 100644
index 00000000000..b3a7c31b0f4
--- /dev/null
+++ b/frontend/src/Components/Form/AutoSuggestInput.tsx
@@ -0,0 +1,259 @@
+import classNames from 'classnames';
+import React, {
+ FocusEvent,
+ FormEvent,
+ KeyboardEvent,
+ KeyboardEventHandler,
+ MutableRefObject,
+ ReactNode,
+ Ref,
+ SyntheticEvent,
+ useCallback,
+ useEffect,
+ useRef,
+} from 'react';
+import Autosuggest, {
+ AutosuggestPropsBase,
+ BlurEvent,
+ ChangeEvent,
+ RenderInputComponentProps,
+ RenderSuggestionsContainerParams,
+} from 'react-autosuggest';
+import { Manager, Popper, Reference } from 'react-popper';
+import Portal from 'Components/Portal';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import { InputChanged } from 'typings/inputs';
+import styles from './AutoSuggestInput.css';
+
+interface AutoSuggestInputProps
+ extends Omit, 'renderInputComponent' | 'inputProps'> {
+ forwardedRef?: MutableRefObject | null>;
+ className?: string;
+ inputContainerClassName?: string;
+ name: string;
+ value?: string;
+ placeholder?: string;
+ suggestions: T[];
+ hasError?: boolean;
+ hasWarning?: boolean;
+ enforceMaxHeight?: boolean;
+ minHeight?: number;
+ maxHeight?: number;
+ renderInputComponent?: (
+ inputProps: RenderInputComponentProps,
+ ref: Ref
+ ) => ReactNode;
+ onInputChange: (
+ event: FormEvent,
+ params: ChangeEvent
+ ) => unknown;
+ onInputKeyDown?: KeyboardEventHandler;
+ onInputFocus?: (event: SyntheticEvent) => unknown;
+ onInputBlur: (
+ event: FocusEvent,
+ params?: BlurEvent
+ ) => unknown;
+ onChange?: (change: InputChanged) => unknown;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function AutoSuggestInput(props: AutoSuggestInputProps) {
+ const {
+ // TODO: forwaredRef should be replaces with React.forwardRef
+ forwardedRef,
+ className = styles.input,
+ inputContainerClassName = styles.inputContainer,
+ name,
+ value = '',
+ placeholder,
+ suggestions,
+ enforceMaxHeight = true,
+ hasError,
+ hasWarning,
+ minHeight = 50,
+ maxHeight = 200,
+ getSuggestionValue,
+ renderSuggestion,
+ renderInputComponent,
+ onInputChange,
+ onInputKeyDown,
+ onInputFocus,
+ onInputBlur,
+ onSuggestionsFetchRequested,
+ onSuggestionsClearRequested,
+ onSuggestionSelected,
+ onChange,
+ ...otherProps
+ } = props;
+
+ const updater = useRef<(() => void) | null>(null);
+ const previousSuggestions = usePrevious(suggestions);
+
+ const handleComputeMaxHeight = useCallback(
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (data: any) => {
+ const { top, bottom, width } = data.offsets.reference;
+
+ if (enforceMaxHeight) {
+ data.styles.maxHeight = maxHeight;
+ } else {
+ const windowHeight = window.innerHeight;
+
+ if (/^botton/.test(data.placement)) {
+ data.styles.maxHeight = windowHeight - bottom;
+ } else {
+ data.styles.maxHeight = top;
+ }
+ }
+
+ data.styles.width = width;
+
+ return data;
+ },
+ [enforceMaxHeight, maxHeight]
+ );
+
+ const createRenderInputComponent = useCallback(
+ (inputProps: RenderInputComponentProps) => {
+ return (
+
+ {({ ref }) => {
+ if (renderInputComponent) {
+ return renderInputComponent(inputProps, ref);
+ }
+
+ return (
+
+
+ );
+ }}
+
+ );
+ },
+ [renderInputComponent]
+ );
+
+ const renderSuggestionsContainer = useCallback(
+ ({ containerProps, children }: RenderSuggestionsContainerParams) => {
+ return (
+
+
+ {({ ref: popperRef, style, scheduleUpdate }) => {
+ updater.current = scheduleUpdate;
+
+ return (
+
+ );
+ }}
+
+
+ );
+ },
+ [minHeight, handleComputeMaxHeight]
+ );
+
+ const handleInputKeyDown = useCallback(
+ (event: KeyboardEvent) => {
+ if (
+ event.key === 'Tab' &&
+ suggestions.length &&
+ suggestions[0] !== value
+ ) {
+ event.preventDefault();
+
+ if (value) {
+ onSuggestionSelected?.(event, {
+ suggestion: suggestions[0],
+ suggestionValue: value,
+ suggestionIndex: 0,
+ sectionIndex: null,
+ method: 'enter',
+ });
+ }
+ }
+ },
+ [value, suggestions, onSuggestionSelected]
+ );
+
+ const inputProps = {
+ className: classNames(
+ className,
+ hasError && styles.hasError,
+ hasWarning && styles.hasWarning
+ ),
+ name,
+ value,
+ placeholder,
+ autoComplete: 'off',
+ spellCheck: false,
+ onChange: onInputChange,
+ onKeyDown: onInputKeyDown || handleInputKeyDown,
+ onFocus: onInputFocus,
+ onBlur: onInputBlur,
+ };
+
+ const theme = {
+ container: inputContainerClassName,
+ containerOpen: styles.suggestionsContainerOpen,
+ suggestionsContainer: styles.suggestionsContainer,
+ suggestionsList: styles.suggestionsList,
+ suggestion: styles.suggestion,
+ suggestionHighlighted: styles.suggestionHighlighted,
+ };
+
+ useEffect(() => {
+ if (updater.current && suggestions !== previousSuggestions) {
+ updater.current();
+ }
+ }, [suggestions, previousSuggestions]);
+
+ return (
+
+
+ );
+}
+
+export default AutoSuggestInput;
diff --git a/frontend/src/Components/Form/CaptchaInput.css.d.ts b/frontend/src/Components/Form/CaptchaInput.css.d.ts
new file mode 100644
index 00000000000..b6844144e95
--- /dev/null
+++ b/frontend/src/Components/Form/CaptchaInput.css.d.ts
@@ -0,0 +1,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'captchaInputWrapper': string;
+ 'hasButton': string;
+ 'hasError': string;
+ 'hasWarning': string;
+ 'input': string;
+ 'recaptchaWrapper': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/CaptchaInput.js b/frontend/src/Components/Form/CaptchaInput.js
deleted file mode 100644
index b422198b5ac..00000000000
--- a/frontend/src/Components/Form/CaptchaInput.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ReCAPTCHA from 'react-google-recaptcha';
-import Icon from 'Components/Icon';
-import { icons } from 'Helpers/Props';
-import FormInputButton from './FormInputButton';
-import TextInput from './TextInput';
-import styles from './CaptchaInput.css';
-
-function CaptchaInput(props) {
- const {
- className,
- name,
- value,
- hasError,
- hasWarning,
- refreshing,
- siteKey,
- secretToken,
- onChange,
- onRefreshPress,
- onCaptchaChange
- } = props;
-
- return (
-
-
-
-
-
-
- {
- !!siteKey && !!secretToken &&
-
-
- }
-
) => unknown;
+}
+
+function CaptchaInput({
+ className = styles.input,
+ name,
+ value = '',
+ provider,
+ providerData,
+ hasError,
+ hasWarning,
+ refreshing,
+ siteKey,
+ secretToken,
+ onChange,
+}: CaptchaInputProps) {
+ const { token } = useSelector((state: AppState) => state.captcha);
+ const dispatch = useDispatch();
+ const previousToken = usePrevious(token);
+
+ const handleCaptchaChange = useCallback(
+ (token: string | null) => {
+ // If the captcha has expired `captchaResponse` will be null.
+ // In the event it's null don't try to get the captchaCookie.
+ // TODO: Should we clear the cookie? or reset the captcha?
+
+ if (!token) {
+ return;
+ }
+
+ dispatch(
+ getCaptchaCookie({
+ provider,
+ providerData,
+ captchaResponse: token,
+ })
+ );
+ },
+ [provider, providerData, dispatch]
+ );
+
+ const handleRefreshPress = useCallback(() => {
+ dispatch(refreshCaptcha({ provider, providerData }));
+ }, [provider, providerData, dispatch]);
+
+ useEffect(() => {
+ if (token && token !== previousToken) {
+ onChange({ name, value: token });
+ }
+ }, [name, token, previousToken, onChange]);
+
+ useEffect(() => {
+ dispatch(resetCaptcha());
+ }, [dispatch]);
+
+ return (
+
+
+
+
+
+
+ {siteKey && secretToken ? (
+
+
+ ) : null}
+
-
-
- {
- isChecked &&
-
-
- {
- helpText &&
-
-
extends SyntheticEvent {
+ target: EventTarget & T;
+}
+
+interface CheckInputProps {
+ className?: string;
+ containerClassName?: string;
+ name: string;
+ checkedValue?: boolean;
+ uncheckedValue?: boolean;
+ value?: string | boolean;
+ helpText?: string;
+ helpTextWarning?: string;
+ isDisabled?: boolean;
+ kind?: Extract;
+ onChange: (changes: CheckInputChanged) => void;
+}
+
+function CheckInput(props: CheckInputProps) {
+ const {
+ className = styles.input,
+ containerClassName = styles.container,
+ name,
+ value,
+ checkedValue = true,
+ uncheckedValue = false,
+ helpText,
+ helpTextWarning,
+ isDisabled,
+ kind = 'primary',
+ onChange,
+ } = props;
+
+ const inputRef = useRef(null);
+
+ const isChecked = value === checkedValue;
+ const isUnchecked = value === uncheckedValue;
+ const isIndeterminate = !isChecked && !isUnchecked;
+ const isCheckClass: keyof typeof styles = `${kind}IsChecked`;
+
+ const toggleChecked = useCallback(
+ (checked: boolean, shiftKey: boolean) => {
+ const newValue = checked ? checkedValue : uncheckedValue;
+
+ if (value !== newValue) {
+ onChange({
+ name,
+ value: newValue,
+ shiftKey,
+ });
+ }
+ },
+ [name, value, checkedValue, uncheckedValue, onChange]
+ );
+
+ const handleClick = useCallback(
+ (event: SyntheticEvent) => {
+ if (isDisabled) {
+ return;
+ }
+
+ const shiftKey = event.nativeEvent.shiftKey;
+ const checked = !(inputRef.current?.checked ?? false);
+
+ event.preventDefault();
+ toggleChecked(checked, shiftKey);
+ },
+ [isDisabled, toggleChecked]
+ );
+
+ const handleChange = useCallback(
+ (event: ChangeEvent) => {
+ const checked = event.target.checked;
+ const shiftKey = event.nativeEvent.shiftKey;
+
+ toggleChecked(checked, shiftKey);
+ },
+ [toggleChecked]
+ );
+
+ useEffect(() => {
+ if (!inputRef.current) {
+ return;
+ }
+
+ inputRef.current.indeterminate =
+ value !== uncheckedValue && value !== checkedValue;
+ }, [value, uncheckedValue, checkedValue]);
+
+ return (
+
+
+
+ {isChecked ?
+
+ {helpText ? (
+
+
-
-
-
- );
- }
-}
-
-DeviceInput.propTypes = {
- className: PropTypes.string.isRequired,
- name: PropTypes.string.isRequired,
- value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])).isRequired,
- items: PropTypes.arrayOf(PropTypes.shape(tagShape)).isRequired,
- selectedDevices: PropTypes.arrayOf(PropTypes.shape(tagShape)).isRequired,
- hasError: PropTypes.bool,
- hasWarning: PropTypes.bool,
- isFetching: PropTypes.bool.isRequired,
- isPopulated: PropTypes.bool.isRequired,
- onChange: PropTypes.func.isRequired,
- onRefreshPress: PropTypes.func.isRequired
-};
-
-DeviceInput.defaultProps = {
- className: styles.deviceInputWrapper,
- inputClassName: styles.input
-};
-
-export default DeviceInput;
diff --git a/frontend/src/Components/Form/DeviceInputConnector.js b/frontend/src/Components/Form/DeviceInputConnector.js
deleted file mode 100644
index 2af9a79f6ab..00000000000
--- a/frontend/src/Components/Form/DeviceInputConnector.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { clearOptions, defaultState, fetchOptions } from 'Store/Actions/providerOptionActions';
-import DeviceInput from './DeviceInput';
-
-function createMapStateToProps() {
- return createSelector(
- (state, { value }) => value,
- (state) => state.providerOptions.devices || defaultState,
- (value, devices) => {
-
- return {
- ...devices,
- selectedDevices: value.map((valueDevice) => {
- // Disable equality ESLint rule so we don't need to worry about
- // a type mismatch between the value items and the device ID.
- // eslint-disable-next-line eqeqeq
- const device = devices.items.find((d) => d.id == valueDevice);
-
- if (device) {
- return {
- id: device.id,
- name: `${device.name} (${device.id})`
- };
- }
-
- return {
- id: valueDevice,
- name: `Unknown (${valueDevice})`
- };
- })
- };
- }
- );
-}
-
-const mapDispatchToProps = {
- dispatchFetchOptions: fetchOptions,
- dispatchClearOptions: clearOptions
-};
-
-class DeviceInputConnector extends Component {
-
- //
- // Lifecycle
-
- componentDidMount = () => {
- this._populate();
- };
-
- componentWillUnmount = () => {
- this.props.dispatchClearOptions({ section: 'devices' });
- };
-
- //
- // Control
-
- _populate() {
- const {
- provider,
- providerData,
- dispatchFetchOptions
- } = this.props;
-
- dispatchFetchOptions({
- section: 'devices',
- action: 'getDevices',
- provider,
- providerData
- });
- }
-
- //
- // Listeners
-
- onRefreshPress = () => {
- this._populate();
- };
-
- //
- // Render
-
- render() {
- return (
-
-
-
- {({ ref }) => (
-
- )}
-
-
-
- {({ ref, style, scheduleUpdate }) => {
- this._scheduleUpdate = scheduleUpdate;
-
- return (
-
- {
- isOpen && !isMobile ?
-
- {
- values.map((v, index) => {
- const hasParent = v.parentKey !== undefined;
- const depth = hasParent ? 1 : 0;
- const parentSelected = hasParent && value.includes(v.parentKey);
- return (
-
- {v.value}
-
- );
- })
- }
- :
- null
- }
-
- );
- }
- }
-
-
-
-
- {
- isMobile ?
-
-
-
-
-
-
- {
- values.map((v, index) => {
- const hasParent = v.parentKey !== undefined;
- const depth = hasParent ? 1 : 0;
- const parentSelected = hasParent && value.includes(v.parentKey);
- return (
-
- {v.value}
-
- );
- })
- }
-
-
- :
- null
- }
-
- }
-
- {
- isMultiSelect &&
-
-
- }
-
- );
- }
-}
-
-EnhancedSelectInputOption.propTypes = {
- className: PropTypes.string.isRequired,
- id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
- depth: PropTypes.number.isRequired,
- isSelected: PropTypes.bool.isRequired,
- isDisabled: PropTypes.bool.isRequired,
- isHidden: PropTypes.bool.isRequired,
- isMultiSelect: PropTypes.bool.isRequired,
- isMobile: PropTypes.bool.isRequired,
- children: PropTypes.node.isRequired,
- onSelect: PropTypes.func.isRequired
-};
-
-EnhancedSelectInputOption.defaultProps = {
- className: styles.option,
- depth: 0,
- isDisabled: false,
- isHidden: false,
- isMultiSelect: false
-};
-
-export default EnhancedSelectInputOption;
diff --git a/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.js b/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.js
deleted file mode 100644
index 21ddebb0278..00000000000
--- a/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import styles from './EnhancedSelectInputSelectedValue.css';
-
-function EnhancedSelectInputSelectedValue(props) {
- const {
- className,
- children,
- isDisabled
- } = props;
-
- return (
-
- {children}
-
- );
-}
-
-EnhancedSelectInputSelectedValue.propTypes = {
- className: PropTypes.string.isRequired,
- children: PropTypes.node,
- isDisabled: PropTypes.bool.isRequired
-};
-
-EnhancedSelectInputSelectedValue.defaultProps = {
- className: styles.selectedValue,
- isDisabled: false
-};
-
-export default EnhancedSelectInputSelectedValue;
diff --git a/frontend/src/Components/Form/Form.css.d.ts b/frontend/src/Components/Form/Form.css.d.ts
new file mode 100644
index 00000000000..178f2fec174
--- /dev/null
+++ b/frontend/src/Components/Form/Form.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'validationFailures': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/Form.js b/frontend/src/Components/Form/Form.js
deleted file mode 100644
index 859911a8b62..00000000000
--- a/frontend/src/Components/Form/Form.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Alert from 'Components/Alert';
-import { kinds } from 'Helpers/Props';
-import styles from './Form.css';
-
-function Form({ children, validationErrors, validationWarnings, ...otherProps }) {
- return (
-
- {
- validationErrors.length || validationWarnings.length ?
-
- {
- validationErrors.map((error, index) => {
- return (
-
- {error.errorMessage}
-
- );
- })
- }
-
- {
- validationWarnings.map((warning, index) => {
- return (
-
- {warning.errorMessage}
-
- );
- })
- }
-
:
- null
- }
-
- {children}
-
+ {validationErrors.length || validationWarnings.length ? (
+
+ {validationErrors.map((error, index) => {
+ return (
+
+ {error.errorMessage}
+
+ );
+ })}
+
+ {validationWarnings.map((warning, index) => {
+ return (
+
+ {warning.errorMessage}
+
+ );
+ })}
+
+ ) : null}
+
+ {children}
+
- {
- map(children, (child) => {
- return React.cloneElement(child, childProps);
- })
- }
-
- );
-}
-
-FormGroup.propTypes = {
- className: PropTypes.string.isRequired,
- children: PropTypes.node.isRequired,
- size: PropTypes.oneOf(sizes.all).isRequired,
- advancedSettings: PropTypes.bool.isRequired,
- isAdvanced: PropTypes.bool.isRequired
-};
-
-FormGroup.defaultProps = {
- className: styles.group,
- size: sizes.SMALL,
- advancedSettings: false,
- isAdvanced: false
-};
-
-export default FormGroup;
diff --git a/frontend/src/Components/Form/FormGroup.tsx b/frontend/src/Components/Form/FormGroup.tsx
new file mode 100644
index 00000000000..1dd879897af
--- /dev/null
+++ b/frontend/src/Components/Form/FormGroup.tsx
@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import React, { Children, ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Size } from 'Helpers/Props/sizes';
+import styles from './FormGroup.css';
+
+interface FormGroupProps extends ComponentPropsWithoutRef<'div'> {
+ className?: string;
+ children: ReactNode;
+ size?: Extract;
+ advancedSettings?: boolean;
+ isAdvanced?: boolean;
+}
+
+function FormGroup(props: FormGroupProps) {
+ const {
+ className = styles.group,
+ children,
+ size = 'small',
+ advancedSettings = false,
+ isAdvanced = false,
+ ...otherProps
+ } = props;
+
+ if (!advancedSettings && isAdvanced) {
+ return null;
+ }
+
+ const childProps = isAdvanced ? { isAdvanced } : {};
+
+ return (
+
+ {Children.map(children, (child) => {
+ if (!React.isValidElement(child)) {
+ return child;
+ }
+
+ return React.cloneElement(child, childProps);
+ })}
+
+ );
+}
+
+export default FormGroup;
diff --git a/frontend/src/Components/Form/FormInputButton.css.d.ts b/frontend/src/Components/Form/FormInputButton.css.d.ts
new file mode 100644
index 00000000000..d469cdfe3be
--- /dev/null
+++ b/frontend/src/Components/Form/FormInputButton.css.d.ts
@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'button': string;
+ 'middleButton': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/FormInputButton.js b/frontend/src/Components/Form/FormInputButton.js
deleted file mode 100644
index a7145363af0..00000000000
--- a/frontend/src/Components/Form/FormInputButton.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import Button from 'Components/Link/Button';
-import SpinnerButton from 'Components/Link/SpinnerButton';
-import { kinds } from 'Helpers/Props';
-import styles from './FormInputButton.css';
-
-function FormInputButton(props) {
- const {
- className,
- canSpin,
- isLastButton,
- ...otherProps
- } = props;
-
- if (canSpin) {
- return (
-
-
-
-
-
- {
- unit &&
-
- {unit}
-
- }
-
-
- {
- buttonsArray.map((button, index) => {
- return React.cloneElement(
- button,
- {
- isLastButton: index === lastButtonIndex
- }
- );
- })
- }
-
- {/*
- {
- pending &&
-
*/}
-
-
- {
- !checkInput && helpText &&
-
- }
-
- {
- !checkInput && helpTexts &&
-
- {
- helpTexts.map((text, index) => {
- return (
-
- }
-
- {
- (!checkInput || helpText) && helpTextWarning &&
-
- }
-
- {
- helpLink &&
-
- More Info
-
- }
-
- {
- errors.map((error, index) => {
- return (
-
- );
- })
- }
-
- {
- warnings.map((warning, index) => {
- return (
-
- );
- })
- }
-
{
+ className?: string;
+ containerClassName?: string;
+ inputClassName?: string;
+ name: string;
+ value?: unknown;
+ values?: unknown[];
+ isDisabled?: boolean;
+ type?: InputType;
+ kind?: Kind;
+ min?: number;
+ max?: number;
+ unit?: string;
+ buttons?: ReactNode | ReactNode[];
+ helpText?: string;
+ helpTexts?: string[];
+ helpTextWarning?: string;
+ helpLink?: string;
+ placeholder?: string;
+ autoFocus?: boolean;
+ includeNoChange?: boolean;
+ includeNoChangeDisabled?: boolean;
+ valueOptions?: object;
+ selectedValueOptions?: object;
+ indexerFlags?: number;
+ pending?: boolean;
+ canEdit?: boolean;
+ includeAny?: boolean;
+ delimiters?: string[];
+ readOnly?: boolean;
+ errors?: (ValidationMessage | ValidationError)[];
+ warnings?: (ValidationMessage | ValidationWarning)[];
+ onChange: (args: T) => void;
+ onFocus?: (event: FocusEvent) => void;
+}
+
+function FormInputGroup(props: FormInputGroupProps) {
+ const {
+ className = styles.inputGroup,
+ containerClassName = styles.inputGroupContainer,
+ inputClassName,
+ type = 'text',
+ unit,
+ buttons = [],
+ helpText,
+ helpTexts = [],
+ helpTextWarning,
+ helpLink,
+ pending,
+ errors = [],
+ warnings = [],
+ ...otherProps
+ } = props;
+
+ const InputComponent = getComponent(type);
+ const checkInput = type === inputTypes.CHECK;
+ const hasError = !!errors.length;
+ const hasWarning = !hasError && !!warnings.length;
+ const buttonsArray = React.Children.toArray(buttons);
+ const lastButtonIndex = buttonsArray.length - 1;
+ const hasButton = !!buttonsArray.length;
+
+ return (
+
+
+
+ {/* @ts-expect-error - need to pass through all the expected options */}
+
+
+ {unit && (
+
+ {unit}
+
+ )}
+
+
+ {buttonsArray.map((button, index) => {
+ if (!React.isValidElement
(button)) {
+ return button;
+ }
+
+ return React.cloneElement(button, {
+ isLastButton: index === lastButtonIndex,
+ });
+ })}
+
+ {/*
+ {
+ pending &&
+
*/}
+
+
+ {!checkInput && helpText ?
: null}
+
+ {!checkInput && helpTexts ? (
+
+ {helpTexts.map((text, index) => {
+ return (
+
+ ) : null}
+
+ {(!checkInput || helpText) && helpTextWarning ? (
+
+ ) : null}
+
+ {helpLink ?
{translate('MoreInfo')} : null}
+
+ {errors.map((error, index) => {
+ return 'errorMessage' in error ? (
+
+ ) : (
+
+ );
+ })}
+
+ {warnings.map((warning, index) => {
+ return 'errorMessage' in warning ? (
+
+ ) : (
+
+ );
+ })}
+
- {text}
-
- {
- link ?
-
- );
-}
-
-FormInputHelpText.propTypes = {
- className: PropTypes.string.isRequired,
- text: PropTypes.string.isRequired,
- link: PropTypes.string,
- tooltip: PropTypes.string,
- isError: PropTypes.bool,
- isWarning: PropTypes.bool,
- isCheckInput: PropTypes.bool
-};
-
-FormInputHelpText.defaultProps = {
- className: styles.helpText,
- isError: false,
- isWarning: false,
- isCheckInput: false
-};
-
-export default FormInputHelpText;
diff --git a/frontend/src/Components/Form/FormInputHelpText.tsx b/frontend/src/Components/Form/FormInputHelpText.tsx
new file mode 100644
index 00000000000..1531d9585b3
--- /dev/null
+++ b/frontend/src/Components/Form/FormInputHelpText.tsx
@@ -0,0 +1,55 @@
+import classNames from 'classnames';
+import React from 'react';
+import Icon from 'Components/Icon';
+import Link from 'Components/Link/Link';
+import { icons } from 'Helpers/Props';
+import styles from './FormInputHelpText.css';
+
+interface FormInputHelpTextProps {
+ className?: string;
+ text: string;
+ link?: string;
+ tooltip?: string;
+ isError?: boolean;
+ isWarning?: boolean;
+ isCheckInput?: boolean;
+}
+
+function FormInputHelpText({
+ className = styles.helpText,
+ text,
+ link,
+ tooltip,
+ isError = false,
+ isWarning = false,
+ isCheckInput = false,
+}: FormInputHelpTextProps) {
+ return (
+
+ {text}
+
+ {link ? (
+
+ );
+}
+
+export default FormInputHelpText;
diff --git a/frontend/src/Components/Form/FormLabel.css b/frontend/src/Components/Form/FormLabel.css
index 074b6091db0..54a4678e856 100644
--- a/frontend/src/Components/Form/FormLabel.css
+++ b/frontend/src/Components/Form/FormLabel.css
@@ -2,8 +2,10 @@
display: flex;
justify-content: flex-end;
margin-right: $formLabelRightMarginWidth;
+ padding-top: 8px;
+ min-height: 35px;
+ text-align: end;
font-weight: bold;
- line-height: 35px;
}
.hasError {
diff --git a/frontend/src/Components/Form/FormLabel.css.d.ts b/frontend/src/Components/Form/FormLabel.css.d.ts
new file mode 100644
index 00000000000..c23dd30a422
--- /dev/null
+++ b/frontend/src/Components/Form/FormLabel.css.d.ts
@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'hasError': string;
+ 'isAdvanced': string;
+ 'label': string;
+ 'large': string;
+ 'small': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/FormLabel.js b/frontend/src/Components/Form/FormLabel.js
deleted file mode 100644
index d419039b374..00000000000
--- a/frontend/src/Components/Form/FormLabel.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { sizes } from 'Helpers/Props';
-import styles from './FormLabel.css';
-
-function FormLabel({
- children,
- className,
- errorClassName,
- size,
- name,
- hasError,
- isAdvanced,
- ...otherProps
-}) {
- return (
-
- {children}
-
- );
-}
-
-FormLabel.propTypes = {
- children: PropTypes.node.isRequired,
- className: PropTypes.string,
- errorClassName: PropTypes.string,
- size: PropTypes.oneOf(sizes.all),
- name: PropTypes.string,
- hasError: PropTypes.bool,
- isAdvanced: PropTypes.bool.isRequired
-};
-
-FormLabel.defaultProps = {
- className: styles.label,
- errorClassName: styles.hasError,
- isAdvanced: false,
- size: sizes.LARGE
-};
-
-export default FormLabel;
diff --git a/frontend/src/Components/Form/FormLabel.tsx b/frontend/src/Components/Form/FormLabel.tsx
new file mode 100644
index 00000000000..4f29e6ac6ed
--- /dev/null
+++ b/frontend/src/Components/Form/FormLabel.tsx
@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import React, { ReactNode } from 'react';
+import { Size } from 'Helpers/Props/sizes';
+import styles from './FormLabel.css';
+
+interface FormLabelProps {
+ children: ReactNode;
+ className?: string;
+ errorClassName?: string;
+ size?: Extract;
+ name?: string;
+ hasError?: boolean;
+ isAdvanced?: boolean;
+}
+
+function FormLabel(props: FormLabelProps) {
+ const {
+ children,
+ className = styles.label,
+ errorClassName = styles.hasError,
+ size = 'large',
+ name,
+ hasError,
+ isAdvanced = false,
+ } = props;
+
+ return (
+
+ {children}
+
+ );
+}
+
+export default FormLabel;
diff --git a/frontend/src/Components/Form/HintedSelectInputOption.js b/frontend/src/Components/Form/HintedSelectInputOption.js
deleted file mode 100644
index 4957ece2a3f..00000000000
--- a/frontend/src/Components/Form/HintedSelectInputOption.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import EnhancedSelectInputOption from './EnhancedSelectInputOption';
-import styles from './HintedSelectInputOption.css';
-
-function HintedSelectInputOption(props) {
- const {
- id,
- value,
- hint,
- depth,
- isSelected,
- isDisabled,
- isMultiSelect,
- isMobile,
- ...otherProps
- } = props;
-
- return (
-
-
-
{value}
-
- {
- hint != null &&
-
- {hint}
-
- }
-
- );
-}
-
-HintedSelectInputOption.propTypes = {
- id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
- value: PropTypes.string.isRequired,
- hint: PropTypes.node,
- depth: PropTypes.number,
- isSelected: PropTypes.bool.isRequired,
- isDisabled: PropTypes.bool.isRequired,
- isMultiSelect: PropTypes.bool.isRequired,
- isMobile: PropTypes.bool.isRequired
-};
-
-HintedSelectInputOption.defaultProps = {
- isDisabled: false,
- isHidden: false,
- isMultiSelect: false
-};
-
-export default HintedSelectInputOption;
diff --git a/frontend/src/Components/Form/HintedSelectInputSelectedValue.js b/frontend/src/Components/Form/HintedSelectInputSelectedValue.js
deleted file mode 100644
index a3fecf32470..00000000000
--- a/frontend/src/Components/Form/HintedSelectInputSelectedValue.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
-import Label from 'Components/Label';
-import EnhancedSelectInputSelectedValue from './EnhancedSelectInputSelectedValue';
-import styles from './HintedSelectInputSelectedValue.css';
-
-function HintedSelectInputSelectedValue(props) {
- const {
- value,
- values,
- hint,
- isMultiSelect,
- includeHint,
- ...otherProps
- } = props;
-
- const valuesMap = isMultiSelect && _.keyBy(values, 'key');
-
- return (
-
-
- {
- isMultiSelect ?
- value.map((key, index) => {
- const v = valuesMap[key];
- return (
-
- {v ? v.value : key}
-
- );
- }) :
- null
- }
-
- {
- isMultiSelect ? null : value
- }
-
-
- {
- hint != null && includeHint ?
-
- {hint}
-
:
- null
- }
-
- );
-}
-
-HintedSelectInputSelectedValue.propTypes = {
- value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))]).isRequired,
- values: PropTypes.arrayOf(PropTypes.object).isRequired,
- hint: PropTypes.string,
- isMultiSelect: PropTypes.bool.isRequired,
- includeHint: PropTypes.bool.isRequired
-};
-
-HintedSelectInputSelectedValue.defaultProps = {
- isMultiSelect: false,
- includeHint: true
-};
-
-export default HintedSelectInputSelectedValue;
diff --git a/frontend/src/Components/Form/IndexerSelectInputConnector.js b/frontend/src/Components/Form/IndexerSelectInputConnector.js
deleted file mode 100644
index cd58270eb3e..00000000000
--- a/frontend/src/Components/Form/IndexerSelectInputConnector.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { fetchIndexers } from 'Store/Actions/settingsActions';
-import sortByName from 'Utilities/Array/sortByName';
-import EnhancedSelectInput from './EnhancedSelectInput';
-
-function createMapStateToProps() {
- return createSelector(
- (state) => state.settings.indexers,
- (state, { includeAny }) => includeAny,
- (indexers, includeAny) => {
- const {
- isFetching,
- isPopulated,
- error,
- items
- } = indexers;
-
- const values = _.map(items.sort(sortByName), (indexer) => {
- return {
- key: indexer.id,
- value: indexer.name
- };
- });
-
- if (includeAny) {
- values.unshift({
- key: 0,
- value: '(Any)'
- });
- }
-
- return {
- isFetching,
- isPopulated,
- error,
- values
- };
- }
- );
-}
-
-const mapDispatchToProps = {
- dispatchFetchIndexers: fetchIndexers
-};
-
-class IndexerSelectInputConnector extends Component {
-
- //
- // Lifecycle
-
- componentDidMount() {
- if (!this.props.isPopulated) {
- this.props.dispatchFetchIndexers();
- }
- }
-
- //
- // Listeners
-
- onChange = ({ name, value }) => {
- this.props.onChange({ name, value: parseInt(value) });
- };
-
- //
- // Render
-
- render() {
- return (
-
- {
- [...value, { key: '', value: '' }].map((v, index) => {
- return (
-
- );
- }
-}
-
-KeyValueListInput.propTypes = {
- className: PropTypes.string.isRequired,
- name: PropTypes.string.isRequired,
- value: PropTypes.arrayOf(PropTypes.object).isRequired,
- hasError: PropTypes.bool,
- hasWarning: PropTypes.bool,
- keyPlaceholder: PropTypes.string,
- valuePlaceholder: PropTypes.string,
- onChange: PropTypes.func.isRequired
-};
-
-KeyValueListInput.defaultProps = {
- className: styles.inputContainer,
- value: []
-};
-
-export default KeyValueListInput;
diff --git a/frontend/src/Components/Form/KeyValueListInput.tsx b/frontend/src/Components/Form/KeyValueListInput.tsx
new file mode 100644
index 00000000000..f5c6ac19beb
--- /dev/null
+++ b/frontend/src/Components/Form/KeyValueListInput.tsx
@@ -0,0 +1,104 @@
+import classNames from 'classnames';
+import React, { useCallback, useState } from 'react';
+import { InputOnChange } from 'typings/inputs';
+import KeyValueListInputItem from './KeyValueListInputItem';
+import styles from './KeyValueListInput.css';
+
+interface KeyValue {
+ key: string;
+ value: string;
+}
+
+export interface KeyValueListInputProps {
+ className?: string;
+ name: string;
+ value: KeyValue[];
+ hasError?: boolean;
+ hasWarning?: boolean;
+ keyPlaceholder?: string;
+ valuePlaceholder?: string;
+ onChange: InputOnChange;
+}
+
+function KeyValueListInput({
+ className = styles.inputContainer,
+ name,
+ value = [],
+ hasError = false,
+ hasWarning = false,
+ keyPlaceholder,
+ valuePlaceholder,
+ onChange,
+}: KeyValueListInputProps): JSX.Element {
+ const [isFocused, setIsFocused] = useState(false);
+
+ const handleItemChange = useCallback(
+ (index: number | null, itemValue: KeyValue) => {
+ const newValue = [...value];
+
+ if (index === null) {
+ newValue.push(itemValue);
+ } else {
+ newValue.splice(index, 1, itemValue);
+ }
+
+ onChange({ name, value: newValue });
+ },
+ [value, name, onChange]
+ );
+
+ const handleRemoveItem = useCallback(
+ (index: number) => {
+ const newValue = [...value];
+ newValue.splice(index, 1);
+ onChange({ name, value: newValue });
+ },
+ [value, name, onChange]
+ );
+
+ const onFocus = useCallback(() => setIsFocused(true), []);
+
+ const onBlur = useCallback(() => {
+ setIsFocused(false);
+
+ const newValue = value.reduce((acc: KeyValue[], v) => {
+ if (v.key || v.value) {
+ acc.push(v);
+ }
+ return acc;
+ }, []);
+
+ if (newValue.length !== value.length) {
+ onChange({ name, value: newValue });
+ }
+ }, [value, name, onChange]);
+
+ return (
+
+ {[...value, { key: '', value: '' }].map((v, index) => (
+
+ );
+}
+
+export default KeyValueListInput;
diff --git a/frontend/src/Components/Form/KeyValueListInputItem.css b/frontend/src/Components/Form/KeyValueListInputItem.css
index 75d37b74f02..ed82db4592e 100644
--- a/frontend/src/Components/Form/KeyValueListInputItem.css
+++ b/frontend/src/Components/Form/KeyValueListInputItem.css
@@ -5,11 +5,12 @@
&:last-child {
margin-bottom: 0;
+ border-bottom: 0;
}
}
.keyInputWrapper {
- flex: 6 0 0;
+ flex: 1 0 0;
}
.valueInputWrapper {
@@ -25,4 +26,10 @@
.valueInput {
width: 100%;
border: none;
+ background-color: transparent;
+ color: var(--textColor);
+
+ &::placeholder {
+ color: var(--helpTextColor);
+ }
}
diff --git a/frontend/src/Components/Form/KeyValueListInputItem.css.d.ts b/frontend/src/Components/Form/KeyValueListInputItem.css.d.ts
new file mode 100644
index 00000000000..aa0c1be134c
--- /dev/null
+++ b/frontend/src/Components/Form/KeyValueListInputItem.css.d.ts
@@ -0,0 +1,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'buttonWrapper': string;
+ 'itemContainer': string;
+ 'keyInput': string;
+ 'keyInputWrapper': string;
+ 'valueInput': string;
+ 'valueInputWrapper': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/KeyValueListInputItem.js b/frontend/src/Components/Form/KeyValueListInputItem.js
deleted file mode 100644
index 9f5abce2fbb..00000000000
--- a/frontend/src/Components/Form/KeyValueListInputItem.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import IconButton from 'Components/Link/IconButton';
-import { icons } from 'Helpers/Props';
-import TextInput from './TextInput';
-import styles from './KeyValueListInputItem.css';
-
-class KeyValueListInputItem extends Component {
-
- //
- // Listeners
-
- onKeyChange = ({ value: keyValue }) => {
- const {
- index,
- value,
- onChange
- } = this.props;
-
- onChange(index, { key: keyValue, value });
- };
-
- onValueChange = ({ value }) => {
- // TODO: Validate here or validate at a lower level component
-
- const {
- index,
- keyValue,
- onChange
- } = this.props;
-
- onChange(index, { key: keyValue, value });
- };
-
- onRemovePress = () => {
- const {
- index,
- onRemove
- } = this.props;
-
- onRemove(index);
- };
-
- onFocus = () => {
- this.props.onFocus();
- };
-
- onBlur = () => {
- this.props.onBlur();
- };
-
- //
- // Render
-
- render() {
- const {
- keyValue,
- value,
- keyPlaceholder,
- valuePlaceholder,
- isNew
- } = this.props;
-
- return (
-
-
-
-
-
-
-
-
- {
- isNew ?
- null :
-
-
+
+
+
+
+
+
+
+ {isNew ? null : (
+
+
, 'value'> {
+ value?: number | null;
+ min?: number;
+ max?: number;
+ isFloat?: boolean;
+}
+
+function NumberInput({
+ name,
+ value: inputValue = null,
+ isFloat = false,
+ min,
+ max,
+ onChange,
+ ...otherProps
+}: NumberInputProps) {
+ const [value, setValue] = useState(
+ inputValue == null ? '' : inputValue.toString()
+ );
+ const isFocused = useRef(false);
+ const previousValue = usePrevious(inputValue);
+
+ const handleChange = useCallback(
+ ({ name, value: newValue }: InputChanged) => {
+ setValue(newValue);
+
+ onChange({
+ name,
+ value: parseValue(newValue, isFloat, min, max),
+ });
+ },
+ [isFloat, min, max, onChange, setValue]
+ );
+
+ const handleFocus = useCallback(() => {
+ isFocused.current = true;
+ }, []);
+
+ const handleBlur = useCallback(() => {
+ const parsedValue = parseValue(value, isFloat, min, max);
+ const stringValue = parsedValue == null ? '' : parsedValue.toString();
+
+ if (stringValue !== value) {
+ setValue(stringValue);
+ }
+
+ onChange({
+ name,
+ value: parsedValue,
+ });
+
+ isFocused.current = false;
+ }, [name, value, isFloat, min, max, onChange]);
+
+ useEffect(() => {
+ if (
+ // @ts-expect-error inputValue may be null
+ !isNaN(inputValue) &&
+ inputValue !== previousValue &&
+ !isFocused.current
+ ) {
+ setValue(inputValue == null ? '' : inputValue.toString());
+ }
+ }, [inputValue, previousValue, setValue]);
+
+ return (
+
-
- {label}
-
-
- );
-}
-
-OAuthInput.propTypes = {
- label: PropTypes.string.isRequired,
- authorizing: PropTypes.bool.isRequired,
- error: PropTypes.object,
- onPress: PropTypes.func.isRequired
-};
-
-OAuthInput.defaultProps = {
- label: 'Start OAuth'
-};
-
-export default OAuthInput;
diff --git a/frontend/src/Components/Form/OAuthInput.tsx b/frontend/src/Components/Form/OAuthInput.tsx
new file mode 100644
index 00000000000..04d2a0cafaa
--- /dev/null
+++ b/frontend/src/Components/Form/OAuthInput.tsx
@@ -0,0 +1,72 @@
+import React, { useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
+import { kinds } from 'Helpers/Props';
+import { resetOAuth, startOAuth } from 'Store/Actions/oAuthActions';
+import { InputOnChange } from 'typings/inputs';
+
+interface OAuthInputProps {
+ label?: string;
+ name: string;
+ provider: string;
+ providerData: object;
+ section: string;
+ onChange: InputOnChange;
+}
+
+function OAuthInput({
+ label = 'Start OAuth',
+ name,
+ provider,
+ providerData,
+ section,
+ onChange,
+}: OAuthInputProps) {
+ const dispatch = useDispatch();
+ const { authorizing, error, result } = useSelector(
+ (state: AppState) => state.oAuth
+ );
+
+ const handlePress = useCallback(() => {
+ dispatch(
+ startOAuth({
+ name,
+ provider,
+ providerData,
+ section,
+ })
+ );
+ }, [name, provider, providerData, section, dispatch]);
+
+ useEffect(() => {
+ if (!result) {
+ return;
+ }
+
+ Object.keys(result).forEach((key) => {
+ onChange({ name: key, value: result[key] });
+ });
+ }, [result, onChange]);
+
+ useEffect(() => {
+ return () => {
+ dispatch(resetOAuth());
+ };
+ }, [dispatch]);
+
+ return (
+
+
+ {label}
+
+
+ );
+}
+
+export default OAuthInput;
diff --git a/frontend/src/Components/Form/OAuthInputConnector.js b/frontend/src/Components/Form/OAuthInputConnector.js
deleted file mode 100644
index 1567c7e6c0b..00000000000
--- a/frontend/src/Components/Form/OAuthInputConnector.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { resetOAuth, startOAuth } from 'Store/Actions/oAuthActions';
-import OAuthInput from './OAuthInput';
-
-function createMapStateToProps() {
- return createSelector(
- (state) => state.oAuth,
- (oAuth) => {
- return oAuth;
- }
- );
-}
-
-const mapDispatchToProps = {
- startOAuth,
- resetOAuth
-};
-
-class OAuthInputConnector extends Component {
-
- //
- // Lifecycle
-
- componentDidUpdate(prevProps) {
- const {
- result,
- onChange
- } = this.props;
-
- if (!result || result === prevProps.result) {
- return;
- }
-
- Object.keys(result).forEach((key) => {
- onChange({ name: key, value: result[key] });
- });
- }
-
- componentWillUnmount = () => {
- this.props.resetOAuth();
- };
-
- //
- // Listeners
-
- onPress = () => {
- const {
- name,
- provider,
- providerData,
- section
- } = this.props;
-
- this.props.startOAuth({
- name,
- provider,
- providerData,
- section
- });
- };
-
- //
- // Render
-
- render() {
- return (
- ) {
+ return {path}
- );
- }
-
- return (
-
-
- {path.substr(0, lastSeparatorIndex)}
-
- {path.substr(lastSeparatorIndex)}
-
- );
- }
-
- //
- // Listeners
-
- onInputChange = ({ value }) => {
- this.setState({ value });
- };
-
- onInputKeyDown = (event) => {
- if (event.key === 'Tab') {
- event.preventDefault();
- const path = this.props.paths[0];
-
- if (path) {
- this.props.onChange({
- name: this.props.name,
- value: path.path
- });
-
- if (path.type !== 'file') {
- this.props.onFetchPaths(path.path);
- }
- }
- }
- };
-
- onInputBlur = () => {
- this.props.onChange({
- name: this.props.name,
- value: this.state.value
- });
-
- this.props.onClearPaths();
- };
-
- onSuggestionsFetchRequested = ({ value }) => {
- this.props.onFetchPaths(value);
- };
-
- onSuggestionsClearRequested = () => {
- // Required because props aren't always rendered, but no-op
- // because we don't want to reset the paths after a path is selected.
- };
-
- onSuggestionSelected = (event, { suggestionValue }) => {
- this.props.onFetchPaths(suggestionValue);
- };
-
- onFileBrowserOpenPress = () => {
- this.setState({ isFileBrowserModalOpen: true });
- };
-
- onFileBrowserModalClose = () => {
- this.setState({ isFileBrowserModalOpen: false });
- };
-
- //
- // Render
-
- render() {
- const {
- className,
- name,
- paths,
- includeFiles,
- hasFileBrowser,
- onChange,
- ...otherProps
- } = this.props;
-
- const {
- value,
- isFileBrowserModalOpen
- } = this.state;
-
- return (
-
-
-
- {
- hasFileBrowser &&
-
-
-
-
-
- }
-
) => void;
+}
+
+interface PathInputInternalProps extends PathInputProps {
+ paths: Path[];
+ onFetchPaths: (path: string) => void;
+ onClearPaths: () => void;
+}
+
+function handleSuggestionsClearRequested() {
+ // Required because props aren't always rendered, but no-op
+ // because we don't want to reset the paths after a path is selected.
+}
+
+function createPathsSelector() {
+ return createSelector(
+ (state: AppState) => state.paths,
+ (paths) => {
+ const { currentPath, directories, files } = paths;
+
+ const filteredPaths = [...directories, ...files].filter(({ path }) => {
+ return path.toLowerCase().startsWith(currentPath.toLowerCase());
+ });
+
+ return filteredPaths;
+ }
+ );
+}
+
+function PathInput(props: PathInputProps) {
+ const { includeFiles } = props;
+
+ const dispatch = useDispatch();
+
+ const paths = useSelector(createPathsSelector());
+
+ const handleFetchPaths = useCallback(
+ (path: string) => {
+ dispatch(fetchPaths({ path, includeFiles }));
+ },
+ [includeFiles, dispatch]
+ );
+
+ const handleClearPaths = useCallback(() => {
+ dispatch(clearPaths);
+ }, [dispatch]);
+
+ return (
+ ) => {
+ if (event.key === 'Tab') {
+ event.preventDefault();
+ const path = paths[0];
+
+ if (path) {
+ onChange({
+ name,
+ value: path.path,
+ });
+
+ if (path.type !== 'file') {
+ handleFetchPaths(path.path);
+ }
+ }
+ }
+ },
+ [name, paths, handleFetchPaths, onChange]
+ );
+ const handleInputBlur = useCallback(() => {
+ onChange({
+ name,
+ value,
+ });
+
+ onClearPaths();
+ }, [name, value, onClearPaths, onChange]);
+
+ const handleSuggestionSelected = useCallback(
+ (_event: SyntheticEvent, { suggestion }: { suggestion: Path }) => {
+ handleFetchPaths(suggestion.path);
+ },
+ [handleFetchPaths]
+ );
+
+ const handleSuggestionsFetchRequested = useCallback(
+ ({ value: newValue }: SuggestionsFetchRequestedParams) => {
+ handleFetchPaths(newValue);
+ },
+ [handleFetchPaths]
+ );
+
+ const handleFileBrowserOpenPress = useCallback(() => {
+ setIsFileBrowserModalOpen(true);
+ }, [setIsFileBrowserModalOpen]);
+
+ const handleFileBrowserModalClose = useCallback(() => {
+ setIsFileBrowserModalOpen(false);
+ }, [setIsFileBrowserModalOpen]);
+
+ const handleChange = useCallback(
+ (change: InputChanged) => {
+ onChange({ name, value: change.value.path });
+ },
+ [name, onChange]
+ );
+
+ const getSuggestionValue = useCallback(({ path }: Path) => path, []);
+
+ const renderSuggestion = useCallback(
+ ({ path }: Path, { query }: { query: string }) => {
+ const lastSeparatorIndex =
+ query.lastIndexOf('\\') || query.lastIndexOf('/');
+
+ if (lastSeparatorIndex === -1) {
+ return {path} ;
+ }
+
+ return (
+
+
+ {path.substring(0, lastSeparatorIndex)}
+
+ {path.substring(lastSeparatorIndex)}
+
+ );
+ },
+ []
+ );
+
+ useEffect(() => {
+ if (inputValue !== previousInputValue) {
+ setValue(inputValue);
+ }
+ }, [inputValue, previousInputValue, setValue]);
+
+ return (
+
+
+
+ {hasFileBrowser ? (
+ <>
+
+
+
+
+
+ ) : null}
+
-
- );
- }
-}
-
-RootFolderSelectInput.propTypes = {
- name: PropTypes.string.isRequired,
- values: PropTypes.arrayOf(PropTypes.object).isRequired,
- isSaving: PropTypes.bool.isRequired,
- saveError: PropTypes.object,
- includeNoChange: PropTypes.bool.isRequired,
- onChange: PropTypes.func.isRequired,
- onNewRootFolderSelect: PropTypes.func.isRequired
-};
-
-RootFolderSelectInput.defaultProps = {
- includeNoChange: false
-};
-
-export default RootFolderSelectInput;
diff --git a/frontend/src/Components/Form/RootFolderSelectInputConnector.js b/frontend/src/Components/Form/RootFolderSelectInputConnector.js
deleted file mode 100644
index f61fed78ad0..00000000000
--- a/frontend/src/Components/Form/RootFolderSelectInputConnector.js
+++ /dev/null
@@ -1,170 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { addRootFolder } from 'Store/Actions/rootFolderActions';
-import RootFolderSelectInput from './RootFolderSelectInput';
-
-const ADD_NEW_KEY = 'addNew';
-
-function createMapStateToProps() {
- return createSelector(
- (state) => state.rootFolders,
- (state, { value }) => value,
- (state, { includeMissingValue }) => includeMissingValue,
- (state, { includeNoChange }) => includeNoChange,
- (rootFolders, value, includeMissingValue, includeNoChange) => {
- const values = rootFolders.items.map((rootFolder) => {
- return {
- key: rootFolder.path,
- value: rootFolder.path,
- freeSpace: rootFolder.freeSpace,
- isMissing: false
- };
- });
-
- if (includeNoChange) {
- values.unshift({
- key: 'noChange',
- value: 'No Change',
- isDisabled: true,
- isMissing: false
- });
- }
-
- if (!values.length) {
- values.push({
- key: '',
- value: '',
- isDisabled: true,
- isHidden: true
- });
- }
-
- if (includeMissingValue && !values.find((v) => v.key === value)) {
- values.push({
- key: value,
- value,
- isMissing: true,
- isDisabled: true
- });
- }
-
- values.push({
- key: ADD_NEW_KEY,
- value: 'Add a new path'
- });
-
- return {
- values,
- isSaving: rootFolders.isSaving,
- saveError: rootFolders.saveError
- };
- }
- );
-}
-
-function createMapDispatchToProps(dispatch, props) {
- return {
- dispatchAddRootFolder(path) {
- dispatch(addRootFolder({ path }));
- }
- };
-}
-
-class RootFolderSelectInputConnector extends Component {
-
- //
- // Lifecycle
-
- componentWillMount() {
- const {
- value,
- values,
- onChange
- } = this.props;
-
- if (value == null && values[0].key === '') {
- onChange({ name, value: '' });
- }
- }
-
- componentDidMount() {
- const {
- name,
- value,
- values,
- onChange
- } = this.props;
-
- if (!value || !values.some((v) => v.key === value) || value === ADD_NEW_KEY) {
- const defaultValue = values[0];
-
- if (defaultValue.key === ADD_NEW_KEY) {
- onChange({ name, value: '' });
- } else {
- onChange({ name, value: defaultValue.key });
- }
- }
- }
-
- componentDidUpdate(prevProps) {
- const {
- name,
- value,
- values,
- onChange
- } = this.props;
-
- if (prevProps.values === values) {
- return;
- }
-
- if (!value && values.length && values.some((v) => !!v.key && v.key !== ADD_NEW_KEY)) {
- const defaultValue = values[0];
-
- if (defaultValue.key !== ADD_NEW_KEY) {
- onChange({ name, value: defaultValue.key });
- }
- }
- }
-
- //
- // Listeners
-
- onNewRootFolderSelect = (path) => {
- this.props.dispatchAddRootFolder(path);
- };
-
- //
- // Render
-
- render() {
- const {
- dispatchAddRootFolder,
- ...otherProps
- } = this.props;
-
- return (
-
-
-
- {value}
-
- {
- seriesFolder && id !== 'addNew' ?
-
- {slashCharacter}
- {seriesFolder}
-
:
- null
- }
-
-
- {
- freeSpace == null ?
- null :
-
- {formatBytes(freeSpace)} Free
-
- }
-
- {
- isMissing ?
-
- Missing
-
:
- null
- }
-
- );
-}
-
-RootFolderSelectInputOption.propTypes = {
- id: PropTypes.string.isRequired,
- value: PropTypes.string.isRequired,
- freeSpace: PropTypes.number,
- isMissing: PropTypes.bool,
- seriesFolder: PropTypes.string,
- isMobile: PropTypes.bool.isRequired,
- isWindows: PropTypes.bool
-};
-
-export default RootFolderSelectInputOption;
diff --git a/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.js b/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.js
deleted file mode 100644
index 69b1453f3dd..00000000000
--- a/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import formatBytes from 'Utilities/Number/formatBytes';
-import EnhancedSelectInputSelectedValue from './EnhancedSelectInputSelectedValue';
-import styles from './RootFolderSelectInputSelectedValue.css';
-
-function RootFolderSelectInputSelectedValue(props) {
- const {
- value,
- freeSpace,
- seriesFolder,
- includeFreeSpace,
- isWindows,
- ...otherProps
- } = props;
-
- const slashCharacter = isWindows ? '\\' : '/';
-
- return (
-
-
-
- {value}
-
-
- {
- seriesFolder ?
-
- {slashCharacter}
- {seriesFolder}
-
:
- null
- }
-
- {formatBytes(freeSpace)} Free
-
- }
-
- );
-}
-
-RootFolderSelectInputSelectedValue.propTypes = {
- value: PropTypes.string,
- freeSpace: PropTypes.number,
- seriesFolder: PropTypes.string,
- isWindows: PropTypes.bool,
- includeFreeSpace: PropTypes.bool.isRequired
-};
-
-RootFolderSelectInputSelectedValue.defaultProps = {
- includeFreeSpace: true
-};
-
-export default RootFolderSelectInputSelectedValue;
diff --git a/frontend/src/Components/Form/Select/DownloadClientSelectInput.tsx b/frontend/src/Components/Form/Select/DownloadClientSelectInput.tsx
new file mode 100644
index 00000000000..4ed3e0952fe
--- /dev/null
+++ b/frontend/src/Components/Form/Select/DownloadClientSelectInput.tsx
@@ -0,0 +1,88 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import { fetchDownloadClients } from 'Store/Actions/settingsActions';
+import { Protocol } from 'typings/DownloadClient';
+import { EnhancedSelectInputChanged } from 'typings/inputs';
+import sortByProp from 'Utilities/Array/sortByProp';
+import translate from 'Utilities/String/translate';
+import EnhancedSelectInput, {
+ EnhancedSelectInputProps,
+ EnhancedSelectInputValue,
+} from './EnhancedSelectInput';
+
+function createDownloadClientsSelector(
+ includeAny: boolean,
+ protocol: Protocol
+) {
+ return createSelector(
+ (state: AppState) => state.settings.downloadClients,
+ (downloadClients) => {
+ const { isFetching, isPopulated, error, items } = downloadClients;
+
+ const filteredItems = items.filter((item) => item.protocol === protocol);
+
+ const values = filteredItems
+ .sort(sortByProp('name'))
+ .map((downloadClient) => {
+ return {
+ key: downloadClient.id,
+ value: downloadClient.name,
+ hint: `(${downloadClient.id})`,
+ };
+ });
+
+ if (includeAny) {
+ values.unshift({
+ key: 0,
+ value: `(${translate('Any')})`,
+ hint: '',
+ });
+ }
+
+ return {
+ isFetching,
+ isPopulated,
+ error,
+ values,
+ };
+ }
+ );
+}
+
+interface DownloadClientSelectInputProps
+ extends EnhancedSelectInputProps, number> {
+ name: string;
+ value: number;
+ includeAny?: boolean;
+ protocol?: Protocol;
+ onChange: (change: EnhancedSelectInputChanged) => void;
+}
+
+function DownloadClientSelectInput({
+ includeAny = false,
+ protocol = 'torrent',
+ ...otherProps
+}: DownloadClientSelectInputProps) {
+ const dispatch = useDispatch();
+ const { isFetching, isPopulated, values } = useSelector(
+ createDownloadClientsSelector(includeAny, protocol)
+ );
+
+ useEffect(() => {
+ if (!isPopulated) {
+ dispatch(fetchDownloadClients());
+ }
+ }, [isPopulated, dispatch]);
+
+ return (
+ , V>(
+ selectedIndex: number,
+ values: T[]
+) {
+ return values[selectedIndex];
+}
+
+function findIndex, V>(
+ startingIndex: number,
+ direction: 1 | -1,
+ values: T[]
+) {
+ let indexToTest = startingIndex + direction;
+
+ while (indexToTest !== startingIndex) {
+ if (indexToTest < 0) {
+ indexToTest = values.length - 1;
+ } else if (indexToTest >= values.length) {
+ indexToTest = 0;
+ }
+
+ if (getSelectedOption(indexToTest, values).isDisabled) {
+ indexToTest = indexToTest + direction;
+ } else {
+ return indexToTest;
+ }
+ }
+
+ return null;
+}
+
+function previousIndex, V>(
+ selectedIndex: number,
+ values: T[]
+) {
+ return findIndex(selectedIndex, -1, values);
+}
+
+function nextIndex, V>(
+ selectedIndex: number,
+ values: T[]
+) {
+ return findIndex(selectedIndex, 1, values);
+}
+
+function getSelectedIndex, V>(
+ value: V,
+ values: T[]
+) {
+ if (Array.isArray(value)) {
+ return values.findIndex((v) => {
+ return v.key === value[0];
+ });
+ }
+
+ return values.findIndex((v) => {
+ return v.key === value;
+ });
+}
+
+function isSelectedItem, V>(
+ index: number,
+ value: V,
+ values: T[]
+) {
+ if (Array.isArray(value)) {
+ return value.includes(values[index].key);
+ }
+
+ return values[index].key === value;
+}
+
+export interface EnhancedSelectInputValue {
+ key: ArrayElement;
+ value: string;
+ hint?: ReactNode;
+ isDisabled?: boolean;
+ isHidden?: boolean;
+ parentKey?: V;
+ additionalProperties?: object;
+}
+
+export interface EnhancedSelectInputProps<
+ T extends EnhancedSelectInputValue,
+ V
+> {
+ className?: string;
+ disabledClassName?: string;
+ name: string;
+ value: V;
+ values: T[];
+ isDisabled?: boolean;
+ isFetching?: boolean;
+ isEditable?: boolean;
+ hasError?: boolean;
+ hasWarning?: boolean;
+ valueOptions?: object;
+ selectedValueOptions?: object;
+ selectedValueComponent?: string | ElementType;
+ optionComponent?: ElementType;
+ onOpen?: () => void;
+ onChange: (change: EnhancedSelectInputChanged) => void;
+}
+
+function EnhancedSelectInput, V>(
+ props: EnhancedSelectInputProps
+) {
+ const {
+ className = styles.enhancedSelect,
+ disabledClassName = styles.isDisabled,
+ name,
+ value,
+ values,
+ isDisabled = false,
+ isEditable,
+ isFetching,
+ hasError,
+ hasWarning,
+ valueOptions,
+ selectedValueOptions,
+ selectedValueComponent:
+ SelectedValueComponent = HintedSelectInputSelectedValue,
+ optionComponent: OptionComponent = HintedSelectInputOption,
+ onChange,
+ onOpen,
+ } = props;
+
+ const updater = useRef<(() => void) | null>(null);
+ const buttonId = useMemo(() => getUniqueElementId(), []);
+ const optionsId = useMemo(() => getUniqueElementId(), []);
+ const [selectedIndex, setSelectedIndex] = useState(
+ getSelectedIndex(value, values)
+ );
+ const [width, setWidth] = useState(0);
+ const [isOpen, setIsOpen] = useState(false);
+ const isMobile = useMemo(() => isMobileUtil(), []);
+
+ const isMultiSelect = Array.isArray(value);
+ const selectedOption = getSelectedOption(selectedIndex, values);
+
+ const selectedValue = useMemo(() => {
+ if (values.length) {
+ return value;
+ }
+
+ if (isMultiSelect) {
+ return [];
+ } else if (typeof value === 'number') {
+ return 0;
+ }
+
+ return '';
+ }, [value, values, isMultiSelect]);
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const handleComputeMaxHeight = useCallback((data: any) => {
+ const windowHeight = window.innerHeight;
+
+ data.styles.maxHeight = windowHeight - MINIMUM_DISTANCE_FROM_EDGE;
+
+ return data;
+ }, []);
+
+ const handleWindowClick = useCallback(
+ (event: MouseEvent) => {
+ const button = document.getElementById(buttonId);
+ const options = document.getElementById(optionsId);
+ const eventTarget = event.target as HTMLElement;
+
+ if (!button || !eventTarget.isConnected || isMobile) {
+ return;
+ }
+
+ if (
+ !button.contains(eventTarget) &&
+ options &&
+ !options.contains(eventTarget) &&
+ isOpen
+ ) {
+ setIsOpen(false);
+ window.removeEventListener('click', handleWindowClick);
+ }
+ },
+ [isMobile, isOpen, buttonId, optionsId, setIsOpen]
+ );
+
+ const addListener = useCallback(() => {
+ window.addEventListener('click', handleWindowClick);
+ }, [handleWindowClick]);
+
+ const removeListener = useCallback(() => {
+ window.removeEventListener('click', handleWindowClick);
+ }, [handleWindowClick]);
+
+ const handlePress = useCallback(() => {
+ if (!isOpen && onOpen) {
+ onOpen();
+ }
+
+ setIsOpen(!isOpen);
+ }, [isOpen, setIsOpen, onOpen]);
+
+ const handleSelect = useCallback(
+ (newValue: ArrayElement) => {
+ const additionalProperties = values.find(
+ (v) => v.key === newValue
+ )?.additionalProperties;
+
+ if (Array.isArray(value)) {
+ const index = value.indexOf(newValue);
+
+ if (index === -1) {
+ const arrayValue = values
+ .map((v) => v.key)
+ .filter((v) => v === newValue || value.includes(v));
+
+ onChange({
+ name,
+ value: arrayValue as V,
+ additionalProperties,
+ });
+ } else {
+ const arrayValue = [...value];
+ arrayValue.splice(index, 1);
+
+ onChange({
+ name,
+ value: arrayValue as V,
+ additionalProperties,
+ });
+ }
+ } else {
+ setIsOpen(false);
+
+ onChange({
+ name,
+ value: newValue as V,
+ additionalProperties,
+ });
+ }
+ },
+ [name, value, values, onChange, setIsOpen]
+ );
+
+ const handleBlur = useCallback(() => {
+ if (!isEditable) {
+ // Calling setState without this check prevents the click event from being properly handled on Chrome (it is on firefox)
+ const origIndex = getSelectedIndex(value, values);
+
+ if (origIndex !== selectedIndex) {
+ setSelectedIndex(origIndex);
+ }
+ }
+ }, [value, values, isEditable, selectedIndex, setSelectedIndex]);
+
+ const handleFocus = useCallback(() => {
+ if (isOpen) {
+ removeListener();
+ setIsOpen(false);
+ }
+ }, [isOpen, setIsOpen, removeListener]);
+
+ const handleKeyDown = useCallback(
+ (event: KeyboardEvent) => {
+ const keyCode = event.keyCode;
+ let nextIsOpen: boolean | null = null;
+ let nextSelectedIndex: number | null = null;
+
+ if (!isOpen) {
+ if (isArrowKey(keyCode)) {
+ event.preventDefault();
+ nextIsOpen = true;
+ }
+
+ if (
+ selectedIndex == null ||
+ selectedIndex === -1 ||
+ getSelectedOption(selectedIndex, values).isDisabled
+ ) {
+ if (keyCode === keyCodes.UP_ARROW) {
+ nextSelectedIndex = previousIndex(0, values);
+ } else if (keyCode === keyCodes.DOWN_ARROW) {
+ nextSelectedIndex = nextIndex(values.length - 1, values);
+ }
+ }
+
+ if (nextIsOpen !== null) {
+ setIsOpen(nextIsOpen);
+ }
+
+ if (nextSelectedIndex !== null) {
+ setSelectedIndex(nextSelectedIndex);
+ }
+ return;
+ }
+
+ if (keyCode === keyCodes.UP_ARROW) {
+ event.preventDefault();
+ nextSelectedIndex = previousIndex(selectedIndex, values);
+ }
+
+ if (keyCode === keyCodes.DOWN_ARROW) {
+ event.preventDefault();
+ nextSelectedIndex = nextIndex(selectedIndex, values);
+ }
+
+ if (keyCode === keyCodes.ENTER) {
+ event.preventDefault();
+ nextIsOpen = false;
+ handleSelect(values[selectedIndex].key);
+ }
+
+ if (keyCode === keyCodes.TAB) {
+ nextIsOpen = false;
+ handleSelect(values[selectedIndex].key);
+ }
+
+ if (keyCode === keyCodes.ESCAPE) {
+ event.preventDefault();
+ event.stopPropagation();
+ nextIsOpen = false;
+ nextSelectedIndex = getSelectedIndex(value, values);
+ }
+
+ if (nextIsOpen !== null) {
+ setIsOpen(nextIsOpen);
+ }
+
+ if (nextSelectedIndex !== null) {
+ setSelectedIndex(nextSelectedIndex);
+ }
+ },
+ [
+ value,
+ isOpen,
+ selectedIndex,
+ values,
+ setIsOpen,
+ setSelectedIndex,
+ handleSelect,
+ ]
+ );
+
+ const handleMeasure = useCallback(
+ ({ width: newWidth }: { width: number }) => {
+ setWidth(newWidth);
+ },
+ [setWidth]
+ );
+
+ const handleOptionsModalClose = useCallback(() => {
+ setIsOpen(false);
+ }, [setIsOpen]);
+
+ const handleEditChange = useCallback(
+ (change: InputChanged) => {
+ onChange(change as EnhancedSelectInputChanged);
+ },
+ [onChange]
+ );
+
+ useEffect(() => {
+ if (updater.current) {
+ updater.current();
+ }
+ });
+
+ useEffect(() => {
+ if (isOpen) {
+ addListener();
+ } else {
+ removeListener();
+ }
+
+ return removeListener;
+ }, [isOpen, addListener, removeListener]);
+
+ return (
+
+
+
+ {({ ref }) => (
+
+ )}
+
+
+
+ {({ ref, style, scheduleUpdate }) => {
+ updater.current = scheduleUpdate;
+
+ return (
+
+ {isOpen && !isMobile ? (
+
+ {values.map((v, index) => {
+ const hasParent = v.parentKey !== undefined;
+ const depth = hasParent ? 1 : 0;
+ const parentSelected =
+ v.parentKey !== undefined &&
+ Array.isArray(value) &&
+ value.includes(v.parentKey);
+
+ const { key, ...other } = v;
+
+ return (
+
+ {v.value}
+
+ );
+ })}
+
+ ) : null}
+
+ );
+ }}
+
+
+
+
+ {isMobile ? (
+
+
+
+
+
+
+ {values.map((v, index) => {
+ const hasParent = v.parentKey !== undefined;
+ const depth = hasParent ? 1 : 0;
+ const parentSelected =
+ v.parentKey !== undefined &&
+ isMultiSelect &&
+ value.includes(v.parentKey);
+
+ const { key, ...other } = v;
+
+ return (
+
+ {v.value}
+
+ );
+ })}
+
+
+
+ ) : null}
+
}
+
+ {isMultiSelect && (
+
+
+ )}
+
+ );
+}
+
+export default EnhancedSelectInputOption;
diff --git a/frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css b/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.css
similarity index 100%
rename from frontend/src/Components/Form/EnhancedSelectInputSelectedValue.css
rename to frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.css
diff --git a/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.css.d.ts b/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.css.d.ts
new file mode 100644
index 00000000000..5377239a862
--- /dev/null
+++ b/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.css.d.ts
@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'isDisabled': string;
+ 'selectedValue': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.tsx b/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.tsx
new file mode 100644
index 00000000000..88afdb18a40
--- /dev/null
+++ b/frontend/src/Components/Form/Select/EnhancedSelectInputSelectedValue.tsx
@@ -0,0 +1,23 @@
+import classNames from 'classnames';
+import React, { ReactNode } from 'react';
+import styles from './EnhancedSelectInputSelectedValue.css';
+
+interface EnhancedSelectInputSelectedValueProps {
+ className?: string;
+ children: ReactNode;
+ isDisabled?: boolean;
+}
+
+function EnhancedSelectInputSelectedValue({
+ className = styles.selectedValue,
+ children,
+ isDisabled = false,
+}: EnhancedSelectInputSelectedValueProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export default EnhancedSelectInputSelectedValue;
diff --git a/frontend/src/Components/Form/HintedSelectInputOption.css b/frontend/src/Components/Form/Select/HintedSelectInputOption.css
similarity index 100%
rename from frontend/src/Components/Form/HintedSelectInputOption.css
rename to frontend/src/Components/Form/Select/HintedSelectInputOption.css
diff --git a/frontend/src/Components/Form/Select/HintedSelectInputOption.css.d.ts b/frontend/src/Components/Form/Select/HintedSelectInputOption.css.d.ts
new file mode 100644
index 00000000000..b598ce4842c
--- /dev/null
+++ b/frontend/src/Components/Form/Select/HintedSelectInputOption.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'hintText': string;
+ 'isMobile': string;
+ 'optionText': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/Select/HintedSelectInputOption.tsx b/frontend/src/Components/Form/Select/HintedSelectInputOption.tsx
new file mode 100644
index 00000000000..faa9081c5ad
--- /dev/null
+++ b/frontend/src/Components/Form/Select/HintedSelectInputOption.tsx
@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import React from 'react';
+import EnhancedSelectInputOption, {
+ EnhancedSelectInputOptionProps,
+} from './EnhancedSelectInputOption';
+import styles from './HintedSelectInputOption.css';
+
+interface HintedSelectInputOptionProps extends EnhancedSelectInputOptionProps {
+ value: string;
+ hint?: React.ReactNode;
+}
+
+function HintedSelectInputOption(props: HintedSelectInputOptionProps) {
+ const {
+ id,
+ value,
+ hint,
+ depth,
+ isSelected = false,
+ isDisabled,
+ isMobile,
+ ...otherProps
+ } = props;
+
+ return (
+
+
+
{value}
+
+ {hint != null &&
{hint}
}
+
+ );
+}
+
+HintedSelectInputOption.defaultProps = {
+ isDisabled: false,
+ isHidden: false,
+ isMultiSelect: false,
+};
+
+export default HintedSelectInputOption;
diff --git a/frontend/src/Components/Form/HintedSelectInputSelectedValue.css b/frontend/src/Components/Form/Select/HintedSelectInputSelectedValue.css
similarity index 100%
rename from frontend/src/Components/Form/HintedSelectInputSelectedValue.css
rename to frontend/src/Components/Form/Select/HintedSelectInputSelectedValue.css
diff --git a/frontend/src/Components/Form/Select/HintedSelectInputSelectedValue.css.d.ts b/frontend/src/Components/Form/Select/HintedSelectInputSelectedValue.css.d.ts
new file mode 100644
index 00000000000..57114fbff72
--- /dev/null
+++ b/frontend/src/Components/Form/Select/HintedSelectInputSelectedValue.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'hintText': string;
+ 'selectedValue': string;
+ 'valueText': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/Select/HintedSelectInputSelectedValue.tsx b/frontend/src/Components/Form/Select/HintedSelectInputSelectedValue.tsx
new file mode 100644
index 00000000000..7c4cba1154b
--- /dev/null
+++ b/frontend/src/Components/Form/Select/HintedSelectInputSelectedValue.tsx
@@ -0,0 +1,55 @@
+import React, { ReactNode, useMemo } from 'react';
+import Label from 'Components/Label';
+import ArrayElement from 'typings/Helpers/ArrayElement';
+import { EnhancedSelectInputValue } from './EnhancedSelectInput';
+import EnhancedSelectInputSelectedValue from './EnhancedSelectInputSelectedValue';
+import styles from './HintedSelectInputSelectedValue.css';
+
+interface HintedSelectInputSelectedValueProps {
+ selectedValue: V;
+ values: T[];
+ hint?: ReactNode;
+ isMultiSelect?: boolean;
+ includeHint?: boolean;
+}
+
+function HintedSelectInputSelectedValue<
+ T extends EnhancedSelectInputValue,
+ V extends number | string
+>(props: HintedSelectInputSelectedValueProps) {
+ const {
+ selectedValue,
+ values,
+ hint,
+ isMultiSelect = false,
+ includeHint = true,
+ ...otherProps
+ } = props;
+
+ const valuesMap = useMemo(() => {
+ return new Map(values.map((v) => [v.key, v.value]));
+ }, [values]);
+
+ return (
+
+
+ {isMultiSelect && Array.isArray(selectedValue)
+ ? selectedValue.map((key) => {
+ const v = valuesMap.get(key);
+
+ return {v ? v : key} ;
+ })
+ : valuesMap.get(selectedValue as ArrayElement)}
+
+
+ {hint != null && includeHint ? (
+ {hint}
+ ) : null}
+
+ );
+}
+
+export default HintedSelectInputSelectedValue;
diff --git a/frontend/src/Components/Form/Select/IndexerFlagsSelectInput.tsx b/frontend/src/Components/Form/Select/IndexerFlagsSelectInput.tsx
new file mode 100644
index 00000000000..a43044156bf
--- /dev/null
+++ b/frontend/src/Components/Form/Select/IndexerFlagsSelectInput.tsx
@@ -0,0 +1,70 @@
+import React, { useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import { EnhancedSelectInputChanged } from 'typings/inputs';
+import EnhancedSelectInput from './EnhancedSelectInput';
+
+const selectIndexerFlagsValues = (selectedFlags: number) =>
+ createSelector(
+ (state: AppState) => state.settings.indexerFlags,
+ (indexerFlags) => {
+ const value = indexerFlags.items.reduce((acc: number[], { id }) => {
+ // eslint-disable-next-line no-bitwise
+ if ((selectedFlags & id) === id) {
+ acc.push(id);
+ }
+
+ return acc;
+ }, []);
+
+ const values = indexerFlags.items.map(({ id, name }) => ({
+ key: id,
+ value: name,
+ }));
+
+ return {
+ value,
+ values,
+ };
+ }
+ );
+
+interface IndexerFlagsSelectInputProps {
+ name: string;
+ indexerFlags: number;
+ onChange(payload: EnhancedSelectInputChanged): void;
+}
+
+function IndexerFlagsSelectInput({
+ name,
+ indexerFlags,
+ onChange,
+ ...otherProps
+}: IndexerFlagsSelectInputProps) {
+ const { value, values } = useSelector(selectIndexerFlagsValues(indexerFlags));
+
+ const handleChange = useCallback(
+ (change: EnhancedSelectInputChanged) => {
+ const indexerFlags = change.value.reduce(
+ (acc, flagId) => acc + flagId,
+ 0
+ );
+
+ onChange({ name, value: indexerFlags });
+ },
+ [name, onChange]
+ );
+
+ return (
+ ) => void;
+}
+
+function IndexerSelectInput({
+ name,
+ value,
+ includeAny = false,
+ onChange,
+}: IndexerSelectInputConnectorProps) {
+ const dispatch = useDispatch();
+ const { isFetching, isPopulated, values } = useSelector(
+ createIndexersSelector(includeAny)
+ );
+
+ useEffect(() => {
+ if (!isPopulated) {
+ dispatch(fetchIndexers());
+ }
+ }, [isPopulated, dispatch]);
+
+ return (
+ [] = items.map(
+ (item) => {
+ return {
+ key: item.id,
+ value: item.name,
+ };
+ }
+ );
+
+ if (includeNoChange) {
+ result.unshift({
+ key: 'noChange',
+ value: translate('NoChange'),
+ isDisabled: includeNoChangeDisabled,
+ });
+ }
+
+ if (includeMixed) {
+ result.unshift({
+ key: 'mixed',
+ value: `(${translate('Mixed')})`,
+ isDisabled: true,
+ });
+ }
+
+ return result;
+ }, [includeNoChange, includeNoChangeDisabled, includeMixed, items]);
+
+ const selectValue =
+ typeof value === 'number' || typeof value === 'string' ? value : value.id;
+
+ const handleChange = useCallback(
+ (payload: LanguageSelectInputOnChangeProps) => {
+ if (typeof value === 'number') {
+ onChange(payload);
+ } else {
+ const language = items.find((i) => i.id === payload.value);
+
+ onChange({
+ ...payload,
+ value: language
+ ? {
+ id: language.id,
+ name: language.name,
+ }
+ : ({ id: payload.value } as Language),
+ });
+ }
+ },
+ [value, items, onChange]
+ );
+
+ return (
+ , string>,
+ 'values'
+ > {
+ includeNoChange: boolean;
+ includeMixed: boolean;
+}
+
+function MonitorEpisodesSelectInput(props: MonitorEpisodesSelectInputProps) {
+ const {
+ includeNoChange = false,
+ includeMixed = false,
+ ...otherProps
+ } = props;
+
+ const values: EnhancedSelectInputValue[] = [...monitorOptions];
+
+ if (includeNoChange) {
+ values.unshift({
+ key: 'noChange',
+ get value() {
+ return translate('NoChange');
+ },
+ isDisabled: true,
+ });
+ }
+
+ if (includeMixed) {
+ values.unshift({
+ key: 'mixed',
+ get value() {
+ return `(${translate('Mixed')})`;
+ },
+ isDisabled: true,
+ });
+ }
+
+ return , string>,
+ 'values'
+ > {
+ includeNoChange?: boolean;
+ includeMixed?: boolean;
+ onChange: (...args: unknown[]) => unknown;
+}
+
+function MonitorNewItemsSelectInput(props: MonitorNewItemsSelectInputProps) {
+ const {
+ includeNoChange = false,
+ includeMixed = false,
+ ...otherProps
+ } = props;
+
+ const values: EnhancedSelectInputValue[] = [
+ ...monitorNewItemsOptions,
+ ];
+
+ if (includeNoChange) {
+ values.unshift({
+ key: 'noChange',
+ value: 'No Change',
+ isDisabled: true,
+ });
+ }
+
+ if (includeMixed) {
+ values.unshift({
+ key: 'mixed',
+ value: '(Mixed)',
+ isDisabled: true,
+ });
+ }
+
+ return []) {
+ if (!items) {
+ return [];
+ }
+
+ return items.map((option) => {
+ return {
+ key: option.value,
+ value: option.name,
+ hint: option.hint,
+ parentKey: option.parentValue,
+ isDisabled: option.isDisabled,
+ additionalProperties: option.additionalProperties,
+ };
+ });
+}
+
+function createProviderOptionsSelector(
+ selectOptionsProviderAction: keyof Omit
+) {
+ return createSelector(
+ (state: AppState) => state.providerOptions[selectOptionsProviderAction],
+ (options) => {
+ if (!options) {
+ return {
+ isFetching: false,
+ values: [],
+ };
+ }
+
+ return {
+ isFetching: options.isFetching,
+ values: getSelectOptions(options.items),
+ };
+ }
+ );
+}
+
+interface ProviderOptionSelectInputProps
+ extends Omit<
+ EnhancedSelectInputProps, unknown>,
+ 'values'
+ > {
+ provider: string;
+ providerData: ProviderOptions;
+ name: string;
+ value: unknown;
+ selectOptionsProviderAction: keyof Omit;
+}
+
+function ProviderOptionSelectInput({
+ provider,
+ providerData,
+ selectOptionsProviderAction,
+ ...otherProps
+}: ProviderOptionSelectInputProps) {
+ const dispatch = useDispatch();
+ const [isRefetchRequired, setIsRefetchRequired] = useState(false);
+ const previousProviderData = usePrevious(providerData);
+ const { isFetching, values } = useSelector(
+ createProviderOptionsSelector(selectOptionsProviderAction)
+ );
+
+ const handleOpen = useCallback(() => {
+ if (isRefetchRequired && selectOptionsProviderAction) {
+ setIsRefetchRequired(false);
+
+ dispatch(
+ fetchOptions({
+ section: selectOptionsProviderAction,
+ action: selectOptionsProviderAction,
+ provider,
+ providerData,
+ })
+ );
+ }
+ }, [
+ isRefetchRequired,
+ provider,
+ providerData,
+ selectOptionsProviderAction,
+ dispatch,
+ ]);
+
+ useEffect(() => {
+ if (selectOptionsProviderAction) {
+ dispatch(
+ fetchOptions({
+ section: selectOptionsProviderAction,
+ action: selectOptionsProviderAction,
+ provider,
+ providerData,
+ })
+ );
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [selectOptionsProviderAction, dispatch]);
+
+ useEffect(() => {
+ if (!previousProviderData) {
+ return;
+ }
+
+ const prevKey = getProviderDataKey(previousProviderData);
+ const nextKey = getProviderDataKey(providerData);
+
+ if (!isEqual(prevKey, nextKey)) {
+ setIsRefetchRequired(true);
+ }
+ }, [providerData, previousProviderData, setIsRefetchRequired]);
+
+ useEffect(() => {
+ return () => {
+ if (selectOptionsProviderAction) {
+ dispatch(clearOptions({ section: selectOptionsProviderAction }));
+ }
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+ ('name')
+ ),
+ (qualityProfiles: QualityProfilesAppState) => {
+ const values: EnhancedSelectInputValue[] =
+ qualityProfiles.items.map((qualityProfile) => {
+ return {
+ key: qualityProfile.id,
+ value: qualityProfile.name,
+ };
+ });
+
+ if (includeNoChange) {
+ values.unshift({
+ key: 'noChange',
+ get value() {
+ return translate('NoChange');
+ },
+ isDisabled: includeNoChangeDisabled,
+ });
+ }
+
+ if (includeMixed) {
+ values.unshift({
+ key: 'mixed',
+ get value() {
+ return `(${translate('Mixed')})`;
+ },
+ isDisabled: true,
+ });
+ }
+
+ return values;
+ }
+ );
+}
+
+interface QualityProfileSelectInputConnectorProps
+ extends Omit<
+ EnhancedSelectInputProps<
+ EnhancedSelectInputValue,
+ number | string
+ >,
+ 'values'
+ > {
+ name: string;
+ includeNoChange?: boolean;
+ includeNoChangeDisabled?: boolean;
+ includeMixed?: boolean;
+}
+
+function QualityProfileSelectInput({
+ name,
+ value,
+ includeNoChange = false,
+ includeNoChangeDisabled = true,
+ includeMixed = false,
+ onChange,
+ ...otherProps
+}: QualityProfileSelectInputConnectorProps) {
+ const values = useSelector(
+ createQualityProfilesSelector(
+ includeNoChange,
+ includeNoChangeDisabled,
+ includeMixed
+ )
+ );
+
+ const handleChange = useCallback(
+ ({ value: newValue }: EnhancedSelectInputChanged) => {
+ onChange({
+ name,
+ value: newValue === 'noChange' ? value : newValue,
+ });
+ },
+ [name, value, onChange]
+ );
+
+ useEffect(() => {
+ if (
+ !value ||
+ !values.some((option) => option.key === value || option.key === value)
+ ) {
+ const firstValue = values.find(
+ (option) => typeof option.key === 'number'
+ );
+
+ if (firstValue) {
+ onChange({ name, value: firstValue.key });
+ }
+ }
+ }, [name, value, values, onChange]);
+
+ return (
+ {
+ isMissing?: boolean;
+}
+
+interface RootFolderSelectInputProps
+ extends Omit<
+ EnhancedSelectInputProps, string>,
+ 'value' | 'values'
+ > {
+ name: string;
+ value?: string;
+ isSaving: boolean;
+ saveError?: object;
+ includeNoChange: boolean;
+}
+
+function createRootFolderOptionsSelector(
+ value: string | undefined,
+ includeMissingValue: boolean,
+ includeNoChange: boolean,
+ includeNoChangeDisabled: boolean
+) {
+ return createSelector(
+ createRootFoldersSelector(),
+
+ (rootFolders) => {
+ const values: RootFolderSelectInputValue[] = rootFolders.items.map(
+ (rootFolder) => {
+ return {
+ key: rootFolder.path,
+ value: rootFolder.path,
+ freeSpace: rootFolder.freeSpace,
+ isMissing: false,
+ };
+ }
+ );
+
+ if (includeNoChange) {
+ values.unshift({
+ key: 'noChange',
+ get value() {
+ return translate('NoChange');
+ },
+ isDisabled: includeNoChangeDisabled,
+ isMissing: false,
+ });
+ }
+
+ if (!values.length) {
+ values.push({
+ key: '',
+ value: '',
+ isDisabled: true,
+ isHidden: true,
+ });
+ }
+
+ if (
+ includeMissingValue &&
+ value &&
+ !values.find((v) => v.key === value)
+ ) {
+ values.push({
+ key: value,
+ value,
+ isMissing: true,
+ isDisabled: true,
+ });
+ }
+
+ values.push({
+ key: ADD_NEW_KEY,
+ value: translate('AddANewPath'),
+ });
+
+ return {
+ values,
+ isSaving: rootFolders.isSaving,
+ saveError: rootFolders.saveError,
+ };
+ }
+ );
+}
+
+function RootFolderSelectInput({
+ name,
+ value,
+ includeNoChange = false,
+ onChange,
+ ...otherProps
+}: RootFolderSelectInputProps) {
+ const dispatch = useDispatch();
+ const { values, isSaving, saveError } = useSelector(
+ createRootFolderOptionsSelector(value, true, includeNoChange, false)
+ );
+ const [isAddNewRootFolderModalOpen, setIsAddNewRootFolderModalOpen] =
+ useState(false);
+ const [newRootFolderPath, setNewRootFolderPath] = useState('');
+ const previousIsSaving = usePrevious(isSaving);
+
+ const handleChange = useCallback(
+ ({ value: newValue }: EnhancedSelectInputChanged) => {
+ if (newValue === 'addNew') {
+ setIsAddNewRootFolderModalOpen(true);
+ } else {
+ onChange({ name, value: newValue });
+ }
+ },
+ [name, setIsAddNewRootFolderModalOpen, onChange]
+ );
+
+ const handleNewRootFolderSelect = useCallback(
+ ({ value: newValue }: InputChanged) => {
+ setNewRootFolderPath(newValue);
+ dispatch(addRootFolder({ path: newValue }));
+ },
+ [setNewRootFolderPath, dispatch]
+ );
+
+ const handleAddRootFolderModalClose = useCallback(() => {
+ setIsAddNewRootFolderModalOpen(false);
+ }, [setIsAddNewRootFolderModalOpen]);
+
+ useEffect(() => {
+ if (
+ !value &&
+ values.length &&
+ values.some((v) => !!v.key && v.key !== ADD_NEW_KEY)
+ ) {
+ const defaultValue = values[0];
+
+ if (defaultValue.key !== ADD_NEW_KEY) {
+ onChange({ name, value: defaultValue.key });
+ }
+ }
+
+ if (previousIsSaving && !isSaving && !saveError && newRootFolderPath) {
+ onChange({ name, value: newRootFolderPath });
+ setNewRootFolderPath('');
+ }
+ }, [
+ name,
+ value,
+ values,
+ isSaving,
+ saveError,
+ previousIsSaving,
+ newRootFolderPath,
+ onChange,
+ ]);
+
+ useEffect(() => {
+ if (value == null && values[0].key === '') {
+ onChange({ name, value: '' });
+ } else if (
+ !value ||
+ !values.some((v) => v.key === value) ||
+ value === ADD_NEW_KEY
+ ) {
+ const defaultValue = values[0];
+
+ if (defaultValue.key === ADD_NEW_KEY) {
+ onChange({ name, value: '' });
+ } else {
+ onChange({ name, value: defaultValue.key });
+ }
+ }
+
+ // Only run on mount
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ useEffect(() => {
+ dispatch(fetchRootFolders());
+ }, [dispatch]);
+
+ return (
+ <>
+
+
+
+ {value}
+
+ {seriesFolder && id !== 'addNew' ? (
+
+ {slashCharacter}
+ {seriesFolder}
+
+ ) : null}
+
+
+ {freeSpace == null ? null : (
+
+ {translate('RootFolderSelectFreeSpace', {
+ freeSpace: formatBytes(freeSpace),
+ })}
+
+ )}
+
+ {isMissing ? (
+
{translate('Missing')}
+ ) : null}
+
+ );
+}
+
+export default RootFolderSelectInputOption;
diff --git a/frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css b/frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.css
similarity index 100%
rename from frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css
rename to frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.css
diff --git a/frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.css.d.ts b/frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.css.d.ts
new file mode 100644
index 00000000000..72675a71089
--- /dev/null
+++ b/frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.css.d.ts
@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'freeSpace': string;
+ 'path': string;
+ 'pathContainer': string;
+ 'selectedValue': string;
+ 'seriesFolder': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.tsx b/frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.tsx
new file mode 100644
index 00000000000..e06101f2afe
--- /dev/null
+++ b/frontend/src/Components/Form/Select/RootFolderSelectInputSelectedValue.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
+import EnhancedSelectInputSelectedValue from './EnhancedSelectInputSelectedValue';
+import { RootFolderSelectInputValue } from './RootFolderSelectInput';
+import styles from './RootFolderSelectInputSelectedValue.css';
+
+interface RootFolderSelectInputSelectedValueProps {
+ selectedValue: string;
+ values: RootFolderSelectInputValue[];
+ freeSpace?: number;
+ seriesFolder?: string;
+ isWindows?: boolean;
+ includeFreeSpace?: boolean;
+}
+
+function RootFolderSelectInputSelectedValue(
+ props: RootFolderSelectInputSelectedValueProps
+) {
+ const {
+ selectedValue,
+ values,
+ freeSpace,
+ seriesFolder,
+ includeFreeSpace = true,
+ isWindows,
+ ...otherProps
+ } = props;
+
+ const slashCharacter = isWindows ? '\\' : '/';
+ const value = values.find((v) => v.key === selectedValue)?.value;
+
+ return (
+
+
+
{value}
+
+ {seriesFolder ? (
+
+ {slashCharacter}
+ {seriesFolder}
+
+ ) : null}
+
+ {translate('RootFolderSelectFreeSpace', {
+ freeSpace: formatBytes(freeSpace),
+ })}
+
+ ) : null}
+
+ );
+}
+
+export default RootFolderSelectInputSelectedValue;
diff --git a/frontend/src/Components/Form/Select/SeriesTypeSelectInput.tsx b/frontend/src/Components/Form/Select/SeriesTypeSelectInput.tsx
new file mode 100644
index 00000000000..6a3bba650cf
--- /dev/null
+++ b/frontend/src/Components/Form/Select/SeriesTypeSelectInput.tsx
@@ -0,0 +1,88 @@
+import React, { useMemo } from 'react';
+import * as seriesTypes from 'Utilities/Series/seriesTypes';
+import translate from 'Utilities/String/translate';
+import EnhancedSelectInput, {
+ EnhancedSelectInputProps,
+ EnhancedSelectInputValue,
+} from './EnhancedSelectInput';
+import SeriesTypeSelectInputOption from './SeriesTypeSelectInputOption';
+import SeriesTypeSelectInputSelectedValue from './SeriesTypeSelectInputSelectedValue';
+
+interface SeriesTypeSelectInputProps
+ extends EnhancedSelectInputProps, string> {
+ includeNoChange: boolean;
+ includeNoChangeDisabled?: boolean;
+ includeMixed: boolean;
+}
+
+export interface ISeriesTypeOption {
+ key: string;
+ value: string;
+ format?: string;
+ isDisabled?: boolean;
+}
+
+const seriesTypeOptions: ISeriesTypeOption[] = [
+ {
+ key: seriesTypes.STANDARD,
+ value: 'Standard',
+ get format() {
+ return translate('StandardEpisodeTypeFormat', { format: 'S01E05' });
+ },
+ },
+ {
+ key: seriesTypes.DAILY,
+ value: 'Daily / Date',
+ get format() {
+ return translate('DailyEpisodeTypeFormat', { format: '2020-05-25' });
+ },
+ },
+ {
+ key: seriesTypes.ANIME,
+ value: 'Anime / Absolute',
+ get format() {
+ return translate('AnimeEpisodeTypeFormat', { format: '005' });
+ },
+ },
+];
+
+function SeriesTypeSelectInput(props: SeriesTypeSelectInputProps) {
+ const {
+ includeNoChange = false,
+ includeNoChangeDisabled = true,
+ includeMixed = false,
+ } = props;
+
+ const values = useMemo(() => {
+ const result = [...seriesTypeOptions];
+
+ if (includeNoChange) {
+ result.unshift({
+ key: 'noChange',
+ value: translate('NoChange'),
+ isDisabled: includeNoChangeDisabled,
+ });
+ }
+
+ if (includeMixed) {
+ result.unshift({
+ key: 'mixed',
+ value: `(${translate('Mixed')})`,
+ isDisabled: true,
+ });
+ }
+
+ return result;
+ }, [includeNoChange, includeNoChangeDisabled, includeMixed]);
+
+ return (
+
+
+
{value}
+
+ {format == null ? null :
{format}
}
+
+ );
+}
+
+export default SeriesTypeSelectInputOption;
diff --git a/frontend/src/Components/Form/Select/SeriesTypeSelectInputSelectedValue.tsx b/frontend/src/Components/Form/Select/SeriesTypeSelectInputSelectedValue.tsx
new file mode 100644
index 00000000000..b6470f1a4c5
--- /dev/null
+++ b/frontend/src/Components/Form/Select/SeriesTypeSelectInputSelectedValue.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue';
+import { ISeriesTypeOption } from './SeriesTypeSelectInput';
+
+interface SeriesTypeSelectInputOptionProps {
+ selectedValue: string;
+ values: ISeriesTypeOption[];
+ format: string;
+}
+function SeriesTypeSelectInputSelectedValue(
+ props: SeriesTypeSelectInputOptionProps
+) {
+ const { selectedValue, values, ...otherProps } = props;
+ const format = values.find((v) => v.key === selectedValue)?.format;
+
+ return (
+ {v.hint} };
+ });
+
+ return (
+
+
+
+
+
+
{translate('Umask')}
+
{umask}
+
+
+
+
{translate('Folder')}
+
{folder}
+
d{formatPermissions(folderNum)}
+
+
+
+
{translate('File')}
+
{file}
+
{formatPermissions(fileNum)}
+
+
+
- {
- values.map((option) => {
- const {
- key,
- value: optionValue,
- ...otherOptionProps
- } = option;
-
- return (
-
- {optionValue}
-
- );
- })
- }
-
- );
- }
-}
-
-SelectInput.propTypes = {
- className: PropTypes.string,
- disabledClassName: PropTypes.string,
- name: PropTypes.string.isRequired,
- value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
- values: PropTypes.arrayOf(PropTypes.object).isRequired,
- isDisabled: PropTypes.bool,
- hasError: PropTypes.bool,
- hasWarning: PropTypes.bool,
- autoFocus: PropTypes.bool.isRequired,
- onChange: PropTypes.func.isRequired,
- onBlur: PropTypes.func
-};
-
-SelectInput.defaultProps = {
- className: styles.select,
- disabledClassName: styles.isDisabled,
- isDisabled: false,
- autoFocus: false
-};
-
-export default SelectInput;
diff --git a/frontend/src/Components/Form/SelectInput.tsx b/frontend/src/Components/Form/SelectInput.tsx
new file mode 100644
index 00000000000..4716c2dfd81
--- /dev/null
+++ b/frontend/src/Components/Form/SelectInput.tsx
@@ -0,0 +1,76 @@
+import classNames from 'classnames';
+import React, { ChangeEvent, SyntheticEvent, useCallback } from 'react';
+import { InputChanged } from 'typings/inputs';
+import styles from './SelectInput.css';
+
+interface SelectInputOption {
+ key: string;
+ value: string | number | (() => string | number);
+}
+
+interface SelectInputProps {
+ className?: string;
+ disabledClassName?: string;
+ name: string;
+ value: string | number;
+ values: SelectInputOption[];
+ isDisabled?: boolean;
+ hasError?: boolean;
+ hasWarning?: boolean;
+ autoFocus?: boolean;
+ onChange: (change: InputChanged) => void;
+ onBlur?: (event: SyntheticEvent) => void;
+}
+
+function SelectInput({
+ className = styles.select,
+ disabledClassName = styles.isDisabled,
+ name,
+ value,
+ values,
+ isDisabled = false,
+ hasError,
+ hasWarning,
+ autoFocus = false,
+ onBlur,
+ onChange,
+}: SelectInputProps) {
+ const handleChange = useCallback(
+ (event: ChangeEvent) => {
+ onChange({
+ name,
+ value: event.target.value as T,
+ });
+ },
+ [name, onChange]
+ );
+
+ return (
+
+ {values.map((option) => {
+ const { key, value: optionValue, ...otherOptionProps } = option;
+
+ return (
+
+ {typeof optionValue === 'function' ? optionValue() : optionValue}
+
+ );
+ })}
+
+ );
+}
+
+export default SelectInput;
diff --git a/frontend/src/Components/Form/SeriesTypeSelectInput.js b/frontend/src/Components/Form/SeriesTypeSelectInput.js
deleted file mode 100644
index 5c9ad0cacb2..00000000000
--- a/frontend/src/Components/Form/SeriesTypeSelectInput.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import * as seriesTypes from 'Utilities/Series/seriesTypes';
-import SelectInput from './SelectInput';
-
-const seriesTypeOptions = [
- { key: seriesTypes.STANDARD, value: 'Standard' },
- { key: seriesTypes.DAILY, value: 'Daily' },
- { key: seriesTypes.ANIME, value: 'Anime' }
-];
-
-function SeriesTypeSelectInput(props) {
- const values = [...seriesTypeOptions];
-
- const {
- includeNoChange,
- includeMixed
- } = props;
-
- if (includeNoChange) {
- values.unshift({
- key: 'noChange',
- value: 'No Change',
- disabled: true
- });
- }
-
- if (includeMixed) {
- values.unshift({
- key: 'mixed',
- value: '(Mixed)',
- disabled: true
- });
- }
-
- return (
- {
+ className?: string;
+ name: string;
+ value: string[];
+ hasError?: boolean;
+ hasWarning?: boolean;
+ provider: string;
+ providerData: object;
+ onChange: (change: InputChanged) => unknown;
+}
+
+function createDeviceTagsSelector(value: string[]) {
+ return createSelector(
+ (state: AppState) => state.providerOptions.devices || defaultState,
+ (devices) => {
+ return {
+ ...devices,
+ selectedDevices: value.map((valueDevice) => {
+ const device = devices.items.find((d) => d.id === valueDevice);
+
+ if (device) {
+ return {
+ id: device.id,
+ name: `${device.name} (${device.id})`,
+ };
+ }
+
+ return {
+ id: valueDevice,
+ name: `Unknown (${valueDevice})`,
+ };
+ }),
+ };
+ }
+ );
+}
+
+function DeviceInput({
+ className = styles.deviceInputWrapper,
+ name,
+ value,
+ hasError,
+ hasWarning,
+ provider,
+ providerData,
+ onChange,
+}: DeviceInputProps) {
+ const dispatch = useDispatch();
+ const { items, selectedDevices, isFetching } = useSelector(
+ createDeviceTagsSelector(value)
+ );
+
+ const handleRefreshPress = useCallback(() => {
+ dispatch(
+ fetchOptions({
+ section: 'devices',
+ action: 'getDevices',
+ provider,
+ providerData,
+ })
+ );
+ }, [provider, providerData, dispatch]);
+
+ const handleTagAdd = useCallback(
+ (device: DeviceTag) => {
+ // New tags won't have an ID, only a name.
+ const deviceId = device.id || device.name;
+
+ onChange({
+ name,
+ value: [...value, deviceId],
+ });
+ },
+ [name, value, onChange]
+ );
+
+ const handleTagDelete = useCallback(
+ ({ index }: { index: number }) => {
+ const newValue = value.slice();
+ newValue.splice(index, 1);
+
+ onChange({
+ name,
+ value: newValue,
+ });
+ },
+ [name, value, onChange]
+ );
+
+ useEffect(() => {
+ dispatch(
+ fetchOptions({
+ section: 'devices',
+ action: 'getDevices',
+ provider,
+ providerData,
+ })
+ );
+
+ return () => {
+ dispatch(clearOptions({ section: 'devices' }));
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [dispatch]);
+
+ return (
+
+
+
+
+ );
+}
+
+export default DeviceInput;
diff --git a/frontend/src/Components/Form/Tag/SeriesTagInput.tsx b/frontend/src/Components/Form/Tag/SeriesTagInput.tsx
new file mode 100644
index 00000000000..f72248cf5e3
--- /dev/null
+++ b/frontend/src/Components/Form/Tag/SeriesTagInput.tsx
@@ -0,0 +1,145 @@
+import React, { useCallback, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import { addTag } from 'Store/Actions/tagActions';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import { InputChanged } from 'typings/inputs';
+import sortByProp from 'Utilities/Array/sortByProp';
+import TagInput, { TagBase } from './TagInput';
+
+interface SeriesTag extends TagBase {
+ id: number;
+ name: string;
+}
+
+interface SeriesTagInputProps {
+ name: string;
+ value: number | number[];
+ onChange: (change: InputChanged) => void;
+}
+
+const VALID_TAG_REGEX = new RegExp('[^-_a-z0-9]', 'i');
+
+function isValidTag(tagName: string) {
+ try {
+ return !VALID_TAG_REGEX.test(tagName);
+ } catch {
+ return false;
+ }
+}
+
+function createSeriesTagsSelector(tags: number[]) {
+ return createSelector(createTagsSelector(), (tagList) => {
+ const sortedTags = tagList.sort(sortByProp('label'));
+ const filteredTagList = sortedTags.filter((tag) => !tags.includes(tag.id));
+
+ return {
+ tags: tags.reduce((acc: SeriesTag[], tag) => {
+ const matchingTag = tagList.find((t) => t.id === tag);
+
+ if (matchingTag) {
+ acc.push({
+ id: tag,
+ name: matchingTag.label,
+ });
+ }
+
+ return acc;
+ }, []),
+
+ tagList: filteredTagList.map(({ id, label: name }) => {
+ return {
+ id,
+ name,
+ };
+ }),
+
+ allTags: sortedTags,
+ };
+ });
+}
+
+export default function SeriesTagInput({
+ name,
+ value,
+ onChange,
+}: SeriesTagInputProps) {
+ const dispatch = useDispatch();
+ const isArray = Array.isArray(value);
+
+ const arrayValue = useMemo(() => {
+ if (isArray) {
+ return value;
+ }
+
+ return value === 0 ? [] : [value];
+ }, [isArray, value]);
+
+ const { tags, tagList, allTags } = useSelector(
+ createSeriesTagsSelector(arrayValue)
+ );
+
+ const handleTagCreated = useCallback(
+ (tag: SeriesTag) => {
+ if (isArray) {
+ onChange({ name, value: [...value, tag.id] });
+ } else {
+ onChange({
+ name,
+ value: tag.id,
+ });
+ }
+ },
+ [name, value, isArray, onChange]
+ );
+
+ const handleTagAdd = useCallback(
+ (newTag: SeriesTag) => {
+ if (newTag.id) {
+ if (isArray) {
+ onChange({ name, value: [...value, newTag.id] });
+ } else {
+ onChange({ name, value: newTag.id });
+ }
+
+ return;
+ }
+
+ const existingTag = allTags.some((t) => t.label === newTag.name);
+
+ if (isValidTag(newTag.name) && !existingTag) {
+ dispatch(
+ addTag({
+ tag: { label: newTag.name },
+ onTagCreated: handleTagCreated,
+ })
+ );
+ }
+ },
+ [name, value, isArray, allTags, handleTagCreated, onChange, dispatch]
+ );
+
+ const handleTagDelete = useCallback(
+ ({ index }: { index: number }) => {
+ if (isArray) {
+ const newValue = value.slice();
+ newValue.splice(index, 1);
+
+ onChange({ name, value: newValue });
+ } else {
+ onChange({ name, value: 0 });
+ }
+ },
+ [name, value, isArray, onChange]
+ );
+
+ return (
+ (
+ value: string,
+ selectedIndex: number,
+ suggestions: T[],
+ allowNew: boolean
+) {
+ if (selectedIndex == null && value) {
+ const existingTag = suggestions.find(
+ (suggestion) => suggestion.name === value
+ );
+
+ if (existingTag) {
+ return existingTag;
+ } else if (allowNew) {
+ return { name: value } as T;
+ }
+ } else if (selectedIndex != null) {
+ return suggestions[selectedIndex];
+ }
+
+ return null;
+}
+
+function handleSuggestionsClearRequested() {
+ // Required because props aren't always rendered, but no-op
+ // because we don't want to reset the paths after a path is selected.
+}
+
+export interface ReplacementTag {
+ index: number;
+ id: T['id'];
+}
+
+export interface TagInputProps {
+ className?: string;
+ inputContainerClassName?: string;
+ name: string;
+ tags: T[];
+ tagList: T[];
+ allowNew?: boolean;
+ kind?: Kind;
+ placeholder?: string;
+ delimiters?: string[];
+ minQueryLength?: number;
+ canEdit?: boolean;
+ hasError?: boolean;
+ hasWarning?: boolean;
+ tagComponent?: React.ElementType;
+ onChange?: (change: InputChanged) => void;
+ onTagAdd: (newTag: T) => void;
+ onTagDelete: TagInputTagProps['onDelete'];
+ onTagReplace?: (
+ tagToReplace: ReplacementTag,
+ newTagName: T['name']
+ ) => void;
+}
+
+function TagInput({
+ className = styles.internalInput,
+ inputContainerClassName = styles.input,
+ name,
+ tags,
+ tagList,
+ allowNew = true,
+ kind = 'info',
+ placeholder = '',
+ delimiters = ['Tab', 'Enter', ' ', ','],
+ minQueryLength = 1,
+ canEdit = false,
+ tagComponent = TagInputTag,
+ hasError,
+ hasWarning,
+ onChange,
+ onTagAdd,
+ onTagDelete,
+ onTagReplace,
+ ...otherProps
+}: TagInputProps) {
+ const [value, setValue] = useState('');
+ const [suggestions, setSuggestions] = useState([]);
+ const [isFocused, setIsFocused] = useState(false);
+ const autoSuggestRef = useRef(null);
+
+ const addTag = useDebouncedCallback(
+ (tag: T | null) => {
+ if (!tag) {
+ return;
+ }
+
+ onTagAdd(tag);
+
+ setValue('');
+ setSuggestions([]);
+ },
+ 250,
+ {
+ leading: true,
+ trailing: false,
+ }
+ );
+
+ const handleEditTag = useCallback(
+ ({ value: newValue, ...otherProps }: EditedTag) => {
+ if (value && onTagReplace) {
+ onTagReplace(otherProps, value);
+ } else {
+ onTagDelete(otherProps);
+ }
+
+ setValue(String(newValue));
+ },
+ [value, setValue, onTagDelete, onTagReplace]
+ );
+
+ const handleInputContainerPress = useCallback(() => {
+ // @ts-expect-error Ref isn't typed yet
+ autoSuggestRef?.current?.input.focus();
+ }, []);
+
+ const handleInputChange = useCallback(
+ (_event: SyntheticEvent, { newValue, method }: ChangeEvent) => {
+ const finalValue =
+ // @ts-expect-error newValue may be an object?
+ typeof newValue === 'object' ? newValue.name : newValue;
+
+ if (method === 'type') {
+ setValue(finalValue);
+ }
+ },
+ [setValue]
+ );
+
+ const handleSuggestionsFetchRequested = useCallback(
+ ({ value: newValue }: SuggestionsFetchRequestedParams) => {
+ const lowerCaseValue = newValue.toLowerCase();
+
+ const suggestions = tagList.filter((tag) => {
+ return (
+ String(tag.name).toLowerCase().includes(lowerCaseValue) &&
+ !tags.some((t) => t.id === tag.id)
+ );
+ });
+
+ setSuggestions(suggestions);
+ },
+ [tags, tagList, setSuggestions]
+ );
+
+ const handleInputKeyDown = useCallback(
+ (event: KeyboardEvent) => {
+ const key = event.key;
+
+ if (!autoSuggestRef.current) {
+ return;
+ }
+
+ if (key === 'Backspace' && !value.length) {
+ const index = tags.length - 1;
+
+ if (index >= 0) {
+ onTagDelete({ index, id: tags[index].id });
+ }
+
+ setTimeout(() => {
+ handleSuggestionsFetchRequested({
+ value: '',
+ reason: 'input-changed',
+ });
+ });
+
+ event.preventDefault();
+ }
+
+ if (delimiters.includes(key)) {
+ // @ts-expect-error Ref isn't typed yet
+ const selectedIndex = autoSuggestRef.current.highlightedSuggestionIndex;
+ const tag = getTag(value, selectedIndex, suggestions, allowNew);
+
+ if (tag) {
+ addTag(tag);
+ event.preventDefault();
+ }
+ }
+ },
+ [
+ tags,
+ allowNew,
+ delimiters,
+ onTagDelete,
+ value,
+ suggestions,
+ addTag,
+ handleSuggestionsFetchRequested,
+ ]
+ );
+
+ const handleInputFocus = useCallback(() => {
+ setIsFocused(true);
+ }, [setIsFocused]);
+
+ const handleInputBlur = useCallback(() => {
+ setIsFocused(false);
+
+ if (!autoSuggestRef.current) {
+ return;
+ }
+
+ // @ts-expect-error Ref isn't typed yet
+ const selectedIndex = autoSuggestRef.current.highlightedSuggestionIndex;
+ const tag = getTag(value, selectedIndex, suggestions, allowNew);
+
+ if (tag) {
+ addTag(tag);
+ }
+ }, [allowNew, value, suggestions, autoSuggestRef, addTag, setIsFocused]);
+
+ const handleSuggestionSelected = useCallback(
+ (_event: SyntheticEvent, { suggestion }: { suggestion: T }) => {
+ addTag(suggestion);
+ },
+ [addTag]
+ );
+
+ const getSuggestionValue = useCallback(({ name }: T): string => {
+ return String(name);
+ }, []);
+
+ const shouldRenderSuggestions = useCallback(
+ (v: string) => {
+ return v.length >= minQueryLength;
+ },
+ [minQueryLength]
+ );
+
+ const renderSuggestion: RenderSuggestion = useCallback(({ name }: T) => {
+ return name;
+ }, []);
+
+ const renderInputComponent = useCallback(
+ (
+ inputProps: RenderInputComponentProps,
+ forwardedRef: Ref
+ ) => {
+ return (
+ {
+ forwardedRef?: Ref;
+ className?: string;
+ tags: TagBase[];
+ inputProps: object;
+ kind: Kind;
+ isFocused: boolean;
+ canEdit: boolean;
+ tagComponent: React.ElementType;
+ onTagDelete: TagInputTagProps['onDelete'];
+ onTagEdit: TagInputTagProps['onEdit'];
+ onInputContainerPress: () => void;
+}
+
+function TagInputInput(props: TagInputInputProps) {
+ const {
+ forwardedRef,
+ className = styles.inputContainer,
+ tags,
+ inputProps,
+ kind,
+ isFocused,
+ canEdit,
+ tagComponent: TagComponent,
+ onTagDelete,
+ onTagEdit,
+ onInputContainerPress,
+ } = props;
+
+ const handleMouseDown = useCallback(
+ (event: MouseEvent) => {
+ event.preventDefault();
+
+ if (isFocused) {
+ return;
+ }
+
+ onInputContainerPress();
+ },
+ [isFocused, onInputContainerPress]
+ );
+
+ return (
+
+ {tags.map((tag, index) => {
+ return (
+
+ );
+}
+
+export default TagInputInput;
diff --git a/frontend/src/Components/Form/TagInputTag.css b/frontend/src/Components/Form/Tag/TagInputTag.css
similarity index 96%
rename from frontend/src/Components/Form/TagInputTag.css
rename to frontend/src/Components/Form/Tag/TagInputTag.css
index 7e66a4d1207..1a8ff45d6f9 100644
--- a/frontend/src/Components/Form/TagInputTag.css
+++ b/frontend/src/Components/Form/Tag/TagInputTag.css
@@ -30,5 +30,6 @@
.label {
composes: label from '~Components/Label.css';
+ display: flex;
max-width: 100%;
}
diff --git a/frontend/src/Components/Form/Tag/TagInputTag.css.d.ts b/frontend/src/Components/Form/Tag/TagInputTag.css.d.ts
new file mode 100644
index 00000000000..510189d2c40
--- /dev/null
+++ b/frontend/src/Components/Form/Tag/TagInputTag.css.d.ts
@@ -0,0 +1,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'editButton': string;
+ 'editContainer': string;
+ 'label': string;
+ 'link': string;
+ 'linkWithEdit': string;
+ 'tag': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/Tag/TagInputTag.tsx b/frontend/src/Components/Form/Tag/TagInputTag.tsx
new file mode 100644
index 00000000000..7b549767c7c
--- /dev/null
+++ b/frontend/src/Components/Form/Tag/TagInputTag.tsx
@@ -0,0 +1,79 @@
+import React, { useCallback } from 'react';
+import Label, { LabelProps } from 'Components/Label';
+import IconButton from 'Components/Link/IconButton';
+import Link from 'Components/Link/Link';
+import MiddleTruncate from 'Components/MiddleTruncate';
+import { icons } from 'Helpers/Props';
+import { TagBase } from './TagInput';
+import styles from './TagInputTag.css';
+
+export interface DeletedTag {
+ index: number;
+ id: T['id'];
+}
+
+export interface EditedTag {
+ index: number;
+ id: T['id'];
+ value: T['name'];
+}
+
+export interface TagInputTagProps {
+ index: number;
+ tag: T;
+ kind: LabelProps['kind'];
+ canEdit: boolean;
+ onDelete: (deletedTag: DeletedTag) => void;
+ onEdit: (editedTag: EditedTag) => void;
+}
+
+function TagInputTag({
+ tag,
+ kind,
+ index,
+ canEdit,
+ onDelete,
+ onEdit,
+}: TagInputTagProps) {
+ const handleDelete = useCallback(() => {
+ onDelete({
+ index,
+ id: tag.id,
+ });
+ }, [index, tag, onDelete]);
+
+ const handleEdit = useCallback(() => {
+ onEdit({
+ index,
+ id: tag.id,
+ value: tag.name,
+ });
+ }, [index, tag, onEdit]);
+
+ return (
+
+
+
+
+ ) : null}
+
+
{
+ name: string;
+ value: number[];
+ values: TagSelectValue[];
+ onChange: (change: InputChanged) => unknown;
+}
+
+function TagSelectInput({
+ name,
+ value,
+ values,
+ onChange,
+ ...otherProps
+}: TagSelectInputProps) {
+ const { tags, tagList, allTags } = useMemo(() => {
+ const sortedTags = values.sort((a, b) => a.key - b.key);
+
+ return {
+ tags: value.reduce((acc: SelectTag[], tag) => {
+ const matchingTag = values.find((t) => t.key === tag);
+
+ if (matchingTag) {
+ acc.push({
+ id: tag,
+ name: matchingTag.value,
+ });
+ }
+
+ return acc;
+ }, []),
+
+ tagList: sortedTags.map((sorted) => {
+ return {
+ id: sorted.key,
+ name: sorted.value,
+ };
+ }),
+
+ allTags: sortedTags,
+ };
+ }, [value, values]);
+
+ const handleTagAdd = useCallback(
+ (newTag: SelectTag) => {
+ const existingTag = allTags.some((tag) => tag.key === newTag.id);
+ const newValue = value.slice();
+
+ if (existingTag) {
+ newValue.push(newTag.id);
+ }
+
+ onChange({ name, value: newValue });
+ },
+ [name, value, allTags, onChange]
+ );
+
+ const handleTagDelete = useCallback(
+ ({ index }: { index: number }) => {
+ const newValue = value.slice();
+ newValue.splice(index, 1);
+
+ onChange({
+ name,
+ value: newValue,
+ });
+ },
+ [name, value, onChange]
+ );
+
+ return (
+ {
+ name: string;
+ value: string | string[];
+ onChange: (change: InputChanged) => unknown;
+}
+
+function TextTagInput({
+ name,
+ value,
+ onChange,
+ ...otherProps
+}: TextTagInputProps) {
+ const { tags, tagList, valueArray } = useMemo(() => {
+ const tagsArray = Array.isArray(value) ? value : split(value);
+
+ return {
+ tags: tagsArray.reduce((result: TextTag[], tag) => {
+ if (tag) {
+ result.push({
+ id: tag,
+ name: tag,
+ });
+ }
+
+ return result;
+ }, []),
+ tagList: [],
+ valueArray: tagsArray,
+ };
+ }, [value]);
+
+ const handleTagAdd = useCallback(
+ (newTag: TextTag) => {
+ // Split and trim tags before adding them to the list, this will
+ // cleanse tags pasted in that had commas and spaces which leads
+ // to oddities with restrictions (as an example).
+
+ const newValue = [...valueArray];
+ const newTags = newTag.name.startsWith('/')
+ ? [newTag.name]
+ : split(newTag.name);
+
+ newTags.forEach((newTag) => {
+ const newTagValue = newTag.trim();
+
+ if (newTagValue) {
+ newValue.push(newTagValue);
+ }
+ });
+
+ onChange({ name, value: newValue });
+ },
+ [name, valueArray, onChange]
+ );
+
+ const handleTagDelete = useCallback(
+ ({ index }: { index: number }) => {
+ const newValue = [...valueArray];
+ newValue.splice(index, 1);
+
+ onChange({
+ name,
+ value: newValue,
+ });
+ },
+ [name, valueArray, onChange]
+ );
+
+ const handleTagReplace = useCallback(
+ (tagToReplace: ReplacementTag, newTagName: string) => {
+ const newValue = [...valueArray];
+ newValue.splice(tagToReplace.index, 1);
+
+ const newTagValue = newTagName.trim();
+
+ if (newTagValue) {
+ newValue.push(newTagValue);
+ }
+
+ onChange({ name, value: newValue });
+ },
+ [name, valueArray, onChange]
+ );
+
+ return (
+
- {
- tags.map((tag, index) => {
- return (
-
- );
- }
-}
-
-TagInputInput.propTypes = {
- forwardedRef: PropTypes.func,
- className: PropTypes.string.isRequired,
- tags: PropTypes.arrayOf(PropTypes.shape(tagShape)).isRequired,
- inputProps: PropTypes.object.isRequired,
- kind: PropTypes.oneOf(kinds.all).isRequired,
- isFocused: PropTypes.bool.isRequired,
- canEdit: PropTypes.bool.isRequired,
- tagComponent: PropTypes.elementType.isRequired,
- onTagDelete: PropTypes.func.isRequired,
- onTagEdit: PropTypes.func.isRequired,
- onInputContainerPress: PropTypes.func.isRequired
-};
-
-TagInputInput.defaultProps = {
- className: styles.inputContainer
-};
-
-export default TagInputInput;
diff --git a/frontend/src/Components/Form/TagInputTag.js b/frontend/src/Components/Form/TagInputTag.js
deleted file mode 100644
index 05a78044281..00000000000
--- a/frontend/src/Components/Form/TagInputTag.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import MiddleTruncate from 'react-middle-truncate';
-import Label from 'Components/Label';
-import IconButton from 'Components/Link/IconButton';
-import Link from 'Components/Link/Link';
-import { icons, kinds } from 'Helpers/Props';
-import tagShape from 'Helpers/Props/Shapes/tagShape';
-import styles from './TagInputTag.css';
-
-class TagInputTag extends Component {
-
- //
- // Listeners
-
- onDelete = () => {
- const {
- index,
- tag,
- onDelete
- } = this.props;
-
- onDelete({
- index,
- id: tag.id
- });
- };
-
- onEdit = () => {
- const {
- index,
- tag,
- onEdit
- } = this.props;
-
- onEdit({
- index,
- id: tag.id,
- value: tag.name
- });
- };
-
- //
- // Render
-
- render() {
- const {
- tag,
- kind,
- canEdit
- } = this.props;
-
- return (
-
-
-
-
:
- null
- }
-
-
) => void;
+ onFocus?: (event: SyntheticEvent) => void;
+ onBlur?: (event: SyntheticEvent) => void;
+ onSelectionChange?: (start: number | null, end: number | null) => void;
+}
+
+function TextArea({
+ className = styles.input,
+ readOnly = false,
+ autoFocus = false,
+ placeholder,
+ name,
+ value = '',
+ hasError,
+ hasWarning,
+ onBlur,
+ onFocus,
+ onChange,
+ onSelectionChange,
+}: TextAreaProps) {
+ const inputRef = useRef(null);
+ const selectionTimeout = useRef>();
+ const selectionStart = useRef();
+ const selectionEnd = useRef();
+ const isMouseTarget = useRef(false);
+
+ const selectionChanged = useCallback(() => {
+ if (selectionTimeout.current) {
+ clearTimeout(selectionTimeout.current);
+ }
+
+ selectionTimeout.current = setTimeout(() => {
+ if (!inputRef.current) {
+ return;
+ }
+
+ const start = inputRef.current.selectionStart;
+ const end = inputRef.current.selectionEnd;
+
+ const selectionChanged =
+ selectionStart.current !== start || selectionEnd.current !== end;
+
+ selectionStart.current = start;
+ selectionEnd.current = end;
+
+ if (selectionChanged) {
+ onSelectionChange?.(start, end);
+ }
+ }, 10);
+ }, [onSelectionChange]);
+
+ const handleChange = useCallback(
+ (event: ChangeEvent) => {
+ onChange({
+ name,
+ value: event.target.value,
+ });
+ },
+ [name, onChange]
+ );
+
+ const handleFocus = useCallback(
+ (event: SyntheticEvent) => {
+ onFocus?.(event);
+
+ selectionChanged();
+ },
+ [selectionChanged, onFocus]
+ );
+
+ const handleKeyUp = useCallback(() => {
+ selectionChanged();
+ }, [selectionChanged]);
+
+ const handleMouseDown = useCallback(() => {
+ isMouseTarget.current = true;
+ }, []);
+
+ const handleMouseUp = useCallback(() => {
+ selectionChanged();
+ }, [selectionChanged]);
+
+ const handleDocumentMouseUp = useCallback(() => {
+ if (isMouseTarget.current) {
+ selectionChanged();
+ }
+
+ isMouseTarget.current = false;
+ }, [selectionChanged]);
+
+ useEffect(() => {
+ window.addEventListener('mouseup', handleDocumentMouseUp);
+
+ return () => {
+ window.removeEventListener('mouseup', handleDocumentMouseUp);
+ };
+ }, [handleDocumentMouseUp]);
+
+ return (
+
+ );
+}
+
+export default TextArea;
diff --git a/frontend/src/Components/Form/TextInput.css.d.ts b/frontend/src/Components/Form/TextInput.css.d.ts
new file mode 100644
index 00000000000..2c71cfc686c
--- /dev/null
+++ b/frontend/src/Components/Form/TextInput.css.d.ts
@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'hasButton': string;
+ 'hasError': string;
+ 'hasWarning': string;
+ 'input': string;
+ 'readOnly': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Form/TextInput.js b/frontend/src/Components/Form/TextInput.js
deleted file mode 100644
index e2808ce5472..00000000000
--- a/frontend/src/Components/Form/TextInput.js
+++ /dev/null
@@ -1,198 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import styles from './TextInput.css';
-
-class TextInput extends Component {
-
- //
- // Lifecycle
-
- constructor(props, context) {
- super(props, context);
-
- this._input = null;
- this._selectionStart = null;
- this._selectionEnd = null;
- this._selectionTimeout = null;
- this._isMouseTarget = false;
- }
-
- componentDidMount() {
- window.addEventListener('mouseup', this.onDocumentMouseUp);
- }
-
- componentWillUnmount() {
- window.removeEventListener('mouseup', this.onDocumentMouseUp);
-
- if (this._selectionTimeout) {
- this._selectionTimeout = clearTimeout(this._selectionTimeout);
- }
- }
-
- //
- // Control
-
- setInputRef = (ref) => {
- this._input = ref;
- };
-
- selectionChange() {
- if (this._selectionTimeout) {
- this._selectionTimeout = clearTimeout(this._selectionTimeout);
- }
-
- this._selectionTimeout = setTimeout(() => {
- const selectionStart = this._input.selectionStart;
- const selectionEnd = this._input.selectionEnd;
-
- const selectionChanged = (
- this._selectionStart !== selectionStart ||
- this._selectionEnd !== selectionEnd
- );
-
- this._selectionStart = selectionStart;
- this._selectionEnd = selectionEnd;
-
- if (this.props.onSelectionChange && selectionChanged) {
- this.props.onSelectionChange(selectionStart, selectionEnd);
- }
- }, 10);
- }
-
- //
- // Listeners
-
- onChange = (event) => {
- const {
- name,
- type,
- onChange
- } = this.props;
-
- const payload = {
- name,
- value: event.target.value
- };
-
- // Also return the files for a file input type.
-
- if (type === 'file') {
- payload.files = event.target.files;
- }
-
- onChange(payload);
- };
-
- onFocus = (event) => {
- if (this.props.onFocus) {
- this.props.onFocus(event);
- }
-
- this.selectionChange();
- };
-
- onKeyUp = () => {
- this.selectionChange();
- };
-
- onMouseDown = () => {
- this._isMouseTarget = true;
- };
-
- onMouseUp = () => {
- this.selectionChange();
- };
-
- onDocumentMouseUp = () => {
- if (this._isMouseTarget) {
- this.selectionChange();
- }
-
- this._isMouseTarget = false;
- };
-
- //
- // Render
-
- render() {
- const {
- className,
- type,
- readOnly,
- autoFocus,
- placeholder,
- name,
- value,
- hasError,
- hasWarning,
- hasButton,
- step,
- min,
- max,
- onBlur,
- onCopy
- } = this.props;
-
- return (
- {
+ className?: string;
+ type?: InputType;
+ readOnly?: boolean;
+ autoFocus?: boolean;
+ placeholder?: string;
+ name: string;
+ value: string | number | string[];
+ hasError?: boolean;
+ hasWarning?: boolean;
+ hasButton?: boolean;
+ step?: number;
+ min?: number;
+ max?: number;
+ onChange: (change: InputChanged | FileInputChanged) => void;
+ onFocus?: (event: FocusEvent) => void;
+ onBlur?: (event: SyntheticEvent) => void;
+ onCopy?: (event: SyntheticEvent) => void;
+ onSelectionChange?: (start: number | null, end: number | null) => void;
+}
+
+function TextInput({
+ className = styles.input,
+ type = 'text',
+ readOnly = false,
+ autoFocus = false,
+ placeholder,
+ name,
+ value = '',
+ hasError,
+ hasWarning,
+ hasButton,
+ step,
+ min,
+ max,
+ onBlur,
+ onFocus,
+ onCopy,
+ onChange,
+ onSelectionChange,
+}: TextInputProps) {
+ const inputRef = useRef(null);
+ const selectionTimeout = useRef>();
+ const selectionStart = useRef();
+ const selectionEnd = useRef();
+ const isMouseTarget = useRef(false);
+
+ const selectionChanged = useCallback(() => {
+ if (selectionTimeout.current) {
+ clearTimeout(selectionTimeout.current);
+ }
+
+ selectionTimeout.current = setTimeout(() => {
+ if (!inputRef.current) {
+ return;
+ }
+
+ const start = inputRef.current.selectionStart;
+ const end = inputRef.current.selectionEnd;
+
+ const selectionChanged =
+ selectionStart.current !== start || selectionEnd.current !== end;
+
+ selectionStart.current = start;
+ selectionEnd.current = end;
+
+ if (selectionChanged) {
+ onSelectionChange?.(start, end);
+ }
+ }, 10);
+ }, [onSelectionChange]);
+
+ const handleChange = useCallback(
+ (event: ChangeEvent) => {
+ onChange({
+ name,
+ value: event.target.value,
+ files: type === 'file' ? event.target.files : undefined,
+ });
+ },
+ [name, type, onChange]
+ );
+
+ const handleFocus = useCallback(
+ (event: FocusEvent) => {
+ onFocus?.(event);
+
+ selectionChanged();
+ },
+ [selectionChanged, onFocus]
+ );
+
+ const handleKeyUp = useCallback(() => {
+ selectionChanged();
+ }, [selectionChanged]);
+
+ const handleMouseDown = useCallback(() => {
+ isMouseTarget.current = true;
+ }, []);
+
+ const handleMouseUp = useCallback(() => {
+ selectionChanged();
+ }, [selectionChanged]);
+
+ const handleWheel = useCallback(() => {
+ if (type === 'number') {
+ inputRef.current?.blur();
+ }
+ }, [type]);
+
+ const handleDocumentMouseUp = useCallback(() => {
+ if (isMouseTarget.current) {
+ selectionChanged();
+ }
+
+ isMouseTarget.current = false;
+ }, [selectionChanged]);
+
+ useEffect(() => {
+ window.addEventListener('mouseup', handleDocumentMouseUp);
+
+ return () => {
+ window.removeEventListener('mouseup', handleDocumentMouseUp);
+ };
+ }, [handleDocumentMouseUp]);
+
+ useEffect(() => {
+ return () => {
+ clearTimeout(selectionTimeout.current);
+ };
+ }, []);
+
+ return (
+ {v.hint} };
- });
-
- return (
-
-
-
-
-
-
Folder
-
{folder}
-
d{formatPermissions(folderNum)}
-
-
-
File
-
{file}
-
{formatPermissions(fileNum)}
-
-
-
-
- );
-}
-
-HeartRating.propTypes = {
- rating: PropTypes.number.isRequired,
- iconSize: PropTypes.number.isRequired
-};
-
-HeartRating.defaultProps = {
- iconSize: 14
-};
-
-export default HeartRating;
diff --git a/frontend/src/Components/HeartRating.tsx b/frontend/src/Components/HeartRating.tsx
new file mode 100644
index 00000000000..774cb4239f4
--- /dev/null
+++ b/frontend/src/Components/HeartRating.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import Icon, { IconProps } from 'Components/Icon';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './HeartRating.css';
+
+interface HeartRatingProps {
+ rating: number;
+ votes?: number;
+ iconSize?: IconProps['size'];
+}
+
+function HeartRating({ rating, votes = 0, iconSize = 14 }: HeartRatingProps) {
+ return (
+
+
- {icon}
-
- );
- }
-
- return icon;
- }
-}
-
-Icon.propTypes = {
- containerClassName: PropTypes.string,
- className: PropTypes.string,
- name: PropTypes.object.isRequired,
- kind: PropTypes.string.isRequired,
- size: PropTypes.number.isRequired,
- title: PropTypes.string,
- darken: PropTypes.bool.isRequired,
- isSpinning: PropTypes.bool.isRequired,
- fixedWidth: PropTypes.bool.isRequired
-};
-
-Icon.defaultProps = {
- kind: kinds.DEFAULT,
- size: 14,
- darken: false,
- isSpinning: false,
- fixedWidth: false
-};
-
-export default Icon;
diff --git a/frontend/src/Components/Icon.tsx b/frontend/src/Components/Icon.tsx
new file mode 100644
index 00000000000..a04463b5160
--- /dev/null
+++ b/frontend/src/Components/Icon.tsx
@@ -0,0 +1,60 @@
+import {
+ FontAwesomeIcon,
+ FontAwesomeIconProps,
+} from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import React, { ComponentProps } from 'react';
+import { kinds } from 'Helpers/Props';
+import { Kind } from 'Helpers/Props/kinds';
+import styles from './Icon.css';
+
+export interface IconProps
+ extends Omit<
+ FontAwesomeIconProps,
+ 'icon' | 'spin' | 'name' | 'title' | 'size'
+ > {
+ containerClassName?: ComponentProps<'span'>['className'];
+ name: FontAwesomeIconProps['icon'];
+ kind?: Extract;
+ size?: number;
+ isSpinning?: FontAwesomeIconProps['spin'];
+ title?: string | (() => string) | null;
+}
+
+export default function Icon({
+ containerClassName,
+ className,
+ name,
+ kind = kinds.DEFAULT,
+ size = 14,
+ title,
+ isSpinning = false,
+ fixedWidth = false,
+ ...otherProps
+}: IconProps) {
+ const icon = (
+
+ {icon}
+
+ );
+ }
+
+ return icon;
+}
diff --git a/frontend/src/Components/Label.css b/frontend/src/Components/Label.css
index f3ff839937d..c7512987a2b 100644
--- a/frontend/src/Components/Label.css
+++ b/frontend/src/Components/Label.css
@@ -88,6 +88,15 @@
}
}
+.purple {
+ border-color: var(--purple);
+ background-color: var(--purple);
+
+ &.outline {
+ color: var(--purple);
+ }
+}
+
/** Sizes **/
.small {
diff --git a/frontend/src/Components/Label.css.d.ts b/frontend/src/Components/Label.css.d.ts
new file mode 100644
index 00000000000..778ba6faf2c
--- /dev/null
+++ b/frontend/src/Components/Label.css.d.ts
@@ -0,0 +1,20 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'danger': string;
+ 'default': string;
+ 'disabled': string;
+ 'info': string;
+ 'inverse': string;
+ 'label': string;
+ 'large': string;
+ 'medium': string;
+ 'outline': string;
+ 'primary': string;
+ 'purple': string;
+ 'small': string;
+ 'success': string;
+ 'warning': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Components/Label.js b/frontend/src/Components/Label.js
deleted file mode 100644
index 6f662ec7da6..00000000000
--- a/frontend/src/Components/Label.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { kinds, sizes } from 'Helpers/Props';
-import styles from './Label.css';
-
-function Label(props) {
- const {
- className,
- kind,
- size,
- outline,
- children,
- ...otherProps
- } = props;
-
- return (
-
- {children}
-
- );
-}
-
-Label.propTypes = {
- className: PropTypes.string.isRequired,
- kind: PropTypes.oneOf(kinds.all).isRequired,
- size: PropTypes.oneOf(sizes.all).isRequired,
- outline: PropTypes.bool.isRequired,
- children: PropTypes.node.isRequired
-};
-
-Label.defaultProps = {
- className: styles.label,
- kind: kinds.DEFAULT,
- size: sizes.SMALL,
- outline: false
-};
-
-export default Label;
diff --git a/frontend/src/Components/Label.tsx b/frontend/src/Components/Label.tsx
new file mode 100644
index 00000000000..9ab360f4207
--- /dev/null
+++ b/frontend/src/Components/Label.tsx
@@ -0,0 +1,33 @@
+import classNames from 'classnames';
+import React, { ComponentProps, ReactNode } from 'react';
+import { kinds, sizes } from 'Helpers/Props';
+import { Kind } from 'Helpers/Props/kinds';
+import { Size } from 'Helpers/Props/sizes';
+import styles from './Label.css';
+
+export interface LabelProps extends ComponentProps<'span'> {
+ kind?: Extract;
+ size?: Extract;
+ outline?: boolean;
+ children: ReactNode;
+}
+
+export default function Label({
+ className = styles.label,
+ kind = kinds.DEFAULT,
+ size = sizes.SMALL,
+ outline = false,
+ ...otherProps
+}: LabelProps) {
+ return (
+ {
+ buttonGroupPosition?: Extract;
+ kind?: Extract;
+ size?: Extract;
+ children: Required;
+}
+
+export default function Button({
+ className = styles.button,
+ buttonGroupPosition,
+ kind = kinds.DEFAULT,
+ size = sizes.MEDIUM,
+ ...otherProps
+}: ButtonProps) {
+ return (
+
-
- {
- showSuccess &&
-
- 
-