feat: display staging in detailed view

Chia-Network · Feb 24, 2022 · eb33eb6 · eb33eb6
1 parent 24e0287
commit eb33eb6
Showing 1 changed file with 34 additions and 21 deletions.
diff --git a/src/components/blocks/DetailedViewStagingTab.js b/src/components/blocks/DetailedViewStagingTab.js
@@ -24,35 +24,48 @@ const StyledDetailedViewTab = styled('div')`
 `;
 
 const DetailedViewTabItem = ({ entry }) => {
+  const hasEntryKeyData = key =>
+    (entry[key].original !== null && entry[key].original !== 'null') ||
+    (entry[key].changes &&
+      entry[key].changes.some(change => change !== null && change !== 'null'));
+
+  const isKeyAllowedToBeDisplayed = key =>
+    ![
+      'orgUid',
+      'warehouseProjectId',
+      'id',
+      'createdAt',
+      'updatedAt',
+      'label_unit',
+    ].includes(key);
+
+  const isOriginalDataToBeDisplayedInRed = key =>
+    entry[key].changes &&
+    entry[key].changes.length > 0 &&
+    entry[key].changes.some(x => x !== null);
+
   return (
     <StyledDetailedViewTabItem>
       {Object.keys(entry).map(
         (entryProp, index) =>
-          ![
-            'orgUid',
-            'warehouseProjectId',
-            'id',
-            'createdAt',
-            'updatedAt',
-            'label_unit',
-          ].includes(entryProp) && (
+          isKeyAllowedToBeDisplayed(entryProp) &&
+          hasEntryKeyData(entryProp) && (
             <div key={index}>
               <Body size="Bold">
                 {convertPascalCaseToSentenceCase(entryProp)}
               </Body>
-              {entry[entryProp].original && (
-                <Body
-                  color={
-                    entry[entryProp].changes &&
-                    entry[entryProp].changes.length > 0 &&
-                    entry[entryProp].changes.some(x => x !== null)
-                      ? '#f5222d'
-                      : '#000000'
-                  }
-                >
-                  {entry[entryProp].original}
-                </Body>
-              )}
+              {entry[entryProp].original &&
+                entry[entryProp].original !== 'null' && (
+                  <Body
+                    color={
+                      isOriginalDataToBeDisplayedInRed(entryProp)
+                        ? '#f5222d'
+                        : '#000000'
+                    }
+                  >
+                    {entry[entryProp].original}
+                  </Body>
+                )}
               {entry[entryProp].changes &&
                 entry[entryProp].changes.length > 0 &&
                 entry[entryProp].changes.some(x => x !== null) &&