fix(gauge): Add key on Gauge component to fix the console warning

dataesr · Nov 9, 2023 · ddfd5a9 · ddfd5a9
1 parent ff3e525
commit ddfd5a9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 24 deletions.
diff --git a/client/src/components/gauge/index.jsx b/client/src/components/gauge/index.jsx
@@ -1,31 +1,31 @@
 /* eslint-disable no-mixed-operators */
 import PropTypes from 'prop-types';
+import React from 'react';
 
 import { Tooltip } from 'react-tooltip';
 
 import './gauge.scss';
 
 export default function Gauge({ data }) {
-  const gaugeValuesInPercent = data.map((item) => (
-    { ...item, valuePercentage: (item.value / data.reduce((acc, curr) => acc + curr.value, 0) * 100).toFixed(0) }
+  const dataWithPercent = data.map((item) => (
+    { ...item, percentage: (item.value / data.reduce((acc, curr) => acc + curr.value, 0) * 100).toFixed(0) }
   ));
 
   return (
     <div className="gauge-container">
-      {gaugeValuesInPercent.filter((item) => item.value > 0).map((item) => (
-        <>
+      {dataWithPercent.filter((item) => item.value > 0).map((item) => (
+        <React.Fragment key={item.id}>
           <div
-            className={item?.className ? `gauge-bar ${item.className}` : 'gauge-bar'}
+            className={item?.id ? `gauge-bar ${item.id}` : 'gauge-bar'}
             data-tooltip-id={`gauge-bar-${item.id}`}
-            key={item.id}
-            style={item?.color ? { width: `${item.valuePercentage}%`, backgroundColor: item.color } : { width: `${item.valuePercentage}%` }}
+            style={item?.color ? { width: `${item.percentage}%`, backgroundColor: item.color } : { width: `${item.percentage}%` }}
           >
-            {`${item.label} (${item.value} ie. ${item.valuePercentage} %)`}
+            {`${item.label} (${item.value} ie. ${item.percentage} %)`}
           </div>
           <Tooltip id={`gauge-bar-${item.id}`} key={`tooltip-${item.id}`}>
-            {`${item.label} (${item.value} ie. ${item.valuePercentage} %)`}
+            {`${item.label} (${item.value} ie. ${item.percentage} %)`}
           </Tooltip>
-        </>
+        </React.Fragment>
       ))}
     </div>
   );

diff --git a/client/src/pages/home/index.jsx b/client/src/pages/home/index.jsx
@@ -340,9 +340,7 @@ export default function Home() {
               <Col>
                 <Gauge
                   data={Object.values(status).map((st) => ({
-                    className: st.id,
-                    id: st.id,
-                    label: st.label,
+                    ...st,
                     value: allAffiliations.filter((affiliation) => affiliation.status === st.id).length,
                   }))}
                 />
@@ -373,11 +371,9 @@ export default function Home() {
               </Col>
               <Col>
                 <Gauge
-                  data={Object.keys(status).map((st) => ({
-                    className: status[st].id,
-                    id: status[st].id,
-                    label: status[st].label,
-                    value: allPublications.filter((publication) => publication.status === status[st].id).length,
+                  data={Object.values(status).map((st) => ({
+                    ...st,
+                    value: allPublications.filter((publication) => publication.status === st.id).length,
                   }))}
                 />
               </Col>
@@ -460,16 +456,14 @@ export default function Home() {
           </Tab>
           <Tab label="List all datasets">
             <Row>
-              <Col>
+              <Col n="4">
                 {renderButtons(selectedDatasets, tagWorks)}
               </Col>
               <Col>
                 <Gauge
-                  data={Object.keys(status).map((st) => ({
-                    className: status[st].id,
-                    id: status[st].id,
-                    label: status[st].label,
-                    value: allDatasets.filter((dataset) => dataset.status === status[st].id).length,
+                  data={Object.values(status).map((st) => ({
+                    ...st,
+                    value: allDatasets.filter((dataset) => dataset.status === st.id).length,
                   }))}
                 />
               </Col>