#237 - Creating a new attribute to see if it's the last card

labhackercd · Dec 16, 2021 · 1258ba7 · 1258ba7
1 parent 72dc9a3
commit 1258ba7
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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}