Refactor Indexer index to use react-window

(cherry picked from commit d022679b7dcbce3cec98e6a1fd0879e3c0d92523)
2026-04-21 22:25:03 -04:00 · 2023-01-05 18:20:49 -08:00
parent c2599ef2e7
commit c0383ad5f5
314 changed files with 4928 additions and 3017 deletions
@@ -0,0 +1,115 @@
+import classNames from 'classnames';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import { ColorImpairedConsumer } from 'App/ColorImpairedContext';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import createDeepEqualSelector from 'Store/Selectors/createDeepEqualSelector';
+import translate from 'Utilities/String/translate';
+import styles from './IndexerIndexFooter.css';
+
+function createUnoptimizedSelector() {
+  return createSelector(
+    createClientSideCollectionSelector('indexers', 'indexerIndex'),
+    (indexers) => {
+      return indexers.items.map((s) => {
+        const { protocol, privacy, enable } = s;
+
+        return {
+          protocol,
+          privacy,
+          enable,
+        };
+      });
+    }
+  );
+}
+
+function createIndexersSelector() {
+  return createDeepEqualSelector(
+    createUnoptimizedSelector(),
+    (indexers) => indexers
+  );
+}
+
+export default function IndexerIndexFooter() {
+  const indexers = useSelector(createIndexersSelector());
+  const count = indexers.length;
+  let enabled = 0;
+  let torrent = 0;
+
+  indexers.forEach((s) => {
+    if (s.enable) {
+      enabled += 1;
+    }
+
+    if (s.protocol === 'torrent') {
+      torrent++;
+    }
+  });
+
+  return (
+    <ColorImpairedConsumer>
+      {(enableColorImpairedMode) => {
+        return (
+          <div className={styles.footer}>
+            <div>
+              <div className={styles.legendItem}>
+                <div className={styles.enabled} />
+                <div>{translate('Enabled')}</div>
+              </div>
+
+              <div className={styles.legendItem}>
+                <div className={styles.redirected} />
+                <div>{translate('EnabledRedirected')}</div>
+              </div>
+
+              <div className={styles.legendItem}>
+                <div className={styles.disabled} />
+                <div>{translate('Disabled')}</div>
+              </div>
+
+              <div className={styles.legendItem}>
+                <div
+                  className={classNames(
+                    styles.error,
+                    enableColorImpairedMode && 'colorImpaired'
+                  )}
+                />
+                <div>{translate('Error')}</div>
+              </div>
+            </div>
+
+            <div className={styles.statistics}>
+              <DescriptionList>
+                <DescriptionListItem
+                  title={translate('Indexers')}
+                  data={count}
+                />
+
+                <DescriptionListItem
+                  title={translate('Enabled')}
+                  data={enabled}
+                />
+              </DescriptionList>
+
+              <DescriptionList>
+                <DescriptionListItem
+                  title={translate('Torrent')}
+                  data={torrent}
+                />
+
+                <DescriptionListItem
+                  title={translate('Usenet')}
+                  data={count - torrent}
+                />
+              </DescriptionList>
+            </div>
+          </div>
+        );
+      }}
+    </ColorImpairedConsumer>
+  );
+}