diff --git a/app/components/Avatar/AvatarWithPresence.js b/app/components/Avatar/AvatarWithPresence.js index 39d2e05b5..300da5ecc 100644 --- a/app/components/Avatar/AvatarWithPresence.js +++ b/app/components/Avatar/AvatarWithPresence.js @@ -1,5 +1,4 @@ // @flow -import distanceInWordsToNow from "date-fns/distance_in_words_to_now"; import { observable } from "mobx"; import { observer } from "mobx-react"; import { EditIcon } from "outline-icons"; @@ -16,7 +15,6 @@ type Props = { isPresent: boolean, isEditing: boolean, isCurrentUser: boolean, - lastViewedAt: string, profileOnClick: boolean, t: TFunction, }; @@ -34,22 +32,13 @@ class AvatarWithPresence extends React.Component { }; render() { - const { - user, - lastViewedAt, - isPresent, - isEditing, - isCurrentUser, - t, - } = this.props; + const { user, isPresent, isEditing, isCurrentUser, t } = this.props; const action = isPresent ? isEditing ? t("currently editing") : t("currently viewing") - : t("viewed {{ timeAgo }} ago", { - timeAgo: distanceInWordsToNow(new Date(lastViewedAt)), - }); + : t("previously edited"); return ( <> @@ -57,8 +46,12 @@ class AvatarWithPresence extends React.Component { tooltip={ {user.name} {isCurrentUser && `(${t("You")})`} -
- {action} + {action && ( + <> +
+ {action} + + )}
} placement="bottom" diff --git a/app/components/Collaborators.js b/app/components/Collaborators.js index 7841df80e..384e20f81 100644 --- a/app/components/Collaborators.js +++ b/app/components/Collaborators.js @@ -1,5 +1,5 @@ // @flow -import { filter } from "lodash"; +import { sortBy, filter, uniq } from "lodash"; import { observer } from "mobx-react"; import * as React from "react"; import { useTranslation } from "react-i18next"; @@ -35,8 +35,18 @@ function Collaborators(props: Props) { .map((p) => p.userId); // ensure currently present via websocket are always ordered first - const presentUsers = filter(users.orderedData, (user) => - presentIds.includes(user.id) + const collaborators = React.useMemo( + () => + sortBy( + filter( + users.orderedData, + (user) => + presentIds.includes(user.id) || + document.collaboratorIds.includes(user.id) + ), + (user) => presentIds.includes(user.id) + ), + [document.collaboratorIds, users.orderedData, presentIds] ); // load any users we don't know about @@ -45,12 +55,12 @@ function Collaborators(props: Props) { return; } - presentIds.forEach((userId) => { + uniq([...document.collaboratorIds, ...presentIds]).forEach((userId) => { if (!users.get(userId)) { return users.fetch(userId); } }); - }, [document, users, presentIds]); + }, [document, users, presentIds, document.collaboratorIds]); const popover = usePopoverState({ gutter: 0, @@ -61,9 +71,9 @@ function Collaborators(props: Props) { <> {(props) => ( - + { const isPresent = presentIds.includes(user.id); const isEditing = editingIds.includes(user.id); diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json index 1f95743b6..c8d40474a 100644 --- a/shared/i18n/locales/en_US/translation.json +++ b/shared/i18n/locales/en_US/translation.json @@ -1,7 +1,7 @@ { "currently editing": "currently editing", "currently viewing": "currently viewing", - "viewed {{ timeAgo }} ago": "viewed {{ timeAgo }} ago", + "previously edited": "previously edited", "You": "You", "Trash": "Trash", "Archive": "Archive",