All files / app/containers DifferenceViewer.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                                      2x           2x             2x 2x 2x 2x 2x 2x   2x   2x                                                                  
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import * as path from 'path';
import { debug } from 'app/utilities/logger';
import { style } from 'app/styles';
import { selectPath } from 'app/actions';
import {
  getSelectedPath,
  getDiff,
  getIsDiffFetching,
  getRerenderRequestedAt,
} from 'app/selectors/stateVars';
import { getDirectoryDiff } from 'app/selectors/files';
 
import { DifferenceViewerHeader } from 'app/containers/DifferenceViewerHeader';
import { SpinnerContainer } from 'app/components/SpinnerContainer';
import { DirectoryDifferences } from 'app/components/DirectoryDifferences';
import { FileDifferences } from 'app/components/FileDifferences';
 
const outerStyle = {
  _extends: ['altPanel', 'flexColumn', 'flexGrow'],
  position: 'relative',
  overflow: 'hidden',
};
 
const innerStyle = {
  _extends: ['flexColumn', 'flexGrow'],
  overflow: 'hidden',
  background: '@colors.background',
  color: '@colors.text',
};
 
export const DifferenceViewer: React.FC = (): React.ReactElement => {
  const selectedPath = useSelector(getSelectedPath);
  const diff = useSelector(getDiff);
  const isDiffFetching = useSelector(getIsDiffFetching);
  const rerenderRequestedAt = useSelector(getRerenderRequestedAt);
  const dirDiff = useSelector(getDirectoryDiff);
 
  const dispatch = useDispatch();
 
  return (
    <div style={style(outerStyle)}>
      <SpinnerContainer
        isSpinning={isDiffFetching || !diff}
        style={style(innerStyle)}
        opaque
      >
        <DifferenceViewerHeader />
        {diff && diff.isDirectory ? (
          <DirectoryDifferences
            modifiedFiles={diff.modifiedFiles}
            leftTree={dirDiff.leftTree}
            rightTree={dirDiff.rightTree}
            onFileClick={onFileClick}
          />
        ) : (
          diff && (
            <FileDifferences
              leftFileContents={diff.leftFileContents}
              rightFileContents={diff.rightFileContents}
              rerenderRequestedAt={rerenderRequestedAt}
            />
          )
        )}
      </SpinnerContainer>
    </div>
  );
 
  function onFileClick(relativePath) {
    const fullPath = path.join(selectedPath, relativePath);
    dispatch(selectPath(fullPath));
  }
};