Foto-Print

FotoPoints.tsx

import * as React from 'react';
import { Helmet } from 'react-helmet';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Switch, Route } from 'react-router-dom';
import memoize from 'memoize-one';
import Page from 'src/app/containers/Page';
import Preloader from 'src/commonComponents/Preloader';
import { FotoPointHeader } from 'src/fotoPoints/components/FotoPointHeader';
import FotoPointList from 'src/fotoPoints/components/FotoPointsList';
import EditFotoPointForm from '../EditFotoPointForm';
import FotoPointsPrice from '../FotoPointsPrice';
import FotoPointModal from '../FotoPointModal';
import { FotoPointsFilter } from 'src/fotoPoints/components/FotoPointsFilter';
import { LoadMoreButton } from 'src/commonComponents/LoadMoreButton';
import { TotalCount } from 'src/commonComponents/TotalCount';
import {
  requestPhotoPoints,
  openModal,
  closeModal,
  resetRequestStatus,
  editFotopoint,
  updateLimitValue,
  updateOffsetValue,
  toggleFilterVisibility,
  resetFilterParams,
  updateFilterParams,
  loadFilteredPPList,
  clearFilterParams
} from '../../store/duck';
import { getUserRole } from 'src/app/containers/Page/selectors';
import {
  getFotoPointsList,
  getIsFetching,
  getPaginationParams,
  getPagesParams,
  getIsFiltering,
  getFilterParams,
  getPhotoValueSelect
} from 'src/fotoPoints/store/selectors';
import { getCompanyId } from 'src/app/containers/App/selectors';
import { IStore } from 'src/core/reducers/interfaces';
import {
  IMapDispatchToPoints,
  IMapStateToPoints
} from 'src/fotoPoints/views/FotoPoints/interfaces';
import Pagination from 'src/commonComponents/Pagination';

const s = require('./styles.scss');
const isEqual = require('lodash/isEqual');
const objectValues = require('lodash/values');

const mapStateToProps = (store: IStore): IMapStateToPoints => ({
  isFetching: getIsFetching(store),
  fotoPointsList: getFotoPointsList(store),
  role: getUserRole(store),
  companyId: getCompanyId(store),
  paginationParams: getPaginationParams(store),
  pagesParams: getPagesParams(store),
  isFiltering: getIsFiltering(store),
  filterParams: getFilterParams(store),
  photoValue: getPhotoValueSelect(store)
});

const mapDispatchToProps = (dispatch): IMapDispatchToPoints =>
  bindActionCreators(
    {
      openPointsModal: openModal,
      closePointsModal: closeModal,
      requestPhotoPoints,
      resetRequestStatus,
      editFotopoint,
      updateLimit: updateLimitValue,
      updateOffset: updateOffsetValue,
      toggleFilter: toggleFilterVisibility,
      updateFilter: updateFilterParams,
      resetFilter: resetFilterParams,
      loadFilteredPP: loadFilteredPPList,
      clearFilterParams: clearFilterParams
    },
    dispatch
  );

type IFotoPoints = IMapStateToPoints & IMapDispatchToPoints;

class FotoPoints extends React.Component<IFotoPoints, any> {
  state = {
    length: 20,
    allIsload: false
  };
  calcActiveFiltersCount = memoize(filterParams => {
    // delete filterParams.date;
    const count = objectValues(filterParams).reduce(
      (acc: number, val: string | number) => acc + (val ? 1 : 0),
      0
    );
    return count - 1;
  });

  componentDidMount() {
    // tslint:disable-next-line:no-shadowed-variable
    const {
      requestPhotoPoints,
      companyId,
      paginationParams: { limit, offset },
      isFiltering,
      loadFilteredPP,
      filterParams
    } = this.props;
    if (companyId) {
      requestPhotoPoints(companyId, limit, offset);
    }
    if (isFiltering) {
      loadFilteredPP(filterParams);
    } else {
      requestPhotoPoints(companyId, limit, offset);
    }
  }

