From 1258ba7b779d110545dac681190d2ed68f66d5b2 Mon Sep 17 00:00:00 2001
From: mlfaa <mlfaa@hotmail.com>
Date: Thu, 16 Dec 2021 09:22:33 -0300
Subject: [PATCH] #237 - Creating a new attribute to see if it's the last card

---
 src/components/Frames/TotalFrame/index.js | 12 ++++++------
 src/components/Frames/TotalFrame/style.js |  5 +++++
 src/containers/Audiencias/index.js        |  4 ++--
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/Frames/TotalFrame/index.js b/src/components/Frames/TotalFrame/index.js
index eff3bd53..de6489c9 100644
--- a/src/components/Frames/TotalFrame/index.js
+++ b/src/components/Frames/TotalFrame/index.js
@@ -13,11 +13,11 @@ function TotalsDataFrame(props) {
 
   const {
     // eslint-disable-next-line react/prop-types
-    height, children, title, toolTipText, toolTipColor, toolTipAriaLabel, className,
+    height, children, title, toolTipText, toolTipColor, toolTipAriaLabel, isLast,
   } = props;
 
   return (
-    <Grid container className={`${classes.root} ${className}`} style={{ height: 'auto', minHeight: '130px' }}>
+    <Grid container className={`${isLast ? classes.rootLast : classes.root}`} style={{ height: 'auto', minHeight: '130px' }}>
       <Box className={classes.box}>
         <Box className={classes.header}>
           <Box marginLeft={2}>
@@ -49,12 +49,12 @@ function TotalsDataFrame(props) {
 export default function TotalFrame(props) {
   const {
     isLoaded, info, title, toolTipText, toolTipColor, toolTipAriaLabel,
-    subInformation, className,
+    subInformation, isLast,
   } = props;
   const hasSubInformation = (subInformation !== '');
 
   return (
-    <TotalsDataFrame className={className} height="15vh" paddingLeft="0.5rem" title={title} download={false} align="left" toolTipAriaLabel={toolTipAriaLabel} toolTipText={toolTipText} toolTipColor={toolTipColor}>
+    <TotalsDataFrame isLast={isLast} height="15vh" paddingLeft="0.5rem" title={title} download={false} align="left" toolTipAriaLabel={toolTipAriaLabel} toolTipText={toolTipText} toolTipColor={toolTipColor}>
       {isLoaded ? (
         <Box style={{ width: '100%', height: '100%' }} display="flex" alignItems="center" justifyContent="center" width="100%" flexDirection="column">
           <Box paddingTop={hasSubInformation ? '1vh' : ''}>
@@ -88,22 +88,22 @@ export default function TotalFrame(props) {
 
 TotalFrame.propTypes = {
   isLoaded: PropTypes.bool,
+  isLast: PropTypes.bool,
   info: PropTypes.node,
   title: PropTypes.string,
   toolTipText: PropTypes.string,
   toolTipColor: PropTypes.string,
   toolTipAriaLabel: PropTypes.string,
   subInformation: PropTypes.string,
-  className: PropTypes.object,
 };
 
 TotalFrame.defaultProps = {
   isLoaded: false,
+  isLast: false,
   info: 'info',
   title: 'Title',
   toolTipText: null,
   toolTipColor: '',
   toolTipAriaLabel: '',
   subInformation: '',
-  className: {},
 };
diff --git a/src/components/Frames/TotalFrame/style.js b/src/components/Frames/TotalFrame/style.js
index 7fac47d3..2c5a50bd 100644
--- a/src/components/Frames/TotalFrame/style.js
+++ b/src/components/Frames/TotalFrame/style.js
@@ -11,6 +11,11 @@ export const useStyles = makeStyles((theme) => ({
       padding: '0px 20px 0px 0px',
     },
   },
+  rootLast: {
+    display: 'flex',
+    width: '100%',
+    padding: '0px 0px',
+  },
   box: {
     height: 'auto',
     borderRadius: '15px 15px 0 0',
diff --git a/src/containers/Audiencias/index.js b/src/containers/Audiencias/index.js
index 3d7afa46..c1f7c0b6 100644
--- a/src/containers/Audiencias/index.js
+++ b/src/containers/Audiencias/index.js
@@ -73,7 +73,6 @@ function Audiencias(props) {
   };
 
   const classes = useStyles();
-  const { totalFrame, totalFrameDesktop } = useStyles();
   // Charts and report Data
   const [audienciasTotalsData, setAudienciasTotalsData] = useState('');
   const [audienciasData, setAudienciasData] = useState([]);
@@ -381,6 +380,7 @@ function Audiencias(props) {
         },
         {
           isLoaded: totalsAreLoaded,
+          isLast: true,
           info: audienciasTotalsData.questions_total,
           title: TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals.title,
           toolTipText: TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals.toolTip,
@@ -621,7 +621,7 @@ function Audiencias(props) {
           audienciasData.map((audiencia, index) => (
             <Grid key={audiencia.title} item md={3} className={`${classes.spacing} ${classes.desktop}`} style={{ padding: 0 }}>
               <TotalFrame
-                // className={`${index + 1 === audienciasData.length && classes.totalFrameDesktop}`}
+                isLast={audiencia.isLast}
                 isLoaded={audiencia.isLoaded}
                 info={audiencia.info}
                 title={audiencia.title}