Applied some naming improvements

This commit is contained in:
Alejandro Celaya 2019-03-10 09:54:40 +01:00
parent 61480abd2e
commit 1ad4290487
2 changed files with 14 additions and 13 deletions

View file

@ -94,7 +94,7 @@ const ShortUrlVisits = ({ processStatsFromVisits }) => class ShortUrlVisits exte
<div className="col-xl-4"> <div className="col-xl-4">
<SortableBarGraph <SortableBarGraph
stats={referrers} stats={referrers}
supportPagination={false} withPagination={false}
title="Referrers" title="Referrers"
sortingItems={{ sortingItems={{
name: 'Referrer name', name: 'Referrer name',

View file

@ -17,7 +17,7 @@ export default class SortableBarGraph extends React.Component {
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
sortingItems: PropTypes.object.isRequired, sortingItems: PropTypes.object.isRequired,
extraHeaderContent: PropTypes.node, extraHeaderContent: PropTypes.node,
supportPagination: PropTypes.bool, withPagination: PropTypes.bool,
}; };
state = { state = {
@ -26,23 +26,24 @@ export default class SortableBarGraph extends React.Component {
currentPage: 1, currentPage: 1,
itemsPerPage: Infinity, itemsPerPage: Infinity,
}; };
redraw = false; redrawChart = false;
doRedraw() { doRedrawChart() {
const prev = this.redraw; const prev = this.redrawChart;
this.redraw = false; this.redrawChart = false;
return prev; return prev;
} }
determineStats(stats, sortingItems) { determineStats(stats, sortingItems) {
const sortedPairs = !this.state.orderField ? toPairs(stats) : sortBy( const pairs = toPairs(stats);
const sortedPairs = !this.state.orderField ? pairs : sortBy(
pipe( pipe(
prop(this.state.orderField === head(keys(sortingItems)) ? 0 : 1), prop(this.state.orderField === head(keys(sortingItems)) ? 0 : 1),
toLowerIfString toLowerIfString
), ),
toPairs(stats) pairs
); );
const directionalPairs = !this.state.orderDir || this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs); const directionalPairs = !this.state.orderDir || this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs);
@ -93,7 +94,8 @@ export default class SortableBarGraph extends React.Component {
} }
render() { render() {
const { stats, sortingItems, title, extraHeaderContent, supportPagination = true } = this.props; const { stats, sortingItems, title, extraHeaderContent, withPagination = true } = this.props;
const { currentPageStats, pagination, max } = this.determineStats(stats, sortingItems);
const computedTitle = ( const computedTitle = (
<React.Fragment> <React.Fragment>
{title} {title}
@ -107,14 +109,14 @@ export default class SortableBarGraph extends React.Component {
onChange={(orderField, orderDir) => this.setState({ orderField, orderDir, currentPage: 1 })} onChange={(orderField, orderDir) => this.setState({ orderField, orderDir, currentPage: 1 })}
/> />
</div> </div>
{supportPagination && ( {withPagination && keys(stats).length > 50 && (
<div className="float-right"> <div className="float-right">
<PaginationDropdown <PaginationDropdown
toggleClassName="btn-sm paddingless mr-3" toggleClassName="btn-sm paddingless mr-3"
ranges={[ 50, 100, 200, 500 ]} ranges={[ 50, 100, 200, 500 ]}
value={this.state.itemsPerPage} value={this.state.itemsPerPage}
setValue={(itemsPerPage) => { setValue={(itemsPerPage) => {
this.redraw = true; this.redrawChart = true;
this.setState({ itemsPerPage, currentPage: 1 }); this.setState({ itemsPerPage, currentPage: 1 });
}} }}
/> />
@ -123,7 +125,6 @@ export default class SortableBarGraph extends React.Component {
{extraHeaderContent && <div className="float-right">{extraHeaderContent}</div>} {extraHeaderContent && <div className="float-right">{extraHeaderContent}</div>}
</React.Fragment> </React.Fragment>
); );
const { currentPageStats, pagination, max } = this.determineStats(stats, sortingItems);
return ( return (
<GraphCard <GraphCard
@ -132,7 +133,7 @@ export default class SortableBarGraph extends React.Component {
stats={currentPageStats} stats={currentPageStats}
footer={pagination} footer={pagination}
max={max} max={max}
redraw={this.doRedraw()} redraw={this.doRedrawChart()}
/> />
); );
} }