  componentDidUpdate(prevProps: IFotoPoints) {
    const {
      role,
      openPointsModal,
      fotoPointsList,
      isFetching,
      companyId,
      // tslint:disable-next-line:no-shadowed-variable
      requestPhotoPoints,
      paginationParams: { limit, offset },
      isFiltering,
      filterParams,
      loadFilteredPP
    } = this.props;
    if (
      role === 'semiAdmin' &&
      fotoPointsList.length === 0 &&
      prevProps.isFetching &&
      !isFetching
    ) {
      openPointsModal();
    }
    if (!prevProps.companyId && companyId) {
      requestPhotoPoints(companyId);
    }
    if (
      prevProps.paginationParams.limit !== limit ||
      prevProps.paginationParams.offset !== offset ||
      prevProps.isFiltering !== isFiltering ||
      !isEqual(prevProps.filterParams, filterParams)
    ) {
      if (isFiltering) {
        loadFilteredPP(filterParams);
      } else {
        requestPhotoPoints(companyId, limit, offset);
      }
    }
  }

  componentWillUnmount() {
    this.props.clearFilterParams();
    this.props.resetRequestStatus();
    this.props.closePointsModal();
  }

  handleChangeLimit = ({ value }) => {
    const { updateLimit } = this.props;
    updateLimit(value);
  };

  handleToggleFilter = () => {
    const { isFiltering, toggleFilter, resetFilter } = this.props;
    if (isFiltering) {
      resetFilter();
    }
    toggleFilter();
  };

  loadMorePP = () => {
    const { length } = this.state;
    const { filterParams } = this.props;
    if (this.props.fotoPointsList.length === this.props.photoValue) {
      this.setState({ allIsload: true });
    } else {
      this.setState({ length: length + 20 }, function() {
        filterParams.length = this.state.length;
        this.props.loadFilteredPP(filterParams);
      });
    }
  };

  renderList = () => {
    const {
      isFetching,
      openPointsModal,
      fotoPointsList,
      role,
      editFotopoint,
      paginationParams,
      pagesParams,
      updateOffset,
      isFiltering,
      updateFilter,
      filterParams,
      photoValue
    } = this.props;
    return (
      <div className={s.content}>
        <FotoPointHeader
          isFiltering={isFiltering}
          openModal={openPointsModal}
          limit={paginationParams.limit}
          onChange={this.handleChangeLimit}
          toggleFilter={this.handleToggleFilter}
          activeFiltersCount={this.calcActiveFiltersCount(filterParams)}
        />
        {isFiltering && <FotoPointsFilter role={role} updateFilter={updateFilter} />}
        {isFiltering && <TotalCount value={photoValue} />}
        <FotoPointList
          role={role}
          fotoPointsList={fotoPointsList}
          editFotopoint={editFotopoint}
        />
        {!isFiltering && (
          <div className={s.photoFooter}>
            <Pagination
              limit={paginationParams.limit}
              offset={paginationParams.offset}
              currentPage={pagesParams.currentPage}
              totalPage={pagesParams.totalPage}
              updateOffset={updateOffset}
            />
          </div>
        )}
        {isFiltering &&
          photoValue !== 0 && (
            <LoadMoreButton onClick={this.loadMorePP} disabled={isFetching} />
          )}
      </div>
    );
  };

  render() {
    const { isFetching } = this.props;
    return (
      <Page>
        <Helmet>
          <title>Foto Points - Foto Print</title>
          <meta name="description" content="Foto Points page for admin Foto Print" />
        </Helmet>
        {isFetching && (
          <div className={s.preloader}>
            <Preloader />
          </div>
        )}
        <Switch>
          <Route path="/fotopoints" exact render={this.renderList} />
          <Route path="/fotopoints/edit/:pointId" component={EditFotoPointForm} />
          <Route path="/fotopoints/prices/:pointId" component={FotoPointsPrice} />
        </Switch>
        <FotoPointModal />
      </Page>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(FotoPoints);