feat(leng): add leng.

client/src/components/Dashboard/DashboardBackLink.js

@@ -3,6 +3,7 @@ import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
 import { useHistory } from 'react-router-dom';
 import routes from 'routes/dashboard';
 import { If, Icon } from 'components';
+import { FormattedMessage as T } from 'react-intl';
 import withDashboard from 'containers/Dashboard/withDashboard';
 import { compose } from 'utils';
 
@@ -23,7 +24,7 @@ function DashboardBackLink({ dashboardBackLink, breadcrumbs }) {
     <If condition={dashboardBackLink && crumb}>
       <div class="dashboard__back-link">
         <a href="#no-link" onClick={handleClick}>
-          <Icon icon={'arrow-left'} iconSize={18} /> Back to list.
+          <Icon icon={'arrow-left'} iconSize={18} /> <T id={'back_to_list'} />
         </a>
       </div>
     </If>

client/src/components/DataTableCells/ItemsListCell.js

@@ -4,6 +4,7 @@ import ItemsSuggestField from 'components/ItemsSuggestField';
 import classNames from 'classnames';
 
 import { FormGroup, Classes, Intent } from '@blueprintjs/core';
+import { formatMessage } from 'services/intl';
 
 import { useCellAutoFocus } from 'hooks';
 
@@ -40,7 +41,7 @@ export default function ItemsListCell({
         purchasable={filterPurchasable}
         inputProps={{
           inputRef: (ref) => (fieldRef.current = ref),
-          placeholder: 'Enter an item...'
+          placeholder: formatMessage({ id: 'enter_an_item' }),
         }}
         openOnKeyDown={true}
         blurOnSelectClose={false}

client/src/components/Dragzone.js

@@ -1,7 +1,8 @@
-import React, { useState, useCallback, useEffect } from 'react'
-import { useDropzone } from 'react-dropzone'
+import React, { useState, useCallback, useEffect } from 'react';
+import { useDropzone } from 'react-dropzone';
 import classNames from 'classnames';
 import Icon from 'components/Icon';
+import { formatMessage } from 'services/intl';
 
 // const initialFile: {
 //   file: ?File,
@@ -11,7 +12,7 @@ import Icon from 'components/Icon';
 // };
 
 export default function Dropzone({
-  text = 'Drag/Drop files here or click here',
+  text = formatMessage({ id: 'drag_drop_files_here_or_click_here' }),
   onDrop,
   initialFiles = [],
   onDeleteFile,
@@ -21,10 +22,10 @@ export default function Dropzone({
   const [files, setFiles] = useState([]);
 
   useEffect(() => {
-    setFiles([ ...initialFiles ]);
+    setFiles([...initialFiles]);
   }, [initialFiles]);
 
-  const {getRootProps, getInputProps} = useDropzone({
+  const { getRootProps, getInputProps } = useDropzone({
     accept: 'image/*',
     onDrop: (acceptedFiles) => {
       const _files = acceptedFiles.map((file) => ({
@@ -33,27 +34,35 @@ export default function Dropzone({
         uploaded: false,
       }));
       setFiles(_files);
-    }
+    },
   });
 
-  const handleRemove = useCallback((index) => {
-    const deletedFile = files.splice(index, 1);
-    setFiles([...files]);
-    onDeleteFile && onDeleteFile(deletedFile);
-  }, [files, onDeleteFile]);
+  const handleRemove = useCallback(
+    (index) => {
+      const deletedFile = files.splice(index, 1);
+      setFiles([...files]);
+      onDeleteFile && onDeleteFile(deletedFile);
+    },
+    [files, onDeleteFile],
+  );
 
   const thumbs = files.map((file, index) => (
     <div className={'dropzone-thumb'} key={file.name}>
-      <div><img src={file.preview} /></div>
+      <div>
+        <img src={file.preview} />
+      </div>
       <button onClick={() => handleRemove(index)}>
         <Icon icon={'times'} iconSize={12} />
       </button>
     </div>
   ));
 
-  useEffect(() => () => {
-    files.forEach(file => URL.revokeObjectURL(file.preview));
-  }, [files, onDrop]);
+  useEffect(
+    () => () => {
+      files.forEach((file) => URL.revokeObjectURL(file.preview));
+    },
+    [files, onDrop],
+  );
 
   useEffect(() => {
     onDrop && onDrop(files);
@@ -61,16 +70,14 @@ export default function Dropzone({
 
   return (
     <section className={classNames('dropzone-container', className)}>
-      {(hint) && <div class="dropzone-hint">{ hint }</div>}
+      {hint && <div class="dropzone-hint">{hint}</div>}
 
       <div {...getRootProps({ className: 'dropzone' })}>
         <input {...getInputProps()} />
-        <p>{ text }</p>
+        <p>{text}</p>
       </div>
 
-      <div className={'dropzone-thumbs'}>
-        { thumbs }
-      </div>
+      <div className={'dropzone-thumbs'}>{thumbs}</div>
     </section>
   );
-}
+}

client/src/components/Pagination.js

@@ -115,7 +115,7 @@ function Pagination({
 
               const page = state.currentPage - 1;
               const { size: pageSize } = state;
- 
+
               onPageChange({ page, pageSize });
             }}
             minimal={true}
@@ -187,7 +187,7 @@ function Pagination({
         </div>
 
         <div class="pagination__pagesize-control">
-          Page size
+          <T id={'page_size'} />
           <HTMLSelect
             minimal={true}
             options={pageSizesOptions}