Web: replaced components wrapper to mobx inject

This commit is contained in:
Nikita Gopienko 2021-02-02 19:17:33 +03:00
parent 2a79d8bb8d
commit 560133f82c
16 changed files with 233 additions and 327 deletions

View File

@ -9,7 +9,7 @@ import {
toastr,
Loader,
} from "asc-web-components";
import { PageLayout, store } from "asc-web-common";
import { PageLayout } from "asc-web-common";
import styled from "styled-components";
import { connect } from "react-redux";
import PropTypes from "prop-types";
@ -18,9 +18,8 @@ import {
getConfirmationInfo,
activateConfirmUser,
} from "../../../../store/confirm/actions";
import { observer } from "mobx-react";
import { inject } from "mobx-react";
const { settingsStore } = store;
const { EmployeeActivationStatus } = constants;
const { createPasswordHash, tryRedirectTo } = commonUtils;
@ -352,25 +351,23 @@ function mapStateToProps(state) {
};
}
const ActivateUserFormWrapper = observer((props) => {
const {
greetingSettings,
hashSettings,
defaultPage,
} = settingsStore.settings;
return (
<ActivateUserForm
settings={settingsStore.settings}
greetingTitle={greetingSettings}
hashSettings={hashSettings}
defaultPage={defaultPage}
{...props}
/>
);
});
export default connect(mapStateToProps, {
getConfirmationInfo,
activateConfirmUser,
})(withRouter(withTranslation()(ActivateUserFormWrapper)));
})(
inject(({ store }) => {
const {
greetingSettings,
hashSettings,
defaultPage,
passwordSettings,
} = store.settingsStore;
return {
settings: passwordSettings,
greetingTitle: greetingSettings,
hashSettings,
defaultPage,
};
})(withRouter(withTranslation()(ActivateUserForm)))
);

View File

