ref: Little refactoring

client/src/components/attachments/Attachments/CsvViewer.jsx

@@ -3,20 +3,19 @@
  * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
  */
 
-import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Pagination, Table } from 'semantic-ui-react';
 import Papa from 'papaparse';
 import Frame from 'react-frame-component';
+import { Loader, Pagination, Table } from 'semantic-ui-react';
 
 import styles from './CsvViewer.module.scss';
 
 const ROWS_PER_PAGE = 50;
 
-/* eslint-disable react/no-array-index-key */
 const CsvViewer = React.memo(({ src, className }) => {
-  const [csvData, setCsvData] = useState(null);
+  const [rows, setRows] = useState(null);
   const [currentPage, setCurrentPage] = useState(1);
 
   const frameStyles = useMemo(
@@ -34,7 +33,7 @@ const CsvViewer = React.memo(({ src, className }) => {
     [],
   );
 
-  const handlePageChange = useCallback((e, { activePage }) => {
+  const handlePageChange = useCallback((_, { activePage }) => {
     setCurrentPage(activePage);
   }, []);
 
@@ -49,47 +48,46 @@ const CsvViewer = React.memo(({ src, className }) => {
 
         Papa.parse(text, {
           skipEmptyLines: true,
-          complete: (results) => {
+          complete: ({ data }) => {
-            const rows = results.data;
+            setRows(data);
-            setCsvData({
-              rows,
-              totalRows: rows.length,
-            });
           },
         });
-      } catch (err) {
+      } catch {
-        setCsvData(null);
+        /* empty */
       }
     }
 
     fetchFile();
   }, [src]);
 
-  if (!csvData) {
+  if (rows === null) {
-    return null;
+    return <Loader active size="big" />;
   }
 
-  const startIdx = (currentPage - 1) * ROWS_PER_PAGE;
+  const startIndex = (currentPage - 1) * ROWS_PER_PAGE;
-  const endIdx = startIdx + ROWS_PER_PAGE;
+  const endIndex = startIndex + ROWS_PER_PAGE;
-  const currentRows = csvData.rows.slice(startIdx, endIdx);
+  const currentRows = rows.slice(startIndex, endIndex);
-  const totalPages = Math.ceil(csvData.totalRows / ROWS_PER_PAGE);
+  const totalPages = Math.ceil(rows.length / ROWS_PER_PAGE);
 
-  const content = (
+  return (
-    <div>
+    <Frame
+      head={<style>{frameStyles.join('')}</style>}
+      className={classNames(styles.wrapper, className)}
+    >
       <div>
         <Table celled compact>
           <Table.Header>
             <Table.Row>
-              {csvData.rows[0].map((header, index) => (
+              {rows[0].map((cell) => (
-                <Table.HeaderCell key={index}>{header}</Table.HeaderCell>
+                <Table.HeaderCell key={cell}>{cell}</Table.HeaderCell>
               ))}
             </Table.Row>
           </Table.Header>
           <Table.Body>
-            {currentRows.slice(1).map((row, rowIndex) => (
+            {currentRows.slice(1).map((row) => (
-              <Table.Row key={rowIndex}>
+              <Table.Row key={row}>
-                {row.map((cell, cellIndex) => (
+                {row.map((cell) => (
-                  <Table.Cell key={cellIndex}>{cell}</Table.Cell>
+                  <Table.Cell key={cell}>{cell}</Table.Cell>
                 ))}
               </Table.Row>
             ))}
@@ -98,30 +96,18 @@ const CsvViewer = React.memo(({ src, className }) => {
       </div>
       {totalPages > 1 && (
         <Pagination
-          activePage={currentPage}
+          secondary
+          pointing
           totalPages={totalPages}
-          onPageChange={handlePageChange}
+          activePage={currentPage}
           firstItem={null}
           lastItem={null}
-          pointing
+          onPageChange={handlePageChange}
-          secondary
-          boundaryRange={1}
-          siblingRange={1}
         />
       )}
-    </div>
-  );
-
-  return (
-    <Frame
-      head={<style>{frameStyles.join('')}</style>}
-      className={classNames(styles.wrapper, className)}
-    >
-      {content}
     </Frame>
   );
 });
-/* eslint-enable react/no-array-index-key */
 
 CsvViewer.propTypes = {
   src: PropTypes.string.isRequired,

client/src/locales/de-DE/core.js

@@ -1,5 +1,6 @@
 import dateFns from 'date-fns/locale/de';
 import timeAgo from 'javascript-time-ago/locale/de';
+
 import markdownEditor from './markdown-editor.json';
 
 export default {

client/src/locales/de-DE/markdown-editor.json

@@ -63,7 +63,7 @@
     "numbered-list_title": "Nummerierte Liste",
     "numbered-list_hint": "1. Dein Text",
     "documentation": "Dokumentation",
-    "documentation_link": " https://diplodoc.com/docs/en/syntax/"
+    "documentation_link": "https://diplodoc.com/docs/en/syntax/"
   },
   "menubar": {
     "bold": "Fett",

client/src/locales/en-GB/markdown-editor.json

@@ -63,7 +63,7 @@
     "numbered-list_title": "Numbered list",
     "numbered-list_hint": "1. Your text",
     "documentation": "Documentation",
-    "documentation_link": " https://diplodoc.com/docs/en/syntax/"
+    "documentation_link": "https://diplodoc.com/docs/en/syntax/"
   },
   "menubar": {
     "bold": "Bold",

client/src/locales/en-US/markdown-editor.json

@@ -63,7 +63,7 @@
     "numbered-list_title": "Numbered list",
     "numbered-list_hint": "1. Your text",
     "documentation": "Documentation",
-    "documentation_link": " https://diplodoc.com/docs/en/syntax/"
+    "documentation_link": "https://diplodoc.com/docs/en/syntax/"
   },
   "menubar": {
     "bold": "Bold",

client/src/locales/pl-PL/markdown-editor.json

@@ -63,7 +63,7 @@
     "numbered-list_title": "Lista numerowana",
     "numbered-list_hint": "1. Twój tekst",
     "documentation": "Dokumentacja",
-    "documentation_link": " https://diplodoc.com/docs/en/syntax/"
+    "documentation_link": "https://diplodoc.com/docs/en/syntax/"
   },
   "menubar": {
     "bold": "Pogrubienie",

client/src/locales/ru-RU/core.js

@@ -1,5 +1,6 @@
 import dateFns from 'date-fns/locale/ru';
 import timeAgo from 'javascript-time-ago/locale/ru';
+
 import markdownEditor from './markdown-editor.json';
 
 export default {

client/src/locales/ru-RU/markdown-editor.json

@@ -7,7 +7,7 @@
   "bundle": {
     "error-title": "Ошибка в редакторе markdown",
     "settings_wysiwyg": "Визуальный редактор (wysiwyg)",
-    "settings_markup": "Разметка Markdown",
+    "settings_markup": "Разметка markdown",
     "markup_placeholder": "Введите разметку markdown..."
   },
   "codeblock": {
@@ -63,7 +63,7 @@
     "numbered-list_title": "Нумерованный список",
     "numbered-list_hint": "1. Ваш текст",
     "documentation": "Документация",
-    "documentation_link": " https://diplodoc.com/docs/en/syntax/"
+    "documentation_link": "https://diplodoc.com/docs/en/syntax/"
   },
   "menubar": {
     "bold": "Жирный",