All files / posts-summary-table/components/PostsSummaryTable index.jsx

63.16% Statements 12/19
33.33% Branches 2/6
33.33% Functions 1/3
66.67% Lines 12/18
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88                                1x             1x         1x                         1x               1x 1x 1x   1x 1x         1x                         1x       1x                      
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
 
import {
  ChartStateNoData as NoData,
  ChartStateLoading as Loading,
  ChartCard,
  ChartHeader,
  GridItem,
} from '@bufferapp/analyze-shared-components';
 
import AddReport from '@bufferapp/add-report';
 
import Title from '../Title';
 
const Grid = styled.ul`
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 auto;
`;
 
const GridContainer = styled.div`
  position: relative;
  padding: 0.75rem 1.5rem 1rem;
`;
 
export const Table = ({ metrics }) =>
  <Grid>
    {metrics.map((metric) => {
      const itemProps = {
        key: metric.label,
        metric,
        gridWidth: '33.33%',
      };
      if (metrics.length === 5) itemProps.gridWidth = '20%';
      return (<GridItem {...itemProps} />);
    })}
  </Grid>;
 
Table.propTypes = {
  metrics: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string,
    value: PropTypes.number,
    diff: PropTypes.number,
  })).isRequired,
};
 
const PostsSummaryTable = ({ metrics, loading, profileService }) => {
  let content = null;
  Iif (loading) {
    content = <Loading active noBorder />;
  } else Eif (metrics.length === 0) {
    content = <NoData />;
  } else {
    content = <Table metrics={metrics} />;
  }
 
  return (
    <ChartCard>
      <ChartHeader>
        <Title profileService={profileService} />
        <AddReport chart="posts-summary" />
      </ChartHeader>
      <GridContainer id="js-dom-to-png-posts-summary">
        {content}
      </GridContainer>
    </ChartCard>
  );
};
 
PostsSummaryTable.defaultProps = {
  loading: false,
};
 
PostsSummaryTable.propTypes = {
  loading: PropTypes.bool,
  profileService: PropTypes.string.isRequired,
  metrics: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.string,
    value: PropTypes.number,
    diff: PropTypes.number,
  })).isRequired,
};
 
export default PostsSummaryTable;