@ -2,13 +2,12 @@ import React from "react";
import { withRouter } from "react-router";
import { withTranslation } from "react-i18next";
import { Loader } from "asc-web-components";
import { PageLayout, utils as commonUtils, store } from "asc-web-common";
import { PageLayout, utils as commonUtils } from "asc-web-common";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { changeEmail } from "../../../../store/confirm/actions";
import { observer } from "mobx-react";
import { inject } from "mobx-react";
const { tryRedirectTo } = commonUtils;
const { settingsStore } = store;
class ChangeEmail extends React.PureComponent {
componentDidMount() {
@ -74,10 +73,8 @@ function mapStateToProps(state) {
};
}
const ChangeEmailFormWrapper = observer((props) => {
return <ChangeEmailForm defaultPage={settingsStore.defaultPage} {...props} />;
});
export default connect(mapStateToProps, { changeEmail })(
withRouter(withTranslation()(ChangeEmailFormWrapper))
inject(({ store }) => ({
defaultPage: store.settingsStore.defaultPage,
}))(withRouter(withTranslation()(ChangeEmailForm)))
);

View File

@ -1,13 +1,11 @@
import React from "react";
import { withRouter } from "react-router";
import { withTranslation } from "react-i18next";
import { connect } from "react-redux";
import styled from "styled-components";
import { Button, Text, toastr } from "asc-web-components";
import { PageLayout, utils as commonUtils, store } from "asc-web-common";
import { observer } from "mobx-react";
import { PageLayout, utils as commonUtils } from "asc-web-common";
import { inject } from "mobx-react";
const { tryRedirectTo } = commonUtils;
const { settingsStore } = store;
const BodyStyle = styled.div`
margin-top: 70px;
@ -135,18 +133,7 @@ const ChangeOwnerForm = (props) => (
// };
// }
const ChangeOwnerFormWrapper = observer((props) => {
return (
<ChangeOwnerForm
greetingTitle={settingsStore.greetingSettings}
defaultPage={settingsStore.defaultPage}
{...props}
/>
);
});
export default connect(
null,
//mapStateToProps,
{}
)(withRouter(withTranslation()(ChangeOwnerFormWrapper)));
export default inject(({ store }) => ({
greetingTitle: store.settingsStore.greetingSettings,
defaultPage: store.settingsStore.defaultPage,
}))(withRouter(withTranslation()(ChangeOwnerForm)));

View File

@ -18,9 +18,7 @@ import {
getConfirmationInfo,
changePassword,
} from "../../../../store/confirm/actions";
import { observer } from "mobx-react";
const { settingsStore } = store;
import { inject } from "mobx-react";
const { createPasswordHash, tryRedirectTo } = commonUtils;
const { logout /* , getPortalSettings */ } = store.auth.actions;
@ -215,34 +213,31 @@ function mapStateToProps(state) {
return {
isValidConfirmLink: state.auth.isValidConfirmLink,
isConfirmLoaded: state.confirm.isConfirmLoaded,
//settings: state.auth.settings.passwordSettings,
isAuthenticated: state.auth.isAuthenticated,
//settings: state.auth.settings.passwordSettings,
//greetingTitle: state.auth.settings.greetingSettings,
//hashSettings: state.auth.settings.hashSettings,
//defaultPage: state.auth.settings.defaultPage,
};
}
const ChangePasswordFormWrapper = observer((props) => {
const {
greetingSettings,
hashSettings,
defaultPage,
} = settingsStore.settings;
return (
<ChangePasswordForm
settings={settingsStore.settings}
hashSettings={hashSettings}
greetingTitle={greetingSettings}
defaultPage={defaultPage}
{...props}
/>
);
});
export default connect(mapStateToProps, {
changePassword,
getConfirmationInfo,
logout,
})(withRouter(withTranslation()(ChangePasswordFormWrapper)));
});
inject(({ store }) => {
const {
greetingSettings,
hashSettings,
defaultPage,
passwordSettings,
} = store.settingsStore;
return {
settings: passwordSettings,
hashSettings,
greetingTitle: greetingSettings,
defaultPage,
};
})(withRouter(withTranslation()(ChangePasswordForm)));

View File

@ -4,10 +4,8 @@ import { connect } from "react-redux";
import { withTranslation } from "react-i18next";
import styled from "styled-components";
import { Button, TextInput, Text } from "asc-web-components";
import { PageLayout, store } from "asc-web-common";
import { observer } from "mobx-react";
const { settingsStore } = store;
import { PageLayout } from "asc-web-common";
import { inject } from "mobx-react";
const BodyStyle = styled.div`
margin: 70px auto 0 auto;
@ -130,15 +128,8 @@ function mapStateToProps(state) {
};
}
const ChangePhoneFormWrapper = observer((props) => {
return (
<ChangePhoneForm
greetingTitle={settingsStore.greetingSettings}
{...props}
/>
);
});
export default connect(mapStateToProps)(
withRouter(withTranslation()(ChangePhoneFormWrapper))
inject(({ store }) => ({
greetingTitle: store.settingsStore.greetingSettings,
}))(withRouter(withTranslation()(ChangePhoneForm)))
);

View File

@ -18,9 +18,8 @@ import {
getConfirmationInfo,
createConfirmUser,
} from "../../../../store/confirm/actions";
import { observer } from "mobx-react";
import { inject } from "mobx-react";
const { settingsStore } = store;
const { logout, login } = store.auth.actions;
const { createPasswordHash, tryRedirectTo } = commonUtils;
const inputWidth = "400px";
@ -380,27 +379,24 @@ function mapStateToProps(state) {
};
}
const CreateUserFormWrapper = observer((props) => {
const {
greetingSettings,
hashSettings,
defaultPage,
} = settingsStore.settings;
return (
<CreateUserForm
settings={settingsStore.settings}
greetingTitle={greetingSettings}
hashSettings={hashSettings}
defaultPage={defaultPage}
{...props}
/>
);
});
export default connect(mapStateToProps, {
getConfirmationInfo,
createConfirmUser,
login,
logout,
})(withRouter(withTranslation()(CreateUserFormWrapper)));
});
inject(({ store }) => {
const {
passwordSettings,
greetingSettings,
hashSettings,
defaultPage,
} = store.settingsStore.settings;
return {
settings: passwordSettings,
greetingTitle: greetingSettings,
hashSettings,
defaultPage,
};
})(withRouter(withTranslation()(CreateUserForm)));

