Improve Error Handling See merge request soapbox-pub/soapbox-fe!1163virtualized-window
commit
bb2729d44b
@ -0,0 +1,111 @@
|
||||
import { InstanceRecord } from 'soapbox/normalizers';
|
||||
import rootReducer from 'soapbox/reducers';
|
||||
import { mockStore } from 'soapbox/test_helpers';
|
||||
|
||||
import { uploadCompose } from '../compose';
|
||||
|
||||
describe('uploadCompose()', () => {
|
||||
describe('with images', () => {
|
||||
let files, store;
|
||||
|
||||
beforeEach(() => {
|
||||
const instance = InstanceRecord({
|
||||
configuration: {
|
||||
statuses: {
|
||||
max_media_attachments: 4,
|
||||
},
|
||||
media_attachments: {
|
||||
image_size_limit: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const state = rootReducer(undefined, {})
|
||||
.set('me', '1234')
|
||||
.set('instance', instance);
|
||||
|
||||
store = mockStore(state);
|
||||
files = [{
|
||||
uri: 'image.png',
|
||||
name: 'Image',
|
||||
size: 15,
|
||||
type: 'image/png',
|
||||
}];
|
||||
});
|
||||
|
||||
it('creates an alert if exceeds max size', async() => {
|
||||
const mockIntl = {
|
||||
formatMessage: jest.fn().mockReturnValue('Image exceeds the current file size limit (10 Bytes)'),
|
||||
};
|
||||
|
||||
const expectedActions = [
|
||||
{ type: 'COMPOSE_UPLOAD_REQUEST', skipLoading: true },
|
||||
{
|
||||
type: 'ALERT_SHOW',
|
||||
message: 'Image exceeds the current file size limit (10 Bytes)',
|
||||
actionLabel: undefined,
|
||||
actionLink: undefined,
|
||||
severity: 'error',
|
||||
},
|
||||
{ type: 'COMPOSE_UPLOAD_FAIL', error: true, skipLoading: true },
|
||||
];
|
||||
|
||||
await store.dispatch(uploadCompose(files, mockIntl));
|
||||
const actions = store.getActions();
|
||||
|
||||
expect(actions).toEqual(expectedActions);
|
||||
});
|
||||
});
|
||||
|
||||
describe('with videos', () => {
|
||||
let files, store;
|
||||
|
||||
beforeEach(() => {
|
||||
const instance = InstanceRecord({
|
||||
configuration: {
|
||||
statuses: {
|
||||
max_media_attachments: 4,
|
||||
},
|
||||
media_attachments: {
|
||||
video_size_limit: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const state = rootReducer(undefined, {})
|
||||
.set('me', '1234')
|
||||
.set('instance', instance);
|
||||
|
||||
store = mockStore(state);
|
||||
files = [{
|
||||
uri: 'video.mp4',
|
||||
name: 'Video',
|
||||
size: 15,
|
||||
type: 'video/mp4',
|
||||
}];
|
||||
});
|
||||
|
||||
it('creates an alert if exceeds max size', async() => {
|
||||
const mockIntl = {
|
||||
formatMessage: jest.fn().mockReturnValue('Video exceeds the current file size limit (10 Bytes)'),
|
||||
};
|
||||
|
||||
const expectedActions = [
|
||||
{ type: 'COMPOSE_UPLOAD_REQUEST', skipLoading: true },
|
||||
{
|
||||
type: 'ALERT_SHOW',
|
||||
message: 'Video exceeds the current file size limit (10 Bytes)',
|
||||
actionLabel: undefined,
|
||||
actionLink: undefined,
|
||||
severity: 'error',
|
||||
},
|
||||
{ type: 'COMPOSE_UPLOAD_FAIL', error: true, skipLoading: true },
|
||||
];
|
||||
|
||||
await store.dispatch(uploadCompose(files, mockIntl));
|
||||
const actions = store.getActions();
|
||||
|
||||
expect(actions).toEqual(expectedActions);
|
||||
});
|
||||
});
|
||||
});
|
@ -1,21 +0,0 @@
|
||||
import camelCase from 'lodash/camelCase';
|
||||
import startCase from 'lodash/startCase';
|
||||
|
||||
const toSentence = (arr) => arr
|
||||
.reduce(
|
||||
(prev, curr, i) => prev + curr + (i === arr.length - 2 ? ' and ' : ', '),
|
||||
'',
|
||||
)
|
||||
.slice(0, -2);
|
||||
|
||||
const buildErrorMessage = (errors) => {
|
||||
const individualErrors = Object.keys(errors).map(
|
||||
(attribute) => `${startCase(camelCase(attribute))} ${toSentence(
|
||||
errors[attribute],
|
||||
)}`,
|
||||
);
|
||||
|
||||
return toSentence(individualErrors);
|
||||
};
|
||||
|
||||
export { buildErrorMessage };
|
@ -0,0 +1,203 @@
|
||||
import camelCase from 'lodash/camelCase';
|
||||
import startCase from 'lodash/startCase';
|
||||
|
||||
const toSentence = (arr: string[]) => arr
|
||||
.reduce(
|
||||
(prev, curr, i) => prev + curr + (i === arr.length - 2 ? ' and ' : ', '),
|
||||
'',
|
||||
)
|
||||
.slice(0, -2);
|
||||
|
||||
type Errors = {
|
||||
[key: string]: string[]
|
||||
}
|
||||
|
||||
const buildErrorMessage = (errors: Errors) => {
|
||||
const individualErrors = Object.keys(errors).map(
|
||||
(attribute) => `${startCase(camelCase(attribute))} ${toSentence(
|
||||
errors[attribute],
|
||||
)}`,
|
||||
);
|
||||
|
||||
return toSentence(individualErrors);
|
||||
};
|
||||
|
||||
const httpErrorMessages: { code: number, name: string, description: string }[] = [
|
||||
{
|
||||
code: 100,
|
||||
name: 'Continue',
|
||||
description: 'The server has received the request headers, and the client should proceed to send the request body',
|
||||
},
|
||||
{
|
||||
code: 101,
|
||||
name: 'Switching Protocols',
|
||||
description: 'The requester has asked the server to switch protocols',
|
||||
},
|
||||
{
|
||||
code: 103,
|
||||
name: 'Checkpoint',
|
||||
description: 'Used in the resumable requests proposal to resume aborted PUT or POST requests',
|
||||
},
|
||||
{
|
||||
code: 200,
|
||||
name: 'OK',
|
||||
description: 'The request is OK (this is the standard response for successful HTTP requests)',
|
||||
},
|
||||
{
|
||||
code: 201,
|
||||
name: 'Created',
|
||||
description: 'The request has been fulfilled',
|
||||
},
|
||||
{
|
||||
code: 202,
|
||||
name: 'Accepted',
|
||||
description: 'The request has been accepted for processing',
|
||||
},
|
||||
{
|
||||
code: 203,
|
||||
name: 'Non-Authoritative Information',
|
||||
description: 'The request has been successfully processed',
|
||||
},
|
||||
{
|
||||
code: 204,
|
||||
name: 'No Content',
|
||||
description: 'The request has been successfully processed',
|
||||
},
|
||||
{
|
||||
code: 205,
|
||||
name: 'Reset Content',
|
||||
description: 'The request has been successfully processed',
|
||||
},
|
||||
{
|
||||
code: 206,
|
||||
name: 'Partial Content',
|
||||
description: 'The server is delivering only part of the resource due to a range header sent by the client',
|
||||
},
|
||||
{
|
||||
code: 400,
|
||||
name: 'Bad Request',
|
||||
description: 'The request cannot be fulfilled due to bad syntax',
|
||||
},
|
||||
{
|
||||
code: 401,
|
||||
name: 'Unauthorized',
|
||||
description: 'The request was a legal request',
|
||||
},
|
||||
{
|
||||
code: 402,
|
||||
name: 'Payment Required',
|
||||
description: 'Reserved for future use',
|
||||
},
|
||||
{
|
||||
code: 403,
|
||||
name: 'Forbidden',
|
||||
description: 'The request was a legal request',
|
||||
},
|
||||
{
|
||||
code: 404,
|
||||
name: 'Not Found',
|
||||
description: 'The requested page could not be found but may be available again in the future',
|
||||
},
|
||||
{
|
||||
code: 405,
|
||||
name: 'Method Not Allowed',
|
||||
description: 'A request was made of a page using a request method not supported by that page',
|
||||
},
|
||||
{
|
||||
code: 406,
|
||||
name: 'Not Acceptable',
|
||||
description: 'The server can only generate a response that is not accepted by the client',
|
||||
},
|
||||
{
|
||||
code: 407,
|
||||
name: 'Proxy Authentication Required',
|
||||
description: 'The client must first authenticate itself with the proxy',
|
||||
},
|
||||
{
|
||||
code: 408,
|
||||
name: 'Request',
|
||||
description: ' Timeout\tThe server timed out waiting for the request',
|
||||
},
|
||||
{
|
||||
code: 409,
|
||||
name: 'Conflict',
|
||||
description: 'The request could not be completed because of a conflict in the request',
|
||||
},
|
||||
{
|
||||
code: 410,
|
||||
name: 'Gone',
|
||||
description: 'The requested page is no longer available',
|
||||
},
|
||||
{
|
||||
code: 411,
|
||||
name: 'Length Required',
|
||||
description: 'The "Content-Length" is not defined. The server will not accept the request without it',
|
||||
},
|
||||
{
|
||||
code: 412,
|
||||
name: 'Precondition',
|
||||
description: ' Failed. The precondition given in the request evaluated to false by the server',
|
||||
},
|
||||
{
|
||||
code: 413,
|
||||
name: 'Request Entity Too Large',
|
||||
description: 'The server will not accept the request',
|
||||
},
|
||||
{
|
||||
code: 414,
|
||||
name: 'Request-URI Too Long',
|
||||
description: 'The server will not accept the request',
|
||||
},
|
||||
{
|
||||
code: 415,
|
||||
name: 'Unsupported Media Type',
|
||||
description: 'The server will not accept the request',
|
||||
},
|
||||
{
|
||||
code: 416,
|
||||
name: 'Requested Range Not Satisfiable',
|
||||
description: 'The client has asked for a portion of the file',
|
||||
},
|
||||
{
|
||||
code: 417,
|
||||
name: 'Expectation Failed',
|
||||
description: 'The server cannot meet the requirements of the Expect request-header field',
|
||||
},
|
||||
{
|
||||
code: 500,
|
||||
name: 'Internal Server Error',
|
||||
description: 'A generic error message',
|
||||
},
|
||||
{
|
||||
code: 501,
|
||||
name: 'Not Implemented',
|
||||
description: 'The server either does not recognize the request method',
|
||||
},
|
||||
{
|
||||
code: 502,
|
||||
name: 'Bad Gateway',
|
||||
description: 'The server was acting as a gateway or proxy and received an invalid response from the upstream server',
|
||||
},
|
||||
{
|
||||
code: 503,
|
||||
name: 'Service Unavailable',
|
||||
description: 'The server is currently unavailable (overloaded or down)',
|
||||
},
|
||||
{
|
||||
code: 504,
|
||||
name: 'Gateway Timeout',
|
||||
description: 'The server was acting as a gateway or proxy and did not receive a timely response from the upstream server',
|
||||
},
|
||||
{
|
||||
code: 505,
|
||||
name: 'HTTP Version Not Supported',
|
||||
description: 'The server does not support the HTTP protocol version used in the request',
|
||||
},
|
||||
{
|
||||
code: 511,
|
||||
name: 'Network Authentication Required',
|
||||
description: 'The client needs to auth',
|
||||
},
|
||||
];
|
||||
|
||||
export { buildErrorMessage, httpErrorMessages };
|
@ -1,10 +0,0 @@
|
||||
export const truncateFilename = (url, maxLength) => {
|
||||
const filename = url.split('/').pop();
|
||||
|
||||
if (filename.length <= maxLength) return filename;
|
||||
|
||||
return [
|
||||
filename.substr(0, maxLength/2),
|
||||
filename.substr(filename.length - maxLength/2),
|
||||
].join('…');
|
||||
};
|
@ -0,0 +1,28 @@
|
||||
const truncateFilename = (url: string, maxLength: number) => {
|
||||
const filename = url.split('/').pop();
|
||||
|
||||
if (!filename) {
|
||||
return filename;
|
||||
}
|
||||
|
||||
if (filename.length <= maxLength) return filename;
|
||||
|
||||
return [
|
||||
filename.substr(0, maxLength/2),
|
||||
filename.substr(filename.length - maxLength/2),
|
||||
].join('…');
|
||||
};
|
||||
|
||||
const formatBytes = (bytes: number, decimals: number = 2) => {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
|
||||
const k = 1024;
|
||||
const dm = decimals < 0 ? 0 : decimals;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
export { formatBytes, truncateFilename };
|
Loading…
Reference in new issue