use reflow to migrate from flow to typescript

scm-ui/ui-components/src/DateFromNow.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { translate } from 'react-i18next';
+import { formatDistance, format, parseISO } from 'date-fns';
+import { enUS, de, es } from 'date-fns/locale';
+import styled from 'styled-components';
+
+const supportedLocales = {
+  enUS,
+  de,
+  es,
+};
+
+type Props = {
+  date?: string;
+  timeZone?: string;
+
+  /**
+   * baseDate is the date from which the distance is calculated,
+   * default is the current time (new Date()). This property
+   * is required to keep snapshots tests green over the time on
+   * ci server.
+   */
+  baseDate?: string;
+
+  // context props
+  i18n: any;
+};
+
+const DateElement = styled.time`
+  border-bottom: 1px dotted rgba(219, 219, 219);
+  cursor: help;
+`;
+
+class DateFromNow extends React.Component<Props> {
+  getLocale = () => {
+    const { i18n } = this.props;
+    const locale = supportedLocales[i18n.language];
+    if (!locale) {
+      return enUS;
+    }
+    return locale;
+  };
+
+  createOptions = () => {
+    const { timeZone } = this.props;
+    const options: object = {
+      addSuffix: true,
+      locate: this.getLocale(),
+    };
+    if (timeZone) {
+      options.timeZone = timeZone;
+    }
+    return options;
+  };
+
+  getBaseDate = () => {
+    const { baseDate } = this.props;
+    if (baseDate) {
+      return parseISO(baseDate);
+    }
+    return new Date();
+  };
+
+  render() {
+    const { date } = this.props;
+    if (date) {
+      const isoDate = parseISO(date);
+      const options = this.createOptions();
+      const distance = formatDistance(isoDate, this.getBaseDate(), options);
+      const formatted = format(isoDate, 'yyyy-MM-dd HH:mm:ss', options);
+      return <DateElement title={formatted}>{distance}</DateElement>;
+    }
+    return null;
+  }
+}
+
+export default translate()(DateFromNow);