@steroidsjs/core 2.3.0-beta.5 → 2.3.0-beta.7

package/src/hooks/useFile.tsx

@@ -1,314 +0,0 @@
-import {useCallback, useEffect} from 'react';
-import {useMount, useUnmount, useUpdate, usePrevious} from 'react-use';
-import FileUp from 'fileup-core';
-import File from 'fileup-core/lib/models/File';
-import QueueCollection from 'fileup-core/lib/models/QueueCollection';
-import _get from 'lodash-es/get';
-import _isEqual from 'lodash-es/isEqual';
-import _difference from 'lodash-es/difference';
-import buildURL from 'axios/lib/helpers/buildURL';
-import {IFileHocInput, IFileHocOutput} from '../hoc/file';
-import useInitial from './useInitial';
-import {useComponents, useForm} from './index';
-
-const imagesMimeTypes = [
-    'image/gif',
-    'image/jpeg',
-    'image/pjpeg',
-    'image/png',
-    'image/heif',
-    'image/heic',
-    'image/heif-sequence',
-    'image/heic-sequence',
-];
-
-function generateBackendUrl(props) {
-    return buildURL(props.backendUrl, {
-        mimeTypes: props.imagesOnly ? imagesMimeTypes : props.mimeTypes,
-        imagesProcessor: props.imagesProcessor,
-        imagesExactSize: props.imagesExactSize,
-    });
-}
-
-export default function useFile(props: IFileHocInput): IFileHocOutput {
-    const {http} = useComponents();
-    http.getAccessToken(); // TODO Run promise..
-
-    const uploader = useInitial(() => new FileUp({
-        dropArea: {},
-        backendUrl: generateBackendUrl(props),
-        uploaderConfig: {
-            ...props.uploaderConfig,
-            headers: {
-                ...props.uploaderConfig?.headers,
-                Authorization: 'Bearer ' + http._accessToken, // TODO how to get access token wuthout promise?
-            },
-        },
-        ...props.uploader,
-        form: {
-            ...(props.uploader && props.uploader.form),
-            multiple: props.multiple,
-        },
-    }));
-
-    /**
-     * Force component update when file status or progress changes
-     * @private
-     */
-    const forceUpdate = useUpdate();
-
-    // Check for initial files
-    const form = useForm();
-    let initialFiles = props.initialFiles;
-    if (!initialFiles) {
-        // Find in form values
-        initialFiles = form.formSelector(state => _get(state, 'values.' + props.input.name.replace(/Ids?$/, '')));
-    }
-    useEffect(() => {
-        if (initialFiles) {
-            const normalizedInitialFiles = [].concat(initialFiles || [])
-                .filter(item => !!item.uid);
-
-            // Remove not exists
-            const toDelete = uploader.queue.getFiles()
-                .filter(file => !normalizedInitialFiles.find(item => item.uid === file.getUid()));
-            if (toDelete.length > 0) {
-                uploader.queue.remove(toDelete);
-            }
-
-            // Add or update
-            uploader.queue.add(
-                normalizedInitialFiles
-                    .map(item => {
-                        const path = item.title || item.label || item.uid || item.id;
-                        const resultHttpMessage = {
-                            ...item,
-                            id: item.id || item.uid,
-                            images: item.thumbnailUrl
-                                ? [{url: item.thumbnailUrl}]
-                                : null,
-                        };
-
-                        const file = uploader.queue.getByUid(item.uid);
-                        if (file) {
-                            file.setPath(path);
-                            file.setResultHttpMessage(resultHttpMessage);
-                            return false;
-                        }
-
-                        return new File({
-                            path,
-                            status: File.STATUS_END,
-                            result: File.RESULT_SUCCESS,
-                            resultHttpStatus: 200,
-                            resultHttpMessage,
-                            uid: item.uid,
-                        });
-                    })
-                    .filter(Boolean),
-            );
-
-            forceUpdate();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [initialFiles]);
-
-    /**
-     * Trigger by queue when file is uploaded or error
-     * @param {File} file
-     * @private
-     */
-    const onQueueItemEnd = useCallback((file) => {
-        forceUpdate();
-        // Check successfully
-        if (file.getResult() !== File.RESULT_SUCCESS) {
-            return;
-        }
-        // Check file id exists
-        const id = _get(file.getResultHttpMessage(), 'id');
-        if (!id) {
-            return;
-        }
-        // Update value
-        if (props.multiple) {
-            props.input.onChange(
-                [].concat(props.input.value || []).concat([id]),
-            );
-        } else {
-            props.input.onChange(id);
-        }
-    }, [forceUpdate, props.input, props.multiple]);
-    const prevOnQueueItemEnd = usePrevious(onQueueItemEnd);
-    useEffect(() => {
-        if (prevOnQueueItemEnd) {
-            uploader.queue.off(
-                QueueCollection.EVENT_ITEM_END,
-                prevOnQueueItemEnd,
-            );
-        }
-        uploader.queue.on(
-            QueueCollection.EVENT_ITEM_END,
-            onQueueItemEnd,
-        );
-    }, [onQueueItemEnd, prevOnQueueItemEnd, uploader.queue]);
-    useUnmount(() => {
-        uploader.queue.off(
-            QueueCollection.EVENT_ITEM_END,
-            onQueueItemEnd,
-        );
-    });
-
-    /**
-     * Triggered by queue when file is removed from it
-     * @param {File[]} removedFiles
-     * @private
-     */
-    const onQueueRemove = useCallback((removedFiles) => {
-        const toRemove = removedFiles
-            .map(file => _get(file.getResultHttpMessage(), 'id'))
-            .filter(Boolean);
-        if (toRemove.length === 0) {
-            return;
-        }
-        // Update value
-        if (props.multiple) {
-            props.input.onChange(
-                []
-                    .concat(props.input.value || [])
-                    .filter(id => toRemove.indexOf(Number(id)) === -1),
-            );
-        } else if (toRemove.indexOf(props.input.value) !== -1) {
-            props.input.onChange(null);
-        }
-        forceUpdate();
-    }, [forceUpdate, props.input, props.multiple]);
-    const prevOnQueueRemove = usePrevious(onQueueRemove);
-    useEffect(() => {
-        if (prevOnQueueRemove) {
-            uploader.queue.off(
-                QueueCollection.EVENT_REMOVE,
-                prevOnQueueRemove,
-            );
-        }
-        uploader.queue.on(
-            QueueCollection.EVENT_REMOVE,
-            onQueueRemove,
-        );
-    }, [onQueueRemove, prevOnQueueRemove, uploader.queue]);
-    useUnmount(() => {
-        uploader.queue.off(
-            QueueCollection.EVENT_REMOVE,
-            onQueueRemove,
-        );
-    });
-
-    useMount(() => {
-        uploader.queue.on(
-            QueueCollection.EVENT_ITEM_STATUS,
-            forceUpdate,
-        );
-        uploader.queue.on(
-            QueueCollection.EVENT_ITEM_PROGRESS,
-            forceUpdate,
-        );
-    });
-
-    useUnmount(() => {
-        uploader.queue.off(
-            QueueCollection.EVENT_ITEM_STATUS,
-            forceUpdate,
-        );
-        uploader.queue.off(
-            QueueCollection.EVENT_ITEM_PROGRESS,
-            forceUpdate,
-        );
-    });
-
-    // Check backend url changes
-    useEffect(() => {
-        uploader.backendUrl = generateBackendUrl({
-            backendUrl: props.backendUrl,
-            imagesOnly: props.imagesOnly,
-            mimeTypes: props.mimeTypes,
-            imagesProcessor: props.imagesProcessor,
-            imagesExactSize: props.imagesExactSize,
-        });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.backendUrl, props.imagesExactSize, props.imagesOnly, props.imagesProcessor, props.mimeTypes]);
-
-    // Check multiple flag update
-    useEffect(() => {
-        uploader.form.multiple = props.multiple;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.multiple]);
-
-    // TODO Check uploader config update
-    //useEffect(() => {
-    //    _merge(uploader, props.uploader);
-    //}, [props.uploader, uploader]);
-
-    // Check remove keys from value
-    const prevInputValue = usePrevious(props.input.value);
-
-    //todo refactoring
-    useEffect(() => {
-        if (prevInputValue && !_isEqual(prevInputValue !== props.input.value)) {
-            const toRemove = _difference(
-                [].concat(prevInputValue || []),
-                [].concat(props.input.value || []),
-            );
-            if (toRemove.length > 0) {
-                uploader.queue.remove(
-                    uploader.queue.getFiles().filter(file => (
-                        toRemove.indexOf(_get(file.getResultHttpMessage(), 'id')) !== -1
-                    )),
-                );
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [prevInputValue, props.input.value]);
-
-    /**
-     * Show browse dialog in user browser
-     * @param {object} event
-     * @private
-     */
-    const onBrowse = (event) => {
-        if (event) {
-            event.preventDefault();
-        }
-        uploader.browse();
-    };
-
-    /**
-     * Remove selected file from uploader
-     * @param {File} fileToRemove
-     */
-    const onRemove = fileToRemove => {
-        uploader.queue.remove([fileToRemove]);
-        forceUpdate();
-    };
-
-    const files = [].concat(uploader.queue.getFiles());
-
-    /**
-     * Add file to uploader
-     * @param {File} newFile
-     */
-    const onAdd = (newFile: File) => {
-        if (!props.multiple) {
-            uploader.queue.remove(files);
-        }
-
-        uploader.queue.add([newFile]);
-        forceUpdate();
-    };
-
-    return {
-        uploader,
-        files,
-        onBrowse,
-        onRemove,
-        onAdd,
-    };
-}

package/src/hooks/useForm.ts

@@ -1,19 +0,0 @@
-import {useContext, useMemo} from 'react';
-import {FormContext} from '../ui/form/Form/Form';
-
-export default function useForm() {
-    const context = useContext(FormContext);
-
-    return useMemo(() => (context
-        ? {
-            formId: context.formId,
-            model: context.model,
-            prefix: context.prefix,
-            size: context.size,
-            layout: context.layout,
-            formDispatch: context?.dispatch,
-            formSelector: (selector: (state, setValue) => any) => context?.provider?.select(context.formId, selector),
-        }
-        : null
-    ), [context]);
-}

package/src/hooks/useInitial.ts

@@ -1,9 +0,0 @@
-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

@@ -1,197 +0,0 @@
-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: routesMap && 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,
-    };
-}