Connector and Presentation components. Living Together!!

CommitZone.jsx

// @flow

import React from 'react';
import classnames from 'classnames';
import fp from 'lodash/fp';
import { connect } from 'react-redux';

import type {
  MapDispatchToProps,
  MapStateToProps
} from 'react-redux';

import { CommitZoneBackgroundStreak } from './BackgroundStreak';
import CommitNode from './CommitNode';
import Edges from './Edges/Edges';
import { LeftGutter, RightGutter } from './Gutter';
import { RefLineForCommit } from '../Common/RefLine';
import Timeline from '../Common/Timeline';

import type {
  CommitType,
  Sha
} from '../../../../domain/Commit/CommitTypes';

import type {
  ColumnColor,
  RowEdges
} from '../../../../domain/Graph/GraphTypes';

import {
  getSelectCommitFn
} from '../../../../../helpers/CommitHelpers';

import {
  popupNodeMenu
} from '../../../../../helpers/ContextMenuHelpers';

import {
  getIsFilteredBySha,
  getIsSelectedBySha
} from '../../../../domain/Commit/CommitSelectors';

import {
  getColumnsBySha,
  getCommitsWithWipNodeBySha,
  getCommitZoneWidth,
  getEdgesBySha,
  getColumnColorByColumn,
  getLeftGutterBoxShadowAlpha,
  getLeftGutterWidth,
  getScrollLeft,
  getNodeOpacityByColumn,
  getNodeOffsetByColumn,
  getRightGutterBoxShadowAlpha,
  getRightGutterWidth,
  getTimeLineEntriesBySha
} from '../../../../domain/Graph/GraphSelectors';

import {
  getHeadRefSha,
  getHasRefsBySha
} from '../../../../domain/Ref/RefSelectors';

import {
  CurrentlyHoveredGraphCommitChanged
} from '../../../../domain/Ui/UiMessages';

import type {
  Action,
  State
} from '../../../../StoreTypes';

type StateProps = {|
  authorEmail: string,
  column: number,
  columnColorByColumn: {[id: number]: ColumnColor},
  commitZoneWidth: number,
  edges: RowEdges,
  hasRefs: boolean,
  hasTimeline: boolean,
  isActiveSha: boolean,
  isFiltered: boolean,
  isHovering: boolean,
  isSelected: boolean,
  leftGutterBoxShadowAlpha: number,
  leftGutterWidth: number,
  nodeOffset: number,
  nodeOpacity: number,
  rightGutterBoxShadowAlpha: number,
  rightGutterWidth: number,
  scrollLeft: number
|};

type DispatchProps = {|
  clearCurrentlyHoveredGraphCommit: () => void,
  onContextMenu: () => void,
  onClick: (event: SyntheticMouseEvent) => void,
  setAsCurrentlyHoveredGraphCommit: () => void
|};

type OwnProps = {|
  sha: Sha,
  style: {[id: string]: string | number},
  type: CommitType
|};

type CommitZoneProps = {|
  /* ::
  ...StateProps,
  ...DispatchProps,
  ...OwnProps
  */
|};

type CommitZoneDefaultProps = {
  style: {[id: string]: string | number},
};

class CommitZone extends React.PureComponent {
  static defaultProps: CommitZoneDefaultProps ={
    style: {}
  };

  props: CommitZoneProps

  render() {
    const {
      authorEmail,
      clearCurrentlyHoveredGraphCommit,
      column,
      columnColorByColumn,
      commitZoneWidth,
      edges,
      hasRefs,
      hasTimeline,
      isActiveSha,
      isFiltered,
      isSelected,
      leftGutterBoxShadowAlpha,
      leftGutterWidth,
      nodeOffset,
      nodeOpacity,
      onClick,
      onContextMenu,
      rightGutterBoxShadowAlpha,
      rightGutterWidth,
      scrollLeft,
      setAsCurrentlyHoveredGraphCommit,
      style,
      type
    } = this.props;

    const columnForClassList = column + 1; // lists in less are 1-indexed based instead of 0 so this is compensatation.

    const baseClassName = classnames(
      'relative',
      'commit-zone',
      'height-100-percent',
      'pt3',
      type,
      `column-${columnForClassList}`,
      {
        'is-selected': isSelected,
        'is-filtered': isFiltered,
        'has-active': isActiveSha
      }
    );

    const maybeTimeline = hasTimeline ? <Timeline className='z2' /> : null;

    return (
      <div
        className={baseClassName}
        onClick={onClick}
        onContextMenu={onContextMenu}
        onMouseEnter={setAsCurrentlyHoveredGraphCommit}
        onMouseLeave={clearCurrentlyHoveredGraphCommit}
        style={style}
        >
        {maybeTimeline}
        <LeftGutter
          boxShadowAlpha={leftGutterBoxShadowAlpha}
          hasTimeline={hasTimeline}
          scrollLeft={scrollLeft}
          width={leftGutterWidth}
        />
        <RefLineForCommit hasRefs={hasRefs} isActiveSha={isActiveSha} nodeOffset={nodeOffset} type={type} />
        <CommitNode authorEmail={authorEmail} left={nodeOffset} opacity={nodeOpacity} type={type} />
        <CommitZoneBackgroundStreak column={column} />
        <Edges columnColorByColumn={columnColorByColumn} edges={edges} nodeColumn={column} />
        <RightGutter
          boxShadowAlpha={rightGutterBoxShadowAlpha}
          commitZoneWidth={commitZoneWidth}
          hasTimeline={hasTimeline}
          scrollLeft={scrollLeft}
          width={rightGutterWidth}
        />
      </div>
    );
  }
}

export default CommitZone;

const mapStateToProps: MapStateToProps<State, any, StateProps> = (_, { sha }) => (state) => {
  const column = getColumnsBySha(state)[sha];

  return {
    authorEmail: fp.get(`[${sha}].authorEmail`, getCommitsWithWipNodeBySha(state)),
    column,
    columnColorByColumn: getColumnColorByColumn(state),
    commitZoneWidth: getCommitZoneWidth(state),
    edges: getEdgesBySha(state)[sha],
    hasRefs: getHasRefsBySha(state)[sha],
    hasTimeline: Boolean(getTimeLineEntriesBySha(state)[sha]),
    isActiveSha: getHeadRefSha(state) === sha,
    isFiltered: getIsFilteredBySha(state)[sha],
    isHovering: fp.get('ui.currentlyHoveredCommitSha', state) === sha,
    isSelected: getIsSelectedBySha(state)[sha],
    leftGutterBoxShadowAlpha: getLeftGutterBoxShadowAlpha(state),
    leftGutterWidth: getLeftGutterWidth(state),
    nodeOffset: getNodeOffsetByColumn(state)[column],
    nodeOpacity: getNodeOpacityByColumn(state)[column],
    rightGutterBoxShadowAlpha: getRightGutterBoxShadowAlpha(state),
    rightGutterWidth: getRightGutterWidth(state),
    scrollLeft: getScrollLeft(state)
  };
};

const mapDispatchToProps: MapDispatchToProps<Action, OwnProps, DispatchProps> = (_, { sha, type }) => dispatch => ({
  clearCurrentlyHoveredGraphCommit: () => dispatch(CurrentlyHoveredGraphCommitChanged(null)),
  onContextMenu: () => popupNodeMenu(sha, type),
  onClick: event => getSelectCommitFn(event)(sha),
  setAsCurrentlyHoveredGraphCommit: () => dispatch(CurrentlyHoveredGraphCommitChanged(sha))
});

export const CommitZoneContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(CommitZone);