Display document views (#849)

* Display who has viewed a document in the header

* Add overflow, display of WHEN last viewed
Cleanup old document attributes
Add firstViewedAt, lastViewedAt to API response

* Cleanup

* Added: API documentation for views endpoints

* Include views for deleted users

app/components/Actions.js

@@ -8,6 +8,7 @@ export const Action = styled(Flex)`
   align-items: center;
   padding: 0 0 0 12px;
   font-size: 15px;
+  flex-shrink: 0;
 
   a {
     color: ${props => props.theme.text};

app/components/Collaborators.js

@@ -1,64 +1,133 @@
 // @flow
 import * as React from 'react';
+import { observer, inject } from 'mobx-react';
+import { filter } from 'lodash';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import styled from 'styled-components';
 import Flex from 'shared/components/Flex';
 import Avatar from 'components/Avatar';
 import Tooltip from 'components/Tooltip';
 import Document from 'models/Document';
+import ViewsStore from 'stores/ViewsStore';
 
-type Props = { document: Document };
+const MAX_DISPLAY = 6;
 
-const Collaborators = ({ document }: Props) => {
-  const {
-    createdAt,
-    updatedAt,
-    createdBy,
-    updatedBy,
-    collaborators,
-  } = document;
-  let tooltip;
-
-  if (createdAt === updatedAt) {
-    tooltip = `${createdBy.name} published ${distanceInWordsToNow(
-      new Date(createdAt)
-    )} ago`;
-  } else {
-    tooltip = `${updatedBy.name} modified ${distanceInWordsToNow(
-      new Date(updatedAt)
-    )} ago`;
-  }
-
-  return (
-    <Avatars>
-      {collaborators.map(user => (
-        <Tooltip
-          tooltip={collaborators.length > 1 ? user.name : tooltip}
-          placement="bottom"
-          key={user.id}
-        >
-          <AvatarWrapper>
-            <Avatar src={user.avatarUrl} />
-          </AvatarWrapper>
-        </Tooltip>
-      ))}
-    </Avatars>
-  );
+type Props = {
+  views: ViewsStore,
+  document: Document,
 };
 
-const AvatarWrapper = styled.div`
-  width: 24px;
-  height: 24px;
-  margin-right: -10px;
+@observer
+class Collaborators extends React.Component<Props> {
+  componentDidMount() {
+    this.props.views.fetchPage({ documentId: this.props.document.id });
+  }
+
+  render() {
+    const { document, views } = this.props;
+    const documentViews = views.inDocument(document.id);
+    const {
+      createdAt,
+      updatedAt,
+      createdBy,
+      updatedBy,
+      collaborators,
+    } = document;
+    let tooltip;
+
+    if (createdAt === updatedAt) {
+      tooltip = `${createdBy.name} published ${distanceInWordsToNow(
+        new Date(createdAt)
+      )} ago`;
+    } else {
+      tooltip = `${updatedBy.name} updated ${distanceInWordsToNow(
+        new Date(updatedAt)
+      )} ago`;
+    }
+
+    // filter to only show views that haven't collaborated
+    const collaboratorIds = collaborators.map(user => user.id);
+    const viewersNotCollaborators = filter(
+      documentViews,
+      view => !collaboratorIds.includes(view.user.id)
+    );
+
+    // only show the most recent viewers, the rest can overflow
+    const mostRecentViewers = viewersNotCollaborators.slice(
+      0,
+      MAX_DISPLAY - collaborators.length
+    );
+
+    // if there are too many to display then add a (+X) to the UI
+    const overflow = viewersNotCollaborators.length - mostRecentViewers.length;
+
+    return (
+      <Avatars>
+        {overflow > 0 && <More>+{overflow}</More>}
+        {mostRecentViewers.map(({ lastViewedAt, user }) => (
+          <StyledTooltip
+            key={user.id}
+            tooltip={`${user.name} viewed ${distanceInWordsToNow(
+              new Date(lastViewedAt)
+            )} ago`}
+            placement="bottom"
+          >
+            <Viewer>
+              <Avatar src={user.avatarUrl} />
+            </Viewer>
+          </StyledTooltip>
+        ))}
+        {collaborators.map(user => (
+          <StyledTooltip
+            key={user.id}
+            tooltip={collaborators.length > 1 ? user.name : tooltip}
+            placement="bottom"
+          >
+            <Collaborator>
+              <Avatar src={user.avatarUrl} />
+            </Collaborator>
+          </StyledTooltip>
+        ))}
+      </Avatars>
+    );
+  }
+}
+
+const StyledTooltip = styled(Tooltip)`
+  margin-right: -8px;
 
   &:first-child {
     margin-right: 0;
   }
 `;
 
+const Viewer = styled.div`
+  width: 24px;
+  height: 24px;
+  opacity: 0.75;
+`;
+
+const Collaborator = styled.div`
+  width: 24px;
+  height: 24px;
+`;
+
+const More = styled.div`
+  min-width: 30px;
+  height: 24px;
+  border-radius: 12px;
+  background: ${props => props.theme.slate};
+  color: ${props => props.theme.text};
+  border: 2px solid #fff;
+  text-align: center;
+  line-height: 20px;
+  font-size: 11px;
+  font-weight: 600;
+`;
+
 const Avatars = styled(Flex)`
   align-items: center;
   flex-direction: row-reverse;
 `;
 
-export default Collaborators;
+export default inject('views')(Collaborators);

app/models/Document.js

@@ -1,5 +1,5 @@
 // @flow
-import { action, set, computed, observable } from 'mobx';
+import { action, set, computed } from 'mobx';
 import invariant from 'invariant';
 
 import { client } from 'utils/ApiClient';
@@ -22,7 +22,6 @@ export default class Document extends BaseModel {
   collaborators: User[];
   collection: Collection;
   collectionId: string;
-  firstViewedAt: ?string;
   lastViewedAt: ?string;
   createdAt: string;
   createdBy: User;
@@ -40,9 +39,7 @@ export default class Document extends BaseModel {
   url: string;
   urlId: string;
   shareUrl: ?string;
-  views: number;
   revision: number;
-  @observable embedsDisabled: ?boolean;
 
   constructor(data?: Object = {}, store: *) {
     super(data, store);
@@ -144,16 +141,6 @@ export default class Document extends BaseModel {
     }
   };
 
-  @action
-  enableEmbeds = () => {
-    this.embedsDisabled = false;
-  };
-
-  @action
-  disableEmbeds = () => {
-    this.embedsDisabled = true;
-  };
-
   @action
   star = async () => {
     this.starred = true;
@@ -178,8 +165,7 @@ export default class Document extends BaseModel {
 
   @action
   view = async () => {
-    this.views++;
-    await client.post('/views.create', { id: this.id });
+    await client.post('/views.create', { documentId: this.id });
   };
 
   @action

app/models/View.js

@@ -0,0 +1,14 @@
+// @flow
+import BaseModel from './BaseModel';
+import User from './User';
+
+class View extends BaseModel {
+  id: string;
+  documentId: string;
+  firstViewedAt: string;
+  lastViewedAt: string;
+  count: number;
+  user: User;
+}
+
+export default View;

app/scenes/Document/Document.js

@@ -310,8 +310,7 @@ class DocumentScene extends React.Component<Props> {
       );
     }
 
-    const embedsDisabled =
-      document.embedsDisabled || (team && !team.documentEmbeds);
+    const embedsDisabled = team && !team.documentEmbeds;
 
     return (
       <ErrorBoundary>

app/stores/DocumentsStore.js

@@ -13,7 +13,6 @@ import type { FetchOptions, PaginationParams, SearchResult } from 'types';
 
 export default class DocumentsStore extends BaseStore<Document> {
   @observable recentlyViewedIds: string[] = [];
-  @observable recentlyUpdatedIds: string[] = [];
 
   constructor(rootStore: RootStore) {
     super(rootStore, Document);
@@ -30,11 +29,7 @@ export default class DocumentsStore extends BaseStore<Document> {
 
   @computed
   get recentlyUpdated(): * {
-    return orderBy(
-      compact(this.recentlyUpdatedIds.map(id => this.data.get(id))),
-      'updatedAt',
-      'desc'
-    );
+    return orderBy(Array.from(this.data.values()), 'updatedAt', 'desc');
   }
 
   createdByUser(userId: string): * {
@@ -139,15 +134,7 @@ export default class DocumentsStore extends BaseStore<Document> {
 
   @action
   fetchRecentlyUpdated = async (options: ?PaginationParams): Promise<*> => {
-    const data = await this.fetchNamedPage('list', options);
-
-    runInAction('DocumentsStore#fetchRecentlyUpdated', () => {
-      // $FlowFixMe
-      this.recentlyUpdatedIds.replace(
-        uniq(this.recentlyUpdatedIds.concat(map(data, 'id')))
-      );
-    });
-    return data;
+    return this.fetchNamedPage('list', options);
   };
 
   @action
@@ -308,7 +295,6 @@ export default class DocumentsStore extends BaseStore<Document> {
 
     runInAction(() => {
       this.recentlyViewedIds = without(this.recentlyViewedIds, document.id);
-      this.recentlyUpdatedIds = without(this.recentlyUpdatedIds, document.id);
     });
 
     const collection = this.getCollectionForDocument(document);

app/stores/RootStore.js

@@ -9,6 +9,7 @@ import RevisionsStore from './RevisionsStore';
 import SharesStore from './SharesStore';
 import UiStore from './UiStore';
 import UsersStore from './UsersStore';
+import ViewsStore from './ViewsStore';
 
 export default class RootStore {
   apiKeys: ApiKeysStore;
@@ -21,6 +22,7 @@ export default class RootStore {
   shares: SharesStore;
   ui: UiStore;
   users: UsersStore;
+  views: ViewsStore;
 
   constructor() {
     this.apiKeys = new ApiKeysStore(this);
@@ -33,6 +35,7 @@ export default class RootStore {
     this.shares = new SharesStore(this);
     this.ui = new UiStore();
     this.users = new UsersStore(this);
+    this.views = new ViewsStore(this);
   }
 
   logout() {
@@ -44,5 +47,6 @@ export default class RootStore {
     this.revisions.clear();
     this.shares.clear();
     this.users.clear();
+    this.views.clear();
   }
 }

app/stores/ViewsStore.js

@@ -0,0 +1,21 @@
+// @flow
+import { filter, orderBy } from 'lodash';
+import BaseStore from './BaseStore';
+import RootStore from './RootStore';
+import View from 'models/View';
+
+export default class ViewsStore extends BaseStore<View> {
+  actions = ['list'];
+
+  constructor(rootStore: RootStore) {
+    super(rootStore, View);
+  }
+
+  inDocument(documentId: string): View[] {
+    return orderBy(
+      filter(this.orderedData, view => view.documentId !== documentId),
+      'lastViewedAt',
+      'desc'
+    );
+  }
+}