@steroidsjs/core 2.0.0-rc.6 → 2.0.1-beta.112

package/hoc/formSubmit.tsx

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import {SubmissionError} from 'redux-form';
+import _isUndefined from 'lodash-es/isUndefined';
+import _set from 'lodash-es/set';
+import _get from 'lodash-es/get';
+import _isPlainObject from 'lodash-es/isPlainObject';
+import _isArray from 'lodash-es/isArray';
+import components from './components';
+import {IComponentsHocOutput} from './components';
+import validate from "../ui/form/validate";
+
+/**
+ * Form Submit HOC
+ * Используется в `Form` для добавления обработчика `onSubmit`
+ */
+export interface IFormSubmitHocInput {
+    action?: any,
+    actionMethod?: string,
+    autoSave?: any,
+    validators?: any,
+    onBeforeSubmit?: any,
+    onSubmit?: any,
+    onAfterSubmit?: any,
+    onComplete?: any,
+    onTwoFactor?: (providerName: string, info?: any) => Promise<any>
+    autoStartTwoFactor?: boolean,
+}
+
+export interface IFormSubmitHocOutput {
+
+}
+
+interface IFormSubmitHocPrivateProps extends IComponentsHocOutput {
+    formRegisteredFields?: any,
+    formId?: string,
+}
+
+export default (): any => WrappedComponent =>
+    components('http', 'clientStorage')(
+        class FormSubmitHoc extends React.PureComponent<IFormSubmitHocInput & IFormSubmitHocPrivateProps> {
+            static WrappedComponent = WrappedComponent;
+            /**
+             * Proxy real name, prop types and default props for storybook
+             */
+            static displayName = WrappedComponent.displayName || WrappedComponent.name;
+            static propTypes = WrappedComponent.propTypes;
+            static defaultProps = {
+                ...WrappedComponent.defaultProps,
+                actionMethod: 'POST',
+                autoStartTwoFactor: true,
+            };
+
+            constructor(props) {
+                super(props);
+                this._onSubmit = this._onSubmit.bind(this);
+            }
+
+            render() {
+                return <WrappedComponent {...this.props} onSubmit={this._onSubmit}/>;
+            }
+
+            cleanEmptyObject(object) {
+                // if all properties are null substitute the object with null
+                if (!Object.values(object).some(x => x)) {
+                    return null;
+                }
+
+                Object.keys(object).forEach(key => {
+                    if (_isPlainObject(object[key])) {
+                        object[key] = this.cleanEmptyObject(object[key]);
+                    }
+
+                    if (_isArray(object[key])) {
+                        let array = object[key];
+
+                        array.forEach((value, index) => {
+                            if (_isPlainObject(value)) {
+                                array[index] = this.cleanEmptyObject(value);
+                            }
+                        });
+
+                        if (!object[key].some(x => Boolean(x))) {
+                            object[key] = [];
+                        }
+                    }
+                });
+
+                return object;
+            }
+
+            _onSubmit(values) {
+                // Append non touched fields to values object
+                Object.keys(this.props.formRegisteredFields || {}).forEach(key => {
+                    const name = this.props.formRegisteredFields[key].name;
+                    if (_isUndefined(_get(values, name))) {
+                        _set(values, name, null);
+                    }
+                });
+                values = this.cleanEmptyObject(values);
+
+                // Event onBeforeSubmit
+                if (
+                    this.props.onBeforeSubmit &&
+                    this.props.onBeforeSubmit(values) === false
+                ) {
+                    return;
+                }
+                if (this.props.validators) {
+                    validate(values, this.props.validators);
+                }
+                if (this.props.onSubmit) {
+                    return this.props.onSubmit(values);
+                }
+                return this.props.http
+                    .send(
+                        this.props.actionMethod,
+                        this.props.action || location.pathname,
+                        values,
+                        {
+                            onTwoFactor: this.props.onTwoFactor
+                                ? async (providerName) => {
+                                    const info = this.props.autoStartTwoFactor
+                                        ? await this.props.http.post(`/api/v1/auth/2fa/${providerName}/send`)
+                                        : null;
+                                    this.props.onTwoFactor(providerName, info);
+                                }
+                                : undefined
+                        }
+                    )
+                    .then(response => {
+                        // Skip on 2fa
+                        if (response.twoFactor) {
+                            return;
+                        }
+
+                        const data = response.data || {};
+                        // Event onAfterSubmit
+                        if (
+                            this.props.onAfterSubmit &&
+                            this.props.onAfterSubmit(values, data, response) === false
+                        ) {
+                            return;
+                        }
+                        if (data.errors) {
+                            throw new SubmissionError(data.errors);
+                        }
+                        if (this.props.onComplete) {
+                            this.props.onComplete(values, data, response);
+                        }
+                        if (this.props.autoSave) {
+
+                            const AutoSaveHelper = require('../ui/form/Form/AutoSaveHelper').default;
+                            AutoSaveHelper.remove(this.props.clientStorage, this.props.formId);
+                        }
+                    });
+            }
+        }
+    )

