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/components/Layout.js

@@ -22,7 +22,6 @@ import UiStore from "stores/UiStore";
 import ErrorSuspended from "scenes/ErrorSuspended";
 import KeyboardShortcuts from "scenes/KeyboardShortcuts";
 import Button from "components/Button";
-import DocumentHistory from "components/DocumentHistory";
 import Flex from "components/Flex";
 import Guide from "components/Guide";
 import { LoadingIndicatorBar } from "components/LoadingIndicator";
@@ -38,6 +37,12 @@ import {
   newDocumentUrl,
 } from "utils/routeHelpers";
 
+const DocumentHistory = React.lazy(() =>
+  import(
+    /* webpackChunkName: "document-history" */ "components/DocumentHistory"
+  )
+);
+
 type Props = {
   documents: DocumentsStore,
   children?: ?React.Node,
@@ -154,12 +159,14 @@ class Layout extends React.Component<Props> {
             {this.props.children}
           </Content>
 
-          <Switch>
+          <React.Suspense>
-            <Route
+            <Switch>
-              path={`/doc/${slug}/history/:revisionId?`}
+              <Route
-              component={DocumentHistory}
+                path={`/doc/${slug}/history/:revisionId?`}
-            />
+                component={DocumentHistory}
-          </Switch>
+              />
+            </Switch>
+          </React.Suspense>
         </Container>
         <Guide
           isOpen={this.keyboardShortcutsOpen}

app/components/LocaleTime.js

@@ -1,39 +1,9 @@
 // @flow
 import { format as formatDate, formatDistanceToNow } from "date-fns";
-import {
-  enUS,
-  de,
-  faIR,
-  fr,
-  es,
-  it,
-  ja,
-  ko,
-  ptBR,
-  pt,
-  zhCN,
-  zhTW,
-  ru,
-} from "date-fns/locale";
 import * as React from "react";
 import Tooltip from "components/Tooltip";
 import useUserLocale from "hooks/useUserLocale";
-
+import { dateLocale } from "utils/i18n";
-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,
-};
 
 let callbacks = [];
 
@@ -59,7 +29,6 @@ type Props = {
   shorten?: boolean,
   relative?: boolean,
   format?: string,
-  tooltip?: boolean,
 };
 
 function LocaleTime({
@@ -70,7 +39,6 @@ function LocaleTime({
   format,
   relative,
   tooltipDelay,
-  tooltip,
 }: Props) {
   const userLocale = useUserLocale();
   const [_, setMinutesMounted] = React.useState(0); // eslint-disable-line no-unused-vars
@@ -88,7 +56,7 @@ function LocaleTime({
     };
   }, []);
 
-  const locale = userLocale ? locales[userLocale] : undefined;
+  const locale = dateLocale(userLocale);
   let relativeContent = formatDistanceToNow(Date.parse(dateTime), {
     addSuffix,
     locale,
@@ -109,10 +77,6 @@ function LocaleTime({
 
   const content = children || relative ? relativeContent : tooltipContent;
 
-  if (!tooltip) {
-    return content;
-  }
-
   return (
     <Tooltip tooltip={tooltipContent} delay={tooltipDelay} placement="bottom">
       <time dateTime={dateTime}>{content}</time>

app/components/PaginatedList.js

@@ -2,10 +2,11 @@
 import ArrowKeyNavigation from "boundless-arrow-key-navigation";
 import { isEqual } from "lodash";
 import { observable, action } from "mobx";
-import { observer } from "mobx-react";
+import { observer, inject } from "mobx-react";
 import * as React from "react";
 import { withTranslation, type TFunction } from "react-i18next";
 import { Waypoint } from "react-waypoint";
+import AuthStore from "stores/AuthStore";
 import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
 import DelayedMount from "components/DelayedMount";
 import PlaceholderList from "components/List/Placeholder";
@@ -17,6 +18,7 @@ type Props = {
   heading?: React.Node,
   empty?: React.Node,
   items: any[],
+  auth: AuthStore,
   renderItem: (any, index: number) => React.Node,
   renderHeading?: (name: React.Element<any> | string) => React.Node,
   t: TFunction,
@@ -105,7 +107,7 @@ class PaginatedList extends React.Component<Props> {
   };
 
   render() {
-    const { items, heading, empty, renderHeading } = this.props;
+    const { items, heading, auth, empty, renderHeading } = this.props;
 
     let previousHeading = "";
     const showLoading =
@@ -137,7 +139,11 @@ class PaginatedList extends React.Component<Props> {
                 // Get what a heading would look like for this item
                 const currentDate =
                   item.updatedAt || item.createdAt || previousHeading;
-                const currentHeading = dateToHeading(currentDate, this.props.t);
+                const currentHeading = dateToHeading(
+                  currentDate,
+                  this.props.t,
+                  auth.user?.language
+                );
 
                 // If the heading is different to any previous heading then we
                 // should render it, otherwise the item can go under the previous
@@ -173,4 +179,4 @@ class PaginatedList extends React.Component<Props> {
 
 export const Component = PaginatedList;
 
-export default withTranslation()<PaginatedList>(PaginatedList);
+export default withTranslation()<PaginatedList>(inject("auth")(PaginatedList));

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;
+}