import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { style } from 'app/styles';
import {
getStartDate,
getEndDate,
getDiffLeftCommit,
getDiffRightCommit,
getSelectedPath,
getHasUncommittedChanges,
} from 'app/selectors/stateVars';
import {
getCommitsForTimeplot,
getFilteredCommits,
} from 'app/selectors/commits';
import { setDates } from 'app/actions/setDates';
import { RevSelector } from 'app/components/RevSelector';
import { EpochDateTime } from 'app/components/EpochDateTime';
import { fetchDiff } from 'app/actions/diff';
const outerStyle = {
_extends: ['flexRow'],
flexGrow: 0,
flexShrink: 0,
background: '@colors.altBackground',
color: '@colors.altForeground',
};
const revChildrenStyle = {
_extends: 'flexColumn',
alignItems: 'center',
minWidth: 160,
};
const revSelectorStyle = {
flexGrow: 1,
textAlign: 'center',
};
export const DifferenceViewerHeader: React.FC = (): React.ReactElement => {
const selectedPath = useSelector(getSelectedPath);
const startDate = useSelector(getStartDate);
const endDate = useSelector(getEndDate);
const leftCommit = useSelector(getDiffLeftCommit);
const rightCommit = useSelector(getDiffRightCommit);
const timeplotCommits = useSelector(getCommitsForTimeplot);
const hasUncommittedChanges = useSelector(getHasUncommittedChanges);
const dispatch = useDispatch();
return (
<div style={style(outerStyle)}>
<RevSelector
style={style(revSelectorStyle)}
disablePrevious={shouldDisablePrevious(leftCommit)}
disableNext={shouldDisableNext(leftCommit)}
onNextRevClick={onLeftRevNext}
onPreviousRevClick={onLeftRevPrevious}
>
{renderRevChildren('left', leftCommit)}
</RevSelector>
<RevSelector
style={style(revSelectorStyle)}
disablePrevious={shouldDisablePrevious(rightCommit)}
disableNext={shouldDisableNext(rightCommit)}
onNextRevClick={onRightRevNext}
onPreviousRevClick={onRightRevPrevious}
>
{renderRevChildren('right', rightCommit)}
</RevSelector>
</div>
);
function renderRevChildren(which, _commit) {
Iif (!timeplotCommits || timeplotCommits.length === 0) {
return null;
}
const commit =
which === 'left' && !_commit
? timeplotCommits[0]
: which === 'right' && !_commit && !hasUncommittedChanges
? timeplotCommits[0]
: _commit;
return (
<div style={style(revChildrenStyle)}>
{commit ? (
<>
<div style={style('flexRow')}>
<EpochDateTime value={commit.authorDate} />
</div>
<div style={style('flexRow')}>
(#
{commit.hash})
{commit.id === timeplotCommits[0].id && ' (Local HEAD)'}
</div>
</>
) : (
<div style={style('flexRow')}>Uncommitted Changes</div>
)}
</div>
);
}
function shouldDisablePrevious(commit) {
Iif (!timeplotCommits) {
return true;
}
// a null left or right commit means it's the local changes
// or the HEAD rev and there should be previous commits
return (
(commit && commit === timeplotCommits[timeplotCommits.length - 1]) ||
(commit && commit === rightCommit && rightCommit === leftCommit)
);
}
function shouldDisableNext(commit) {
// a null commit means it's the latest rev
Iif (!timeplotCommits || !commit) {
return true;
}
return commit === null;
}
function onLeftRevPrevious() {
setLeftRev(-1);
}
function onLeftRevNext() {
setLeftRev(1);
}
function setLeftRev(relativeIndex) {
if (!timeplotCommits || timeplotCommits.length === 0) {
return;
}
let newLeftCommit = null;
if (leftCommit) {
const foundIndex = timeplotCommits.findIndex(commit => {
return commit.id === leftCommit.id;
});
if (foundIndex !== -1) {
newLeftCommit = timeplotCommits[foundIndex - relativeIndex];
}
} else if (relativeIndex < 0) {
newLeftCommit = timeplotCommits[2];
}
if (newLeftCommit) {
dispatch(setDates((newLeftCommit.authorDate + 1) * 1000, endDate * 1000));
}
}
function onRightRevPrevious() {
setRightRev(-1);
}
function onRightRevNext() {
setRightRev(1);
}
function setRightRev(relativeIndex) {
if (!timeplotCommits || timeplotCommits.length === 0) {
return;
}
let newRightCommit = null;
if (rightCommit) {
const foundIndex = timeplotCommits.findIndex(commit => {
return commit.id === rightCommit.id;
});
if (foundIndex !== -1) {
newRightCommit = timeplotCommits[foundIndex - relativeIndex];
}
} else if (relativeIndex < 0) {
newRightCommit = timeplotCommits[0];
}
if (newRightCommit) {
dispatch(
setDates(startDate * 1000, (newRightCommit.authorDate + 1) * 1000)
);
}
}
};
|