View File

@ -6,9 +6,8 @@ import styled from "styled-components";
import PropTypes from "prop-types";
import { withTranslation } from "react-i18next";
import { store, api, PageLayout } from "asc-web-common";
import { observer } from "mobx-react";
import { inject } from "mobx-react";
const { settingsStore } = store;
const { logout } = store.auth.actions;
const { deleteSelf } = api.people;
@ -126,15 +125,8 @@ function mapStateToProps(state) {
};
}
const ProfileRemoveFormWrapper = observer((props) => {
return (
<ProfileRemoveForm
greetingTitle={settingsStore.greetingSettings}
{...props}
/>
);
});
export default connect(mapStateToProps, { logout })(
withRouter(withTranslation()(ProfileRemoveFormWrapper))
inject(({ store }) => ({
greetingTitle: store.settingsStore.greetingSettings,
}))(withRouter(withTranslation()(ProfileRemoveForm)))
);

View File

@ -1,13 +1,11 @@
import React, { useEffect } from "react";
import { connect } from "react-redux";
import styled from "styled-components";
import { utils, store } from "asc-web-common";
import { utils } from "asc-web-common";
import { Text, utils as Utils, Box } from "asc-web-components";
import { createI18N } from "../../../../helpers/i18n";
import { useTranslation, Trans } from "react-i18next";
import { observer } from "mobx-react";
import { inject } from "mobx-react";
const { settingsStore } = store;
const { changeLanguage } = utils;
const { tablet } = Utils.device;
@ -130,13 +128,6 @@ const AdvantagesContainer = ({ organizationName }) => {
// };
// }
const AdvantagesContainerWrapper = observer((props) => {
return (
<AdvantagesContainer
organizationName={settingsStore.organizationName}
{...props}
/>
);
});
export default connect(null /* mapStateToProps */)(AdvantagesContainerWrapper);
export default inject(({ store }) => ({
organizationName: store.settingsStore.organizationName,
}))(AdvantagesContainer);

View File

@ -4,14 +4,13 @@ import styled from "styled-components";
import { connect } from "react-redux";
import { withRouter } from "react-router";
import { Text } from "asc-web-components";
import { utils, store } from "asc-web-common";
import { utils } from "asc-web-common";
import { useTranslation, Trans } from "react-i18next";
import { createI18N } from "../../../../helpers/i18n";
import moment from "moment";
import { observer } from "mobx-react";
import { inject } from "mobx-react";
const { settingsStore } = store;
const { changeLanguage } = utils;
const i18n = createI18N({
@ -118,15 +117,11 @@ function mapStateToProps({ auth, payments }) {
};
}
const HeaderContainerWrapper = observer((props) => {
const { organizationName, culture } = settingsStore.settings;
return (
<HeaderContainer
organizationName={organizationName}
culture={culture}
{...props}
/>
);
});
export default connect(mapStateToProps)(withRouter(HeaderContainerWrapper));
export default connect(mapStateToProps);
inject(({ store }) => {
const { organizationName, culture } = store.settingsStore;
return {
organizationName,
culture,
};
})(withRouter(HeaderContainer));

View File

@ -16,10 +16,7 @@ import {
} from "../../../../../store/settings/actions";
import { saveToSessionStorage, getFromSessionStorage } from "../../utils";
import { setDocumentTitle } from "../../../../../helpers/utils";
import { observer } from "mobx-react";
import { store } from "asc-web-common";
const { settingsStore } = store;
import { inject } from "mobx-react";
const StyledComponent = styled.div`
.margin-top {
@ -260,18 +257,26 @@ class CustomTitles extends React.Component {
// };
// }
const CustomTitlesWrapper = observer((props) => {
const { greetingSettings, organizationName } = settingsStore.settings;
return (
<CustomTitles
greetingSettings={greetingSettings}
organizationName={organizationName}
{...props}
/>
);
});
// const CustomTitlesWrapper = observer((props) => {
// const { greetingSettings, organizationName } = settingsStore;
// return (
// <CustomTitles
// greetingSettings={greetingSettings}
// organizationName={organizationName}
// {...props}
// />
// );
// });
export default connect(null /* mapStateToProps */, {
setGreetingTitle,
restoreGreetingTitle,
})(withTranslation()(CustomTitlesWrapper));
});
inject(({ store }) => {
const { greetingSettings, organizationName } = store.settingsStore;
return {
greetingSettings,
organizationName,
};
})(withTranslation()(CustomTitles));

View File

@ -10,10 +10,8 @@ import {
} from "../../../../../store/settings/actions";
import { default as clientStore } from "../../../../../store/store";
import { setDocumentTitle } from "../../../../../helpers/utils";
import { observer } from "mobx-react";
import { inject } from "mobx-react";
const { settingsStore } = store;
const { getLanguage } = store.auth.selectors;
const { changeLanguage } = utils;
const {
getPortalCultures,
@ -272,27 +270,33 @@ class Customization extends React.Component {
}
}
function mapStateToProps(state) {
// const {
// culture,
// timezone,
// timezones,
// cultures,
// nameSchemaId,
// organizationName,
// } = state.auth.settings;
return {
// portalLanguage: culture,
// portalTimeZoneId: timezone,
language: getLanguage(state),
// rawTimezones: timezones,
// rawCultures: cultures,
// nameSchemaId: nameSchemaId,
// organizationName,
};
}
// function mapStateToProps(state) {
// const {
// culture,
// timezone,
// timezones,
// cultures,
// nameSchemaId,
// organizationName,
// } = state.auth.settings;
// return {
// portalLanguage: culture,
// portalTimeZoneId: timezone,
// language: getLanguage(state),
// rawTimezones: timezones,
// rawCultures: cultures,
// nameSchemaId: nameSchemaId,
// organizationName,
// };
// }
const CustomizationWrapper = observer((props) => {
export default connect(null, {
getPortalCultures,
setLanguageAndTime,
getPortalTimezones,
});
inject(({ store }) => {
const {
culture,
timezone,
@ -300,23 +304,14 @@ const CustomizationWrapper = observer((props) => {
cultures,
nameSchemaId,
organizationName,
} = settingsStore.settings;
return (
<Customization
portalLanguage={culture}
portalTimeZoneId={timezone}
rawTimezones={timezones}
rawCultures={cultures}
nameSchemaId={nameSchemaId}
organizationName={organizationName}
{...props}
/>
);
});
export default connect(mapStateToProps, {
getPortalCultures,
setLanguageAndTime,
getPortalTimezones,
})(withTranslation()(CustomizationWrapper));
} = store.settingsStore;
return {
portalLanguage: culture,
language: culture || "en-US",
portalTimeZoneId: timezone,
rawTimezones: timezones,
rawCultures: cultures,
nameSchemaId,
organizationName,
};
})(withTranslation()(Customization));

View File

@ -20,9 +20,8 @@ import {
import { saveToSessionStorage, getFromSessionStorage } from "../../utils";
import { default as clientStore } from "../../../../../store/store";
import { setDocumentTitle } from "../../../../../helpers/utils";
import { observer } from "mobx-react";
import { inject } from "mobx-react";
const { settingsStore } = store;
const { getLanguage } = store.auth.selectors;
const { changeLanguage } = utils;
const {
@ -404,29 +403,35 @@ class LanguageAndTimeZone extends React.Component {
}
}
function mapStateToProps(state) {
// const {
// culture,
// timezone,
// timezones,
// cultures,
// greetingSettings,
// nameSchemaId,
// organizationName,
// } = state.auth.settings;
return {
//portalLanguage: culture,
//portalTimeZoneId: timezone,
language: getLanguage(state),
// rawTimezones: timezones,
// rawCultures: cultures,
// greetingSettings,
// nameSchemaId,
// organizationName,
};
}
// function mapStateToProps(state) {
// const {
// culture,
// timezone,
// timezones,
// cultures,
// greetingSettings,
// nameSchemaId,
// organizationName,
// } = state.auth.settings;
// return {
// portalLanguage: culture,
// portalTimeZoneId: timezone,
// language: getLanguage(state),
// rawTimezones: timezones,
// rawCultures: cultures,
// greetingSettings,
// nameSchemaId,
// organizationName,
// };
// }
const LanguageAndTimeZoneWrapper = observer((props) => {
export default connect(null, {
getPortalCultures,
setLanguageAndTime,
getPortalTimezones,
});
inject(({ store }) => {
const {
culture,
timezone,
@ -435,24 +440,15 @@ const LanguageAndTimeZoneWrapper = observer((props) => {
nameSchemaId,
organizationName,
greetingSettings,
} = settingsStore.settings;
return (
<LanguageAndTimeZone
portalLanguage={culture}
portalTimeZoneId={timezone}
rawTimezones={timezones}
rawCultures={cultures}
greetingSettings={greetingSettings}
nameSchemaId={nameSchemaId}
organizationName={organizationName}
{...props}
/>
);
});
export default connect(mapStateToProps, {
getPortalCultures,
setLanguageAndTime,
getPortalTimezones,
})(withTranslation()(LanguageAndTimeZoneWrapper));
} = store.settingsStore;
return {
portalLanguage: culture,
portalTimeZoneId: timezone,
language: culture || "en-US",
rawTimezones: timezones,
rawCultures: cultures,
greetingSettings,
nameSchemaId,
organizationName,
};
})(withTranslation()(LanguageAndTimeZone));

View File

@ -1,11 +1,10 @@
import React, { Component, useEffect } from "react";
import { withRouter } from "react-router";
import { connect } from "react-redux";
//import i18n from "../../i18n";
import { I18nextProvider, withTranslation } from "react-i18next";
import styled from "styled-components";
import { TabContainer } from "asc-web-components";
import { utils, store } from "asc-web-common";
import { utils } from "asc-web-common";
import OwnerSettings from "./sub-components/owner";
import AdminsSettings from "./sub-components/admins";
@ -13,9 +12,8 @@ import AdminsSettings from "./sub-components/admins";
import { createI18N } from "../../../../../helpers/i18n";
import { setDocumentTitle } from "../../../../../helpers/utils";
import { observer } from "mobx-react";
import { inject } from "mobx-react";
const { settingsStore } = store;
const i18n = createI18N({
page: "Settings",
localesPath: "pages/Settings",
@ -130,18 +128,9 @@ class PureAccessRights extends Component {
// };
// }
const PureAccessRightsWrapper = observer((props) => {
return (
<PureAccessRights
organizationName={settingsStore.organizationName}
{...props}
/>
);
});
const AccessRightsContainer = connect(null /* mapStateToProps */)(
withTranslation()(PureAccessRightsWrapper)
);
const AccessRightsContainer = inject(({ store }) => ({
organizationName: store.settingsStore.organizationName,
}))(withTranslation()(PureAccessRights));
const AccessRights = (props) => {
useEffect(() => {

View File

@ -26,14 +26,12 @@ import {
EmptyScreenContainer,
Icons,
} from "asc-web-components";
import { FilterInput, PeopleSelector, store } from "asc-web-common";
import { FilterInput, PeopleSelector } from "asc-web-common";
import { getUserRole } from "../../../../../../store/settings/selectors";
import isEmpty from "lodash/isEmpty";
import { createI18N } from "../../../../../../helpers/i18n";
import { observer } from "mobx-react";
const { settingsStore } = store;
import { inject } from "mobx-react";
const i18n = createI18N({
page: "Settings",
@ -593,17 +591,12 @@ AdminsSettings.propTypes = {
owner: PropTypes.object,
};
const AdminsSettingsWrapper = observer((props) => {
return (
<AdminsSettings
groupsCaption={settingsStore.customNames.groupsCaption}
{...props}
/>
);
});
export default connect(mapStateToProps, {
changeAdmins,
fetchPeople,
getUpdateListAdmin,
})(withRouter(AdminsSettingsWrapper));
});
inject(({ store }) => ({
groupsCaption: store.settingsStore.customNames.groupsCaption,
}))(withRouter(AdminsSettings));

View File

@ -15,13 +15,12 @@ import {
RequestLoader,
Loader,
} from "asc-web-components";
import { PeopleSelector, store } from "asc-web-common";
import { PeopleSelector } from "asc-web-common";
import isEmpty from "lodash/isEmpty";
import { createI18N } from "../../../../../../helpers/i18n";
import { observer } from "mobx-react";
import { inject } from "mobx-react";
const { settingsStore } = store;
const i18n = createI18N({
page: "Settings",
localesPath: "pages/Settings",
@ -265,16 +264,11 @@ OwnerSettings.propTypes = {
owner: PropTypes.object,
};
const OwnerSettingsWrapper = observer((props) => {
return (
<OwnerSettings
groupsCaption={settingsStore.customNames.groupsCaption}
ownerId={settingsStore.ownerId}
{...props}
/>
);
});
export default connect(mapStateToProps, { getPortalOwner })(
withRouter(OwnerSettingsWrapper)
inject(({ store }) => {
return {
groupsCaption: store.settingsStore.customNames.groupsCaption,
ownerId: store.settingsStore.ownerId,
};
})(withRouter(OwnerSettings))
);

View File

@ -10,7 +10,6 @@ import {
ErrorContainer,
history,
utils as commonUtils,
store,
} from "asc-web-common";
import { Loader, utils } from "asc-web-components";
@ -34,9 +33,7 @@ import {
import { createI18N } from "../../../helpers/i18n";
import { setDocumentTitle } from "../../../helpers/utils";
import { observer } from "mobx-react";
const { settingsStore } = store;
import { inject } from "mobx-react";
const i18n = createI18N({
page: "Wizard",
@ -567,33 +564,6 @@ function mapStateToProps({ wizard, auth }) {
};
}
const WizardPageWrapper = observer((props) => {
const {
culture,
wizardToken,
passwordSettings,
cultures,
timezones,
timezone,
urlLicense,
hashSettings,
} = settingsStore.settings;
return (
<WizardPage
culture={culture}
wizardToken={wizardToken}
passwordSettings={passwordSettings}
cultures={cultures}
timezones={timezones}
timezone={timezone}
urlLicense={urlLicense}
hashSettings={hashSettings}
{...props}
/>
);
});
export default connect(mapStateToProps, {
getPortalPasswordSettings,
getPortalCultures,
@ -604,4 +574,27 @@ export default connect(mapStateToProps, {
setPortalOwner,
setLicense,
resetLicenseUploaded,
})(withRouter(WizardPageWrapper));
});
inject(({ store }) => {
const {
culture,
wizardToken,
passwordSettings,
cultures,
timezones,
timezone,
urlLicense,
hashSettings,
} = store.settingsStore;
return {
culture,
wizardToken,
passwordSettings,
cultures,
timezones,
timezone,
urlLicense,
hashSettings,
};
})(withRouter(WizardPage));