c78bf3c4bf
* 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
134 lines
3.2 KiB
JavaScript
134 lines
3.2 KiB
JavaScript
// @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';
|
|
|
|
const MAX_DISPLAY = 6;
|
|
|
|
type Props = {
|
|
views: ViewsStore,
|
|
document: Document,
|
|
};
|
|
|
|
@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 inject('views')(Collaborators);
|