@steroidsjs/core 2.2.1 → 2.2.2

package/src/hooks/useInitial.ts

@@ -0,0 +1,9 @@
+import {useRef} from 'react';
+
+export default function useInitial<T>(creator: () => T): T {
+    const initialRef = useRef(null);
+    if (!initialRef.current) {
+        initialRef.current = creator();
+    }
+    return initialRef.current;
+}

package/src/hooks/useLayout.ts

@@ -0,0 +1,197 @@
+import {Dispatch} from 'redux';
+import {useState} from 'react';
+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 {useMount, usePrevious, useUpdateEffect} from 'react-use';
+import {ROUTER_ROLE_LOGIN} from '../ui/nav/Router/Router';
+import useSsr from './useSsr';
+import {IComponents} from '../providers/ComponentsProvider';
+import useComponents from './useComponents';
+import {getRoute, getRoutesMap} from '../reducers/router';
+import {getData, getInitializeCounter, getUser, isInitialized as getIsInitialized} from '../reducers/auth';
+import useSelector from './useSelector';
+import {init, setData, setUser} from '../actions/auth';
+import useDispatch from './useDispatch';
+import {setMeta} from '../actions/fields';
+import {goToRoute} from '../actions/router';
+
+export interface ILayout {
+    status?: string,
+    error?: any,
+    data?: any,
+}
+
+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';
+
+export const HTTP_STATUS_CODES = {
+    [STATUS_NOT_FOUND]: 404,
+    [STATUS_ACCESS_DENIED]: 403,
+    [STATUS_OK]: 200,
+    [STATUS_RENDER_ERROR]: 500,
+    [STATUS_HTTP_ERROR]: 500,
+};
+
+export const runInitAction = (
+    initAction: (...args: any[]) => Promise<any>,
+    components: IComponents,
+    dispatch: Dispatch<any>,
+) => (
+    initAction(null, dispatch, components)
+        .then(result => {
+            // Configure components
+            if (_isObject(result.config)) {
+                Object.keys(result.config).forEach(name => {
+                    if (!components[name]) {
+                        return;
+                    }
+
+                    Object.keys(result.config[name]).forEach(key => {
+                        const value = result.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 resultMeta = result.meta;
+            const resultUser = result.user;
+            delete result.user;
+            delete result.meta;
+
+            if (resultMeta) {
+                Object.keys(resultMeta).forEach(modelName => {
+                    if (resultMeta[modelName].attributes) {
+                        components.meta.setModel(modelName, resultMeta[modelName]);
+                    }
+                });
+            }
+
+            dispatch(
+                [
+                    // Meta models & enums
+                    Boolean(resultMeta) && setMeta(resultMeta), // TODO skip models
+                    // User auth
+                    setData(result),
+                    // User auth
+                    setUser(resultUser),
+                ].filter(Boolean),
+            );
+        })
+);
+
+export default function useLayout(initAction: any = null): ILayout {
+    const {
+        route,
+        user,
+        data,
+        isInitialized,
+        initializeCounter,
+        redirectPageId,
+        loginRouteId,
+    } = useSelector(state => {
+        const routesMap = getRoutesMap(state);
+        return {
+            route: getRoute(state),
+            user: getUser(state),
+            data: getData(state),
+            isInitialized: getIsInitialized(state),
+            initializeCounter: getInitializeCounter(state),
+            redirectPageId: state.auth.redirectPageId,
+            loginRouteId: Object.keys(routesMap).find(name => routesMap[name].role === ROUTER_ROLE_LOGIN),
+        };
+    });
+
+    const [error, setError] = useState(null);
+
+    const dispatch = useDispatch();
+    const components = useComponents();
+    useMount(() => {
+        // Callback for load initial page data (return promise)
+        if (_isFunction(initAction)) {
+            dispatch(init(true));
+        } else {
+            dispatch(setUser(null));
+        }
+    });
+
+    const initializeCounterPrev = usePrevious(initializeCounter);
+
+    useUpdateEffect(() => {
+        if (!_isFunction(initAction) || initializeCounter <= initializeCounterPrev) {
+            return;
+        }
+
+        runInitAction(initAction, components, dispatch)
+            .then(() => {
+                if (redirectPageId) {
+                    dispatch(goToRoute(redirectPageId));
+                }
+            })
+            .catch(e => {
+                setError(e);
+                throw e;
+            });
+    });
+
+    let status = STATUS_OK;
+    if (!isInitialized) {
+        status = STATUS_LOADING;
+    } else if (error) {
+        status = STATUS_HTTP_ERROR;
+    } else if (!route) {
+        status = STATUS_NOT_FOUND;
+    } else {
+        const pageRoles = route?.roles || [];
+        const userRoles = [].concat(user?.role || []).concat(user?.roles || []);
+        if (userRoles.length === 0) {
+            userRoles.push(null); // Guest
+        }
+        if (_intersection(pageRoles, userRoles).length === 0) {
+            if (loginRouteId && route.id !== loginRouteId) {
+                dispatch(goToRoute(loginRouteId));
+            } else {
+                status = STATUS_ACCESS_DENIED;
+                if (process.env.NODE_ENV !== 'production') {
+                    // eslint-disable-next-line no-console
+                    console.log(
+                        'Access denied. Page roles: ',
+                        pageRoles,
+                        'User roles:',
+                        userRoles.join(),
+                        'Route:',
+                        route,
+                    );
+                }
+            }
+        }
+    }
+
+    //save status code for ssr
+    const ssrContextValue = useSsr();
+    if (process.env.IS_SSR) {
+        ssrContextValue.staticContext.statusCode = HTTP_STATUS_CODES[status];
+    }
+
+    return {
+        status,
+        error,
+        data,
+    };
+}

package/src/hooks/useList.tsx

@@ -0,0 +1,486 @@
+import {useCallback, useMemo} from 'react';
+import _get from 'lodash-es/get';
+import _union from 'lodash-es/union';
+import _isEqual from 'lodash-es/isEqual';
+import * as React from 'react';
+import {useMount, usePrevious, useUnmount, useUpdateEffect} from 'react-use';
+import {IApiMethod} from '../components/ApiComponent';
+import useSelector from '../hooks/useSelector';
+import {getList} from '../reducers/list';
+import useModel from '../hooks/useModel';
+import useAddressBar, {IAddressBarConfig} from '../hooks/useAddressBar';
+import {IList, listDestroy, listFetch, listInit, listLazyFetch, listSetItems} from '../actions/list';
+import useDispatch from '../hooks/useDispatch';
+import {formChange} from '../actions/form';
+import {formSelector} from '../reducers/form';
+import {ILayoutNamesProps, normalizeLayoutNamesProps} from '../ui/list/LayoutNames/LayoutNames';
+import useInitial from '../hooks/useInitial';
+import {IPaginationProps, normalizePaginationProps} from '../ui/list/Pagination/Pagination';
+import {IPaginationSizeProps, normalizePaginationSizeProps} from '../ui/list/PaginationSize/PaginationSize';
+import {IEmptyProps, normalizeEmptyProps} from '../ui/list/Empty/Empty';
+import {IFormProps} from '../ui/form/Form/Form';
+import {Model} from '../components/MetaComponent';
+
+export type ListControlPosition = 'top' | 'bottom' | 'both' | string;
+
+interface ISortProps {
+    /**
+     * Включить сортировку
+     * @example false
+     */
+    enable?: boolean,
+
+    /**
+     * Аттрибут (название) поля сортировки в форме
+     * @example sort
+     */
+    attribute?: string,
+
+    /**
+     * Значение сортировки по умолчанию. Нужно указать название свойства, по которому items будут сортироваться,
+     * а с помощью знака "-" задать тип сортировки (со знаком минус - сортировать по убыванию, иначе по возрастанию).
+     * @example -price
+     */
+    defaultValue?: string | string[] | null,
+}
+
+export interface IListConfig {
+    /**
+     * Идентификатор списка
+     * @example ArticlesList
+     */
+    listId?: string,
+
+    /**
+     * Первичный ключ для item
+     * @example id
+     */
+    primaryKey?: string,
+
+    /**
+     * Url, который вернет коллекцию элементов
+     * @example api/v1/articles
+     */
+    action?: string | IApiMethod,
+
+    /**
+     * Тип HTTP запроса (GET | POST | PUT | DELETE)
+     * @example GET
+     */
+    actionMethod?: HttpMethod,
+
+    /**
+     * Подключение пагинации
+     * @example {loadMore: true}
+     */
+    pagination?: boolean | IPaginationProps,
+
+    /**
+     * Переключение количества элементов в списке
+     * @example {sizes: [3, 6, 9], defaultValue: 3}
+     */
+    paginationSize?: boolean | IPaginationSizeProps,
+
+    /**
+     * Подключение сортировки
+     * @example {enable: true, defaultSort: 'startDate'}
+     */
+    sort?: boolean | ISortProps,
+
+    /**
+     * Варианты расположения элементов коллекции
+     * @example {items: [{id: 'list', label: 'List'}, {id: 'grid', label: 'Grid'}]}
+     */
+    layout?: boolean | ILayoutNamesProps,
+
+    /**
+     * Заглушка в случае отсутствия элементов
+     * @example {text: 'Записи не найдены'}
+     */
+    empty?: boolean | string | IEmptyProps,
+
+    /**
+     * Форма для поиска элементов
+     * @example {fields: ['title'], model: {attributes: ['title:string:Название']}}
+     */
+    searchForm?: Omit<IFormProps, 'formId'> & {
+        formId?: string,
+    },
+
+    /**
+     * Удаление данных списка из хранилища Redux при размонтировании компонента
+     * @example true
+     */
+    autoDestroy?: boolean,
+
+    /**
+     * Обработчик, который вызывается при изменении значений формы, и нужен для подгрузки новых элементов коллекции
+     * @param {IList} list
+     * @param {Object} query
+     * @param {*} http
+     * @return {Promise}
+     */
+    onFetch?: (list: IList, query: Record<string, unknown>, http: any) => Promise<any>,
+
+    /**
+     * Обработчик, который составляет список условий для локальной фильтрации элементов коллекции
+     * @param {Object} query
+     * @return {Array} ['>=', 'age', 18]
+     */
+    condition?: (query: Record<string, unknown>) => any[],
+
+    /**
+     * Синхронизация значений формы списка с адресной строкой
+     * @example true
+     */
+    addressBar?: boolean | IAddressBarConfig,
+
+    scope?: string[],
+
+    /**
+     * Дополнительные параметры, значения которых нужно передавать в запросе для получения данных
+     * @example {tagName: 'MarketReviews'}
+     */
+    query?: Record<string, unknown>,
+
+    model?: string,
+
+    /**
+     * Модель для синхронизации значений формы с адресной строкой
+     * @example {attributes: [{attribute: 'isMilesAvailable', type: boolean}]}
+     */
+    searchModel?: string,
+
+    /**
+     * Элементы коллекции
+     */
+    items?: Array<any>,
+
+    /**
+     * Начальные элементы. Используется для подгрузки нескольких списков в один запрос, при этом не отменяя пагинацию
+     * и последующие запросы на бекенд для 2-й и следующих страниц
+     */
+    initialItems?: Array<any>,
+
+    /**
+     * Количество элементов всего в списке (для отрисовки пагинации), заданное вручную
+     */
+    initialTotal?: number,
+}
+
+export interface IListOutput {
+    list: IList,
+    model: Model,
+    searchModel: Model,
+    paginationPosition: ListControlPosition,
+    paginationSizePosition: ListControlPosition,
+    layoutNamesPosition: ListControlPosition,
+    renderList: (children: any) => any,
+    renderEmpty: () => any,
+    renderPagination: () => any,
+    renderPaginationSize: () => any,
+    renderLayoutNames: () => any,
+    renderSearchForm: () => any,
+    onFetch: (params?: Record<string, unknown>) => void,
+    onSort: (value: any) => void,
+}
+
+export const defaultConfig = {
+    actionMethod: 'get',
+    primaryKey: 'id',
+    autoDestroy: true,
+    sort: {
+        enable: false,
+        attribute: 'sort',
+        defaultValue: null,
+    },
+};
+
+export const normalizeSortProps = (props: IListConfig['sort']) => ({
+    ...defaultConfig.sort,
+    enable: !!props,
+    ...(typeof props === 'boolean' ? {enable: props} : props),
+});
+
+export const getDefaultSearchModel = ({
+    paginationProps,
+    paginationSizeProps,
+    sort,
+    layoutNamesProps,
+}) => ({
+    attributes: [ // default attributes
+        paginationProps.enable && {
+            type: 'number',
+            attribute: paginationProps.attribute,
+            defaultValue: paginationProps.defaultValue,
+        },
+        paginationSizeProps.enable && {
+            type: 'number',
+            attribute: paginationSizeProps.attribute,
+            defaultValue: paginationSizeProps.defaultValue,
+        },
+        sort.enable && {
+            type: 'string', // TODO Need list of strings
+            jsType: 'string[]',
+            attribute: sort.attribute,
+            defaultValue: sort.defaultValue,
+        },
+        layoutNamesProps.enable && {
+            type: 'string',
+            attribute: layoutNamesProps.attribute,
+            defaultValue: layoutNamesProps.defaultValue,
+        },
+    ].filter(Boolean),
+});
+
+export const createInitialValues = ({
+    paginationProps,
+    paginationSizeProps,
+    sort,
+    layoutNamesProps,
+    initialQuery,
+    configQuery,
+}) => ({
+    [paginationProps.attribute]: paginationProps.defaultValue,
+    [paginationSizeProps.attribute]: paginationSizeProps.defaultValue,
+    [sort.attribute]: sort.defaultValue,
+    [layoutNamesProps.attribute]: layoutNamesProps.defaultValue,
+    // TODO [this.props._layout.attribute]:
+    //  this.props.clientStorage.get(this.props._layout.attribute) || this.props._layout.defaultValue,
+    ...initialQuery, // Address bar
+    ...configQuery, // Query from props
+});
+
+/**
+ * useList
+ * Добавляет массу возможностей для взаимодействия с коллекциями. Коллекции можно получать как с бекенда,
+ * так и передавать статичным массивом. В обоих случаях поддерживается пагинация, сортировка, фильтрация данных.
+ * Выбранные фильтры синхронизируются с адресной строкой.
+ */
+export default function useList(config: IListConfig): IListOutput {
+    // Get list from redux state
+    const list = useSelector(state => getList(state, config.listId));
+
+    // Normalize sort config
+    const sort = normalizeSortProps(config.sort);
+
+    // Empty
+    const Empty = require('../ui/list/Empty').default;
+    const emptyProps = normalizeEmptyProps(config.empty);
+    const renderEmpty = () => {
+        if (!emptyProps.enable || list?.isLoading || list?.items?.length > 0) {
+            return null;
+        }
+        return (
+            <Empty list={list} {...emptyProps} />
+        );
+    };
+
+    // Pagination size
+    const PaginationSize = require('../ui/list/PaginationSize').default;
+    const paginationSizeProps = normalizePaginationSizeProps(config.paginationSize);
+    const renderPaginationSize = () => paginationSizeProps.enable
+        ? (
+            <PaginationSize
+                list={list}
+                {...paginationSizeProps}
+            />
+        )
+        : null;
+
+    // Pagination
+    const Pagination = require('../ui/list/Pagination').default;
+    const paginationProps = normalizePaginationProps(config.pagination);
+    const renderPagination = () => paginationProps.enable
+        ? (
+            <Pagination
+                list={list}
+                {...paginationProps}
+                sizeAttribute={paginationSizeProps.attribute}
+            />
+        )
+        : null;
+
+    // Layout switcher
+    const LayoutNames = require('../ui/list/LayoutNames').default;
+    const layoutNamesProps = normalizeLayoutNamesProps(config.layout);
+    const renderLayoutNames = () => <LayoutNames list={list} {...layoutNamesProps} />;
+
+    // Models
+    const defaultSearchModel = useMemo(() => getDefaultSearchModel({
+        paginationProps,
+        paginationSizeProps,
+        sort,
+        layoutNamesProps,
+    }), [layoutNamesProps, paginationProps, paginationSizeProps, sort]);
+    const model = useModel(config.model);
+    const searchModel = useModel(config.searchModel || config.searchForm?.model, defaultSearchModel);
+
+    // Address bar synchronization
+    const {
+        initialQuery,
+        updateQuery,
+    } = useAddressBar({
+        enable: !!config.addressBar,
+        model: searchModel,
+        ...(typeof config.addressBar === 'boolean' ? {enable: config.addressBar} : config.addressBar),
+    });
+
+    // Outside search form
+    const searchFormFields = config.searchForm?.fields;
+    const SearchForm = require('../ui/list/SearchForm').default;
+    const initialValuesSearchForm = useMemo(() => (searchFormFields || []).reduce((acc, field) => {
+        const attribute = typeof field === 'string' ? field : field.attribute;
+        acc[attribute] = initialQuery?.[attribute];
+        return acc;
+    }, {}), [searchFormFields, initialQuery]);
+
+    const searchFormProps = {
+        listId: config.listId,
+        ...config.searchForm,
+        model: searchModel,
+        initialValues: initialValuesSearchForm,
+    };
+
+    const renderSearchForm = () => <SearchForm {...searchFormProps} />;
+
+    // Form id
+    const formId = _get(config, 'searchForm.formId') || config.listId;
+    const dispatch = useDispatch();
+
+    // List wrapper (form context)
+    const _initialValues = useMemo(() => createInitialValues({
+        paginationProps,
+        paginationSizeProps,
+        sort,
+        layoutNamesProps,
+        initialQuery,
+        configQuery: config.query,
+    }), [config.query, initialQuery, layoutNamesProps, paginationProps, paginationSizeProps, sort]);
+    const initialValues = useInitial(() => _initialValues);
+
+    const renderList = useCallback((children: any) => {
+        const Form = require('../ui/form/Form').default;
+        return (
+            <Form
+                formId={formId}
+                initialValues={initialValues}
+                view={false}
+                useRedux
+            >
+                {children}
+            </Form>
+        );
+    }, [formId, initialValues]);
+
+    // Init list in redux store
+    useMount(() => {
+        if (!list) {
+            const toDispatch: any = [
+                listInit(config.listId, {
+                    listId: config.listId,
+                    action: config.action || config.action === '' ? config.action : null,
+                    actionMethod: config.actionMethod || defaultConfig.actionMethod,
+                    onFetch: config.onFetch,
+                    condition: config.condition,
+                    scope: config.scope,
+                    items: null,
+                    sourceItems: config.items || null,
+                    total: config.initialTotal,
+                    isRemote: !config.items,
+                    primaryKey: config.primaryKey || defaultConfig.primaryKey,
+                    formId,
+                    loadMore: paginationProps.loadMore,
+                    pageAttribute: paginationProps.attribute || null,
+                    pageSizeAttribute: paginationSizeProps.attribute || null,
+                    sortAttribute: sort.attribute || null,
+                    layoutAttribute: layoutNamesProps.attribute || null,
+                }),
+            ];
+
+            if (config.initialItems || config.items) {
+                toDispatch.push(listSetItems(config.listId, config.initialItems || config.items));
+            }
+            if (!config.initialItems) {
+                toDispatch.push(listLazyFetch(config.listId));
+            }
+
+            dispatch(toDispatch);
+        }
+    });
+
+    // Check form values change
+    const formValues = useSelector(state => formSelector(state, formId, ({values}) => values));
+    const prevFormValues = usePrevious(formValues);
+
+    useUpdateEffect(() => {
+        if (prevFormValues && !_isEqual(formValues, prevFormValues)) {
+            // Has changes (but not page) -> reset page
+            const attribute = paginationProps.attribute;
+
+            if (prevFormValues?.[attribute] === formValues[attribute] && formValues[attribute] > 1) {
+                formValues[attribute] = paginationProps.defaultValue;
+                dispatch(formChange(formId, attribute, formValues[attribute]));
+            }
+
+            // Sync with address bar
+            updateQuery(formValues);
+
+            // Send request
+            dispatch(listLazyFetch(config.listId));
+        }
+    }, [config.listId, dispatch, formId, formValues, paginationProps.attribute,
+        paginationProps.defaultValue, prevFormValues, updateQuery]);
+
+    // Check change query
+    const prevQuery = usePrevious(config.query);
+    useUpdateEffect(() => {
+        _union(Object.keys(prevQuery), Object.keys(config.query))
+            .forEach(key => {
+                if (_isEqual(prevQuery[key], config.query[key])) {
+                    dispatch(formChange(formId, key, config.query[key]));
+                }
+            });
+    }, [formId, prevQuery, config.query, dispatch]);
+
+    // Check change items
+    useUpdateEffect(() => {
+        dispatch([
+            listSetItems(config.listId, config.items),
+            listLazyFetch(config.listId),
+        ]);
+    }, [dispatch, config.items, config.listId]);
+
+    // Destroy
+    useUnmount(() => {
+        const autoDestroy = typeof config.autoDestroy === 'boolean' ? config.autoDestroy : defaultConfig.autoDestroy;
+        if (autoDestroy) {
+            dispatch(listDestroy(config.listId));
+        }
+    });
+
+    const onFetch = useCallback((params = {}) => {
+        dispatch(listFetch(config.listId, params));
+    }, [config.listId, dispatch]);
+
+    const onSort = useCallback((value) => {
+        dispatch(formChange(formId, sort.attribute, value));
+    }, [dispatch, formId, sort.attribute]);
+
+    return {
+        list,
+        model,
+        searchModel,
+        paginationPosition: paginationProps.position,
+        paginationSizePosition: paginationSizeProps.position,
+        layoutNamesPosition: layoutNamesProps.position,
+        renderList,
+        renderEmpty,
+        renderPagination,
+        renderPaginationSize,
+        renderLayoutNames,
+        renderSearchForm,
+        onFetch,
+        onSort,
+    };
+}