package/hoc/http.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import axios from 'axios';
+import _isFunction from 'lodash-es/isFunction';
+import _isObject from 'lodash-es/isObject';
+import components, {IComponentsHocInput} from './components';
+
+/**
+ * Http HOC
+ * Обертка для асинхронного получения данных с бекенда. В отличии от `Fetch HOC`, он не хранит данные в Redux Store
+ * и не добавляет "Загрузка..." при запросе.
+ */
+export interface IHttpHocInput {
+}
+
+export interface IHttpHocOutput {
+    fetch: (params: object) => Promise<any> | any,
+}
+
+interface IHttpHocPrivateProps extends IComponentsHocInput {
+}
+
+interface IHttpHocState {
+    data?: any,
+    isLoading: boolean,
+}
+
+export default (requestFunc): any => WrappedComponent =>
+    components()(
+        class HttpHoc extends React.PureComponent<IHttpHocInput & IHttpHocPrivateProps, IHttpHocState> {
+            static WrappedComponent = WrappedComponent;
+
+            _isRendered = false;
+            _cancels = [];
+
+            constructor(props) {
+                super(props);
+
+                this._fetch = this._fetch.bind(this);
+                this._createCancelToken = this._createCancelToken.bind(this);
+
+                this.state = {
+                    data: null,
+                    isLoading: true,
+                };
+            }
+
+            UNSAFE_componentWillMount() {
+                this._fetch();
+            }
+
+            componentDidMount() {
+                this._isRendered = true;
+            }
+
+            componentWillUnmount() {
+                this._isRendered = false;
+                this._cancels.forEach(cancel =>
+                    cancel('Canceled on unmount component')
+                );
+            }
+
+            render() {
+                const outputProps = {
+                    fetch: this._fetch,
+                } as IHttpHocOutput;
+                return (
+                    <WrappedComponent
+                        {...this.props}
+                        {...this.state.data}
+                        {...outputProps}
+                        isLoading={this.state.isLoading}
+                    />
+                );
+            }
+
+            _createCancelToken() {
+                return new axios.CancelToken(cancel => {
+                    this._cancels.push(cancel);
+                });
+            }
+
+            _fetch(params = {}) {
+                this.setState({isLoading: true}, () => {
+                    const result = requestFunc({
+                        ...this.props,
+                        ...params,
+                        createCancelToken: this._createCancelToken
+                    });
+                    if (_isObject(result)) {
+                        if (_isFunction(result.then)) {
+                            return result.then(data => {
+                                if (this._isRendered) {
+                                    this.setState({
+                                        data,
+                                        isLoading: false,
+                                    });
+                                }
+                                return data;
+                            });
+                        } else {
+                            this.setState({
+                                data: result,
+                                isLoading: false,
+                            });
+                        }
+                    }
+                    return result;
+                })
+            }
+        }
+    )
+

package/hoc/index.ts

@@ -0,0 +1,37 @@
+import application from './application';
+import bem from './bem';
+import components from './components';
+import connect from './connect';
+import dataProvider from './dataProvider';
+import fetch from './fetch';
+import field from './field';
+import file from './file';
+import form from './form';
+import formSubmit from './formSubmit';
+import http from './http';
+import layout from './layout';
+import list from './list';
+import normalize from './normalize';
+import props from './props';
+import screen from './screen';
+import theme from './theme';
+
+export {
+    application,
+    bem,
+    components,
+    connect,
+    dataProvider,
+    fetch,
+    field,
+    file,
+    form,
+    formSubmit,
+    http,
+    layout,
+    list,
+    normalize,
+    props,
+    screen,
+    theme,
+};

package/hoc/layout.tsx

