outline/app/components/Collaborators.js

// @flow
import * as React from 'react';
import { observer, inject } from 'mobx-react';
import { sortBy, keyBy } from 'lodash';
import { MAX_AVATAR_DISPLAY } from 'shared/constants';

import { AvatarWithPresence } from 'components/Avatar';
import Facepile from 'components/Facepile';
import Document from 'models/Document';
import ViewsStore from 'stores/ViewsStore';
import DocumentPresenceStore from 'stores/DocumentPresenceStore';

type Props = {
  views: ViewsStore,
  presence: DocumentPresenceStore,
  document: Document,
  currentUserId: string,
};

@observer
class Collaborators extends React.Component<Props> {
  componentDidMount() {
    this.props.views.fetchPage({ documentId: this.props.document.id });
  }

  render() {
    const { document, presence, views, currentUserId } = this.props;
    let documentPresence = presence.get(document.id);
    documentPresence = documentPresence
      ? Array.from(documentPresence.values())
      : [];

    const documentViews = views.inDocument(document.id);

    const presentIds = documentPresence.map(p => p.userId);
    const editingIds = documentPresence
      .filter(p => p.isEditing)
      .map(p => p.userId);

    // ensure currently present via websocket are always ordered first
    const mostRecentViewers = sortBy(
      documentViews.slice(0, MAX_AVATAR_DISPLAY),
      view => {
        return presentIds.includes(view.user.id);
      }
    );

    const viewersKeyedByUserId = keyBy(mostRecentViewers, v => v.user.id);
    const overflow = documentViews.length - mostRecentViewers.length;

    return (
      <Facepile
        users={mostRecentViewers.map(v => v.user)}
        overflow={overflow}
        renderAvatar={user => {
          const isPresent = presentIds.includes(user.id);
          const isEditing = editingIds.includes(user.id);
          const { lastViewedAt } = viewersKeyedByUserId[user.id];

          return (
            <AvatarWithPresence
              key={user.id}
              user={user}
              lastViewedAt={lastViewedAt}
              isPresent={isPresent}
              isEditing={isEditing}
              isCurrentUser={currentUserId === user.id}
            />
          );
        }}
      />
    );
  }
}

export default inject('views', 'presence')(Collaborators);