fix: Document history event headings (#2433)

* fix: Document history events from last year but within 12 months shown as 'this year'
fix: Events older than a year have repeated headings

* lint

app/utils/dates.js

@@ -4,14 +4,20 @@ import {
   isYesterday,
   differenceInCalendarWeeks,
   differenceInCalendarMonths,
+  differenceInCalendarYears,
+  format as formatDate,
 } from "date-fns";
-import * as React from "react";
 import { type TFunction } from "react-i18next";
-import LocaleTime from "components/LocaleTime";
+import { dateLocale } from "utils/i18n";
 
-export function dateToHeading(dateTime: string, t: TFunction) {
+export function dateToHeading(
+  dateTime: string,
+  t: TFunction,
+  userLocale: ?string
+) {
   const date = Date.parse(dateTime);
   const now = new Date();
+  const locale = dateLocale(userLocale);
 
   if (isToday(date)) {
     return t("Today");
@@ -26,7 +32,7 @@ export function dateToHeading(dateTime: string, t: TFunction) {
   // async bundle loading of languages
   const weekDiff = differenceInCalendarWeeks(now, date);
   if (weekDiff === 0) {
-    return <LocaleTime dateTime={dateTime} tooltip={false} format="iiii" />;
+    return formatDate(Date.parse(dateTime), "iiii", { locale });
   }
 
   if (weekDiff === 1) {
@@ -42,10 +48,11 @@ export function dateToHeading(dateTime: string, t: TFunction) {
     return t("Last month");
   }
 
-  if (monthDiff <= 12) {
+  const yearDiff = differenceInCalendarYears(now, date);
+  if (yearDiff === 0) {
     return t("This year");
   }
 
   // If older than the current calendar year then just print the year e.g 2020
-  return <LocaleTime dateTime={dateTime} tooltip={false} format="y" />;
+  return formatDate(Date.parse(dateTime), "y", { locale });
 }

app/utils/i18n.js

@@ -0,0 +1,36 @@
+// @flow
+import {
+  enUS,
+  de,
+  faIR,
+  fr,
+  es,
+  it,
+  ja,
+  ko,
+  ptBR,
+  pt,
+  zhCN,
+  zhTW,
+  ru,
+} from "date-fns/locale";
+
+const locales = {
+  en_US: enUS,
+  de_DE: de,
+  es_ES: es,
+  fa_IR: faIR,
+  fr_FR: fr,
+  it_IT: it,
+  ja_JP: ja,
+  ko_KR: ko,
+  pt_BR: ptBR,
+  pt_PT: pt,
+  zh_CN: zhCN,
+  zh_TW: zhTW,
+  ru_RU: ru,
+};
+
+export function dateLocale(userLocale: ?string) {
+  return userLocale ? locales[userLocale] : undefined;
+}