diff --git a/frontend/src/Indexer/Add/AddIndexerModal.js b/frontend/src/Indexer/Add/AddIndexerModal.js index 4c4db24b9..9344c8130 100644 --- a/frontend/src/Indexer/Add/AddIndexerModal.js +++ b/frontend/src/Indexer/Add/AddIndexerModal.js @@ -1,6 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import Modal from 'Components/Modal/Modal'; +import { sizes } from 'Helpers/Props'; import AddIndexerModalContentConnector from './AddIndexerModalContentConnector'; import styles from './AddIndexerModal.css'; @@ -8,6 +9,7 @@ function AddIndexerModal({ isOpen, onModalClose, onSelectIndexer, ...otherProps return ( diff --git a/frontend/src/Indexer/Add/AddIndexerModalContent.js b/frontend/src/Indexer/Add/AddIndexerModalContent.js index 81e911467..f4050560e 100644 --- a/frontend/src/Indexer/Add/AddIndexerModalContent.js +++ b/frontend/src/Indexer/Add/AddIndexerModalContent.js @@ -16,7 +16,7 @@ import TableBody from 'Components/Table/TableBody'; import { kinds, scrollDirections } from 'Helpers/Props'; import getErrorMessage from 'Utilities/Object/getErrorMessage'; import translate from 'Utilities/String/translate'; -import SelectIndexerRowConnector from './SelectIndexerRowConnector'; +import SelectIndexerRow from './SelectIndexerRow'; import styles from './AddIndexerModalContent.css'; const columns = [ @@ -49,6 +49,12 @@ const columns = [ label: () => translate('Privacy'), isSortable: true, isVisible: true + }, + { + name: 'categories', + label: () => translate('Categories'), + isSortable: false, + isVisible: true } ]; @@ -260,7 +266,7 @@ class AddIndexerModalContent extends Component { { filteredIndexers.map((indexer) => ( - { + createAllIndexersSelector(), + (indexers, allIndexers) => { const { isFetching, isPopulated, @@ -19,11 +22,19 @@ function createMapStateToProps() { sortKey } = indexers; + const indexerList = items.map((item) => { + const { definitionName } = item; + return { + ...item, + isExistingIndexer: some(allIndexers, { definitionName }) + }; + }); + return { isFetching, isPopulated, error, - indexers: items, + indexers: indexerList, sortKey, sortDirection }; diff --git a/frontend/src/Indexer/Add/SelectIndexerRow.js b/frontend/src/Indexer/Add/SelectIndexerRow.js deleted file mode 100644 index 7e1c994bf..000000000 --- a/frontend/src/Indexer/Add/SelectIndexerRow.js +++ /dev/null @@ -1,90 +0,0 @@ -import PropTypes from 'prop-types'; -import React, { Component } from 'react'; -import Icon from 'Components/Icon'; -import TableRowCell from 'Components/Table/Cells/TableRowCell'; -import TableRowButton from 'Components/Table/TableRowButton'; -import { icons } from 'Helpers/Props'; -import ProtocolLabel from 'Indexer/Index/Table/ProtocolLabel'; -import firstCharToUpper from 'Utilities/String/firstCharToUpper'; -import translate from 'Utilities/String/translate'; -import styles from './SelectIndexerRow.css'; - -class SelectIndexerRow extends Component { - - // - // Listeners - - onPress = () => { - const { - implementation, - implementationName, - name - } = this.props; - - this.props.onIndexerSelect({ implementation, implementationName, name }); - }; - - // - // Render - - render() { - const { - protocol, - privacy, - name, - language, - description, - isExistingIndexer - } = this.props; - - return ( - - - - - - - {name} - { - isExistingIndexer ? - : - null - } - - - - {language} - - - - {description} - - - - {translate(firstCharToUpper(privacy))} - - - ); - } -} - -SelectIndexerRow.propTypes = { - name: PropTypes.string.isRequired, - protocol: PropTypes.string.isRequired, - privacy: PropTypes.string.isRequired, - language: PropTypes.string.isRequired, - description: PropTypes.string.isRequired, - implementation: PropTypes.string.isRequired, - implementationName: PropTypes.string.isRequired, - onIndexerSelect: PropTypes.func.isRequired, - isExistingIndexer: PropTypes.bool.isRequired -}; - -export default SelectIndexerRow; diff --git a/frontend/src/Indexer/Add/SelectIndexerRow.tsx b/frontend/src/Indexer/Add/SelectIndexerRow.tsx new file mode 100644 index 000000000..ab6850573 --- /dev/null +++ b/frontend/src/Indexer/Add/SelectIndexerRow.tsx @@ -0,0 +1,75 @@ +import React, { useCallback } from 'react'; +import Icon from 'Components/Icon'; +import TableRowCell from 'Components/Table/Cells/TableRowCell'; +import TableRowButton from 'Components/Table/TableRowButton'; +import { icons } from 'Helpers/Props'; +import CapabilitiesLabel from 'Indexer/Index/Table/CapabilitiesLabel'; +import ProtocolLabel from 'Indexer/Index/Table/ProtocolLabel'; +import { IndexerCapabilities } from 'Indexer/Indexer'; +import firstCharToUpper from 'Utilities/String/firstCharToUpper'; +import translate from 'Utilities/String/translate'; +import styles from './SelectIndexerRow.css'; + +interface SelectIndexerRowProps { + name: string; + protocol: string; + privacy: string; + language: string; + description: string; + capabilities: IndexerCapabilities; + implementation: string; + implementationName: string; + isExistingIndexer: boolean; + onIndexerSelect(...args: unknown[]): void; +} + +function SelectIndexerRow(props: SelectIndexerRowProps) { + const { + name, + protocol, + privacy, + language, + description, + capabilities, + implementation, + implementationName, + isExistingIndexer, + onIndexerSelect, + } = props; + + const onPress = useCallback(() => { + onIndexerSelect({ implementation, implementationName, name }); + }, [implementation, implementationName, name, onIndexerSelect]); + + return ( + + + + + + + {name} + {isExistingIndexer ? ( + + ) : null} + + + {language} + + {description} + + {translate(firstCharToUpper(privacy))} + + + + + + ); +} + +export default SelectIndexerRow; diff --git a/frontend/src/Indexer/Add/SelectIndexerRowConnector.js b/frontend/src/Indexer/Add/SelectIndexerRowConnector.js deleted file mode 100644 index f507689c8..000000000 --- a/frontend/src/Indexer/Add/SelectIndexerRowConnector.js +++ /dev/null @@ -1,18 +0,0 @@ - -import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; -import createExistingIndexerSelector from 'Store/Selectors/createExistingIndexerSelector'; -import SelectIndexerRow from './SelectIndexerRow'; - -function createMapStateToProps() { - return createSelector( - createExistingIndexerSelector(), - (isExistingIndexer, dimensions) => { - return { - isExistingIndexer - }; - } - ); -} - -export default connect(createMapStateToProps)(SelectIndexerRow); diff --git a/frontend/src/Indexer/Index/Table/CapabilitiesLabel.tsx b/frontend/src/Indexer/Index/Table/CapabilitiesLabel.tsx index 5f742d902..c832806ed 100644 --- a/frontend/src/Indexer/Index/Table/CapabilitiesLabel.tsx +++ b/frontend/src/Indexer/Index/Table/CapabilitiesLabel.tsx @@ -1,3 +1,4 @@ +import { uniqBy } from 'lodash'; import React from 'react'; import Label from 'Components/Label'; import { IndexerCapabilities } from 'Indexer/Indexer'; @@ -23,14 +24,18 @@ function CapabilitiesLabel(props: CapabilitiesLabelProps) { ); } - const nameList = Array.from( - new Set(filteredList.map((item) => item.name).sort()) + const indexerCategories = uniqBy(filteredList, 'id').sort( + (a, b) => a.id - b.id ); return ( - {nameList.map((category) => { - return ; + {indexerCategories.map((category) => { + return ( + + ); })} {filteredList.length === 0 ? : null} diff --git a/frontend/src/Search/Table/CategoryLabel.js b/frontend/src/Search/Table/CategoryLabel.js deleted file mode 100644 index 5c076c521..000000000 --- a/frontend/src/Search/Table/CategoryLabel.js +++ /dev/null @@ -1,43 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import Label from 'Components/Label'; -import Tooltip from 'Components/Tooltip/Tooltip'; -import { kinds, tooltipPositions } from 'Helpers/Props'; - -function CategoryLabel({ categories }) { - const sortedCategories = categories.filter((cat) => cat.name !== undefined).sort((c) => c.id); - - if (categories?.length === 0) { - return ( - Unknown} - tooltip="Please report this issue to the GitHub as this shouldn't be happening" - position={tooltipPositions.LEFT} - /> - ); - } - - return ( - - { - sortedCategories.map((category) => { - return ( - - ); - }) - } - - ); -} - -CategoryLabel.defaultProps = { - categories: [] -}; - -CategoryLabel.propTypes = { - categories: PropTypes.arrayOf(PropTypes.object).isRequired -}; - -export default CategoryLabel; diff --git a/frontend/src/Search/Table/CategoryLabel.tsx b/frontend/src/Search/Table/CategoryLabel.tsx new file mode 100644 index 000000000..4cfdeb1b2 --- /dev/null +++ b/frontend/src/Search/Table/CategoryLabel.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import Label from 'Components/Label'; +import Tooltip from 'Components/Tooltip/Tooltip'; +import { kinds, tooltipPositions } from 'Helpers/Props'; +import { IndexerCategory } from 'Indexer/Indexer'; +import translate from 'Utilities/String/translate'; + +interface CategoryLabelProps { + categories: IndexerCategory[]; +} + +function CategoryLabel({ categories = [] }: CategoryLabelProps) { + if (categories?.length === 0) { + return ( + {translate('Unknown')}} + tooltip="Please report this issue to the GitHub as this shouldn't be happening" + position={tooltipPositions.LEFT} + /> + ); + } + + const sortedCategories = categories + .filter((cat) => cat.name !== undefined) + .sort((a, b) => a.id - b.id); + + return ( + + {sortedCategories.map((category) => { + return ; + })} + + ); +} + +export default CategoryLabel;