feat: Document presence indicator (#1114)

* Update websockets to allow joining document-based rooms

* dynamic websocket joining

* emit user.join/leave events when entering and exiting document rooms

* presence storage

* feat: frontend presence store

* lint

* UI updates

* First pass editing state

* refactoring

* Timeout per user/doc
lint

* Document data loading refactor to keep Socket mounted

* restore: Mark as viewed functionality
Add display of 'you' to collaborators

* fix: Socket/document remount when document slug changes due to title change

* Revert unneccessary package update

* Move editing ping interval to a shared constant

* fix: Flash of sidebar when loading page directly on editing mode

* separate document and revision loading

* add comments for socket events

* fix: Socket events getting bound multiple times on reconnect

* fix: Clear client side presence state on disconnect

* fix: Don't ignore server side error
Improved documentation

* More comments / why comments

* rename Socket -> SocketPresence

* fix: Handle redis is down
remove unneccessary join

* fix: PR feedback

app/scenes/Document/components/Container.js

@@ -0,0 +1,10 @@
+// @flow
+import styled from 'styled-components';
+import Flex from 'shared/components/Flex';
+
+const Container = styled(Flex)`
+  position: relative;
+  margin-top: ${props => (props.isShare ? '50px' : '0')};
+`;
+
+export default Container;

app/scenes/Document/components/DataLoader.js

@@ -0,0 +1,172 @@
+// @flow
+import * as React from 'react';
+import { withRouter } from 'react-router-dom';
+import type { Location, RouterHistory } from 'react-router-dom';
+import { observable } from 'mobx';
+import { observer, inject } from 'mobx-react';
+import { matchDocumentEdit, updateDocumentUrl } from 'utils/routeHelpers';
+import DocumentComponent from './Document';
+import Revision from 'models/Revision';
+import Document from 'models/Document';
+import SocketPresence from './SocketPresence';
+import Loading from './Loading';
+import HideSidebar from './HideSidebar';
+import Error404 from 'scenes/Error404';
+import ErrorOffline from 'scenes/ErrorOffline';
+import DocumentsStore from 'stores/DocumentsStore';
+import PoliciesStore from 'stores/PoliciesStore';
+import RevisionsStore from 'stores/RevisionsStore';
+import UiStore from 'stores/UiStore';
+
+type Props = {|
+  match: Object,
+  location: Location,
+  documents: DocumentsStore,
+  policies: PoliciesStore,
+  revisions: RevisionsStore,
+  ui: UiStore,
+  history: RouterHistory,
+|};
+
+@observer
+class DataLoader extends React.Component<Props> {
+  @observable document: ?Document;
+  @observable revision: ?Revision;
+  @observable error: ?Error;
+
+  componentDidMount() {
+    const { documents, match } = this.props;
+    this.document = documents.getByUrl(match.params.documentSlug);
+    this.loadDocument();
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    // If we have the document in the store, but not it's policy then we need to
+    // reload from the server otherwise the UI will not know which authorizations
+    // the user has
+    if (this.document) {
+      const policy = this.props.policies.get(this.document.id);
+
+      if (!policy) {
+        this.loadDocument();
+      }
+    }
+
+    // Also need to load the revision if it changes
+    if (
+      prevProps.match.params.revisionId !== this.props.match.params.revisionId
+    ) {
+      this.loadRevision();
+    }
+  }
+
+  goToDocumentCanonical = () => {
+    if (this.document) {
+      this.props.history.push(this.document.url);
+    }
+  };
+
+  get isEditing() {
+    return this.props.match.path === matchDocumentEdit;
+  }
+
+  onSearchLink = async (term: string) => {
+    const results = await this.props.documents.search(term);
+
+    return results.map((result, index) => ({
+      title: result.document.title,
+      url: result.document.url,
+    }));
+  };
+
+  loadRevision = async () => {
+    const { documentSlug, revisionId } = this.props.match.params;
+
+    this.revision = await this.props.revisions.fetch(documentSlug, {
+      revisionId,
+    });
+  };
+
+  loadDocument = async () => {
+    const { shareId, documentSlug, revisionId } = this.props.match.params;
+
+    try {
+      this.document = await this.props.documents.fetch(documentSlug, {
+        shareId,
+      });
+
+      if (revisionId) {
+        await this.loadRevision();
+      } else {
+        this.revision = undefined;
+      }
+    } catch (err) {
+      this.error = err;
+      return;
+    }
+
+    const document = this.document;
+
+    if (document) {
+      this.props.ui.setActiveDocument(document);
+
+      if (document.isArchived && this.isEditing) {
+        return this.goToDocumentCanonical();
+      }
+
+      const isMove = this.props.location.pathname.match(/move$/);
+      const canRedirect = !revisionId && !isMove && !shareId;
+      if (canRedirect) {
+        const canonicalUrl = updateDocumentUrl(
+          this.props.match.url,
+          document.url
+        );
+        if (this.props.location.pathname !== canonicalUrl) {
+          this.props.history.replace(canonicalUrl);
+        }
+      }
+    }
+  };
+
+  render() {
+    const { location, policies, ui } = this.props;
+
+    if (this.error) {
+      return navigator.onLine ? <Error404 /> : <ErrorOffline />;
+    }
+
+    const document = this.document;
+    const revision = this.revision;
+
+    if (!document) {
+      return (
+        <React.Fragment>
+          <Loading location={location} />
+          {this.isEditing && <HideSidebar ui={ui} />}
+        </React.Fragment>
+      );
+    }
+
+    const abilities = policies.abilities(document.id);
+    const key = this.isEditing ? 'editing' : 'read-only';
+
+    return (
+      <SocketPresence documentId={document.id} isEditing={this.isEditing}>
+        {this.isEditing && <HideSidebar ui={ui} />}
+        <DocumentComponent
+          key={key}
+          document={document}
+          revision={revision}
+          abilities={abilities}
+          location={location}
+          readOnly={!this.isEditing}
+          onSearchLink={this.onSearchLink}
+        />
+      </SocketPresence>
+    );
+  }
+}
+
+export default withRouter(
+  inject('ui', 'auth', 'documents', 'revisions', 'policies')(DataLoader)
+);

app/scenes/Document/components/Document.js

@@ -0,0 +1,356 @@
+// @flow
+import * as React from 'react';
+import { debounce } from 'lodash';
+import styled from 'styled-components';
+import breakpoint from 'styled-components-breakpoint';
+import { observable } from 'mobx';
+import { observer, inject } from 'mobx-react';
+import { Prompt, Route, withRouter } from 'react-router-dom';
+import type { Location, RouterHistory } from 'react-router-dom';
+import keydown from 'react-keydown';
+import Flex from 'shared/components/Flex';
+import {
+  collectionUrl,
+  documentMoveUrl,
+  documentHistoryUrl,
+  documentEditUrl,
+} from 'utils/routeHelpers';
+import { emojiToUrl } from 'utils/emoji';
+
+import Header from './Header';
+import DocumentMove from './DocumentMove';
+import Branding from './Branding';
+import KeyboardShortcuts from './KeyboardShortcuts';
+import References from './References';
+import Loading from './Loading';
+import Container from './Container';
+import MarkAsViewed from './MarkAsViewed';
+import ErrorBoundary from 'components/ErrorBoundary';
+import LoadingIndicator from 'components/LoadingIndicator';
+import PageTitle from 'components/PageTitle';
+import Notice from 'shared/components/Notice';
+import Time from 'shared/components/Time';
+
+import UiStore from 'stores/UiStore';
+import AuthStore from 'stores/AuthStore';
+import Document from 'models/Document';
+import Revision from 'models/Revision';
+
+import schema from '../schema';
+
+let EditorImport;
+const AUTOSAVE_DELAY = 3000;
+const IS_DIRTY_DELAY = 500;
+const DISCARD_CHANGES = `
+You have unsaved changes.
+Are you sure you want to discard them?
+`;
+const UPLOADING_WARNING = `
+Images are still uploading.
+Are you sure you want to discard them?
+`;
+
+type Props = {
+  match: Object,
+  history: RouterHistory,
+  location: Location,
+  abilities: Object,
+  document: Document,
+  revision: Revision,
+  readOnly: boolean,
+  onSearchLink: (term: string) => mixed,
+  auth: AuthStore,
+  ui: UiStore,
+};
+
+@observer
+class DocumentScene extends React.Component<Props> {
+  getEditorText: () => string;
+
+  @observable editorComponent = EditorImport;
+  @observable isUploading: boolean = false;
+  @observable isSaving: boolean = false;
+  @observable isPublishing: boolean = false;
+  @observable isDirty: boolean = false;
+  @observable isEmpty: boolean = true;
+  @observable moveModalOpen: boolean = false;
+
+  constructor(props) {
+    super();
+    this.loadEditor();
+  }
+
+  @keydown('m')
+  goToMove(ev) {
+    ev.preventDefault();
+    const { document, abilities } = this.props;
+
+    if (abilities.update) {
+      this.props.history.push(documentMoveUrl(document));
+    }
+  }
+
+  @keydown('e')
+  goToEdit(ev) {
+    ev.preventDefault();
+    const { document, abilities } = this.props;
+
+    if (abilities.update) {
+      this.props.history.push(documentEditUrl(document));
+    }
+  }
+
+  @keydown('esc')
+  goBack(ev) {
+    if (this.props.readOnly) return;
+
+    ev.preventDefault();
+    this.props.history.goBack();
+  }
+
+  @keydown('h')
+  goToHistory(ev) {
+    ev.preventDefault();
+    const { document, revision } = this.props;
+
+    if (revision) {
+      this.props.history.push(document.url);
+    } else {
+      this.props.history.push(documentHistoryUrl(document));
+    }
+  }
+
+  @keydown('meta+shift+p')
+  onPublish(ev) {
+    ev.preventDefault();
+    const { document } = this.props;
+    if (document.publishedAt) return;
+    this.onSave({ publish: true, done: true });
+  }
+
+  loadEditor = async () => {
+    if (this.editorComponent) return;
+
+    const Imported = await import('./Editor');
+    EditorImport = Imported.default;
+    this.editorComponent = EditorImport;
+  };
+
+  handleCloseMoveModal = () => (this.moveModalOpen = false);
+  handleOpenMoveModal = () => (this.moveModalOpen = true);
+
+  onSave = async (
+    options: { done?: boolean, publish?: boolean, autosave?: boolean } = {}
+  ) => {
+    const { document } = this.props;
+
+    // prevent saves when we are already saving
+    if (document.isSaving) return;
+
+    // get the latest version of the editor text value
+    const text = this.getEditorText ? this.getEditorText() : document.text;
+
+    // prevent save before anything has been written (single hash is empty doc)
+    if (text.trim() === '#') return;
+
+    // prevent autosave if nothing has changed
+    if (options.autosave && document.text.trim() === text.trim()) return;
+
+    document.text = text;
+
+    let isNew = !document.id;
+    this.isSaving = true;
+    this.isPublishing = !!options.publish;
+    const savedDocument = await document.save(options);
+    this.isDirty = false;
+    this.isSaving = false;
+    this.isPublishing = false;
+
+    if (options.done) {
+      this.props.history.push(savedDocument.url);
+      this.props.ui.setActiveDocument(savedDocument);
+    } else if (isNew) {
+      this.props.history.push(documentEditUrl(savedDocument));
+      this.props.ui.setActiveDocument(savedDocument);
+    }
+  };
+
+  autosave = debounce(() => {
+    this.onSave({ done: false, autosave: true });
+  }, AUTOSAVE_DELAY);
+
+  updateIsDirty = debounce(() => {
+    const { document } = this.props;
+    const editorText = this.getEditorText().trim();
+
+    // a single hash is a doc with just an empty title
+    this.isEmpty = editorText === '#';
+    this.isDirty = !!document && editorText !== document.text.trim();
+  }, IS_DIRTY_DELAY);
+
+  onImageUploadStart = () => {
+    this.isUploading = true;
+  };
+
+  onImageUploadStop = () => {
+    this.isUploading = false;
+  };
+
+  onChange = getEditorText => {
+    this.getEditorText = getEditorText;
+    this.updateIsDirty();
+    this.autosave();
+  };
+
+  goBack = () => {
+    let url;
+    if (this.props.document.url) {
+      url = this.props.document.url;
+    } else {
+      url = collectionUrl(this.props.match.params.id);
+    }
+    this.props.history.push(url);
+  };
+
+  render() {
+    const { document, revision, readOnly, location, auth, match } = this.props;
+    const team = auth.team;
+    const Editor = this.editorComponent;
+    const isShare = match.params.shareId;
+
+    if (!Editor) {
+      return <Loading location={location} />;
+    }
+
+    const embedsDisabled = team && !team.documentEmbeds;
+
+    return (
+      <ErrorBoundary>
+        <Container
+          key={revision ? revision.id : document.id}
+          isShare={isShare}
+          column
+          auto
+        >
+          <Route
+            path={`${match.url}/move`}
+            component={() => (
+              <DocumentMove document={document} onRequestClose={this.goBack} />
+            )}
+          />
+          <PageTitle
+            title={document.title.replace(document.emoji, '') || 'Untitled'}
+            favicon={document.emoji ? emojiToUrl(document.emoji) : undefined}
+          />
+          {(this.isUploading || this.isSaving) && <LoadingIndicator />}
+
+          <Container justify="center" column auto>
+            {!readOnly && (
+              <React.Fragment>
+                <Prompt
+                  when={this.isDirty && !this.isUploading}
+                  message={DISCARD_CHANGES}
+                />
+                <Prompt
+                  when={this.isUploading && !this.isDirty}
+                  message={UPLOADING_WARNING}
+                />
+              </React.Fragment>
+            )}
+            {!isShare && (
+              <Header
+                document={document}
+                isRevision={!!revision}
+                isDraft={document.isDraft}
+                isEditing={!readOnly}
+                isSaving={this.isSaving}
+                isPublishing={this.isPublishing}
+                publishingIsDisabled={
+                  document.isSaving || this.isPublishing || this.isEmpty
+                }
+                savingIsDisabled={document.isSaving || this.isEmpty}
+                goBack={this.goBack}
+                onSave={this.onSave}
+              />
+            )}
+            <MaxWidth archived={document.isArchived} column auto>
+              {document.archivedAt &&
+                !document.deletedAt && (
+                  <Notice muted>
+                    Archived by {document.updatedBy.name}{' '}
+                    <Time dateTime={document.archivedAt} /> ago
+                  </Notice>
+                )}
+              {document.deletedAt && (
+                <Notice muted>
+                  Deleted by {document.updatedBy.name}{' '}
+                  <Time dateTime={document.deletedAt} /> ago
+                  {document.permanentlyDeletedAt && (
+                    <React.Fragment>
+                      <br />
+                      This document will be permanently deleted in{' '}
+                      <Time dateTime={document.permanentlyDeletedAt} /> unless
+                      restored.
+                    </React.Fragment>
+                  )}
+                </Notice>
+              )}
+              <Editor
+                id={document.id}
+                key={embedsDisabled ? 'embeds-disabled' : 'embeds-enabled'}
+                defaultValue={revision ? revision.text : document.text}
+                pretitle={document.emoji}
+                disableEmbeds={embedsDisabled}
+                onImageUploadStart={this.onImageUploadStart}
+                onImageUploadStop={this.onImageUploadStop}
+                onSearchLink={this.props.onSearchLink}
+                onChange={this.onChange}
+                onSave={this.onSave}
+                onPublish={this.onPublish}
+                onCancel={this.goBack}
+                readOnly={readOnly || document.isArchived}
+                toc={!revision}
+                ui={this.props.ui}
+                schema={schema}
+              />
+              {readOnly &&
+                !isShare &&
+                !revision && (
+                  <React.Fragment>
+                    <MarkAsViewed document={document} />
+                    <ReferencesWrapper isOnlyTitle={document.isOnlyTitle}>
+                      <References document={document} />
+                    </ReferencesWrapper>
+                  </React.Fragment>
+                )}
+            </MaxWidth>
+          </Container>
+        </Container>
+        {isShare ? <Branding /> : <KeyboardShortcuts />}
+      </ErrorBoundary>
+    );
+  }
+}
+
+const ReferencesWrapper = styled('div')`
+  margin-top: ${props => (props.isOnlyTitle ? -45 : 16)}px;
+`;
+
+const MaxWidth = styled(Flex)`
+  ${props =>
+    props.archived && `* { color: ${props.theme.textSecondary} !important; } `};
+  padding: 0 16px;
+  max-width: 100vw;
+  width: 100%;
+
+  ${breakpoint('tablet')`	
+    padding: 0 24px;
+    margin: 4px auto 12px;
+    max-width: 46em;
+    box-sizing: content-box;
+  `};
+`;
+
+export default withRouter(
+  inject('ui', 'auth', 'documents', 'policies', 'revisions')(DocumentScene)
+);

app/scenes/Document/components/DocumentMove.js

@@ -21,13 +21,13 @@ import CollectionsStore, { type DocumentPath } from 'stores/CollectionsStore';
 
 const MAX_RESULTS = 8;
 
-type Props = {
+type Props = {|
   document: Document,
   documents: DocumentsStore,
   collections: CollectionsStore,
   ui: UiStore,
   onRequestClose: () => void,
-};
+|};
 
 @observer
 class DocumentMove extends React.Component<Props> {

app/scenes/Document/components/Editor.js

@@ -4,10 +4,10 @@ import Editor from 'components/Editor';
 import ClickablePadding from 'components/ClickablePadding';
 import plugins from './plugins';
 
-type Props = {
+type Props = {|
   defaultValue?: string,
   readOnly?: boolean,
-};
+|};
 
 class DocumentEditor extends React.Component<Props> {
   editor: ?Editor;

app/scenes/Document/components/Header.js

@@ -143,13 +143,16 @@ class Header extends React.Component<Props> {
           </Title>
         )}
         <Wrapper align="center" justify="flex-end">
-          {!isDraft && !isEditing && <Collaborators document={document} />}
           {isSaving &&
             !isPublishing && (
               <Action>
                 <Status>Saving…</Status>
               </Action>
             )}
+          <Collaborators
+            document={document}
+            currentUserId={auth.user ? auth.user.id : undefined}
+          />
           {!isDraft &&
             !isEditing &&
             canShareDocuments && (

app/scenes/Document/components/HideSidebar.js

@@ -0,0 +1,24 @@
+// @flow
+import * as React from 'react';
+import UiStore from 'stores/UiStore';
+
+type Props = {
+  ui: UiStore,
+  children?: React.Node,
+};
+
+class HideSidebar extends React.Component<Props> {
+  componentDidMount() {
+    this.props.ui.enableEditMode();
+  }
+
+  componentWillUnmount() {
+    this.props.ui.disableEditMode();
+  }
+
+  render() {
+    return this.props.children || null;
+  }
+}
+
+export default HideSidebar;

app/scenes/Document/components/Loading.js

@@ -0,0 +1,22 @@
+// @flow
+import * as React from 'react';
+import type { Location } from 'react-router-dom';
+import Container from './Container';
+import LoadingPlaceholder from 'components/LoadingPlaceholder';
+import CenteredContent from 'components/CenteredContent';
+import PageTitle from 'components/PageTitle';
+
+type Props = {|
+  location: Location,
+|};
+
+export default function Loading({ location }: Props) {
+  return (
+    <Container column auto>
+      <PageTitle title={location.state ? location.state.title : 'Untitled'} />
+      <CenteredContent>
+        <LoadingPlaceholder />
+      </CenteredContent>
+    </Container>
+  );
+}

app/scenes/Document/components/LoadingPlaceholder.js

@@ -12,10 +12,10 @@ const randomValues = Array.from(
   () => `${randomInteger(85, 100)}%`
 );
 
-const LoadingPlaceholder = (props: Object) => {
+const LoadingPlaceholder = () => {
   return (
     <Wrapper>
-      <Flex column auto {...props}>
+      <Flex column auto>
         <Mask style={{ width: randomValues[0] }} header />
         <Mask style={{ width: randomValues[1] }} />
         <Mask style={{ width: randomValues[2] }} />

app/scenes/Document/components/MarkAsViewed.js

@@ -0,0 +1,34 @@
+// @flow
+import * as React from 'react';
+import Document from 'models/Document';
+
+const MARK_AS_VIEWED_AFTER = 3 * 1000;
+
+type Props = {|
+  document: Document,
+  children?: React.Node,
+|};
+
+class MarkAsViewed extends React.Component<Props> {
+  viewTimeout: TimeoutID;
+
+  componentDidMount() {
+    const { document } = this.props;
+
+    this.viewTimeout = setTimeout(() => {
+      if (document.publishedAt) {
+        document.view();
+      }
+    }, MARK_AS_VIEWED_AFTER);
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.viewTimeout);
+  }
+
+  render() {
+    return this.props.children || null;
+  }
+}
+
+export default MarkAsViewed;

app/scenes/Document/components/SocketPresence.js

@@ -0,0 +1,77 @@
+// @flow
+import * as React from 'react';
+import { SocketContext } from 'components/SocketProvider';
+import { USER_PRESENCE_INTERVAL } from 'shared/constants';
+
+type Props = {
+  children?: React.Node,
+  documentId: string,
+  isEditing: boolean,
+};
+
+export default class SocketPresence extends React.Component<Props> {
+  static contextType = SocketContext;
+  previousContext: any;
+  editingInterval: IntervalID;
+
+  componentDidMount() {
+    this.editingInterval = setInterval(() => {
+      if (this.props.isEditing) {
+        this.emitPresence();
+      }
+    }, USER_PRESENCE_INTERVAL);
+    this.setupOnce();
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    this.setupOnce();
+
+    if (prevProps.isEditing !== this.props.isEditing) {
+      this.emitPresence();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.context) {
+      this.context.emit('leave', { documentId: this.props.documentId });
+      this.context.off('authenticated', this.emitJoin);
+    }
+
+    clearInterval(this.editingInterval);
+  }
+
+  setupOnce = () => {
+    if (this.context && !this.previousContext) {
+      this.previousContext = this.context;
+
+      if (this.context.authenticated) {
+        this.emitJoin();
+      }
+      this.context.on('authenticated', () => {
+        this.emitJoin();
+      });
+    }
+  };
+
+  emitJoin = () => {
+    if (!this.context) return;
+
+    this.context.emit('join', {
+      documentId: this.props.documentId,
+      isEditing: this.props.isEditing,
+    });
+  };
+
+  emitPresence = () => {
+    if (!this.context) return;
+
+    this.context.emit('presence', {
+      documentId: this.props.documentId,
+      isEditing: this.props.isEditing,
+    });
+  };
+
+  render() {
+    return this.props.children || null;
+  }
+}