From e67148864dd8f61227631b48f4ac96161219e835 Mon Sep 17 00:00:00 2001 From: Vladislav Makhov Date: Fri, 28 Aug 2020 12:07:34 +0300 Subject: [PATCH] Refactoring --- .../sub-components/consumerItem.js | 9 ++--- ...modal-dialog.js => consumerModalDialog.js} | 10 +++--- ...onsumerItemToggle.js => consumerToggle.js} | 17 +++++---- .../integration/sub-components/consumers.js | 26 -------------- .../integration/third-party-services.js | 35 ++++++++++++------- 5 files changed, 41 insertions(+), 56 deletions(-) rename web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/{modal-dialog.js => consumerModalDialog.js} (91%) rename web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/{consumerItemToggle.js => consumerToggle.js} (72%) delete mode 100644 web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumers.js diff --git 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 index 2d18804bad..d970657ef3 100644 --- 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 @@ -1,6 +1,6 @@ import React from "react"; import { Box, Text, ToggleButton, Icons } from "asc-web-components"; -import ConsumerModalDialog from "./modal-dialog"; +import ConsumerModalDialog from "./consumerModalDialog"; class ConsumerItem extends React.Component { constructor(props) { @@ -19,7 +19,7 @@ class ConsumerItem extends React.Component { } render() { - const { name, description, dialogVisible, consumers, onModalClose, onToggleClick, selectedConsumer } = this.props; + const { dialogVisible, consumer, consumers, onModalClose, selectedConsumer } = this.props; const { toggleActive } = this.state; const { onModalButtonClick } = this; @@ -28,12 +28,13 @@ class ConsumerItem extends React.Component {
- {React.createElement(Icons[`${name}Icon`], { size: "scale" })} + {consumer.name} + {/* {React.createElement(Icons[`${name}Icon`], { size: "scale" })} */}
- {description} + {consumer.instruction} diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/modal-dialog.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerModalDialog.js similarity index 91% rename from web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/modal-dialog.js rename to web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerModalDialog.js index d022a906b3..1e845d9c3e 100644 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/modal-dialog.js +++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerModalDialog.js @@ -28,20 +28,20 @@ const ConsumerModalDialog = (props) => { return consumers.find((consumer) => consumer.name === selectedConsumer).name; } const getInnerDescription = () => { - return consumers.find((consumer) => consumer.name === selectedConsumer).innerDescription; + return consumers.find((consumer) => consumer.name === selectedConsumer).instruction; } const getInputFields = () => { return consumers .find((consumer) => consumer.name === selectedConsumer) - .tokens - .map((token, i) => + .props + .map((prop, i) => - {token}: + {prop.title}: - + diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerItemToggle.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerToggle.js similarity index 72% rename from web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerItemToggle.js rename to web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerToggle.js index 0f3b97966e..c15d334082 100644 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerItemToggle.js +++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerToggle.js @@ -6,7 +6,7 @@ const StyledToggle = styled(ToggleButton)` position: relative; `; -class ConsumerItemToggle extends React.Component { +class ConsumerToggle extends React.Component { constructor(props) { super(props); @@ -22,33 +22,32 @@ class ConsumerItemToggle extends React.Component { }) // TODO: api -> service off -> toastr } - // this.setState({ // toggleActive: true // }); else { this.props.onToggleClick(); } - } - - render() { - const { name, onModalOpen } = this.props; + const { name, onModalOpen, canSet } = this.props; const { toggleActive } = this.state; const { onToggleClick } = this; return ( <> - + ); } } -export default ConsumerItemToggle; \ No newline at end of file +export default ConsumerToggle; \ No newline at end of file diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumers.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumers.js deleted file mode 100644 index 65787f4969..0000000000 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumers.js +++ /dev/null @@ -1,26 +0,0 @@ -export const consumers = [ - { - name: "Amazon", - description: "Подключите Amazon AWS S3 для резервного копирования и хранения данных портала.", - innerDescription: "Добавив Amazon AWS S3, вы сможете использовать его для создания резервных копий портала, чтобы предотвратить потерю данных. Также используйте его для хранения данных и статического содержимого портала.", - tokens: ["Ключ доступа S3", "Секретный ключ доступа S3"] - }, - { - name: "Bitly", - description: "Подключите это приложение для сокращения пригласительных ссылок на портал и ссылок для доступа к файлам в модуле \"Документы\" с помощью сервиса Bitly.", - innerDescription: "Добавив сервис Bitly, Вы будуте получать сокращенные ссылки для приглашения новых пользователей на портал ONLYOFFICE и сокращенные ссылки для документов в модуле \"Документы\", к которым был предоставлен доступ для внешних пользователей.", - tokens: ["login", "apiKey"] - }, - { - name: "Box", - description: "Подключите приложение для управления файлами и папками Box.", - innerDescription: "Добавив приложение сервиса Box, Вы сможете подключить свой аккаунт Box в модуле \"Документы\". Это позволит загружать и создавать новые файлы в Box, редактировать существующие, копировать и удалять их, предоставлять доступ к файлам и папкам для пользователей портала ONLYOFFICE.", - tokens: ["Box ID", "Ключ Box"] - }, - { - name: "Telegram", - description: "Подключите аккаунт Telegram для получения оповещений портала через Telegram.", - innerDescription: "Добавив приложение сервиса Telegram Вы сможете на странице своего профиля подключить вход на портал используя аккаунт Telegram.", - tokens: ["Токен бота", "Имя бота"] - } -] \ No newline at end of file diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/third-party-services.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/third-party-services.js index c482c854c8..a15b01eeee 100644 --- a/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/third-party-services.js +++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/integration/third-party-services.js @@ -1,11 +1,12 @@ import React from "react"; -import { consumers } from "./sub-components/consumers"; +import { connect } from "react-redux"; +import { getConsumers } from '../../../../../store/settings/actions'; +import { withTranslation } from 'react-i18next'; +import styled from "styled-components"; + import { Box, Text, Link } from "asc-web-components"; import ConsumerItem from "./sub-components/consumerItem"; -import { withTranslation } from 'react-i18next'; -import { connect } from "react-redux"; -import ConsumerItemToggle from "./sub-components/consumerItemToggle"; -import styled from "styled-components"; +import ConsumerToggle from "./sub-components/consumerToggle"; const RootContainer = styled(Box)` @@ -31,12 +32,16 @@ class ThirdPartyServices extends React.Component { document.title = `${t("ThirdPartyAuthorization")} – ${t("OrganizationName")}`; this.state = { - consumers: consumers, selectedConsumer: "", dialogVisible: false } } + componentDidMount() { + const { getConsumers } = this.props; + getConsumers(); + } + onModalOpen = () => { this.setState({ dialogVisible: true, @@ -54,8 +59,8 @@ class ThirdPartyServices extends React.Component { render() { - const { t } = this.props; - const { consumers, selectedConsumer, dialogVisible } = this.state; + const { t, consumers } = this.props; + const { selectedConsumer, dialogVisible } = this.state; const { titleDescription, onModalOpen, onModalClose } = this; const consumerRefs = consumers.reduce((acc, consumer) => { @@ -102,16 +107,17 @@ class ThirdPartyServices extends React.Component { (consumerRefs[i] = el)} - name={consumer.name} - description={consumer.description} + consumer={consumer} consumers={consumers} + dialogVisible={dialogVisible} selectedConsumer={selectedConsumer} onModalClose={onModalClose} /> - (toggleRefs[i] = el)} name={consumer.name} + canSet={consumer.canSet} onToggleClick={() => { this.setState({ selectedConsumer: consumer.name }) onModalOpen() @@ -127,4 +133,9 @@ class ThirdPartyServices extends React.Component { } } -export default connect(null, null)(withTranslation()(ThirdPartyServices)); \ No newline at end of file +const mapStateToProps = (state) => { + const { consumers } = state.settings.integration; + return { consumers } +} + +export default connect(mapStateToProps, { getConsumers })(withTranslation()(ThirdPartyServices)); \ No newline at end of file