Convert Import Series to TypeScript

2026-04-22 22:16:13 -04:00 · 2025-01-12 19:39:29 -08:00
parent ab1f8bdbd9
commit 6f871a1bfb
54 changed files with 1614 additions and 2320 deletions
@@ -1,188 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Alert from 'Components/Alert';
-import FieldSet from 'Components/FieldSet';
-import FileBrowserModal from 'Components/FileBrowser/FileBrowserModal';
-import Icon from 'Components/Icon';
-import Button from 'Components/Link/Button';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import { icons, kinds, sizes } from 'Helpers/Props';
-import RootFolders from 'RootFolder/RootFolders';
-import translate from 'Utilities/String/translate';
-import styles from './ImportSeriesSelectFolder.css';
-
-class ImportSeriesSelectFolder extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      isAddNewRootFolderModalOpen: false
-    };
-  }
-
-  //
-  // Lifecycle
-
-  onAddNewRootFolderPress = () => {
-    this.setState({ isAddNewRootFolderModalOpen: true });
-  };
-
-  onNewRootFolderSelect = ({ value }) => {
-    this.props.onNewRootFolderSelect(value);
-  };
-
-  onAddRootFolderModalClose = () => {
-    this.setState({ isAddNewRootFolderModalOpen: false });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      isWindows,
-      isFetching,
-      isPopulated,
-      isSaving,
-      error,
-      saveError,
-      items
-    } = this.props;
-
-    const hasRootFolders = items.length > 0;
-    const goodFolderExample = (isWindows) ? 'C:\\tv shows' : '/tv shows';
-    const badFolderExample = (isWindows) ? 'C:\\tv shows\\the simpsons' : '/tv shows/the simpsons';
-
-    return (
-      <PageContent title={translate('ImportSeries')}>
-        <PageContentBody>
-          {
-            isFetching && !isPopulated ?
-              <LoadingIndicator /> :
-              null
-          }
-
-          {
-            !isFetching && error ?
-              <Alert kind={kinds.DANGER}>{translate('RootFoldersLoadError')}</Alert> :
-              null
-          }
-
-          {
-            !error && isPopulated &&
-              <div>
-                <div className={styles.header}>
-                  {translate('LibraryImportSeriesHeader')}
-                </div>
-
-                <div className={styles.tips}>
-                  {translate('LibraryImportTips')}
-                  <ul>
-                    <li className={styles.tip}>
-                      <InlineMarkdown data={translate('LibraryImportTipsQualityInEpisodeFilename')} />
-                    </li>
-                    <li className={styles.tip}>
-                      <InlineMarkdown data={translate('LibraryImportTipsSeriesUseRootFolder', { goodFolderExample, badFolderExample })} />
-                    </li>
-                    <li className={styles.tip}>
-                      {translate('LibraryImportTipsDontUseDownloadsFolder')}
-                    </li>
-                  </ul>
-                </div>
-
-                {
-                  hasRootFolders ?
-                    <div className={styles.recentFolders}>
-                      <FieldSet legend={translate('RootFolders')}>
-                        <RootFolders
-                          isFetching={isFetching}
-                          isPopulated={isPopulated}
-                          error={error}
-                          items={items}
-                        />
-                      </FieldSet>
-                    </div> :
-                    null
-                }
-
-                {
-                  !isSaving && saveError ?
-                    <Alert
-                      className={styles.addErrorAlert}
-                      kind={kinds.DANGER}
-                    >
-                      {translate('AddRootFolderError')}
-
-                      <ul>
-                        {
-                          Array.isArray(saveError.responseJSON) ?
-                            saveError.responseJSON.map((e, index) => {
-                              return (
-                                <li key={index}>
-                                  {e.errorMessage}
-                                </li>
-                              );
-                            }) :
-                            <li>
-                              {
-                                JSON.stringify(saveError.responseJSON)
-                              }
-                            </li>
-                        }
-                      </ul>
-                    </Alert> :
-                    null
-                }
-
-                <div className={hasRootFolders ? undefined : styles.startImport}>
-                  <Button
-                    kind={kinds.PRIMARY}
-                    size={sizes.LARGE}
-                    onPress={this.onAddNewRootFolderPress}
-                  >
-                    <Icon
-                      className={styles.importButtonIcon}
-                      name={icons.DRIVE}
-                    />
-                    {
-                      hasRootFolders ?
-                        translate('ChooseAnotherFolder') :
-                        translate('StartImport')
-                    }
-                  </Button>
-                </div>
-
-                <FileBrowserModal
-                  isOpen={this.state.isAddNewRootFolderModalOpen}
-                  name="rootFolderPath"
-                  value=""
-                  onChange={this.onNewRootFolderSelect}
-                  onModalClose={this.onAddRootFolderModalClose}
-                />
-              </div>
-          }
-        </PageContentBody>
-      </PageContent>
-    );
-  }
-}
-
-ImportSeriesSelectFolder.propTypes = {
-  isWindows: PropTypes.bool.isRequired,
-  isFetching: PropTypes.bool.isRequired,
-  isPopulated: PropTypes.bool.isRequired,
-  isSaving: PropTypes.bool.isRequired,
-  error: PropTypes.object,
-  saveError: PropTypes.object,
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onNewRootFolderSelect: PropTypes.func.isRequired
-};
-
-export default ImportSeriesSelectFolder;
@@ -0,0 +1,164 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import Alert from 'Components/Alert';
+import FieldSet from 'Components/FieldSet';
+import FileBrowserModal from 'Components/FileBrowser/FileBrowserModal';
+import Icon from 'Components/Icon';
+import Button from 'Components/Link/Button';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import { icons, kinds, sizes } from 'Helpers/Props';
+import RootFolders from 'RootFolder/RootFolders';
+import {
+  addRootFolder,
+  fetchRootFolders,
+} from 'Store/Actions/rootFolderActions';
+import useIsWindows from 'System/useIsWindows';
+import { InputChanged } from 'typings/inputs';
+import translate from 'Utilities/String/translate';
+import styles from './ImportSeriesSelectFolder.css';
+
+function ImportSeriesSelectFolder() {
+  const dispatch = useDispatch();
+  const { isFetching, isPopulated, isSaving, error, saveError, items } =
+    useSelector((state: AppState) => state.rootFolders);
+
+  const isWindows = useIsWindows();
+
+  const [isAddNewRootFolderModalOpen, setIsAddNewRootFolderModalOpen] =
+    useState(false);
+
+  const wasSaving = usePrevious(isSaving);
+
+  const hasRootFolders = items.length > 0;
+  const goodFolderExample = isWindows ? 'C:\\tv shows' : '/tv shows';
+  const badFolderExample = isWindows
+    ? 'C:\\tv shows\\the simpsons'
+    : '/tv shows/the simpsons';
+
+  const handleAddNewRootFolderPress = useCallback(() => {
+    setIsAddNewRootFolderModalOpen(true);
+  }, []);
+
+  const handleAddRootFolderModalClose = useCallback(() => {
+    setIsAddNewRootFolderModalOpen(false);
+  }, []);
+
+  const handleNewRootFolderSelect = useCallback(
+    ({ value }: InputChanged<string>) => {
+      dispatch(addRootFolder({ path: value }));
+    },
+    [dispatch]
+  );
+
+  useEffect(() => {
+    dispatch(fetchRootFolders());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (!isSaving && wasSaving && !saveError) {
+      items.reduce((acc, item) => {
+        if (item.id > acc) {
+          return item.id;
+        }
+
+        return acc;
+      }, 0);
+    }
+  }, [isSaving, wasSaving, saveError, items]);
+
+  return (
+    <PageContent title={translate('ImportSeries')}>
+      <PageContentBody>
+        {isFetching && !isPopulated ? <LoadingIndicator /> : null}
+
+        {!isFetching && error ? (
+          <Alert kind={kinds.DANGER}>{translate('RootFoldersLoadError')}</Alert>
+        ) : null}
+
+        {!error && isPopulated && (
+          <div>
+            <div className={styles.header}>
+              {translate('LibraryImportSeriesHeader')}
+            </div>
+
+            <div className={styles.tips}>
+              {translate('LibraryImportTips')}
+              <ul>
+                <li className={styles.tip}>
+                  <InlineMarkdown
+                    data={translate(
+                      'LibraryImportTipsQualityInEpisodeFilename'
+                    )}
+                  />
+                </li>
+                <li className={styles.tip}>
+                  <InlineMarkdown
+                    data={translate('LibraryImportTipsSeriesUseRootFolder', {
+                      goodFolderExample,
+                      badFolderExample,
+                    })}
+                  />
+                </li>
+                <li className={styles.tip}>
+                  {translate('LibraryImportTipsDontUseDownloadsFolder')}
+                </li>
+              </ul>
+            </div>
+
+            {hasRootFolders ? (
+              <div className={styles.recentFolders}>
+                <FieldSet legend={translate('RootFolders')}>
+                  <RootFolders />
+                </FieldSet>
+              </div>
+            ) : null}
+
+            {!isSaving && saveError ? (
+              <Alert className={styles.addErrorAlert} kind={kinds.DANGER}>
+                {translate('AddRootFolderError')}
+
+                <ul>
+                  {Array.isArray(saveError.responseJSON) ? (
+                    saveError.responseJSON.map((e, index) => {
+                      return <li key={index}>{e.errorMessage}</li>;
+                    })
+                  ) : (
+                    <li>{JSON.stringify(saveError.responseJSON)}</li>
+                  )}
+                </ul>
+              </Alert>
+            ) : null}
+
+            <div className={hasRootFolders ? undefined : styles.startImport}>
+              <Button
+                kind={kinds.PRIMARY}
+                size={sizes.LARGE}
+                onPress={handleAddNewRootFolderPress}
+              >
+                <Icon className={styles.importButtonIcon} name={icons.DRIVE} />
+                {hasRootFolders
+                  ? translate('ChooseAnotherFolder')
+                  : translate('StartImport')}
+              </Button>
+            </div>
+
+            <FileBrowserModal
+              isOpen={isAddNewRootFolderModalOpen}
+              name="rootFolderPath"
+              value=""
+              onChange={handleNewRootFolderSelect}
+              onModalClose={handleAddRootFolderModalClose}
+            />
+          </div>
+        )}
+      </PageContentBody>
+    </PageContent>
+  );
+}
+
+export default ImportSeriesSelectFolder;
@@ -1,85 +0,0 @@
-import { push } from 'connected-react-router';
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-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(
-    createRootFoldersSelector(),
-    createSystemStatusSelector(),
-    (rootFolders, systemStatus) => {
-      return {
-        ...rootFolders,
-        isWindows: systemStatus.isWindows
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  fetchRootFolders,
-  addRootFolder,
-  push
-};
-
-class ImportSeriesSelectFolderConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    this.props.fetchRootFolders();
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      items,
-      isSaving,
-      saveError
-    } = this.props;
-
-    if (prevProps.isSaving && !isSaving && !saveError) {
-      const newRootFolders = _.differenceBy(items, prevProps.items, (item) => item.id);
-
-      if (newRootFolders.length === 1) {
-        this.props.push(`${window.Sonarr.urlBase}/add/import/${newRootFolders[0].id}`);
-      }
-    }
-  }
-
-  //
-  // Listeners
-
-  onNewRootFolderSelect = (path) => {
-    this.props.addRootFolder({ path });
-  };
-
-  //
-  // Render
-
-  render() {
-    return (
-      <ImportSeriesSelectFolder
-        {...this.props}
-        onNewRootFolderSelect={this.onNewRootFolderSelect}
-      />
-    );
-  }
-}
-
-ImportSeriesSelectFolderConnector.propTypes = {
-  isSaving: PropTypes.bool.isRequired,
-  saveError: PropTypes.object,
-  items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  fetchRootFolders: PropTypes.func.isRequired,
-  addRootFolder: PropTypes.func.isRequired,
-  push: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(ImportSeriesSelectFolderConnector);