Use intl to format messages

app/soapbox/actions/__tests__/compose.test.js

@@ -34,6 +34,10 @@ describe('uploadCompose()', () => {
     });
 
     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 },
         {
@@ -46,7 +50,7 @@ describe('uploadCompose()', () => {
         { type: 'COMPOSE_UPLOAD_FAIL', error: true, skipLoading: true },
       ];
 
-      await store.dispatch(uploadCompose(files));
+      await store.dispatch(uploadCompose(files, mockIntl));
       const actions = store.getActions();
 
       expect(actions).toEqual(expectedActions);
@@ -82,6 +86,10 @@ describe('uploadCompose()', () => {
     });
 
     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 },
         {
@@ -94,7 +102,7 @@ describe('uploadCompose()', () => {
         { type: 'COMPOSE_UPLOAD_FAIL', error: true, skipLoading: true },
       ];
 
-      await store.dispatch(uploadCompose(files));
+      await store.dispatch(uploadCompose(files, mockIntl));
       const actions = store.getActions();
 
       expect(actions).toEqual(expectedActions);

app/soapbox/actions/compose.js

@@ -79,10 +79,12 @@ export const COMPOSE_ADD_TO_MENTIONS = 'COMPOSE_ADD_TO_MENTIONS';
 export const COMPOSE_REMOVE_FROM_MENTIONS = 'COMPOSE_REMOVE_FROM_MENTIONS';
 
 const messages = defineMessages({
-  uploadErrorLimit: { id: 'upload_error.limit', defaultMessage: 'File upload limit exceeded.' },
-  uploadErrorPoll:  { id: 'upload_error.poll', defaultMessage: 'File upload not allowed with polls.' },
+  exceededImageSizeLimit: { id: 'upload_error.image_size_limit', defaultMessage: 'Image exceeds the current file size limit ({limit})' },
+  exceededVideoSizeLimit: { id: 'upload_error.video_size_limit', defaultMessage: 'Video exceeds the current file size limit ({limit})' },
   scheduleError: { id: 'compose.invalid_schedule', defaultMessage: 'You must schedule a post at least 5 minutes out.'  },
   success: { id: 'compose.submit_success', defaultMessage: 'Your post was sent' },
+  uploadErrorLimit: { id: 'upload_error.limit', defaultMessage: 'File upload limit exceeded.' },
+  uploadErrorPoll:  { id: 'upload_error.poll', defaultMessage: 'File upload not allowed with polls.' },
   view: { id: 'snackbar.view', defaultMessage: 'View' },
 });
 
@@ -296,7 +298,7 @@ export function submitComposeFail(error) {
   };
 }
 
-export function uploadCompose(files) {
+export function uploadCompose(files, intl) {
   return function(dispatch, getState) {
     if (!isLoggedIn(getState)) return;
     const attachmentLimit = getState().getIn(['instance', 'configuration', 'statuses', 'max_media_attachments']);
@@ -320,12 +322,14 @@ export function uploadCompose(files) {
       const isImage = f.type.match(/image.*/);
       const isVideo = f.type.match(/video.*/);
       if (isImage && maxImageSize && (f.size > maxImageSize)) {
-        const message = `Image exceeds the current file size limit (${formatBytes(maxImageSize)})`;
+        const limit = formatBytes(maxImageSize);
+        const message = intl.formatMessage(messages.exceededImageSizeLimit, { limit });
         dispatch(snackbar.error(message));
         dispatch(uploadComposeFail(true));
         return;
       } else if (isVideo && maxVideoSize && (f.size > maxVideoSize)) {
-        const message = `Video exceeds the current file size limit (${formatBytes(maxVideoSize)})`;
+        const limit = formatBytes(maxVideoSize);
+        const message = intl.formatMessage(messages.exceededVideoSizeLimit, { limit });
         dispatch(snackbar.error(message));
         dispatch(uploadComposeFail(true));
         return;

app/soapbox/features/compose/containers/compose_form_container.js

@@ -39,7 +39,7 @@ const mapStateToProps = state => {
   };
 };
 
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = (dispatch, { intl }) => ({
 
   onChange(text) {
     dispatch(changeCompose(text));
@@ -66,7 +66,7 @@ const mapDispatchToProps = (dispatch) => ({
   },
 
   onPaste(files) {
-    dispatch(uploadCompose(files));
+    dispatch(uploadCompose(files, intl));
   },
 
   onPickEmoji(position, data, needsSpace) {

app/soapbox/features/compose/containers/upload_button_container.js

@@ -1,3 +1,4 @@
+import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 
 import { uploadCompose } from '../../../actions/compose';
@@ -8,12 +9,12 @@ const mapStateToProps = state => ({
   resetFileKey: state.getIn(['compose', 'resetFileKey']),
 });
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch, { intl }) => ({
 
   onSelectFile(files) {
-    dispatch(uploadCompose(files));
+    dispatch(uploadCompose(files, intl));
   },
 
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(UploadButton);
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(UploadButton));

app/soapbox/features/ui/index.js

@@ -426,7 +426,7 @@ class UI extends React.PureComponent {
     this.dragTargets = [];
 
     if (e.dataTransfer && e.dataTransfer.files.length >= 1) {
-      this.props.dispatch(uploadCompose(e.dataTransfer.files));
+      this.props.dispatch(uploadCompose(e.dataTransfer.files, this.props.intl));
     }
   }