diff --git a/frontend/src/Indexer/Info/IndexerInfoModalContent.tsx b/frontend/src/Indexer/Info/IndexerInfoModalContent.tsx index ed5c249b2..344d91a98 100644 --- a/frontend/src/Indexer/Info/IndexerInfoModalContent.tsx +++ b/frontend/src/Indexer/Info/IndexerInfoModalContent.tsx @@ -1,8 +1,6 @@ import { uniqBy } from 'lodash'; import React, { useCallback, useState } from 'react'; -import { useSelector } from 'react-redux'; import { Tab, TabList, TabPanel, Tabs } from 'react-tabs'; -import { createSelector } from 'reselect'; import Alert from 'Components/Alert'; import DescriptionList from 'Components/DescriptionList/DescriptionList'; import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem'; @@ -26,23 +24,12 @@ import DeleteIndexerModal from 'Indexer/Delete/DeleteIndexerModal'; import EditIndexerModalConnector from 'Indexer/Edit/EditIndexerModalConnector'; import PrivacyLabel from 'Indexer/Index/Table/PrivacyLabel'; import Indexer, { IndexerCapabilities } from 'Indexer/Indexer'; -import { createIndexerSelectorForHook } from 'Store/Selectors/createIndexerSelector'; +import useIndexer from 'Indexer/useIndexer'; import translate from 'Utilities/String/translate'; import IndexerHistory from './History/IndexerHistory'; import styles from './IndexerInfoModalContent.css'; -function createIndexerInfoItemSelector(indexerId: number) { - return createSelector( - createIndexerSelectorForHook(indexerId), - (indexer?: Indexer) => { - return { - indexer, - }; - } - ); -} - -const tabs = ['details', 'categories', 'history', 'stats']; +const TABS = ['details', 'categories', 'history', 'stats']; interface IndexerInfoModalContentProps { indexerId: number; @@ -51,9 +38,7 @@ interface IndexerInfoModalContentProps { } function IndexerInfoModalContent(props: IndexerInfoModalContentProps) { - const { indexerId, onCloneIndexerPress } = props; - - const { indexer } = useSelector(createIndexerInfoItemSelector(indexerId)); + const { indexerId, onModalClose, onCloneIndexerPress } = props; const { id, @@ -67,53 +52,53 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) { protocol, privacy, capabilities = {} as IndexerCapabilities, - } = indexer as Indexer; + } = useIndexer(indexerId) as Indexer; - const { onModalClose } = props; - - const baseUrl = - fields.find((field) => field.name === 'baseUrl')?.value ?? - (Array.isArray(indexerUrls) ? indexerUrls[0] : undefined); - - const vipExpiration = - fields.find((field) => field.name === 'vipExpiration')?.value ?? undefined; - - const [selectedTab, setSelectedTab] = useState(tabs[0]); + const [selectedTab, setSelectedTab] = useState(TABS[0]); const [isEditIndexerModalOpen, setIsEditIndexerModalOpen] = useState(false); const [isDeleteIndexerModalOpen, setIsDeleteIndexerModalOpen] = useState(false); - const onTabSelect = useCallback( - (index: number) => { - const selectedTab = tabs[index]; + const handleTabSelect = useCallback( + (selectedIndex: number) => { + const selectedTab = TABS[selectedIndex]; setSelectedTab(selectedTab); }, [setSelectedTab] ); - const onEditIndexerPress = useCallback(() => { + const handleEditIndexerPress = useCallback(() => { setIsEditIndexerModalOpen(true); }, [setIsEditIndexerModalOpen]); - const onEditIndexerModalClose = useCallback(() => { + const handleEditIndexerModalClose = useCallback(() => { setIsEditIndexerModalOpen(false); }, [setIsEditIndexerModalOpen]); - const onDeleteIndexerPress = useCallback(() => { + const handleDeleteIndexerPress = useCallback(() => { setIsEditIndexerModalOpen(false); setIsDeleteIndexerModalOpen(true); }, [setIsDeleteIndexerModalOpen]); - const onDeleteIndexerModalClose = useCallback(() => { + const handleDeleteIndexerModalClose = useCallback(() => { setIsDeleteIndexerModalOpen(false); onModalClose(); }, [setIsDeleteIndexerModalOpen, onModalClose]); - const onCloneIndexerPressWrapper = useCallback(() => { + const handleCloneIndexerPressWrapper = useCallback(() => { onCloneIndexerPress(id); onModalClose(); }, [id, onCloneIndexerPress, onModalClose]); + const baseUrl = + fields.find((field) => field.name === 'baseUrl')?.value ?? + (Array.isArray(indexerUrls) ? indexerUrls[0] : undefined); + + const indexerUrl = baseUrl?.replace(/(:\/\/)api\./, '$1'); + + const vipExpiration = + fields.find((field) => field.name === 'vipExpiration')?.value ?? undefined; + return ( {`${name}`} @@ -121,8 +106,8 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) { @@ -178,10 +163,8 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) { {translate('IndexerSite')} - {baseUrl ? ( - - {baseUrl.replace(/(:\/\/)api\./, '$1')} - + {indexerUrl ? ( + {indexerUrl} ) : ( '-' )} @@ -365,16 +348,16 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) { -
- +
@@ -382,14 +365,14 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
); diff --git a/frontend/src/Indexer/useIndexer.ts b/frontend/src/Indexer/useIndexer.ts new file mode 100644 index 000000000..a1b2ffa9d --- /dev/null +++ b/frontend/src/Indexer/useIndexer.ts @@ -0,0 +1,19 @@ +import { useSelector } from 'react-redux'; +import { createSelector } from 'reselect'; +import AppState from 'App/State/AppState'; + +export function createIndexerSelector(indexerId?: number) { + return createSelector( + (state: AppState) => state.indexers.itemMap, + (state: AppState) => state.indexers.items, + (itemMap, allIndexers) => { + return indexerId ? allIndexers[itemMap[indexerId]] : undefined; + } + ); +} + +function useIndexer(indexerId?: number) { + return useSelector(createIndexerSelector(indexerId)); +} + +export default useIndexer;