Refactoring
This commit is contained in:
parent
102837ed04
commit
d569e8dd74
@ -25,7 +25,7 @@ class ConsumerItem extends React.Component {
|
||||
heightProp="56px"
|
||||
>
|
||||
<Box>
|
||||
<img src={logo} />
|
||||
<img src={logo} alt={consumer.name} />
|
||||
</Box>
|
||||
<Box onClick={setConsumer} data-consumer={consumer.name}>
|
||||
<ConsumerToggle
|
||||
|
@ -11,6 +11,8 @@ import {
|
||||
} from "asc-web-components";
|
||||
import ModalDialogContainer from "./modalDialogContainer";
|
||||
import { Trans } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { getSelectedConsumer } from "../../../../../../store/settings/selectors";
|
||||
|
||||
class ConsumerModalDialog extends React.Component {
|
||||
constructor(props) {
|
||||
@ -19,12 +21,10 @@ class ConsumerModalDialog extends React.Component {
|
||||
}
|
||||
|
||||
mapTokenNameToState = () => {
|
||||
const { consumers, selectedConsumer } = this.props;
|
||||
consumers
|
||||
.find((consumer) => consumer.name === selectedConsumer)
|
||||
.props.map((p) =>
|
||||
const { selectedConsumer } = this.props;
|
||||
selectedConsumer.props.map((prop) =>
|
||||
this.setState({
|
||||
[`${p.name}`]: p.value,
|
||||
[`${prop.name}`]: prop.value,
|
||||
})
|
||||
);
|
||||
};
|
||||
@ -57,7 +57,7 @@ class ConsumerModalDialog extends React.Component {
|
||||
});
|
||||
}
|
||||
const data = {
|
||||
name: selectedConsumer,
|
||||
name: selectedConsumer.name,
|
||||
props: prop,
|
||||
};
|
||||
updateConsumerProps(data)
|
||||
@ -72,6 +72,11 @@ class ConsumerModalDialog extends React.Component {
|
||||
.finally(onModalClose());
|
||||
};
|
||||
|
||||
// shouldComponentUpdate(nextProps, nextState) {
|
||||
// console.log("this.state: ", this.state, "nextState: ", nextState);
|
||||
// return nextState !== this.state;
|
||||
// }
|
||||
|
||||
componentDidMount() {
|
||||
this.mapTokenNameToState();
|
||||
}
|
||||
@ -102,14 +107,46 @@ class ConsumerModalDialog extends React.Component {
|
||||
</Trans>
|
||||
);
|
||||
|
||||
setConsumerData = (key) => {
|
||||
const { consumers, selectedConsumer, isLoading } = this.props;
|
||||
const { onChangeHandler, state } = this;
|
||||
return key === "props"
|
||||
? consumers
|
||||
.find((consumer) => consumer.name === selectedConsumer)
|
||||
[key].map((prop, i) => (
|
||||
<React.Fragment key={i}>
|
||||
instructionsSeparator = (<Box marginProp="4px 0" />);
|
||||
|
||||
instructionsText = (
|
||||
<Text as="div">
|
||||
{this.props.selectedConsumer.instruction.split("{0}").map(
|
||||
(str, i) =>
|
||||
(i === 0 && (
|
||||
<React.Fragment key={str}>
|
||||
{str} {this.instructionsSeparator}
|
||||
</React.Fragment>
|
||||
)) || <React.Fragment key={str}> {str} </React.Fragment>
|
||||
)}
|
||||
</Text>
|
||||
);
|
||||
|
||||
render() {
|
||||
const {
|
||||
selectedConsumer,
|
||||
onModalClose,
|
||||
dialogVisible,
|
||||
isLoading,
|
||||
t,
|
||||
} = this.props;
|
||||
const {
|
||||
updateConsumerValues,
|
||||
bodyDescription,
|
||||
bottomDescription,
|
||||
instructionsText,
|
||||
} = this;
|
||||
|
||||
return (
|
||||
<ModalDialogContainer>
|
||||
<ModalDialog visible={dialogVisible} onClose={onModalClose}>
|
||||
<ModalDialog.Header>{selectedConsumer.name}</ModalDialog.Header>
|
||||
<ModalDialog.Body>
|
||||
{instructionsText}
|
||||
<Text as="div">{bodyDescription}</Text>
|
||||
<React.Fragment>
|
||||
{selectedConsumer.props.map((prop, i) => (
|
||||
<React.Fragment key={prop.name}>
|
||||
<Box
|
||||
displayProp="flex"
|
||||
flexDirection="column"
|
||||
@ -125,52 +162,15 @@ class ConsumerModalDialog extends React.Component {
|
||||
placeholder={prop.title}
|
||||
isAutoFocussed={i === 0}
|
||||
tabIndex={1}
|
||||
value={Object.values(state)[i]}
|
||||
isDisabled={isLoading}
|
||||
onChange={onChangeHandler}
|
||||
value={Object.values(this.state)[i]}
|
||||
isDisabled={this.props.isLoading}
|
||||
onChange={this.onChangeHandler}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</React.Fragment>
|
||||
))
|
||||
: consumers.find((consumer) => consumer.name === selectedConsumer)[key];
|
||||
};
|
||||
|
||||
intructionsSeparator = (<Box marginProp="4px 0" />);
|
||||
|
||||
intructionsText = (
|
||||
<Text as="div">
|
||||
{this.setConsumerData("instruction")
|
||||
.split("{0}")
|
||||
.map(
|
||||
(str, i) =>
|
||||
(i === 0 && (
|
||||
<React.Fragment key={str}>
|
||||
{str} {this.intructionsSeparator}
|
||||
))}
|
||||
</React.Fragment>
|
||||
)) || <React.Fragment key={str}> {str} </React.Fragment>
|
||||
)}
|
||||
</Text>
|
||||
);
|
||||
|
||||
render() {
|
||||
const { onModalClose, dialogVisible, isLoading, t } = this.props;
|
||||
const {
|
||||
setConsumerData,
|
||||
updateConsumerValues,
|
||||
bodyDescription,
|
||||
bottomDescription,
|
||||
intructionsText,
|
||||
} = this;
|
||||
|
||||
return (
|
||||
<ModalDialogContainer>
|
||||
<ModalDialog visible={dialogVisible} onClose={onModalClose}>
|
||||
<ModalDialog.Header>{setConsumerData("name")}</ModalDialog.Header>
|
||||
<ModalDialog.Body>
|
||||
{intructionsText}
|
||||
<Text as="div">{bodyDescription}</Text>
|
||||
<React.Fragment>{setConsumerData("props")}</React.Fragment>
|
||||
<Text>{bottomDescription}</Text>
|
||||
</ModalDialog.Body>
|
||||
<ModalDialog.Footer>
|
||||
@ -195,16 +195,21 @@ class ConsumerModalDialog extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
export default ConsumerModalDialog;
|
||||
|
||||
ConsumerModalDialog.propTypes = {
|
||||
t: PropTypes.func.isRequired,
|
||||
i18n: PropTypes.object.isRequired,
|
||||
consumers: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
selectedConsumer: PropTypes.string,
|
||||
selectedConsumer: PropTypes.object,
|
||||
onModalClose: PropTypes.func.isRequired,
|
||||
dialogVisible: PropTypes.bool.isRequired,
|
||||
isLoading: PropTypes.bool.isRequired,
|
||||
onChangeLoading: PropTypes.func.isRequired,
|
||||
updateConsumerProps: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
selectedConsumer: getSelectedConsumer(state),
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, null)(ConsumerModalDialog);
|
||||
|
@ -3,9 +3,13 @@ import PropTypes from "prop-types";
|
||||
import { connect } from "react-redux";
|
||||
import {
|
||||
getConsumers,
|
||||
setSelectedConsumer,
|
||||
updateConsumerProps,
|
||||
} from "../../../../../store/settings/actions";
|
||||
import { getConsumersList } from "../../../../../store/settings/selectors";
|
||||
import {
|
||||
getConsumersList,
|
||||
getSelectedConsumer,
|
||||
} from "../../../../../store/settings/selectors";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import styled from "styled-components";
|
||||
|
||||
@ -56,7 +60,6 @@ class ThirdPartyServices extends React.Component {
|
||||
)}`;
|
||||
|
||||
this.state = {
|
||||
selectedConsumer: "",
|
||||
dialogVisible: false,
|
||||
isLoading: false,
|
||||
};
|
||||
@ -82,14 +85,12 @@ class ThirdPartyServices extends React.Component {
|
||||
onModalClose = () => {
|
||||
this.setState({
|
||||
dialogVisible: false,
|
||||
selectedConsumer: "",
|
||||
});
|
||||
this.props.setSelectedConsumer();
|
||||
};
|
||||
|
||||
setConsumer = (e) => {
|
||||
this.setState({
|
||||
selectedConsumer: e.currentTarget.dataset.consumer,
|
||||
});
|
||||
this.props.setSelectedConsumer(e.currentTarget.dataset.consumer);
|
||||
};
|
||||
|
||||
updateConsumerValues = (obj, isFill) => {
|
||||
@ -169,7 +170,6 @@ class ThirdPartyServices extends React.Component {
|
||||
<ConsumerItem
|
||||
consumer={consumer}
|
||||
dialogVisible={dialogVisible}
|
||||
selectedConsumer={selectedConsumer}
|
||||
isLoading={isLoading}
|
||||
onChangeLoading={onChangeLoading}
|
||||
onModalClose={onModalClose}
|
||||
@ -187,8 +187,6 @@ class ThirdPartyServices extends React.Component {
|
||||
t={t}
|
||||
i18n={i18n}
|
||||
dialogVisible={dialogVisible}
|
||||
consumers={consumers}
|
||||
selectedConsumer={selectedConsumer}
|
||||
isLoading={isLoading}
|
||||
onModalClose={onModalClose}
|
||||
onChangeLoading={onChangeLoading}
|
||||
@ -204,13 +202,21 @@ ThirdPartyServices.propTypes = {
|
||||
t: PropTypes.func.isRequired,
|
||||
i18n: PropTypes.object.isRequired,
|
||||
consumers: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
selectedConsumer: PropTypes.object,
|
||||
getConsumers: PropTypes.func.isRequired,
|
||||
updateConsumerProps: PropTypes.func.isRequired,
|
||||
setSelectedConsumer: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return { consumers: getConsumersList(state) };
|
||||
return {
|
||||
consumers: getConsumersList(state),
|
||||
selectedConsumer: getSelectedConsumer(state),
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, { getConsumers, updateConsumerProps })(
|
||||
withTranslation()(ThirdPartyServices)
|
||||
);
|
||||
export default connect(mapStateToProps, {
|
||||
getConsumers,
|
||||
updateConsumerProps,
|
||||
setSelectedConsumer,
|
||||
})(withTranslation()(ThirdPartyServices));
|
||||
|
@ -16,6 +16,7 @@ export const SET_LOGO_TEXT = "SET_LOGO_TEXT";
|
||||
export const SET_LOGO_SIZES = "SET_LOGO_SIZES";
|
||||
export const SET_LOGO_URLS = "SET_LOGO_URLS";
|
||||
export const SET_CONSUMERS = "SET_CONSUMERS";
|
||||
export const SET_SELECTED_CONSUMER = "SET_SELECTED_CONSUMER";
|
||||
|
||||
export function setOptions(options) {
|
||||
return {
|
||||
@ -80,6 +81,13 @@ export function setConsumers(consumers) {
|
||||
};
|
||||
}
|
||||
|
||||
export function setSelectedConsumer(selectedConsumer) {
|
||||
return {
|
||||
type: SET_SELECTED_CONSUMER,
|
||||
selectedConsumer,
|
||||
};
|
||||
}
|
||||
|
||||
export function changeAdmins(userIds, productId, isAdmin, filter) {
|
||||
let filterData = filter && filter.clone();
|
||||
if (!filterData) {
|
||||
|
@ -7,7 +7,8 @@ import {
|
||||
SET_LOGO_TEXT,
|
||||
SET_LOGO_SIZES,
|
||||
SET_LOGO_URLS,
|
||||
SET_CONSUMERS
|
||||
SET_CONSUMERS,
|
||||
SET_SELECTED_CONSUMER,
|
||||
} from "./actions";
|
||||
import { api } from "asc-web-common";
|
||||
const { Filter } = api;
|
||||
@ -30,8 +31,9 @@ const initialState = {
|
||||
},
|
||||
},
|
||||
integration: {
|
||||
consumers: []
|
||||
}
|
||||
consumers: [],
|
||||
selectedConsumer: {},
|
||||
},
|
||||
};
|
||||
|
||||
const peopleReducer = (state = initialState, action) => {
|
||||
@ -106,9 +108,21 @@ const peopleReducer = (state = initialState, action) => {
|
||||
...state,
|
||||
integration: {
|
||||
...state.integration,
|
||||
consumers: action.consumers
|
||||
}
|
||||
}
|
||||
consumers: action.consumers,
|
||||
},
|
||||
};
|
||||
|
||||
case SET_SELECTED_CONSUMER:
|
||||
return {
|
||||
...state,
|
||||
integration: {
|
||||
...state.integration,
|
||||
selectedConsumer:
|
||||
state.integration.consumers.find(
|
||||
(c) => c.name === action.selectedConsumer
|
||||
) || {},
|
||||
},
|
||||
};
|
||||
|
||||
default:
|
||||
return state;
|
||||
|
@ -14,3 +14,6 @@ export const getUserRole = (user) => {
|
||||
};
|
||||
|
||||
export const getConsumersList = (state) => state.settings.integration.consumers;
|
||||
|
||||
export const getSelectedConsumer = (state) =>
|
||||
state.settings.integration.selectedConsumer;
|
||||
|
Loading…
Reference in New Issue
Block a user