From d3d732d921e2adbb3d9361e087553362278c63a3 Mon Sep 17 00:00:00 2001 From: anonymoussprocket Date: Thu, 28 Mar 2019 13:36:17 -0400 Subject: [PATCH 01/38] - dynamic address circles --- src/components/CustomTableRow/index.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/CustomTableRow/index.tsx b/src/components/CustomTableRow/index.tsx index 2245b33c..82500186 100755 --- a/src/components/CustomTableRow/index.tsx +++ b/src/components/CustomTableRow/index.tsx @@ -50,10 +50,11 @@ interface Props { export const displayType = (network, shortenedItem, item, name) => { if (name === 'account_id' || name === 'manager') { + let colors = Buffer.from(Buffer.from(item[name].substring(3, 6) + item[name].slice(-3), 'utf8').map(b => Math.floor((b - 48) * 255)/74)).toString('hex'); return ( - - + + = props => { ) { const hashRepresentation = item[hash]; const firstHalf = hashRepresentation.substring(0, 6); - const secondHalf = hashRepresentation.substring( - hashRepresentation.length - 6, - hashRepresentation.length - ); + const secondHalf = hashRepresentation.slice(-6); const newHash = `${firstHalf}...${secondHalf}`; shortenedItem[hash] = newHash; } From 046618afeeb3ccd7d3f0cb3f1d3b54dc54c85cee Mon Sep 17 00:00:00 2001 From: developer0623 Date: Thu, 25 Apr 2019 23:40:20 -0400 Subject: [PATCH 02/38] 1: modified the columnsDisplay, 2: modified the filter structure on store 3: refactored App.ts --- src/components/ColumnsDisplay/index.tsx | 110 +++++++------ src/components/CustomTableRow/index.tsx | 1 - src/components/FilterPanel/index.tsx | 200 ++++++++---------------- src/components/FilterSelect/index.tsx | 4 +- src/components/SettingsPanel/index.tsx | 27 +--- src/components/ValueInput/index.tsx | 2 - src/components/ValueSelect/index.tsx | 55 ++----- src/containers/App/index.tsx | 197 +---------------------- src/containers/CustomTable/index.tsx | 15 +- src/reducers/app/actions.ts | 12 +- src/reducers/app/reducers.ts | 64 ++++---- src/reducers/app/selectors.ts | 4 +- src/reducers/app/thunks.ts | 8 +- src/reducers/app/types.ts | 2 +- src/utils/general.ts | 12 ++ 15 files changed, 214 insertions(+), 499 deletions(-) create mode 100644 src/utils/general.ts diff --git a/src/components/ColumnsDisplay/index.tsx b/src/components/ColumnsDisplay/index.tsx index df125bd4..c96f89f0 100644 --- a/src/components/ColumnsDisplay/index.tsx +++ b/src/components/ColumnsDisplay/index.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { connect } from 'react-redux'; import styled from 'styled-components'; import { withStyles } from '@material-ui/core/styles'; import Checkbox from '@material-ui/core/Checkbox'; @@ -9,6 +10,13 @@ import MenuItem from '@material-ui/core/MenuItem'; import DragIcon from '@material-ui/icons/DragHandle'; import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown'; +import { + getColumns, +} from '../../reducers/app/selectors'; +import { + setColumnsAction +} from '../../reducers/app/actions'; + const Container = styled.div` display: flex; border: 1px solid #d8d8d8; @@ -169,22 +177,13 @@ const styles = { checked: {}, }; -interface SelectedColumnsData { - cardinality: null | number; - dataType: string; - displayName: string; - entity: string; - keyType: string; - name: string; -} - type Props = { - selectedColumns: any; + selectedColumns: any[]; selectedEntity: string; attributes: any; classes: any; submitValues: () => void; - setColumns: (columns: object[]) => void; + setColumns: (entity: string, columns: object[]) => void; }; type States = { @@ -201,42 +200,42 @@ class ColumnDisplay extends React.Component { }; componentDidMount() { - const { selectedColumns, selectedEntity } = this.props; + const { selectedColumns } = this.props; this.setState({ - selected: [...selectedColumns[selectedEntity]], + selected: [...selectedColumns], }); } - componentDidUpdate(prevProps: Props) { - const { selectedColumns, selectedEntity } = this.props; - if ( - prevProps.selectedColumns[selectedEntity] !== - selectedColumns[selectedEntity] || - selectedEntity !== prevProps.selectedEntity - ) { - this.setState({ - selected: [...selectedColumns[selectedEntity]], - }); - } - } + // componentDidUpdate(prevProps: Props) { + // const { selectedColumns, selectedEntity } = this.props; + // if ( + // prevProps.selectedColumns[selectedEntity] !== + // selectedColumns[selectedEntity] || + // selectedEntity !== prevProps.selectedEntity + // ) { + // this.setState({ + // selected: [...selectedColumns[selectedEntity]], + // }); + // } + // } handleSubmit = async event => { const { selected } = this.state; - const { setColumns, submitValues } = this.props; + const { selectedEntity, setColumns, submitValues } = this.props; event.preventDefault(); await this.setState({ anchorEl: null }); - await setColumns(selected); + await setColumns(selectedEntity, selected); await submitValues(); }; - handleChange = (name: SelectedColumnsData) => event => { + handleChange = (attribute) => event => { const { selected } = this.state; const positionInArray = selected.findIndex( - selected => selected.name === name.name + column => column.name === attribute.name ); if (positionInArray === -1 && selected.length <= 5) { this.setState({ - selected: [...selected, name], + selected: [...selected, attribute], }); } else if (positionInArray > -1 && selected.length <= 6) { selected.splice(positionInArray, 1); @@ -247,9 +246,9 @@ class ColumnDisplay extends React.Component { }; cancelChange = () => { - const { selectedColumns, selectedEntity } = this.props; + const { selectedColumns } = this.props; this.setState({ - selected: [...selectedColumns[selectedEntity]], + selected: [...selectedColumns], anchorEl: null, }); }; @@ -270,23 +269,9 @@ class ColumnDisplay extends React.Component { }; render() { - const { selectedEntity, classes, attributes } = this.props; + const { classes, attributes } = this.props; const { anchorEl, fadeBottom, selected } = this.state; - let tab; - switch (selectedEntity) { - case 'blocks': - tab = 'blocks'; - break; - case 'operations': - tab = 'operations'; - break; - case 'accounts': - tab = 'accounts'; - break; - } - const selectedName = selected.map(selected => { - return selected.name; - }); + const selectedName = selected.map(item => item.name); return ( @@ -309,23 +294,23 @@ class ColumnDisplay extends React.Component { Select Up to 6 Columns to Display - {attributes.map((name, index) => ( + {attributes.map((attribute, index) => ( = 6 && - selectedName.indexOf(name.name) === -1 + selectedName.indexOf(attribute.name) === -1 ? classes.removeSelector : null } classes={{ root: classes.menuItem }} - onClick={this.handleChange(name)} + onClick={this.handleChange(attribute)} key={index} - value={name.name} + value={attribute.name} > = 6 && - selectedName.indexOf(name.name) === -1 + selectedName.indexOf(attribute.name) === -1 ? classes.removeSelector : null } @@ -334,9 +319,9 @@ class ColumnDisplay extends React.Component { checked: classes.checked, }} disableRipple={true} - checked={selectedName.indexOf(name.name) > -1} + checked={selectedName.indexOf(attribute.name) > -1} /> - + ))} @@ -357,4 +342,17 @@ class ColumnDisplay extends React.Component { } } -export default withStyles(styles)(ColumnDisplay); +const mapStateToProps = state => ({ + selectedColumns: getColumns(state) +}); + +const mapDispatchToProps = dispatch => ({ + setColumns: (entity: string, columns: object[]) => + dispatch(setColumnsAction(entity, columns)) +}); + +export default connect( + mapStateToProps, + mapDispatchToProps +)(withStyles(styles)(ColumnDisplay)); + diff --git a/src/components/CustomTableRow/index.tsx b/src/components/CustomTableRow/index.tsx index 2245b33c..de21d458 100755 --- a/src/components/CustomTableRow/index.tsx +++ b/src/components/CustomTableRow/index.tsx @@ -42,7 +42,6 @@ const ExplorerLink = styled.a` color: #10ade4; `; interface Props { - entity: string; item: any; selectedColumns: any[]; network: string; diff --git a/src/components/FilterPanel/index.tsx b/src/components/FilterPanel/index.tsx index 811b207c..12a74c1d 100644 --- a/src/components/FilterPanel/index.tsx +++ b/src/components/FilterPanel/index.tsx @@ -9,9 +9,10 @@ import { getAvailableValues, getSelectedFilters, getOperators, + getSelectedValues } from '../../reducers/app/selectors'; import { - setSelectedValuesAction, + setSelectedValueAction, removeValueAction, addFilterAction, removeFilterAction, @@ -96,23 +97,19 @@ const attrTabValue = { interface Filter { name: string; operator: string; + operatorType: string; + isCard?: boolean; } type Props = { - selectedValues: object[]; - availableValues: object[]; + selectedValues: object; + availableValues: object; selectedEntity: string; attributes: any[]; filters: Array; operators: any; - filterInputState: object; - setFilterInputState: ( - value: string, - filterName: string, - filterOperator: string - ) => void; removeValue: (value: object) => void; - setSelectedValues: (value: object) => void; + setSelectedValue: (entity: string, attribute: string, value: string) => void; fetchValues: (value: string) => void; addFilter: (entity: string) => void; removeFilter: (entity: string, index: number) => void; @@ -125,7 +122,7 @@ type States = { class FilterPanel extends React.Component { state = { - value: '', + value: '' }; onAddFilter = () => { @@ -133,103 +130,74 @@ class FilterPanel extends React.Component { addFilter(selectedEntity); }; + // we have to modify onRemoveFilter = (index, filter) => { const { removeFilter, selectedEntity, removeValue, - selectedValues, - filterInputState, - setFilterInputState, + selectedValues } = this.props; - const itemToRemove = filterInputState[selectedEntity].find( - value => Object.keys(value).toString() === filter.name - ); - if (itemToRemove) { - setFilterInputState( - null, - Object.keys(itemToRemove).toString(), - filter.operator - ); - } - selectedValues.forEach(val => { - const valueToRemove = Object.keys(val).toString(); - if (valueToRemove === filter.name) { - removeValue(val); - } - }); removeFilter(selectedEntity, index); }; - onFilterNameChange = (val, index) => { + onFilterNameChange = (attr, index) => { const { filters, selectedEntity, changeFilter, - attributes, fetchValues, + availableValues } = this.props; - const cards = attributes.map(attr => { - if (attr.cardinality < 15 && attr.cardinality !== null) { - return attr.name; - } - }); - if (cards.includes(val)) { - fetchValues(val); + const isCard = attr.cardinality < 15 && attr.cardinality !== null; + if (isCard && !availableValues[attr.name]) { + fetchValues(attr.name); } - const selectedFilter: any = filters[index]; - selectedFilter.name = val; + let operatorType = 'dateTime'; + if (attr.dataType === 'Int' || attr.dataType === 'Decimal') { + operatorType = 'numeric'; + } else if (attr.dataType === 'String') { + operatorType = 'string'; + } else if (attr.dataType === 'Boolean') { + operatorType = 'boolean'; + } + const selectedFilter = { + ...filters[index], + name: attr.name, + isCard, + operatorType + }; changeFilter(selectedEntity, selectedFilter, index); }; - onFilterOperatorChange = (val, index) => { + onFilterOperatorChange = (operator, index) => { const { filters, selectedEntity, changeFilter, - filterInputState, - setFilterInputState, } = this.props; - const selectedFilter: any = filters[index]; - const findInput = filterInputState[selectedEntity].find( - filter => Object.keys(filter).toString() === selectedFilter.name - ); - // Check to see if input value for this attribute is populated and clear if so - if (findInput) { - setFilterInputState( - null, - Object.keys(findInput).toString(), - selectedFilter.operator - ); - } - selectedFilter.operator = val; + const selectedFilter = { + ...filters[index], + operator: operator.name + }; changeFilter(selectedEntity, selectedFilter, index); }; - onFilterAttributeChange = (val, index) => { - const { filters, selectedEntity, changeFilter } = this.props; - const selectedFilter: any = filters[index]; - selectedFilter.attribute = val; - changeFilter(selectedEntity, selectedFilter, index); - }; - - onValueChange = val => { - const { setSelectedValues } = this.props; - setSelectedValues(val); + onValueChange = (val, attribute) => { + const { setSelectedValue, selectedEntity } = this.props; + setSelectedValue(selectedEntity, attribute, val); }; + // we have to modify handleInputChange = (value, filter, filterOperator) => { - const { setFilterInputState } = this.props; this.setState({ value: value }); - setFilterInputState(value, filter, filterOperator); }; + // we have to modify handleBetweenInputChange = (value, filter, filterOperator) => { - const { setFilterInputState } = this.props; this.setState({ value: value }); const betweenValue = `-${value}`; - setFilterInputState(betweenValue, filter, filterOperator); }; render() { @@ -239,59 +207,36 @@ class FilterPanel extends React.Component { filters, operators, selectedValues, - availableValues, - filterInputState, + availableValues } = this.props; const { value } = this.state; const entityName = attrTabValue[selectedEntity]; - const cards = []; - attributes.forEach(attr => { - if (attr.cardinality < 15 && attr.cardinality !== null) { - cards.push(attr.name); - } - }); - const numericDataTypes = attributes.map(attr => { - if (attr.dataType === 'Int' || attr.dataType === 'Decimal') { - return attr.name; - } - }); - const stringDataTypes = attributes.map(attr => { - if (attr.dataType === 'String') { - return attr.name; - } - }); - const booleanDataTypes = attributes.map(attr => { - if (attr.dataType === 'Boolean') { - return attr.name; - } - }); + const disableAddFilter = false; - const disableAddFilter = - (filters.length > 0 && - filters.length !== - filterInputState[selectedEntity].length + selectedValues.length) || - (filters.length > 0 && - filters.length === - filterInputState[selectedEntity].length + selectedValues.length && - selectedValues.length !== filters.length && - value === ''); + // const disableAddFilter = + // (filters.length > 0 && + // filters.length !== + // filterInputState[selectedEntity].length + selectedValues.length) || + // (filters.length > 0 && + // filters.length === + // filterInputState[selectedEntity].length + selectedValues.length && + // selectedValues.length !== filters.length && + // value === ''); return ( - {filters.map((filter: any, index) => { - let newAttributes = []; - attributes.forEach((attr: any) => { + {filters.map((filter: Filter, index) => { + const newAttributes = attributes.filter((attr: any) => { if (attr.name === filter.name) { - newAttributes.push(attr); + return true; } - const index = filters.findIndex( + const pos = filters.findIndex( (item: any) => item.name === attr.name ); - if (index < 0) { - newAttributes.push(attr); - } + return pos === -1; }); + return ( @@ -299,44 +244,34 @@ class FilterPanel extends React.Component { value={filter.name} placeholder={`Select ${entityName} Attribute`} items={newAttributes} - onChange={val => this.onFilterNameChange(val, index)} + onChange={attr => this.onFilterNameChange(attr, index)} /> {filter.name &&
} {filter.name && ( - this.onFilterOperatorChange(event, index) + items={operators[filter.operatorType]} + onChange={operator => + this.onFilterOperatorChange(operator, index) } /> )} {filter.operator &&
} {(filter.operator && filter.operator === 'EQ') || (filter.operator === 'NOTEQ' && - cards.includes(filter.name) && ( + filter.isCard && ( this.onValueChange(value)} + selectedValue={selectedValues[filter.name]} + values={availableValues[filter.name]} + onChange={value => this.onValueChange(value, filter.name)} /> ))} - {filter.operator && !cards.includes(filter.name) && ( + {filter.operator && !filter.isCard && ( @@ -389,13 +324,14 @@ const mapStateToProps = state => ({ filters: getSelectedFilters(state), availableValues: getAvailableValues(state), operators: getOperators(state), + selectedValues: getSelectedValues(state) }); const mapDispatchToProps = dispatch => ({ fetchValues: (value: string) => dispatch(fetchValues(value)), removeValue: (value: object) => dispatch(removeValueAction(value)), - setSelectedValues: (value: object) => - dispatch(setSelectedValuesAction(value)), + setSelectedValue: (entity: string, attribute: string, value: string) => + dispatch(setSelectedValueAction(entity, attribute, value)), addFilter: (entity: string) => dispatch(addFilterAction(entity)), removeFilter: (entity: string, index: number) => dispatch(removeFilterAction(entity, index)), diff --git a/src/components/FilterSelect/index.tsx b/src/components/FilterSelect/index.tsx index 23a75fe9..cd25496a 100755 --- a/src/components/FilterSelect/index.tsx +++ b/src/components/FilterSelect/index.tsx @@ -107,7 +107,7 @@ interface Props { value: string; items: Array; placeholder?: string; - onChange: (value: string) => void; + onChange: (item: object) => void; } type States = { @@ -142,7 +142,7 @@ class FilterSelect extends React.Component { handleChange = item => { const { onChange } = this.props; - onChange(item.name); + onChange(item); this.setState({ anchorEl: null }); }; diff --git a/src/components/SettingsPanel/index.tsx b/src/components/SettingsPanel/index.tsx index 4e11132b..4fdb4151 100755 --- a/src/components/SettingsPanel/index.tsx +++ b/src/components/SettingsPanel/index.tsx @@ -83,19 +83,10 @@ const CloseIconWrapper = styled(CloseIcon)` `; interface Props { - selectedColumns: any; isCollapse: boolean; - filterInputState: object; selectedEntity: string; attributes: object[]; - selectedValues: object[]; - setColumns: (columns: object[]) => void; submitValues: () => void; - setFilterInputState: ( - value: string, - filterName: string, - filterOperator: string - ) => void; onClose: () => void; resetValues: () => void; } @@ -103,16 +94,11 @@ interface Props { const SettingsPanel: React.StatelessComponent = props => { const { isCollapse, - onClose, - selectedColumns, - resetValues, - submitValues, - filterInputState, - setFilterInputState, selectedEntity, attributes, - setColumns, - selectedValues, + onClose, + resetValues, + submitValues } = props; return ( @@ -122,21 +108,16 @@ const SettingsPanel: React.StatelessComponent = props => { Filter Display diff --git a/src/components/ValueInput/index.tsx b/src/components/ValueInput/index.tsx index 506aaa78..dbb32f0a 100644 --- a/src/components/ValueInput/index.tsx +++ b/src/components/ValueInput/index.tsx @@ -43,7 +43,6 @@ interface Props { inputProps?: object; InputProps?: object; value: string; - filterInputState: object; selectedEntity: string; onInputChange: (value: string) => void; onBetweenInputChange: (value: string) => void; @@ -65,7 +64,6 @@ class ValueInput extends React.Component { InputProps, inputProps, filter, - filterInputState, selectedEntity, } = this.props; let input; diff --git a/src/components/ValueSelect/index.tsx b/src/components/ValueSelect/index.tsx index 0f8e4046..cdcd490a 100644 --- a/src/components/ValueSelect/index.tsx +++ b/src/components/ValueSelect/index.tsx @@ -4,14 +4,10 @@ import Button from '@material-ui/core/Button'; import Menu from '@material-ui/core/Menu'; import MenuItem from '@material-ui/core/MenuItem'; import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown'; +import { convertValue } from '../../utils/general'; const Container = styled.div``; -const HR = styled.div` - width: 1px; - background-color: #ecedef; -`; - const ButtonShell = styled(Button)` &&& { height: 52px; @@ -75,9 +71,8 @@ const MainMenuItem = styled(MenuItem)` `; interface Props { - filter: any; - selectedValues: any; - availableValues: Array; + selectedValue: string | undefined; + values: Array; placeholder?: string; onChange: (value: object) => void; } @@ -92,9 +87,8 @@ class ValueSelect extends React.Component { }; handleChange = value => { - const { onChange, filter } = this.props; - const newValue = { [filter.toString()]: value }; - onChange(newValue); + const { onChange } = this.props; + onChange(value); this.setState({ anchorEl: null }); }; @@ -108,42 +102,15 @@ class ValueSelect extends React.Component { render() { const { anchorEl } = this.state; - const { availableValues, selectedValues, placeholder, filter } = this.props; - let newValue = []; - - selectedValues.forEach(val => { - if (val[filter.toString()] !== undefined) { - newValue.push(val[filter.toString()]); - } - }); - let valuesAvailable = []; - availableValues.forEach(item => { - if (Object.keys(item) == filter) { - if (item[filter.toString()] !== null) { - const items = item[filter.toString()].replace(/(^|_)./g, s => - s - .split('_') - .map(s => s.charAt(0).toUpperCase() + s.substring(1)) - .join(' ') - ); - valuesAvailable.push(items); - } else if (item.toString() === null) { - valuesAvailable.push('Null'); - } - } - }); - const selectedItem: any = valuesAvailable.find( - (item: any) => item == newValue[0] - ); - const menuTitle = - selectedValues && selectedItem !== undefined ? selectedItem : placeholder; + const { values, selectedValue, placeholder } = this.props; + const menuTitle = selectedValue ? selectedValue : placeholder; return ( {menuTitle} @@ -164,13 +131,13 @@ class ValueSelect extends React.Component { > {placeholder} - {valuesAvailable.map((value: any, index) => ( + {values.map((value, index) => ( this.handleChange(value)} key={index} - selected={value === newValue[0]} + selected={value === selectedValue} > - {value} + {convertValue(value)} ))} diff --git a/src/containers/App/index.tsx b/src/containers/App/index.tsx index 03b771c7..bf68e3c3 100644 --- a/src/containers/App/index.tsx +++ b/src/containers/App/index.tsx @@ -10,10 +10,7 @@ import { getNetwork, getEntity, getItems, - getColumns, getIsFullLoaded, - getSelectedValues, - getSelectedFilters, getFilterCount, } from '../../reducers/app/selectors'; import { @@ -22,10 +19,7 @@ import { submitQuery, } from '../../reducers/app/thunks'; import { - setSelectedValuesAction, - setColumnsAction, setTabAction, - removeValueAction, removeAllFiltersAction, } from '../../reducers/app/actions'; import Header from 'components/Header'; @@ -114,38 +108,27 @@ const tabsArray = [ export interface Props { isLoading: boolean; network: string; - selectedValues: object[]; selectedEntity: string; items: object[]; attributes: object[]; - selectedColumns: any[]; isFullLoaded: boolean; - selectedFilters: object[]; filterCount: number; - setColumns: (entity: string, columns: object[]) => void; - removeValue: (value: object) => void; removeAllFilters: (entity: string) => void; changeNetwork(network: string): void; changeTab: (type: string) => void; initLoad: () => void; - fetchItems: (type: string) => void; - setSelectedValues: (type: object[]) => void; submitQuery: () => void; } export interface States { isFilterCollapse: boolean; - filterInputState: any; - selectedDisplayColumns: object[]; } class Arronax extends React.Component { constructor(props: Props) { super(props); this.state = { - isFilterCollapse: false, - filterInputState: { blocks: [], operations: [], accounts: [] }, - selectedDisplayColumns: [], + isFilterCollapse: false }; } @@ -154,32 +137,6 @@ class Arronax extends React.Component { initLoad(); } - componentDidUpdate(prevProps: Props) { - const { filterInputState } = this.state; - const { selectedColumns, selectedEntity, selectedFilters } = this.props; - const currentFilters = selectedFilters.map(filter => - Object.values(filter)[0].toString() - ); - // Remove any value from state that doesn't match Redux's selected filters state - filterInputState[selectedEntity].forEach(filter => { - const stateFilter = Object.keys(filter).toString(); - if (!currentFilters.includes(stateFilter)) { - const index = filterInputState[selectedEntity].indexOf(stateFilter); - filterInputState[selectedEntity].splice(index, 1); - this.setState({ filterInputState: filterInputState }); - } - }); - if ( - prevProps.selectedColumns[selectedEntity] !== - selectedColumns[selectedEntity] || - selectedEntity !== prevProps.selectedEntity - ) { - this.setState({ - selectedDisplayColumns: [...selectedColumns[selectedEntity]], - }); - } - } - onChangeNetwork = event => { const { changeNetwork } = this.props; changeNetwork(event.target.value); @@ -202,149 +159,28 @@ class Arronax extends React.Component { resetValues = () => { const { - selectedValues, - removeValue, removeAllFilters, - selectedEntity, - selectedFilters, + selectedEntity } = this.props; - const { filterInputState } = this.state; - filterInputState[selectedEntity] = []; - this.setState({ filterInputState: filterInputState }); removeAllFilters(selectedEntity); - // Remove selected values for this particular entity - selectedValues.forEach(value => { - selectedFilters.forEach(filter => { - const currentValue = Object.keys(value).toString(); - const currentFilter = Object.values(filter)[0].toString(); - if (currentValue === currentFilter) { - removeValue(value); - } - }); - }); }; submitValues = async () => { - const { - setSelectedValues, - submitQuery, - selectedEntity, - setColumns, - } = this.props; - const { filterInputState, selectedDisplayColumns } = this.state; - // Set columns in Redux state - await setColumns(selectedEntity, selectedDisplayColumns); - // Loop through each value in state and set the value in Redux's state - await filterInputState[selectedEntity].forEach(val => { - setSelectedValues(val); - }); - // Submit the query to ConseilJS + const { submitQuery } = this.props; await submitQuery(); }; - setFilterInputState = (val, filterName, filterOperator) => { - const { filterInputState } = this.state; - const { selectedEntity } = this.props; - const filterState = [...filterInputState[selectedEntity]]; - let filterCheck = []; - filterInputState[selectedEntity].forEach(filter => { - filterCheck.push(Object.keys(filter).toString()); - }); - // Remove the value from state by sending in a NULL value - if (val === null) { - const itemToRemove = filterState.find( - val => Object.keys(val).toString() === filterName - ); - const index = filterState.indexOf(itemToRemove); - filterState.splice(index, 1); - filterInputState[selectedEntity] = filterState; - this.setState({ filterInputState: filterInputState }); - } else if ( - filterCheck.includes(filterName) && - filterOperator !== 'BETWEEN' - ) { - const index = filterCheck.indexOf(filterName); - filterState.splice(index, 1); - const newState = [...filterState, { [filterName]: val }]; - filterInputState[selectedEntity] = newState; - this.setState({ filterInputState: filterInputState }); - } else if ( - filterCheck.includes(filterName) && - filterOperator === 'BETWEEN' - ) { - const currentValueObject = filterState.find( - val => Object.keys(val).toString() === filterName - ); - const currentValue = Object.values(currentValueObject).toString(); - if (!currentValue.includes('-')) { - if (val.includes('-')) { - const index = filterCheck.indexOf(filterName); - filterState.splice(index, 1); - const newState = [ - ...filterState, - { [filterName]: `${currentValue}${val}` }, - ]; - filterInputState[selectedEntity] = newState; - this.setState({ filterInputState: filterInputState }); - } else if (!val.includes('-')) { - const index = filterCheck.indexOf(filterName); - filterState.splice(index, 1); - const newState = [...filterState, { [filterName]: val }]; - filterInputState[selectedEntity] = newState; - this.setState({ filterInputState: filterInputState }); - } - } else if (currentValue.includes('-')) { - if (val.includes('-')) { - const value = Object.values(currentValue); - const dashIndex = value.indexOf('-'); - const firstHalf = value.slice(0, dashIndex).join(''); - const secondHalf = val; - const finalValue = firstHalf + secondHalf; - const index = filterCheck.indexOf(filterName); - filterState.splice(index, 1); - const newState = [...filterState, { [filterName]: finalValue }]; - filterInputState[selectedEntity] = newState; - this.setState({ filterInputState: filterInputState }); - } else if (!val.includes('-')) { - const value = Object.values(currentValue); - const dashIndex = value.indexOf('-'); - const secondHalf = value.slice(dashIndex).join(''); - const firstHalf = val; - const finalValue = firstHalf + secondHalf; - const index = filterCheck.indexOf(filterName); - filterState.splice(index, 1); - const newState = [...filterState, { [filterName]: finalValue }]; - filterInputState[selectedEntity] = newState; - this.setState({ filterInputState: filterInputState }); - } - } - } else { - const newValues = [ - ...filterInputState[selectedEntity], - { [filterName]: val }, - ]; - filterInputState[selectedEntity] = newValues; - this.setState({ filterInputState: filterInputState }); - } - }; - - setSelectedColumns = (columns: object[]) => { - this.setState({ selectedDisplayColumns: columns }); - }; - render() { const { isLoading, network, selectedEntity, items, - selectedColumns, isFullLoaded, attributes, - filterCount, - selectedValues, + filterCount } = this.props; - const { isFilterCollapse, filterInputState } = this.state; + const { isFilterCollapse } = this.state; const isRealLoading = isLoading || (!isFullLoaded && items.length === 0); return ( @@ -367,16 +203,11 @@ class Arronax extends React.Component { ))} @@ -390,11 +221,7 @@ class Arronax extends React.Component { - +