feat: refactor staging table

Chia-Network · Jan 26, 2022 · 5d9321e · 5d9321e
1 parent 13e99c3
commit 5d9321e
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 8 deletions.
diff --git a/src/components/blocks/StagingDataGroups.js b/src/components/blocks/StagingDataGroups.js
@@ -1,4 +1,5 @@
 /* eslint-disable */
+import _ from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import styled, { withTheme } from 'styled-components';
@@ -7,6 +8,7 @@ import { convertPascalCaseToSentenceCase } from '../../utils/stringUtils';
 import { Modal, MinusIcon, Body } from '..';
 import { TableDrawer } from '.';
 import { useWindowSize } from '../hooks/useWindowSize';
+import { useIntl } from 'react-intl';
 
 const StyledChangeGroup = styled('div')`
   background: #f0f2f5;
@@ -60,6 +62,9 @@ const StyledChangeCardBody = styled('div')`
 
 const StyledCardBodyItem = styled('div')`
   padding: 4px;
+  body {
+    word-wrap: break-word;
+  }
 `;
 
 const StyledDeleteGroupIcon = styled('div')`
@@ -164,11 +169,20 @@ const InvalidChangeGroup = ({ onDeleteStaging, appStore, headings }) => {
   );
 };
 
-const ChangeCard = ({ headings, data, appStore, displayInRed, onClick }) => {
+const ChangeCard = ({
+  headings,
+  data,
+  appStore,
+  displayInRed,
+  onClick,
+  title,
+}) => {
+  let titleTranslationId = '';
+
   return (
     <StyledChangeCard onClick={onClick}>
       <StyledChangeCardTitle displayInRed={displayInRed}>
-        <Body size="Bold">Project Details</Body>
+        <Body size="Bold">{title}</Body>
       </StyledChangeCardTitle>
       <StyledChangeCardBody>
         {headings &&
@@ -193,6 +207,7 @@ const StagingDataGroups = withTheme(({ headings, data, deleteStagingData }) => {
   const ref = useRef(null);
   const [height, setHeight] = useState(0);
   const windowSize = useWindowSize();
+  const intl = useIntl();
 
   const changeGroupIsValid = changeGroup => {
     if (!changeGroup.diff) {
@@ -229,7 +244,46 @@ const StagingDataGroups = withTheme(({ headings, data, deleteStagingData }) => {
     };
   };
 
-  console.log(data);
+  const getTranslatedCardTitle = (tableC, actionC, changeArrayLength) => {
+    const table = tableC.toLowerCase();
+    const action = actionC.toLowerCase();
+    console.log(changeArrayLength);
+    let translationId = 'record';
+    if (table === 'projects') {
+      if (action === 'delete') {
+        translationId = 'delete-project';
+      } else if (action === 'update') {
+        translationId = 'update-project';
+      } else if (action === 'insert') {
+        translationId = 'add-project';
+      }
+    } else if (table === 'units') {
+      if (action === 'delete') {
+        translationId = 'delete-unit';
+      } else if (action === 'add') {
+        translationId = 'add-unit';
+      } else if (action === 'update') {
+        if (changeArrayLength && changeArrayLength > 1) {
+          translationId = 'split-unit';
+        } else {
+          translationId = 'update-unit';
+        }
+      }
+    }
+    return intl.formatMessage({
+      id: translationId,
+    });
+  };
+
+  const getDiff = (a, b) => {
+    return _.reduce(
+      a,
+      function (result, value, key) {
+        return _.isEqual(value, b[key]) ? result : result.concat(key);
+      },
+      [],
+    );
+  };
 
   return (
     <StagingDataGroupsContainer ref={ref}>
@@ -255,29 +309,50 @@ const StagingDataGroups = withTheme(({ headings, data, deleteStagingData }) => {
                       data={changeGroup.diff.original}
                       headings={headings}
                       onClick={() => setRecord(changeGroup.diff.original)}
+                      title={getTranslatedCardTitle(
+                        changeGroup.table,
+                        changeGroup.action,
+                      )}
                       displayInRed
                     />
                   )}
                   {changeGroup.action === 'INSERT' && (
                     <ChangeCard
                       data={changeGroup.diff.change[0]}
                       headings={headings}
+                      title={getTranslatedCardTitle(
+                        changeGroup.table,
+                        changeGroup.action,
+                      )}
                       onClick={() => setRecord(changeGroup.diff.change[0])}
                     />
                   )}
                   {changeGroup.action === 'UPDATE' && (
                     <ChangeCard
                       data={changeGroup.diff.original}
-                      headings={headings}
+                      headings={getDiff(
+                        changeGroup.diff.original,
+                        changeGroup.diff.change[0],
+                      )}
                       onClick={() => setRecord(changeGroup.diff.original)}
+                      title={getTranslatedCardTitle(
+                        changeGroup.table,
+                        changeGroup.action,
+                        changeGroup.diff.change.length,
+                      )}
                       displayInRed
                     />
                   )}
                   {changeGroup.action === 'UPDATE' &&
                     changeGroup.diff.change.map((change, index) => (
                       <ChangeCard
                         data={change}
-                        headings={headings}
+                        headings={getDiff(changeGroup.diff.original, change)}
+                        title={getTranslatedCardTitle(
+                          changeGroup.table,
+                          changeGroup.action,
+                          changeGroup.diff.change.length,
+                        )}
                         onClick={() => setRecord(change)}
                       />
                     ))}

diff --git a/src/translations/tokens/en-US.json b/src/translations/tokens/en-US.json
@@ -147,5 +147,12 @@
   "all-organizations": "All organizations",
   "total-units-available": "Total split units available",
   "upload-successful": "Your file was successfully uploaded.",
-  "file-could-not-be-uploaded": "Your file could not be uploaded."
+  "file-could-not-be-uploaded": "Your file could not be uploaded.",
+  "delete-project": "Delete Project",
+  "add-project": "Add Project",
+  "update-project": "Update Project",
+  "delete-unit": "Delete Unit",
+  "add-unit": "Add Unit",
+  "update-unit": "Update Unit",
+  "split-unit": "Split Unit"
 }
diff --git a/src/translations/tokens/es.json b/src/translations/tokens/es.json
@@ -119,6 +119,13 @@
   "all-organizations": "Todas las organizaciones",
   "total-units-available": "Total de unidades divididas disponibles",
   "upload-successful": "Su archivo se cargó con éxito.",
-  "file-could-not-be-uploaded": "No se pudo cargar su archivo."
+  "file-could-not-be-uploaded": "No se pudo cargar su archivo.",
+  "delete-project": "Eliminar proyecto",
+  "add-project": "Agregar proyecto",
+  "update-project": "Actualizar proyecto",
+  "delete-unit": "Eliminar unidad",
+  "add-unit": "Agregar unidad",
+  "update-unit": "Actualización de la unidad",
+  "split-unit": "División de unidades"
 }
 
diff --git a/src/translations/tokens/ja.json b/src/translations/tokens/ja.json
@@ -119,5 +119,12 @@
   "all-organizations": "すべての組織",
   "total-units-available": "利用可能な分割ユニットの合計",
   "upload-successful": "ファイルが正常にアップロードされました。",
-  "file-could-not-be-uploaded": "ファイルをアップロードできませんでした。"
+  "file-could-not-be-uploaded": "ファイルをアップロードできませんでした。",
+  "delete-project": "プロジェクトを削除",
+  "add-project": "プロジェクトを追加",
+  "update-project": "プロジェクトの更新",
+  "delete-unit": "ユニットを削除",
+  "add-unit": "ユニットを追加",
+  "update-unit": "ユニットの更新",
+  "split-unit": "スプリットユニット"
 }