align calculating and formatting of dates between components

scm-ui/ui-components/src/Date.stories.tsx

@@ -24,25 +24,41 @@
 import React from "react";
 import DateFromNow from "./DateFromNow";
 import { storiesOf } from "@storybook/react";
+import DateShort from "./DateShort";
+import styled from "styled-components";
 
 const baseProps = {
   timeZone: "Europe/Berlin",
   baseDate: "2019-10-12T13:56:42+02:00"
 };
 
-storiesOf("DateFromNow", module).add("Default", () => (
+const dates = [
-  <div>
+  "2009-06-30T18:30:00+02:00",
-    <p>
+  "2019-06-30T18:30:00+02:00",
-      <DateFromNow date="2009-06-30T18:30:00+02:00" {...baseProps} />
+  "2019-10-12T13:56:40+02:00",
-    </p>
+  "2019-10-11T13:56:40+02:00"
-    <p>
+];
-      <DateFromNow date="2019-06-30T18:30:00+02:00" {...baseProps} />
+
-    </p>
+const Wrapper = styled.div`
-    <p>
+  padding: 2rem;
-      <DateFromNow date="2019-10-12T13:56:40+02:00" {...baseProps} />
+`;
-    </p>
+
-    <p>
+storiesOf("Date", module)
-      <DateFromNow date="2019-10-11T13:56:40+02:00" {...baseProps} />
+  .add("Date from now", () => (
-    </p>
+    <Wrapper>
-  </div>
+      {dates.map(d => (
-));
+        <p>
+          <DateFromNow date={d} {...baseProps} />
+        </p>
+      ))}
+    </Wrapper>
+  ))
+  .add("Short", () => (
+    <Wrapper>
+      {dates.map(d => (
+        <p>
+          <DateShort date={d} {...baseProps} />
+        </p>
+      ))}
+    </Wrapper>
+  ));

scm-ui/ui-components/src/DateElement.ts

@@ -22,21 +22,10 @@
  * SOFTWARE.
  */
 import styled from "styled-components";
-import { parseISO } from "date-fns";
 
