Refactoring

2020-11-09 12:02:03 +03:00 · 2020-11-09 12:02:03 +03:00 · d569e8dd74
commit d569e8dd74
parent 102837ed04
6 changed files with 121 additions and 85 deletions
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerItem.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerItem.js
@ -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
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerModalDialog.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerModalDialog.js
@ -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,14 +21,12 @@ class ConsumerModalDialog extends React.Component {
  }

  mapTokenNameToState = () => {
-    const { consumers, selectedConsumer } = this.props;
-    consumers
-      .find((consumer) => consumer.name === selectedConsumer)
-      .props.map((p) =>
-        this.setState({
-          [`${p.name}`]: p.value,
-        })
-      );
+    const { selectedConsumer } = this.props;
+    selectedConsumer.props.map((prop) =>
+      this.setState({
+        [`${prop.name}`]: prop.value,
+      })
+    );
  };

  onChangeHandler = (e) => {
@ -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,75 +107,70 @@ 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}>
-              <Box
-                displayProp="flex"
-                flexDirection="column"
-                marginProp="0 0 16px 0"
-              >
-                <Box marginProp="0 0 4px 0">
-                  <Text isBold>{prop.title}:</Text>
-                </Box>
-                <Box>
-                  <TextInput
-                    scale
-                    name={prop.name}
-                    placeholder={prop.title}
-                    isAutoFocussed={i === 0}
-                    tabIndex={1}
-                    value={Object.values(state)[i]}
-                    isDisabled={isLoading}
-                    onChange={onChangeHandler}
-                  />
-                </Box>
-              </Box>
-            </React.Fragment>
-          ))
-      : consumers.find((consumer) => consumer.name === selectedConsumer)[key];
-  };
+  instructionsSeparator = (<Box marginProp="4px 0" />);

-  intructionsSeparator = (<Box marginProp="4px 0" />);
-
-  intructionsText = (
+  instructionsText = (
    <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>
-        )}
+      {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 { onModalClose, dialogVisible, isLoading, t } = this.props;
    const {
-      setConsumerData,
+      selectedConsumer,
+      onModalClose,
+      dialogVisible,
+      isLoading,
+      t,
+    } = this.props;
+    const {
      updateConsumerValues,
      bodyDescription,
      bottomDescription,
-      intructionsText,
+      instructionsText,
    } = this;

    return (
      <ModalDialogContainer>
        <ModalDialog visible={dialogVisible} onClose={onModalClose}>
-          <ModalDialog.Header>{setConsumerData("name")}</ModalDialog.Header>
+          <ModalDialog.Header>{selectedConsumer.name}</ModalDialog.Header>
          <ModalDialog.Body>
-            {intructionsText}
+            {instructionsText}
            <Text as="div">{bodyDescription}</Text>
-            <React.Fragment>{setConsumerData("props")}</React.Fragment>
+            <React.Fragment>
+              {selectedConsumer.props.map((prop, i) => (
+                <React.Fragment key={prop.name}>
+                  <Box
+                    displayProp="flex"
+                    flexDirection="column"
+                    marginProp="0 0 16px 0"
+                  >
+                    <Box marginProp="0 0 4px 0">
+                      <Text isBold>{prop.title}:</Text>
+                    </Box>
+                    <Box>
+                      <TextInput
+                        scale
+                        name={prop.name}
+                        placeholder={prop.title}
+                        isAutoFocussed={i === 0}
+                        tabIndex={1}
+                        value={Object.values(this.state)[i]}
+                        isDisabled={this.props.isLoading}
+                        onChange={this.onChangeHandler}
+                      />
+                    </Box>
+                  </Box>
+                </React.Fragment>
+              ))}
+            </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);
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/thirdPartyServicesSettings.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/thirdPartyServicesSettings.js
@ -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));
--- a/web/ASC.Web.Client/src/store/settings/actions.js
+++ b/web/ASC.Web.Client/src/store/settings/actions.js
@ -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) {
--- a/web/ASC.Web.Client/src/store/settings/reducer.js
+++ b/web/ASC.Web.Client/src/store/settings/reducer.js
@ -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;
--- a/web/ASC.Web.Client/src/store/settings/selectors.js
+++ b/web/ASC.Web.Client/src/store/settings/selectors.js
@ -14,3 +14,6 @@ export const getUserRole = (user) => {
 };

 export const getConsumersList = (state) => state.settings.integration.consumers;
+
+export const getSelectedConsumer = (state) =>
+  state.settings.integration.selectedConsumer;