PrettyFilters.tsx

import * as React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { withStyles } from '@material-ui/core/styles';
import { translate } from 'react-i18next';
import { showSnackbar } from 'actions/snackbar';

import Chip from '@material-ui/core/Chip';
import Paper from '@material-ui/core/Paper';
import * as flattenjs from 'flattenjs';
import * as _ from 'lodash';
import { cleanFilters } from 'utilities';
import Accession from 'model/accession/Accession';
import {User} from 'model/user/User';
import PrettyDate from 'ui/common/time/PrettyDate';

/**
 * filterObj example: {crop: ["bannana", "apple"], description: {contains: "de"}, title: {contains: "ti"}}
 * If we want to replace the code with a title for showing, we need lookups object.
 * It contains pairs key - value:
 *      where key - should be equal to filterObj key which values we want to substitute.
 *      where value - object of codes and titles we want to show.
 * lookups example: {
 *  crop: {
 *      banana: 'Banana',
 *      apple: 'Apple',
 *      ...
 *    },
 *    ...
 *  }
 */
interface IPrettyFiltersProps extends React.ClassAttributes<any> {
  classes: any;
  onSubmit: (newFilter) => any;
  showSnackbar: (snack: string) => void;
  filterObj: object;
  lookups: object;
  prefix: string;
  t: any;
}

const styles = (theme) => ({
  root: {
    display: 'flex',
    justifyContent: 'center' as 'center',
    flexWrap: 'wrap' as 'wrap',
    padding: theme.spacing.unit / 2,
  },
  chip: {
    margin: theme.spacing.unit / 2,
  },
});

// Following keywords are skipped for showing
const keywordsToSkip = ['eq', 'contains', 'sw'];

/**
 * Remove value by path from filterObj and return updated filterObj.
 * @param filterObj - IPrettyFiltersProps.filterObj.
 * @param path - path to value to remove.
 * @return IPrettyFiltersProps.filterObj.
 */
function handleFilterObj(filterObj, path) {
  // clone original filter in order to not mutate it
  const clone = _.cloneDeep(filterObj);
  // array element
  if (path.endsWith(']')) {
    const lastIndex = path.lastIndexOf('[');
    const arrayPath = path.substring(0, lastIndex);
    const index = parseInt(path.substring(lastIndex).replace(/[\[\]']+/g, ''), 10);

    _.get(clone, arrayPath).splice(index, 1);

    return clone;
  }

  return _.omit(clone, [path]);
}

/**
 * Return pretty name.
 * For example we have path crop[0] and value banana, will return 'crop Banana'.
 * Another examples:
 *       'description.contains': 'de' -> 'description de'
 *       'title.eq': 'ti' -> 'title ti'
 * @param path - path to filterObj value ie crop[0]
 * @param value - filterObj value ie BN27.
 * @param lookups - IPrettyFiltersProps.filterObj.
 * @param prefix - for determination which page filter localize
 * @param t - i18n translation function
 * @return IPrettyFiltersProps.filterObj.
 */
function getLabelName(path, value, lookups, prefix, t) {
  const lastKey = path.replace(/\[(.+?)\]/g, '').split('.').pop();

  let name = value;
  if (lookups && lookups[lastKey]) {
    name = lookups[lastKey][value] || value;
  }

  const prettyPath: string = path
    // remove array indexes square brackets [0], [1]... from path.
    .replace(/\[(.+?)\]/g, '')
    // split path title.eq -> ['title', 'eq']
    .split('.')
    // skip for showing keywords such as 'contains', 'eq'...
    .filter((e) => keywordsToSkip.indexOf(e) === -1)
    // join
    .join('.');

  if (typeof name === 'boolean') {
    if (name) {
      return t(`f.${prefix}.${prettyPath}`);
    }
    return t('f.NOT', { what: t(`f.${prefix}.${prettyPath.replace(/^NOT\./, '')}`) });
  }

  const translatedPrettyPath = prettyPath.startsWith('NOT') ?
    t('f.NOT', { what: t(`f.${prefix}.${prettyPath.replace(/^NOT\./, '')}`) })
    :
    t(`f.${prefix}.${prettyPath}`);

  const translatedPrettyName = t(`${name}`);


  if (prettyPath.includes('Date')) {
    return <span>{ translatedPrettyPath }: <PrettyDate value={ new Date(name) } /></span>;
  }

  return `${translatedPrettyPath}: ${translatedPrettyName}`;
}

class PrettyFilters extends React.Component<IPrettyFiltersProps, any> {

  constructor(props: IPrettyFiltersProps, context: any) {
    super(props, context);
    this.state = {
      chipData: flattenjs.convert(cleanFilters(props.filterObj)),
    };
  }

  protected handleDelete = (path) => () => {
    const { filterObj, onSubmit, showSnackbar } = this.props;
    const updated = handleFilterObj(filterObj, path);
    showSnackbar('Applying filters...');
    onSubmit(updated);
  }

  public componentWillReceiveProps(nextProps) {
    const chipData = flattenjs.convert(cleanFilters(nextProps.filterObj));
    if (!_.isEqual(chipData, this.state.chipData)) {
      this.setState({ chipData });
    }
  }

  public render() {
    const { classes, lookups, prefix, t } = this.props;
    const { chipData } = this.state;
    const dataArr = Object.getOwnPropertyNames(chipData);

    return dataArr.length > 0 && (
      <Paper square className={ classes.root }>
        { dataArr.map((key) => {
          return (
            <Chip
              key={ key }
              label={ getLabelName(key, chipData[key], lookups, prefix, t) }
              onDelete={ this.handleDelete(key) }
              className={ classes.chip }
            />
          );
        }) }
      </Paper>
    );
  }
}

const styled = withStyles(styles)(PrettyFilters);

const mapStateToProps = (state, ownProps) => ({
  lookups: {
    crop: [],
    category: '',
    sampStat: Accession.SAMPSTAT,
    storage: Accession.STORAGE,
    role: User.USERROLES,
    accessions: {
      true: 'Yes',
      false: 'No',
    },
  },
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  showSnackbar,
}, dispatch);

export default translate()(connect(mapStateToProps, mapDispatchToProps)(styled));