103 lines
2.5 KiB
JavaScript
103 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
|
|
import { StrictDict } from 'utils';
|
|
import { ErrorStatuses } from 'data/constants/requests';
|
|
import { FileTypes } from 'data/constants/files';
|
|
|
|
import {
|
|
PDFRenderer,
|
|
ImageRenderer,
|
|
TXTRenderer,
|
|
} from 'components/FilePreview/BaseRenderers';
|
|
|
|
import * as module from './hooks';
|
|
import messages from './messages';
|
|
|
|
/**
|
|
* Config data
|
|
*/
|
|
export const RENDERERS = StrictDict({
|
|
[FileTypes.pdf]: PDFRenderer,
|
|
[FileTypes.jpg]: ImageRenderer,
|
|
[FileTypes.jpeg]: ImageRenderer,
|
|
[FileTypes.bmp]: ImageRenderer,
|
|
[FileTypes.png]: ImageRenderer,
|
|
[FileTypes.txt]: TXTRenderer,
|
|
[FileTypes.gif]: ImageRenderer,
|
|
[FileTypes.jfif]: ImageRenderer,
|
|
[FileTypes.pjpeg]: ImageRenderer,
|
|
[FileTypes.pjp]: ImageRenderer,
|
|
[FileTypes.svg]: ImageRenderer,
|
|
});
|
|
|
|
export const SUPPORTED_TYPES = Object.keys(RENDERERS);
|
|
|
|
export const ERROR_STATUSES = {
|
|
[ErrorStatuses.notFound]: messages.fileNotFoundError,
|
|
[ErrorStatuses.serverError]: messages.unknownError,
|
|
};
|
|
|
|
/**
|
|
* State hooks
|
|
*/
|
|
export const state = StrictDict({
|
|
errorStatus: (val) => React.useState(val),
|
|
isLoading: (val) => React.useState(val),
|
|
});
|
|
|
|
/**
|
|
* Util methods and transforms
|
|
*/
|
|
export const getFileType = (fileName) => fileName.split('.').pop()?.toLowerCase();
|
|
export const isSupported = (file) => module.SUPPORTED_TYPES.includes(
|
|
module.getFileType(file.name),
|
|
);
|
|
|
|
/**
|
|
* component hooks
|
|
*/
|
|
export const renderHooks = ({
|
|
file,
|
|
intl,
|
|
}) => {
|
|
const [errorStatus, setErrorStatus] = module.state.errorStatus(null);
|
|
const [isLoading, setIsLoading] = module.state.isLoading(true);
|
|
|
|
const setState = (newState) => {
|
|
setErrorStatus(newState.errorStatus);
|
|
setIsLoading(newState.isLoading);
|
|
};
|
|
|
|
const stopLoading = (status = null) => setState({ isLoading: false, errorStatus: status });
|
|
|
|
const errorMessage = (
|
|
module.ERROR_STATUSES[errorStatus] || module.ERROR_STATUSES[ErrorStatuses.serverError]
|
|
);
|
|
const errorAction = {
|
|
id: 'retry',
|
|
onClick: () => setState({ errorStatus: null, isLoading: true }),
|
|
message: messages.retryButton,
|
|
};
|
|
const error = {
|
|
headingMessage: errorMessage,
|
|
children: intl.formatMessage(errorMessage),
|
|
actions: [errorAction],
|
|
};
|
|
|
|
const Renderer = module.RENDERERS[module.getFileType(file.name)];
|
|
const rendererProps = {
|
|
fileName: file.name,
|
|
url: file.downloadUrl,
|
|
onError: stopLoading,
|
|
onSuccess: () => stopLoading(),
|
|
};
|
|
|
|
return {
|
|
errorStatus,
|
|
isLoading,
|
|
error,
|
|
Renderer,
|
|
rendererProps,
|
|
};
|
|
};
|