New: Delete files for Select Series

Closes #5110

frontend/src/Series/Index/Select/Delete/DeleteSeriesModalContent.tsx

@@ -1,6 +1,4 @@
-import { orderBy } from 'lodash';
-import React, { useCallback, useMemo, useState } from 'react';
-import { useSelect } from 'App/Select/SelectContext';
+import React, { useCallback, useState } from 'react';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
@@ -10,15 +8,15 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds } from 'Helpers/Props';
-import Series from 'Series/Series';
 import {
   setSeriesDeleteOptions,
   useSeriesDeleteOptions,
 } from 'Series/seriesOptionsStore';
-import useSeries, { useBulkDeleteSeries } from 'Series/useSeries';
+import { useBulkDeleteSeries } from 'Series/useSeries';
 import { InputChanged } from 'typings/inputs';
-import formatBytes from 'Utilities/Number/formatBytes';
 import translate from 'Utilities/String/translate';
+import SeriesDeleteList from './SeriesDeleteList';
+import useSelectedSeriesStats from './useSelectedSeriesStats';
 import styles from './DeleteSeriesModalContent.css';
 
 export interface DeleteSeriesModalContentProps {
@@ -29,19 +27,10 @@ function DeleteSeriesModalContent({
   onModalClose,
 }: DeleteSeriesModalContentProps) {
   const { addImportListExclusion } = useSeriesDeleteOptions();
-  const { data: allSeries } = useSeries();
   const { bulkDeleteSeries } = useBulkDeleteSeries();
   const [deleteFiles, setDeleteFiles] = useState(false);
-  const { useSelectedIds } = useSelect<Series>();
-  const seriesIds = useSelectedIds();
-
-  const series = useMemo((): Series[] => {
-    const seriesList = seriesIds.map((id) => {
-      return allSeries.find((s) => s.id === id);
-    }) as Series[];
-
-    return orderBy(seriesList, ['sortTitle']);
-  }, [allSeries, seriesIds]);
+  const { series, seriesIds, totalEpisodeFileCount, totalSizeOnDisk } =
+    useSelectedSeriesStats();
 
   const onDeleteFilesChange = useCallback(
     ({ value }: InputChanged<boolean>) => {
@@ -78,23 +67,6 @@ function DeleteSeriesModalContent({
     onModalClose,
   ]);
 
-  const { totalEpisodeFileCount, totalSizeOnDisk } = useMemo(() => {
-    return series.reduce(
-      (acc, { statistics = {} }) => {
-        const { episodeFileCount = 0, sizeOnDisk = 0 } = statistics;
-
-        acc.totalEpisodeFileCount += episodeFileCount;
-        acc.totalSizeOnDisk += sizeOnDisk;
-
-        return acc;
-      },
-      {
-        totalEpisodeFileCount: 0,
-        totalSizeOnDisk: 0,
-      }
-    );
-  }, [series]);
-
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>{translate('DeleteSelectedSeries')}</ModalHeader>
@@ -145,45 +117,13 @@ function DeleteSeriesModalContent({
               })}
         </div>
 
-        <ul>
-          {series.map(({ title, path, statistics = {} }) => {
-            const { episodeFileCount = 0, sizeOnDisk = 0 } = statistics;
-
-            return (
-              <li key={title}>
-                <span>{title}</span>
-
-                {deleteFiles && (
-                  <span>
-                    <span className={styles.pathContainer}>
-                      -<span className={styles.path}>{path}</span>
-                    </span>
-
-                    {!!episodeFileCount && (
-                      <span className={styles.statistics}>
-                        (
-                        {translate('DeleteSeriesFolderEpisodeCount', {
-                          episodeFileCount,
-                          size: formatBytes(sizeOnDisk),
-                        })}
-                        )
-                      </span>
-                    )}
-                  </span>
-                )}
-              </li>
-            );
-          })}
-        </ul>
-
-        {deleteFiles && !!totalEpisodeFileCount ? (
-          <div className={styles.deleteFilesMessage}>
-            {translate('DeleteSeriesFolderEpisodeCount', {
-              episodeFileCount: totalEpisodeFileCount,
-              size: formatBytes(totalSizeOnDisk),
-            })}
-          </div>
-        ) : null}
+        <SeriesDeleteList
+          series={series}
+          showFileDetails={deleteFiles}
+          totalEpisodeFileCount={totalEpisodeFileCount}
+          totalSizeOnDisk={totalSizeOnDisk}
+          styles={styles}
+        />
       </ModalBody>
 
       <ModalFooter>

frontend/src/Series/Index/Select/Delete/Files/DeleteSeriesFilesModal.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import DeleteSeriesModalContent, {
+  DeleteSeriesFilesModalContentProps,
+} from './DeleteSeriesFilesModalContent';
+
+interface DeleteSeriesFilesModalProps
+  extends DeleteSeriesFilesModalContentProps {
+  isOpen: boolean;
+}
+
+function DeleteSeriesFilesModal(props: DeleteSeriesFilesModalProps) {
+  const { isOpen, onModalClose } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <DeleteSeriesModalContent onModalClose={onModalClose} />
+    </Modal>
+  );
+}
+
+export default DeleteSeriesFilesModal;

frontend/src/Series/Index/Select/Delete/Files/DeleteSeriesFilesModalContent.css

@@ -0,0 +1,23 @@
+.message {
+  margin-bottom: 10px;
+}
+
+.pathContainer {
+  margin-left: 5px;
+}
+
+.path {
+  margin-left: 5px;
+  color: var(--dangerColor);
+  font-weight: bold;
+}
+
+.statistics {
+  margin-left: 5px;
+  color: var(--warningColor);
+}
+
+.deleteFilesMessage {
+  margin-top: 20px;
+  color: var(--warningColor);
+}

frontend/src/Series/Index/Select/Delete/Files/DeleteSeriesFilesModalContent.css.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'deleteFilesMessage': string;
+  'message': string;
+  'path': string;
+  'pathContainer': string;
+  'statistics': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Series/Index/Select/Delete/Files/DeleteSeriesFilesModalContent.tsx

@@ -0,0 +1,66 @@
+import React, { useCallback } from 'react';
+import CommandNames from 'Commands/CommandNames';
+import { useExecuteCommand } from 'Commands/useCommands';
+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 { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import SeriesDeleteList from '../SeriesDeleteList';
+import useSelectedSeriesStats from '../useSelectedSeriesStats';
+import styles from './DeleteSeriesFilesModalContent.css';
+
+export interface DeleteSeriesFilesModalContentProps {
+  onModalClose(): void;
+}
+
+function DeleteSeriesFilesModalContent({
+  onModalClose,
+}: DeleteSeriesFilesModalContentProps) {
+  const { series, seriesIds, totalEpisodeFileCount, totalSizeOnDisk } =
+    useSelectedSeriesStats();
+  const executeCommand = useExecuteCommand();
+
+  const onDeleteSeriesConfirmed = useCallback(() => {
+    executeCommand({
+      name: CommandNames.DeleteSeriesFiles,
+      seriesIds,
+    });
+
+    onModalClose();
+  }, [seriesIds, executeCommand, onModalClose]);
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('DeleteSelectedSeriesFiles')}</ModalHeader>
+
+      <ModalBody>
+        <div className={styles.message}>
+          {translate('DeleteSeriesFilesConfirmation', {
+            count: series.length,
+          })}
+        </div>
+
+        <SeriesDeleteList
+          series={series}
+          showFileDetails={true}
+          totalEpisodeFileCount={totalEpisodeFileCount}
+          totalSizeOnDisk={totalSizeOnDisk}
+          styles={styles}
+        />
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+        <Button kind={kinds.DANGER} onPress={onDeleteSeriesConfirmed}>
+          {translate('Delete')}
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default DeleteSeriesFilesModalContent;

frontend/src/Series/Index/Select/Delete/SeriesDeleteList.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import Series from 'Series/Series';
+import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
+
+interface SeriesDeleteListStyles {
+  pathContainer: string;
+  path: string;
+  statistics: string;
+  deleteFilesMessage: string;
+}
+
+interface SeriesDeleteListProps {
+  series: Series[];
+  showFileDetails: boolean;
+  totalEpisodeFileCount: number;
+  totalSizeOnDisk: number;
+  styles: SeriesDeleteListStyles;
+}
+
+function SeriesDeleteList({
+  series,
+  showFileDetails,
+  totalEpisodeFileCount,
+  totalSizeOnDisk,
+  styles,
+}: SeriesDeleteListProps) {
+  return (
+    <>
+      <ul>
+        {series.map(({ title, path, statistics = {} }) => {
+          const { episodeFileCount = 0, sizeOnDisk = 0 } = statistics;
+
+          return (
+            <li key={title}>
+              <span>{title}</span>
+
+              {showFileDetails ? (
+                <span>
+                  <span className={styles.pathContainer}>
+                    -<span className={styles.path}>{path}</span>
+                  </span>
+
+                  {episodeFileCount ? (
+                    <span className={styles.statistics}>
+                      (
+                      {translate('DeleteSeriesFolderEpisodeCount', {
+                        episodeFileCount,
+                        size: formatBytes(sizeOnDisk),
+                      })}
+                      )
+                    </span>
+                  ) : null}
+                </span>
+              ) : null}
+            </li>
+          );
+        })}
+      </ul>
+
+      {showFileDetails && totalEpisodeFileCount ? (
+        <div className={styles.deleteFilesMessage}>
+          {translate('DeleteSeriesFolderEpisodeCount', {
+            episodeFileCount: totalEpisodeFileCount,
+            size: formatBytes(totalSizeOnDisk),
+          })}
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+export default SeriesDeleteList;

frontend/src/Series/Index/Select/Delete/useSelectedSeriesStats.ts

@@ -0,0 +1,45 @@
+import { useMemo } from 'react';
+import { useSelect } from 'App/Select/SelectContext';
+import Series from 'Series/Series';
+import useSeries from 'Series/useSeries';
+import sortByProp from 'Utilities/Array/sortByProp';
+
+function useSelectedSeriesStats() {
+  const { data: allSeries } = useSeries();
+  const { useSelectedIds } = useSelect<Series>();
+  const seriesIds = useSelectedIds();
+
+  const series = useMemo((): Series[] => {
+    const seriesList = seriesIds.map((id) => {
+      return allSeries.find((s) => s.id === id);
+    }) as Series[];
+
+    return seriesList.sort(sortByProp('sortTitle'));
+  }, [allSeries, seriesIds]);
+
+  const { totalEpisodeFileCount, totalSizeOnDisk } = useMemo(() => {
+    return series.reduce(
+      (acc, { statistics = {} }) => {
+        const { episodeFileCount = 0, sizeOnDisk = 0 } = statistics;
+
+        acc.totalEpisodeFileCount += episodeFileCount;
+        acc.totalSizeOnDisk += sizeOnDisk;
+
+        return acc;
+      },
+      {
+        totalEpisodeFileCount: 0,
+        totalSizeOnDisk: 0,
+      }
+    );
+  }, [series]);
+
+  return {
+    series,
+    seriesIds,
+    totalEpisodeFileCount,
+    totalSizeOnDisk,
+  };
+}
+
+export default useSelectedSeriesStats;

frontend/src/Series/Index/Select/SeriesIndexSelectFooter.tsx

@@ -14,6 +14,7 @@ import {
 } from 'Series/useSeries';
 import translate from 'Utilities/String/translate';
 import DeleteSeriesModal from './Delete/DeleteSeriesModal';
+import DeleteSeriesFilesModal from './Delete/Files/DeleteSeriesFilesModal';
 import EditSeriesModal from './Edit/EditSeriesModal';
 import OrganizeSeriesModal from './Organize/OrganizeSeriesModal';
 import ChangeMonitoringModal from './SeasonPass/ChangeMonitoringModal';
@@ -34,6 +35,9 @@ function SeriesIndexSelectFooter() {
   const { updateSeriesMonitor, isUpdatingSeriesMonitor } =
     useUpdateSeriesMonitor();
   const { isBulkDeleting, bulkDeleteError } = useBulkDeleteSeries();
+  const isDeleteFilesCommandExecuting = useCommandExecuting(
+    CommandNames.DeleteSeriesFiles
+  );
 
   const isOrganizingSeries = useCommandExecuting(CommandNames.RenameSeries);
 
@@ -46,6 +50,7 @@ function SeriesIndexSelectFooter() {
   const [isTagsModalOpen, setIsTagsModalOpen] = useState(false);
   const [isMonitoringModalOpen, setIsMonitoringModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isDeleteFilesModalOpen, setIsDeleteFilesModalOpen] = useState(false);
   const [isSavingSeries, setIsSavingSeries] = useState(false);
   const [isSavingTags, setIsSavingTags] = useState(false);
   const [isSavingMonitoring, setIsSavingMonitoring] = useState(false);
@@ -132,6 +137,14 @@ function SeriesIndexSelectFooter() {
     setIsDeleteModalOpen(false);
   }, []);
 
+  const onDeleteFilesPress = useCallback(() => {
+    setIsDeleteFilesModalOpen(true);
+  }, []);
+
+  const onDeleteFilesModalClose = useCallback(() => {
+    setIsDeleteFilesModalOpen(false);
+  }, []);
+
   useEffect(() => {
     if (!isSaving) {
       setIsSavingSeries(false);
@@ -195,6 +208,15 @@ function SeriesIndexSelectFooter() {
           >
             {translate('Delete')}
           </SpinnerButton>
+
+          <SpinnerButton
+            kind={kinds.DANGER}
+            isSpinning={isDeleteFilesCommandExecuting}
+            isDisabled={!anySelected || isDeleteFilesCommandExecuting}
+            onPress={onDeleteFilesPress}
+          >
+            {translate('DeleteFiles')}
+          </SpinnerButton>
         </div>
       </div>
 
@@ -229,6 +251,11 @@ function SeriesIndexSelectFooter() {
         isOpen={isDeleteModalOpen}
         onModalClose={onDeleteModalClose}
       />
+
+      <DeleteSeriesFilesModal
+        isOpen={isDeleteFilesModalOpen}
+        onModalClose={onDeleteFilesModalClose}
+      />
     </PageContentFooter>
   );
 }