All files / app/containers Stats.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                  2x             2x 2x   2x                                                
import React from 'react';
import { useSelector } from 'react-redux';
 
import { style } from 'app/styles';
import { getAuthorDateRange } from 'app/selectors/commits';
import { StackedLabel } from 'app/components/StackedLabel';
import { EpochSpan } from 'app/components/EpochSpan';
import { ExplodeOnChange } from 'app/components/ExplodeOnChange';
 
const outerStyle = {
  _extends: ['flexRow'],
  marginBottom: '@margins.medium+px',
  paddingLeft: '@margins.medium+px',
  flexShrink: 0,
};
 
export const Stats: React.FC = (): React.ReactElement => {
  const { minAuthorDate, maxAuthorDate } = useSelector(getAuthorDateRange);
 
  return (
    <div style={style(outerStyle)}>
      <StackedLabel label="Selected Time Span">
        <ExplodeOnChange value={minAuthorDate + maxAuthorDate}>
          <EpochSpan
            firstEpochTime={minAuthorDate}
            secondEpochTime={maxAuthorDate}
          />
        </ExplodeOnChange>
      </StackedLabel>
      <StackedLabel label="Last Commit">
        <div>
          <ExplodeOnChange value={maxAuthorDate}>
            <EpochSpan
              firstEpochTime={maxAuthorDate}
              secondEpochTime={Date.now() / 1000}
            />
            <span> ago</span>
          </ExplodeOnChange>
        </div>
      </StackedLabel>
    </div>
  );
};