Document Viewers (#79)

* Recording document views

* Add 'views' to document response

* Basic displaying of document views, probably want it more sublte than this? But hey, lets get it in there

* Bigly improves. RESTful > RPC

* Display of who's viewed doc

* Add Popover, add Scrollable, move views store

* Working server tests 💁

* Document Stars (#81)

* Added: Starred documents

* UI is dumb but functionality works

* Star now displayed inline in title

* Optimistic rendering

* Documents Endpoints (#85)

* More seeds, documents.list endpoint

* Upgrade deprecated middleware

* document.viewers, specs

* Add documents.starred
Add request specs for star / unstar endpoints

* Basic /starred page

* Remove comment

* Fixed double layout

frontend/components/DocumentViews/DocumentViews.js

@@ -0,0 +1,76 @@
+// @flow
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+import Popover from 'components/Popover';
+import styled from 'styled-components';
+import DocumentViewers from './components/DocumentViewers';
+import DocumentViewersStore from './DocumentViewersStore';
+import { Flex } from 'reflexbox';
+
+const Container = styled(Flex)`
+  font-size: 13px;
+  user-select: none;
+
+  a {
+    color: #ccc;
+
+    &:hover {
+      color: #aaa;
+    }
+  }
+`;
+
+type Props = {
+  documentId: string,
+  count: number,
+};
+
+@observer class DocumentViews extends Component {
+  anchor: HTMLElement;
+  store: DocumentViewersStore;
+  props: Props;
+  state: {
+    opened: boolean,
+  };
+  state = {};
+
+  constructor(props: Props) {
+    super(props);
+    this.store = new DocumentViewersStore(props.documentId);
+  }
+
+  openPopover = () => {
+    this.setState({ opened: true });
+  };
+
+  closePopover = () => {
+    this.setState({ opened: false });
+  };
+
+  setRef = (ref: HTMLElement) => {
+    this.anchor = ref;
+  };
+
+  render() {
+    return (
+      <Container align="center">
+        <a ref={this.setRef} onClick={this.openPopover}>
+          Viewed
+          {' '}
+          {this.props.count}
+          {' '}
+          {this.props.count === 1 ? 'time' : 'times'}
+        </a>
+        {this.state.opened &&
+          <Popover anchor={this.anchor} onClose={this.closePopover}>
+            <DocumentViewers
+              onMount={this.store.fetchViewers}
+              viewers={this.store.viewers}
+            />
+          </Popover>}
+      </Container>
+    );
+  }
+}
+
+export default DocumentViews;