All files / app/components EpochSpan.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                  8x                         36x 36x 108x 108x 24x   24x 24x     12x   8x 36x                   8x  
import React from 'react';
import { style } from 'app/styles';
 
export interface EpochSpanProps {
  firstEpochTime: number;
  secondEpochTime: number;
  style?: object | string;
}
 
const secondsPer = {
  year: 31556926,
  month: 2629743,
  week: 604800,
  day: 86400,
  hour: 3600,
  minute: 60,
};
 
export function convertEpochDateTimesToTimeSpan(
  firstEpochTime: number,
  secondEpochTime: number
): string {
  const timeSpan = Math.abs(firstEpochTime - secondEpochTime);
  for (const timeComponent in secondsPer) {
    const seconds = secondsPer[timeComponent];
    if (timeSpan > seconds) {
      const roundedNumberForComponent = Math.round(timeSpan / seconds);
      const label =
        roundedNumberForComponent === 1 ? timeComponent : `${timeComponent}s`;
      return `${roundedNumberForComponent} ${label}`;
    }
  }
  return '0 seconds';
}
export const EpochSpan = (props: EpochSpanProps): JSX.Element => {
  return (
    <span style={style(props.style)}>
      {convertEpochDateTimesToTimeSpan(
        props.firstEpochTime,
        props.secondEpochTime
      )}
    </span>
  );
};
 
EpochSpan.displayName = 'EpochSpan';