You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
3.3 KiB
117 lines
3.3 KiB
import classNames from 'classnames';
|
|
import React from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import { createSelector } from 'reselect';
|
|
import { ColorImpairedConsumer } from 'App/ColorImpairedContext';
|
|
import IndexerAppState from 'App/State/IndexerAppState';
|
|
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: IndexerAppState) => {
|
|
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>
|
|
);
|
|
}
|