fix: Add Portugese, Brazil to language options (#2164)

* Add Portugese, Brazil to language options

* Upgrade date-fns package

Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/components/DocumentHistory/components/Revision.js

@@ -1,5 +1,5 @@
 // @flow
-import format from "date-fns/format";
+import { format } from "date-fns";
 import * as React from "react";
 import { NavLink } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
@@ -37,7 +37,7 @@ class RevisionListItem extends React.Component<Props> {
         </Author>
         <Meta>
           <Time dateTime={revision.createdAt} tooltipDelay={250}>
-            {format(revision.createdAt, "MMMM Do, YYYY h:mm a")}
+            {format(Date.parse(revision.createdAt), "MMMM do, yyyy h:mm a")}
           </Time>
         </Meta>
         {showMenu && (

app/components/DocumentViews.js

@@ -1,5 +1,5 @@
 // @flow
-import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
+import { formatDistanceToNow } from "date-fns";
 import { sortBy } from "lodash";
 import { observer } from "mobx-react";
 import * as React from "react";
@@ -55,7 +55,7 @@ function DocumentViews({ document, isOpen }: Props) {
                 ? t("Currently editing")
                 : t("Currently viewing")
               : t("Viewed {{ timeAgo }} ago", {
-                  timeAgo: distanceInWordsToNow(
+                  timeAgo: formatDistanceToNow(
                     view ? new Date(view.lastViewedAt) : new Date()
                   ),
                 });

app/components/LocaleTime.js

@@ -1,20 +1,21 @@
 // @flow
-import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
-import format from "date-fns/format";
+import { format, formatDistanceToNow } from "date-fns";
+import { enUS, de, fr, es, it, ko, ptBR, pt, zhCN, ru } from "date-fns/locale";
 import * as React from "react";
 import Tooltip from "components/Tooltip";
 import useUserLocale from "hooks/useUserLocale";
 
 const locales = {
-  en: require(`date-fns/locale/en`),
-  de: require(`date-fns/locale/de`),
-  es: require(`date-fns/locale/es`),
-  fr: require(`date-fns/locale/fr`),
-  it: require(`date-fns/locale/it`),
-  ko: require(`date-fns/locale/ko`),
-  pt: require(`date-fns/locale/pt`),
-  zh: require(`date-fns/locale/zh_cn`),
-  ru: require(`date-fns/locale/ru`),
+  en_US: enUS,
+  de_DE: de,
+  es_ES: es,
+  fr_FR: fr,
+  it_IT: it,
+  ko_KR: ko,
+  pt_BR: ptBR,
+  pt_PT: pt,
+  zh_CN: zhCN,
+  ru_RU: ru,
 };
 
 let callbacks = [];
@@ -64,7 +65,7 @@ function LocaleTime({
     };
   }, []);
 
-  let content = distanceInWordsToNow(dateTime, {
+  let content = formatDistanceToNow(Date.parse(dateTime), {
     addSuffix,
     locale: userLocale ? locales[userLocale] : undefined,
   });
@@ -78,7 +79,7 @@ function LocaleTime({
 
   return (
     <Tooltip
-      tooltip={format(dateTime, "MMMM Do, YYYY h:mm a")}
+      tooltip={format(Date.parse(dateTime), "MMMM do, yyyy h:mm a")}
       delay={tooltipDelay}
       placement="bottom"
     >

app/components/Time.js

@@ -1,5 +1,5 @@
 // @flow
-import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
+import { formatDistanceToNow } from "date-fns";
 import * as React from "react";
 
 const LocaleTime = React.lazy(() =>
@@ -15,7 +15,7 @@ type Props = {
 };
 
 function Time(props: Props) {
-  let content = distanceInWordsToNow(props.dateTime, {
+  let content = formatDistanceToNow(Date.parse(props.dateTime), {
     addSuffix: props.addSuffix,
   });
 

app/hooks/useUserLocale.js

@@ -8,5 +8,5 @@ export default function useUserLocale() {
     return undefined;
   }
 
-  return auth.user.language.split("_")[0];
+  return auth.user.language;
 }

app/models/Document.js

@@ -1,6 +1,5 @@
 // @flow
-import addDays from "date-fns/add_days";
-import differenceInDays from "date-fns/difference_in_days";
+import { addDays, differenceInDays } from "date-fns";
 import invariant from "invariant";
 import { action, computed, observable, set } from "mobx";
 import parseTitle from "shared/utils/parseTitle";

app/routes/authenticated.js

@@ -3,7 +3,6 @@ import * as React from "react";
 import { Switch, Redirect, type Match } from "react-router-dom";
 import Archive from "scenes/Archive";
 import Collection from "scenes/Collection";
-import KeyedDocument from "scenes/Document/KeyedDocument";
 import DocumentNew from "scenes/DocumentNew";
 import Drafts from "scenes/Drafts";
 import Error404 from "scenes/Error404";
@@ -23,7 +22,11 @@ import { matchDocumentSlug as slug } from "utils/routeHelpers";
 const SettingsRoutes = React.lazy(() =>
   import(/* webpackChunkName: "settings" */ "./settings")
 );
-
+const KeyedDocument = React.lazy(() =>
+  import(
+    /* webpackChunkName: "keyed-document" */ "scenes/Document/KeyedDocument"
+  )
+);
 const NotFound = () => <Search notFound />;
 const RedirectDocument = ({ match }: { match: Match }) => (
   <Redirect

app/scenes/Document/components/DataLoader.js

@@ -1,5 +1,5 @@
 // @flow
-import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
+import { formatDistanceToNow } from "date-fns";
 import invariant from "invariant";
 import { deburr, sortBy } from "lodash";
 import { observable } from "mobx";
@@ -94,8 +94,11 @@ class DataLoader extends React.Component<Props> {
       // search for exact internal document
       const slug = parseDocumentSlug(term);
       try {
-        const { document } = await this.props.documents.fetch(slug);
-        const time = distanceInWordsToNow(document.updatedAt, {
+        const {
+          document,
+        }: { document: Document } = await this.props.documents.fetch(slug);
+
+        const time = formatDistanceToNow(Date.parse(document.updatedAt), {
           addSuffix: true,
         });
         return [
@@ -118,7 +121,7 @@ class DataLoader extends React.Component<Props> {
 
     return sortBy(
       results.map((document) => {
-        const time = distanceInWordsToNow(document.updatedAt, {
+        const time = formatDistanceToNow(document.updatedAt, {
           addSuffix: true,
         });
         return {

app/scenes/Document/components/SharePopover.js

@@ -1,5 +1,5 @@
 // @flow
-import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
+import { formatDistanceToNow } from "date-fns";
 import invariant from "invariant";
 import { observer } from "mobx-react";
 import { GlobeIcon, PadlockIcon } from "outline-icons";
@@ -118,9 +118,12 @@ function SharePopover({ document, share, sharedParent, onSubmit }: Props) {
                 <>
                   .{" "}
                   {t("The shared link was last accessed {{ timeAgo }}.", {
-                    timeAgo: distanceInWordsToNow(share.lastAccessedAt, {
-                      addSuffix: true,
-                    }),
+                    timeAgo: formatDistanceToNow(
+                      Date.parse(share.lastAccessedAt),
+                      {
+                        addSuffix: true,
+                      }
+                    ),
                   })}
                 </>
               )}

app/scenes/UserProfile.js

@@ -1,5 +1,5 @@
 // @flow
-import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
+import { formatDistanceToNow } from "date-fns";
 import { observer } from "mobx-react";
 import { EditIcon } from "outline-icons";
 import * as React from "react";
@@ -52,7 +52,7 @@ function UserProfile(props: Props) {
             ? t("Joined")
             : t("Invited")}{" "}
           {t("{{ time }} ago.", {
-            time: distanceInWordsToNow(new Date(user.createdAt)),
+            time: formatDistanceToNow(new Date(user.createdAt)),
           })}
           {user.isAdmin && (
             <StyledBadge primary={user.isAdmin}>{t("Admin")}</StyledBadge>