Convert Import Series to TypeScript

2026-04-20 21:54:58 -04:00 · 2025-01-12 19:39:29 -08:00
parent ab1f8bdbd9
commit 6f871a1bfb
54 changed files with 1614 additions and 2320 deletions
@@ -0,0 +1,128 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router';
+import { SelectProvider } from 'App/SelectContext';
+import AppState from 'App/State/AppState';
+import Alert from 'Components/Alert';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import { kinds } from 'Helpers/Props';
+import { setAddSeriesDefault } from 'Store/Actions/addSeriesActions';
+import { clearImportSeries } from 'Store/Actions/importSeriesActions';
+import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
+import translate from 'Utilities/String/translate';
+import ImportSeriesFooter from './ImportSeriesFooter';
+import ImportSeriesTable from './ImportSeriesTable';
+
+function ImportSeries() {
+  const dispatch = useDispatch();
+  const { rootFolderId: rootFolderIdString } = useParams<{
+    rootFolderId: string;
+  }>();
+  const rootFolderId = parseInt(rootFolderIdString);
+
+  const {
+    isFetching: rootFoldersFetching,
+    isPopulated: rootFoldersPopulated,
+    error: rootFoldersError,
+    items: rootFolders,
+  } = useSelector((state: AppState) => state.rootFolders);
+
+  const { path, unmappedFolders } = useMemo(() => {
+    const rootFolder = rootFolders.find((r) => r.id === rootFolderId);
+
+    return {
+      path: rootFolder?.path ?? '',
+      unmappedFolders:
+        rootFolder?.unmappedFolders.map((unmappedFolders) => {
+          return {
+            ...unmappedFolders,
+            id: unmappedFolders.name,
+          };
+        }) ?? [],
+    };
+  }, [rootFolders, rootFolderId]);
+
+  const qualityProfiles = useSelector(
+    (state: AppState) => state.settings.qualityProfiles.items
+  );
+
+  const defaultQualityProfileId = useSelector(
+    (state: AppState) => state.addSeries.defaults.qualityProfileId
+  );
+
+  const scrollerRef = useRef<HTMLDivElement>(null);
+
+  const items = useMemo(() => {
+    return unmappedFolders.map((unmappedFolder) => {
+      return {
+        ...unmappedFolder,
+        id: unmappedFolder.name,
+      };
+    });
+  }, [unmappedFolders]);
+
+  useEffect(() => {
+    dispatch(fetchRootFolders({ id: rootFolderId, timeout: false }));
+
+    return () => {
+      dispatch(clearImportSeries());
+    };
+  }, [rootFolderId, dispatch]);
+
+  useEffect(() => {
+    if (
+      !defaultQualityProfileId ||
+      !qualityProfiles.some((p) => p.id === defaultQualityProfileId)
+    ) {
+      dispatch(
+        setAddSeriesDefault({ qualityProfileId: qualityProfiles[0].id })
+      );
+    }
+  }, [defaultQualityProfileId, qualityProfiles, dispatch]);
+
+  return (
+    <SelectProvider items={items}>
+      <PageContent title={translate('ImportSeries')}>
+        <PageContentBody ref={scrollerRef}>
+          {rootFoldersFetching ? <LoadingIndicator /> : null}
+
+          {!rootFoldersFetching && !!rootFoldersError ? (
+            <Alert kind={kinds.DANGER}>
+              {translate('RootFoldersLoadError')}
+            </Alert>
+          ) : null}
+
+          {!rootFoldersError &&
+          !rootFoldersFetching &&
+          rootFoldersPopulated &&
+          !unmappedFolders.length ? (
+            <Alert kind={kinds.INFO}>
+              {translate('AllSeriesInRootFolderHaveBeenImported', { path })}
+            </Alert>
+          ) : null}
+
+          {!rootFoldersError &&
+          !rootFoldersFetching &&
+          rootFoldersPopulated &&
+          !!unmappedFolders.length &&
+          scrollerRef.current ? (
+            <ImportSeriesTable
+              unmappedFolders={unmappedFolders}
+              scrollerRef={scrollerRef}
+            />
+          ) : null}
+        </PageContentBody>
+
+        {!rootFoldersError &&
+        !rootFoldersFetching &&
+        !!unmappedFolders.length ? (
+          <ImportSeriesFooter />
+        ) : null}
+      </PageContent>
+    </SelectProvider>
+  );
+}
+
+export default ImportSeries;