Pagination in a Component

maintenanceLog.flow.jsx

// @flow
import * as React from 'react';
import { Spinner } from '@blueprintjs/core';
import { SectionWrapper } from '../../commonElements/commonElements';
import SectionHeader from './SectionHeader';
import SectionBody from './SectionBody';
import SectionFooter from './SectionFooter';

type Props = {
  customerData: UpdatedCustomerData,
  maintenanceLogs: MaintenanceLogs,
  getMaintenanceLogs: (
    crmNumber: string,
    limit?: number,
    offset?: number
  ) => {}
};
type State = {
  fullLogs: {
    [key: string | number]: boolean
  },
  isLoading: boolean,
  totalCoffeePoints: number,
  totalSEPoints: number,
  viewAll: boolean,
};

const startingPoint = {
  fullLogs: {},
  isLoading: true,
  totalSEPoints: 0,
  totalCoffeePoints: 0,
  viewAll: false,
};

class MaintenanceLog extends React.Component<Props, State> {
  static selectors = {
    modalBox: (idx: number) => {
      return {
        id: `modal-box-logs-${idx}`,
        selector: `[data-test='modal-box-logs-${idx}']`
      };
    },
    body: {
      id: 'maintenance-log-body',
      selector: "[data-test='maintenance-log-body']"
    }
  };

  state = startingPoint;

  async componentDidMount() {
    this.getLogs(15);
  }

  async componentDidUpdate(prevProps: Props) {
    if (
        prevProps.customerData.sepiNumber !== this.props.customerData.sepiNumber
    ) {
      this.getLogs(15);
    }
  }

  getAllLogs = async () => {
    await this.getLogs(5000, true);
  };

  getLogs = async (limit: number, viewAll?: boolean ) => {
    this.setState({isLoading: true});
    await this.props.getMaintenanceLogs(
        this.props.customerData.sepiNumber,
        limit,
        0
    );
    if (viewAll == null) {
      viewAll = this.props.maintenanceLogs.total <= 15;
    }
    this.getTotalPoints();
    this.setState({ isLoading: false, viewAll });
  };

  showFullLogs = (e: SyntheticInputEvent<*>) => {
    const { currentTarget } = e;
    const key = currentTarget.dataset.key;
    const fullLogs = { ...this.state.fullLogs, [key]: true };
    this.setState({ fullLogs });
  };

  hideFullLogs = (e: SyntheticInputEvent<*>) => {
    const { currentTarget } = e;
    const key = currentTarget.dataset.key;
    const fullLogs = { ...this.state.fullLogs, [key]: false };
    this.setState({ fullLogs });
  };

  getTotalPoints = () => {
    let coffeePoints = 0;
    let sePoints = 0;
    this.props.maintenanceLogs.data.map(log => {
      if (log.activityType === 'update_peets_coffee_club') {
        coffeePoints = coffeePoints + parseInt(log.points);
      }
      if (log.activityType === 'update_something_extra_points') {
        sePoints = sePoints + parseInt(log.points, 10);
      }
      this.setState({
        totalSEPoints: sePoints,
        totalCoffeePoints: coffeePoints
      });
    });
  };

  render() {
    const { selectors } = MaintenanceLog;
    const { maintenanceLogs } = this.props;
    const {
      fullLogs,
      isLoading,
      totalSEPoints,
      totalCoffeePoints,
      viewAll
    } = this.state;

    return (
      <SectionWrapper className={'maintenance-log'}>
        <SectionHeader />
        {isLoading ? (
          <Spinner />
        ) : (
          <>
              <SectionBody
                dataTest={selectors.body.id}
                maintenanceLogs={maintenanceLogs}
                fullLogs={fullLogs}
                showFullLogs={this.showFullLogs}
                hideFullLogs={this.hideFullLogs}
                modalSelector={selectors.modalBox}
              />
            <SectionFooter
              coffeePoints={totalCoffeePoints}
              sePoints={totalSEPoints}
              handleViewAllClick={this.getAllLogs}
              showViewAll={!viewAll}
            />
          </>
        )}
      </SectionWrapper>
    );
  }
}

export default MaintenanceLog;