@@ -0,0 +1,205 @@
+import * as React from 'react';
+import {connect} from 'react-redux';
+import _get from 'lodash-es/get';
+import _isFunction from 'lodash-es/isFunction';
+import _isObject from 'lodash-es/isObject';
+import _upperFirst from 'lodash-es/upperFirst';
+import _merge from 'lodash-es/merge';
+import _intersection from 'lodash-es/intersection';
+
+import {getRoute, IRoute} from '../reducers/router';
+import {getData, getInitializeCounter, getUser, isInitialized} from '../reducers/auth';
+import {init, setData, setUser} from '../actions/auth';
+import {setMeta} from '../actions/fields';
+import {goToRoute} from '../actions/router';
+import components, {IComponentsHocOutput} from './components';
+import {IConnectHocOutput} from './connect';
+import {IRouteItem} from '../ui/nav/Router/Router';
+
+export const STATUS_LOADING = 'loading';
+export const STATUS_NOT_FOUND = 'not_found';
+export const STATUS_RENDER_ERROR = 'render_error';
+export const STATUS_HTTP_ERROR = 'render_error';
+export const STATUS_ACCESS_DENIED = 'access_denied';
+export const STATUS_OK = 'ok';
+
+/**
+ * Layout HOC
+ * Используется для макета (layout) приложения, добавляя в него данные авторизации и статуса рендера страницы.
+ * Передаваемый первым аргументом `initAction` будет вызываться каждый раз, когда необходимо обновить данные
+ * авторизации (первая загрузка страницы, логин/регистация и выход).
+ */
+export interface ILayoutHocInput {
+    route?: IRoute,
+    user?: {
+        role: string,
+    },
+    data?: object,
+    initializeCounter?: number,
+    components: IComponentsHocOutput,
+    isInitialized?: boolean,
+    redirectPageId?: any,
+}
+
+export interface ILayoutHocOutput {
+    http?: any,
+    status: string,
+    renderError: string,
+    route: IRouteItem,
+    user: any,
+    data: any,
+    isInitialized: boolean,
+}
+
+interface ILayoutHocPrivateProps extends IConnectHocOutput, IComponentsHocOutput {
+
+}
+
+interface ILayoutHocState {
+    httpError?: string,
+    renderError?: string,
+}
+
+const stateMap = state => ({
+    route: getRoute(state),
+    user: getUser(state),
+    data: getData(state),
+    isInitialized: isInitialized(state),
+    initializeCounter: getInitializeCounter(state),
+    redirectPageId: state.auth.redirectPageId
+});
+
+export default (initAction): any => WrappedComponent =>
+    connect(stateMap)(
+        components('http')(
+            class LayoutHoc extends React.PureComponent<ILayoutHocInput & ILayoutHocPrivateProps, ILayoutHocState> {
+                static WrappedComponent = WrappedComponent;
+                /**
+                 * Proxy real name, prop types and default props
+                 */
+                static displayName = WrappedComponent.displayName || WrappedComponent.name;
+                static propTypes = {};
+
+                static getDerivedStateFromError(e) {
+                    return {
+                        renderError: String(e)
+                    };
+                }
+
+                constructor(props) {
+                    super(props);
+                    this.state = {
+                        renderError: null,
+                        httpError: null
+                    };
+                }
+
+                UNSAFE_componentWillMount() {
+                    // Callback for load initial page data (return promise)
+                    if (_isFunction(initAction)) {
+                        this.props.dispatch(init(true));
+                    }
+                }
+
+                componentDidUpdate(prevProps) {
+                    if (
+                        _isFunction(initAction) &&
+                        this.props.initializeCounter > prevProps.initializeCounter
+                    ) {
+                        initAction(this.props, this.props.dispatch)
+                            .then(data => {
+                                // Configure components
+                                if (_isObject(data.config)) {
+                                    const components = this.props.components;
+                                    Object.keys(data.config).map(name => {
+                                        if (components[name]) {
+                                            Object.keys(data.config[name]).map(key => {
+                                                const value = data.config[name][key];
+                                                const setter = 'set' + _upperFirst(key);
+                                                if (_isFunction(components[name][setter])) {
+                                                    components[name][setter](value);
+                                                } else if (
+                                                    _isObject(components[name][key]) &&
+                                                    _isObject(value)
+                                                ) {
+                                                    _merge(components[name][key], value);
+                                                } else {
+                                                    components[name][key] = value;
+                                                }
+                                            });
+                                        }
+                                    });
+                                }
+                                const {user, meta} = data;
+                                delete data.user;
+                                delete data.meta;
+                                this.props.dispatch(
+                                    [
+                                        // Meta models & enums
+                                        Boolean(meta) && setMeta(meta),
+                                        // User auth
+                                        setData(data),
+                                        // User auth
+                                        setUser(user),
+                                        this.props.redirectPageId && goToRoute(this.props.redirectPageId)
+                                    ].filter(Boolean)
+                                );
+                            })
+                            .catch(e => {
+                                this.setState({
+                                    httpError: e
+                                });
+                                throw e;
+                            });
+                    }
+                }
+
+                render() {
+                    let status = STATUS_OK;
+                    if (!this.props.isInitialized) {
+                        status = STATUS_LOADING;
+                    } else if (this.state.renderError) {
+                        status = STATUS_RENDER_ERROR;
+                    } else if (this.state.httpError) {
+                        status = STATUS_HTTP_ERROR;
+                    } else if (!this.props.route) {
+                        status = STATUS_NOT_FOUND;
+                    } else {
+                        const pageRoles = _get(this.props, 'route.roles') || [];
+                        const userRoles = []
+                            .concat(_get(this.props, 'user.role') || [])
+                            .concat(_get(this.props, 'user.roles') || []);
+                        if (userRoles.length === 0) {
+                            userRoles.push(null); // Guest
+                        }
+                        if (_intersection(pageRoles, userRoles).length === 0) {
+                            status = STATUS_ACCESS_DENIED;
+                            if (process.env.NODE_ENV !== 'production') {
+                                console.log(
+                                    'Access denied. Page roles: ',
+                                    pageRoles,
+                                    'User roles:',
+                                    userRoles.join(),
+                                    'Route:',
+                                    this.props.route
+                                ); // eslint-disable-line no-console
+                            }
+                        }
+                    }
+
+                    const outputProps = {
+                        status,
+                        renderError: this.state.renderError,
+                        ...this.props.data,
+                    } as ILayoutHocOutput;
+
+                    return (
+                        <WrappedComponent
+                            {...this.props}
+                            {...outputProps}
+                        />
+                    );
+                }
+            }
+        )
+    )