-export type DateInput = Date | string;
+const DateElement = styled.time`
-
-export const ShortDateFormat = "yyyy-MM-dd";
-export const FullDateFormat = "yyyy-MM-dd HH:mm:ss";
-
-export const DateElement = styled.time`
   border-bottom: 1px dotted rgba(219, 219, 219);
   cursor: help;
 `;
 
-export const toDate = (value: DateInput): Date => {
+export default DateElement;
-  if (value instanceof Date) {
-    return value;
-  }
-  return parseISO(value);
-};

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

@@ -21,100 +21,26 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
-import { withTranslation, WithTranslation } from "react-i18next";
-import { formatDistance, format, Locale } from "date-fns";
-import { enUS, de, es } from "date-fns/locale";
-import { DateInput, DateElement, FullDateFormat, toDate } from "./dates";
 
-type LocaleMap = {
+import React, { FC } from "react";
-  [key: string]: Locale;
+import useDateFormatter, { DateProps } from "./useDateFormatter";
-};
+import DateElement from "./DateElement";
 
-export const supportedLocales: LocaleMap = {
+type Props = DateProps & {
-  enUS,
-  en: enUS,
-  de,
-  es
-};
-
-type Props = WithTranslation & {
-  date?: DateInput;
-  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?: DateInput;
   className?: string;
 };
 
-type Options = {
+const DateFromNow: FC<Props> = ({ className, ...dateProps }) => {
-  addSuffix: boolean;
+  const formatter = useDateFormatter(dateProps);
-  locale: Locale;
+  if (!formatter) {
-  timeZone?: string;
-};
-
-export const chooseLocale = (language: string, languages?: string[]) => {
-  for (const lng of languages || []) {
-    const locale = supportedLocales[lng];
-    if (locale) {
-      return locale;
-    }
-  }
-
-  const locale = supportedLocales[language];
-  if (locale) {
-    return locale;
-  }
-
-  return enUS;
-};
-
-class DateFromNow extends React.Component<Props> {
-  getLocale = (): Locale => {
-    const { i18n } = this.props;
-    return chooseLocale(i18n.language, i18n.languages);
-  };
-
-  createOptions = () => {
-    const { timeZone } = this.props;
-    const options: Options = {
-      addSuffix: true,
-      locale: this.getLocale()
-    };
-    if (timeZone) {
-      options.timeZone = timeZone;
-    }
-    return options;
-  };
-
-  getBaseDate = () => {
-    const { baseDate } = this.props;
-    if (baseDate) {
-      return toDate(baseDate);
-    }
-    return new Date();
-  };
-
-  render() {
-    const { date, className } = this.props;
-    if (date) {
-      const isoDate = toDate(date);
-      const options = this.createOptions();
-      const distance = formatDistance(isoDate, this.getBaseDate(), options);
-      const formatted = format(isoDate, FullDateFormat, options);
-      return (
-        <DateElement className={className} title={formatted}>
-          {distance}
-        </DateElement>
-      );
-    }
     return null;
   }
-}
 
-export default withTranslation()(DateFromNow);
+  return (
+    <DateElement className={className} title={formatter.formatFull()}>
+      {formatter.formatDistance()}
+    </DateElement>
+  );
+};
+
+export default DateFromNow;

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

@@ -21,23 +21,24 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC } from "react";
-import { format } from "date-fns";
-import { toDate, ShortDateFormat, FullDateFormat, DateElement } from "./dates";
 
-type Props = {
+import React, { FC } from "react";
-  value?: Date | string;
+import useDateFormatter, { DateProps } from "./useDateFormatter";
+import DateElement from "./DateElement";
+
+type Props = DateProps & {
   className?: string;
 };
 
-const DateShort: FC<Props> = ({ value, className }) => {
+const DateShort: FC<Props> = ({ className, ...dateProps }) => {
-  if (!value) {
+  const formatter = useDateFormatter(dateProps);
+  if (!formatter) {
     return null;
   }
-  const date = toDate(value);
+
   return (
-    <DateElement className={className} title={format(date, FullDateFormat)}>
+    <DateElement className={className} title={formatter.formatFull()}>
-      {format(date, ShortDateFormat)}
+      {formatter.formatShort()}
     </DateElement>
   );
 };

scm-ui/ui-components/src/repos/annotate/Annotate.tsx

@@ -28,7 +28,7 @@ import { Repository, AnnotatedSource, AnnotatedLine } from "@scm-manager/ui-type
 // @ts-ignore
 import { LightAsync as ReactSyntaxHighlighter, createElement } from "react-syntax-highlighter";
 import { arduinoLight } from "react-syntax-highlighter/dist/cjs/styles/hljs";
-import { DateInput } from "../../dates";
+import { DateInput } from "../../useDateFormatter";
 import Popover from "./Popover";
 import AnnotateLine from "./AnnotateLine";
 import { Action } from "./actions";

scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx

@@ -134,7 +134,7 @@ const AnnotateLine: FC<Props> = ({ annotation, showAnnotation, dispatch, nr, chi
           {annotation.author.name}
         </Author>{" "}
         <When>
-          <DateShort value={annotation.when} />
+          <DateShort date={annotation.when} />
         </When>{" "}
       </Metadata>
       <LineNumber>{nr}</LineNumber> <LineElement>{children}</LineElement>

scm-ui/ui-components/src/repos/annotate/Popover.tsx

@@ -27,7 +27,7 @@ import styled from "styled-components";
 import { Link } from "react-router-dom";
 import DateFromNow from "../../DateFromNow";
 import { SingleContributor } from "../changesets";
-import { DateInput } from "../../dates";
+import { DateInput } from "../../useDateFormatter";
 import { Repository, AnnotatedLine } from "@scm-manager/ui-types";
 import AuthorImage from "./AuthorImage";
 import { Action } from "./actions";

scm-ui/ui-components/src/useDateFormatter.test.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { chooseLocale, supportedLocales } from "./DateFromNow";
+import { chooseLocale, supportedLocales } from "./useDateFormatter";
 
 describe("test choose locale", () => {
   it("should choose de", () => {

scm-ui/ui-components/src/useDateFormatter.ts

@@ -0,0 +1,126 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useTranslation } from "react-i18next";
+import { enUS, de, es } from "date-fns/locale";
+import { formatDistance, format, Locale, parseISO } from "date-fns";
+
+type LocaleMap = {
+  [key: string]: Locale;
+};
+
+export const supportedLocales: LocaleMap = {
+  enUS,
+  en: enUS,
+  de,
+  es
+};
+
+type Options = {
+  addSuffix: boolean;
+  locale: Locale;
+  timeZone?: string;
+};
+
+export const chooseLocale = (language: string, languages?: string[]) => {
+  for (const lng of languages || []) {
+    const locale = supportedLocales[lng];
+    if (locale) {
+      return locale;
+    }
+  }
+
+  const locale = supportedLocales[language];
+  if (locale) {
+    return locale;
+  }
+
+  return enUS;
+};
+
+export type DateInput = Date | string;
+
+export type DateProps = {
+  date?: DateInput;
+  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?: DateInput;
+};
+
+const createOptions = (locale: Locale, timeZone?: string) => {
+  const options: Options = {
+    addSuffix: true,
+    locale
+  };
+  if (timeZone) {
+    options.timeZone = timeZone;
+  }
+  return options;
+};
+
+const createBaseDate = (baseDate?: DateInput) => {
+  if (baseDate) {
+    return toDate(baseDate);
+  }
+  return new Date();
+};
+
+const toDate = (value: DateInput): Date => {
+  if (value instanceof Date) {
+    return value;
+  }
+  return parseISO(value);
+};
+
+const useDateFormatter = ({ date, baseDate, timeZone }: DateProps) => {
+  const { i18n } = useTranslation();
+  if (!date) {
+    return null;
+  }
+
+  const isoDate = toDate(date);
+  const base = createBaseDate(baseDate);
+
+  const locale = chooseLocale(i18n.language, i18n.languages);
+  const options = createOptions(locale, timeZone);
+  return {
+    formatShort() {
+      return format(isoDate, "yyyy-MM-dd", options);
+    },
+    formatFull() {
+      return format(isoDate, "yyyy-MM-dd HH:mm:ss", options);
+    },
+    formatDistance() {
+      return formatDistance(isoDate, base, options);
+    }
+  };
+};
+
+export default useDateFormatter;