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

package/src/hooks/useFile.tsx

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

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

@@ -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: 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,
+    };
+}