All files / app/containers Commits.tsx

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98                                          2x   2x 2x 2x 2x 2x   2x 2x   2x                                                                                                                                  
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { debug } from 'app/utilities/logger';
 
import {
  highlightCommits,
  selectPath,
  setOpenSidePanelGroup,
} from 'app/actions';
import { CollapsibleSidePanelGroups } from 'app/actions/ActionTypes';
import { getFilteredSortedCommits } from 'app/selectors/commits';
import {
  getHighlightedCommitIds,
  getOpenSidePanelGroup,
} from 'app/selectors/stateVars';
import { style } from 'app/styles';
import { ExtendingList } from 'app/components/ExtendingList';
import { CommitCard } from 'app/components/CommitCard';
import CommitsActionMenu from './CommitsActionMenu';
import { CollapsibleGroup } from 'app/components/CollapsibleGroup';
 
const COLLAPSIBLE_GROUP = CollapsibleSidePanelGroups.COMMITS;
 
export const Commits: React.FC = (): React.ReactElement => {
  const commits = useSelector(getFilteredSortedCommits);
  const highlightedCommitIds = useSelector(getHighlightedCommitIds);
  const openGroup = useSelector(getOpenSidePanelGroup);
  const dispatch = useDispatch();
 
  const title = `${commits.length} Commits`;
  const isOpen = openGroup === COLLAPSIBLE_GROUP;
 
  return (
    <CollapsibleGroup
      title={title}
      isOpen={isOpen}
      onOpenToggle={handleOpenGroupToggle}
    >
      <CommitsActionMenu />
      <ExtendingList rowCount={commits.length} rowRenderer={renderRow} />
    </CollapsibleGroup>
  );
 
  function handleOpenGroupToggle() {
    if (!isOpen) {
      dispatch(setOpenSidePanelGroup(COLLAPSIBLE_GROUP));
    }
  }
 
  function renderRow(index: number, key: string | number) {
    // debug('render row', row);
    const commit = commits[index];
    let isHighlighted = false;
    let isExpanded = false;
    if (highlightedCommitIds && highlightedCommitIds.length > 0) {
      isHighlighted = highlightedCommitIds.includes(commit.id);
      isExpanded = highlightedCommitIds[0] === commit.id;
    }
 
    return (
      <div key={key}>
        <CommitCard
          commit={commit}
          index={index}
          isHighlighted={isHighlighted}
          isExpanded={isExpanded}
          onClick={onCommitCardClick}
          onFileClick={onFileClick}
          hideFiles={false}
        />
      </div>
    );
  }
 
  function onCommitCardClick(event, commit, index) {
    event.stopPropagation();
    let newHighlightedCommitIds = [commit.id];
    if (highlightedCommitIds && highlightedCommitIds.length > 0) {
      const index = highlightedCommitIds.indexOf(commit.id);
      if (index !== -1) {
        // moving it to the top causes it to also be the expanded
        // commit card.
        newHighlightedCommitIds = newHighlightedCommitIds.concat(
          highlightedCommitIds
            .slice(0, index)
            .concat(highlightedCommitIds.slice(index + 1))
        );
      }
    }
    dispatch(highlightCommits(newHighlightedCommitIds));
  }
 
  function onFileClick(event, fileName) {
    event.stopPropagation();
    dispatch(selectPath(fileName));
  }
};