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/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);