User Profile (#858)

* First pass user profile * 💚 * More collaborator tooltip improvements
2019-01-12 19:41:45 -08:00 · 2019-01-12 19:41:45 -08:00 · 8d3dc3a92e
parent ef583314e0
commit 8d3dc3a92e
10 changed files with 229 additions and 77 deletions
--- a/app/components/Badge.js
+++ b/app/components/Badge.js
@ -0,0 +1,17 @@
+// @flow
+import styled from 'styled-components';
+
+const Badge = styled.span`
+  margin-left: 10px;
+  padding: 2px 6px 3px;
+  background-color: ${({ admin, theme }) =>
+    admin ? theme.primary : theme.smokeDark};
+  color: ${({ admin, theme }) => (admin ? theme.white : theme.text)};
+  border-radius: 2px;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+  user-select: none;
+`;
+
+export default Badge;
--- a/app/components/Collaborators.js
+++ b/app/components/Collaborators.js
@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react';
+import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import { filter } from 'lodash';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
@ -8,6 +9,7 @@ import Flex from 'shared/components/Flex';
 import Avatar from 'components/Avatar';
 import Tooltip from 'components/Tooltip';
 import Document from 'models/Document';
+import UserProfile from 'scenes/UserProfile';
 import ViewsStore from 'stores/ViewsStore';

 const MAX_DISPLAY = 6;
@ -19,31 +21,24 @@ type Props = {

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

+  handleOpenProfile = (userId: string) => {
+    this.openProfileId = userId;
+  };
+
+  handleCloseProfile = () => {
+    this.openProfileId = undefined;
+  };
+
  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`;
-    }
+    const { createdAt, updatedAt, updatedBy, collaborators } = document;

    // filter to only show views that haven't collaborated
    const collaboratorIds = collaborators.map(user => user.id);
@ -65,35 +60,67 @@ class Collaborators extends React.Component<Props> {
      <Avatars>
        {overflow > 0 && <More>+{overflow}</More>}
        {mostRecentViewers.map(({ lastViewedAt, user }) => (
-          <StyledTooltip
+          <AvatarPile
            key={user.id}
-            tooltip={`${user.name} viewed ${distanceInWordsToNow(
-              new Date(lastViewedAt)
-            )} ago`}
+            tooltip={
+              <TooltipCentered>
+                <strong>{user.name}</strong>
+                <br />
+                viewed {distanceInWordsToNow(new Date(lastViewedAt))} ago
+              </TooltipCentered>
+            }
            placement="bottom"
          >
            <Viewer>
-              <Avatar src={user.avatarUrl} />
+              <Avatar
+                src={user.avatarUrl}
+                onClick={() => this.handleOpenProfile(user.id)}
+              />
+              <UserProfile
+                user={user}
+                isOpen={this.openProfileId === user.id}
+                onRequestClose={this.handleCloseProfile}
+              />
            </Viewer>
-          </StyledTooltip>
+          </AvatarPile>
        ))}
        {collaborators.map(user => (
-          <StyledTooltip
+          <AvatarPile
            key={user.id}
-            tooltip={collaborators.length > 1 ? user.name : tooltip}
+            tooltip={
+              <TooltipCentered>
+                <strong>{user.name}</strong>
+                <br />
+                {createdAt === updatedAt ? 'published' : 'updated'}{' '}
+                {updatedBy.id === user.id &&
+                  `${distanceInWordsToNow(new Date(updatedAt))} ago`}
+              </TooltipCentered>
+            }
            placement="bottom"
          >
            <Collaborator>
-              <Avatar src={user.avatarUrl} />
+              <Avatar
+                src={user.avatarUrl}
+                onClick={() => this.handleOpenProfile(user.id)}
+              />
+              <UserProfile
+                user={user}
+                isOpen={this.openProfileId === user.id}
+                onRequestClose={this.handleCloseProfile}
+              />
            </Collaborator>
-          </StyledTooltip>
+          </AvatarPile>
        ))}
      </Avatars>
    );
  }
 }

-const StyledTooltip = styled(Tooltip)`
+const TooltipCentered = styled.div`
+  text-align: center;
+`;
+
+const AvatarPile = styled(Tooltip)`
  margin-right: -8px;

  &:first-child {
@ -128,6 +155,7 @@ const More = styled.div`
 const Avatars = styled(Flex)`
  align-items: center;
  flex-direction: row-reverse;
+  cursor: pointer;
 `;

 export default inject('views')(Collaborators);
--- a/app/components/DropdownMenu/DropdownMenu.js
+++ b/app/components/DropdownMenu/DropdownMenu.js
@ -93,7 +93,7 @@ const Menu = styled.div`
  background: ${props => props.theme.white};
  border-radius: 2px;
  padding: 0.5em 0;
-  min-width: 160px;
+  min-width: 180px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.08);
--- a/app/components/List/Item.js
+++ b/app/components/List/Item.js
@ -5,7 +5,7 @@ import Flex from 'shared/components/Flex';

 type Props = {
  image?: React.Node,
-  title: string,
+  title: React.Node,
  subtitle?: React.Node,
  actions?: React.Node,
 };
--- a/app/models/User.js
+++ b/app/models/User.js
@ -6,7 +6,6 @@ class User extends BaseModel {
  id: string;
  name: string;
  email: string;
-  username: string;
  isAdmin: boolean;
  isSuspended: boolean;
  createdAt: string;
--- a/app/scenes/Settings/components/UserListItem.js
+++ b/app/scenes/Settings/components/UserListItem.js
@ -1,9 +1,12 @@
 // @flow
 import * as React from 'react';
 import styled from 'styled-components';
-
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
 import UserMenu from 'menus/UserMenu';
 import Avatar from 'components/Avatar';
+import Badge from 'components/Badge';
+import UserProfile from 'scenes/UserProfile';
 import ListItem from 'components/List/Item';
 import Time from 'shared/components/Time';
 import User from 'models/User';
@ -13,35 +16,57 @@ type Props = {
  showMenu: boolean,
 };

-const UserListItem = ({ user, showMenu }: Props) => {
-  return (
-    <ListItem
-      title={user.name}
-      image={<Avatar src={user.avatarUrl} size={40} />}
-      subtitle={
-        <React.Fragment>
-          {user.email ? `${user.email} · ` : undefined}
-          Joined <Time dateTime={user.createdAt} /> ago
-          {user.isAdmin && <Badge admin={user.isAdmin}>Admin</Badge>}
-          {user.isSuspended && <Badge>Suspended</Badge>}
-        </React.Fragment>
-      }
-      actions={showMenu ? <UserMenu user={user} /> : undefined}
-    />
-  );
-};
+@observer
+class UserListItem extends React.Component<Props> {
+  @observable profileOpen: boolean = false;

-const Badge = styled.span`
-  margin-left: 10px;
-  padding: 2px 6px 3px;
-  background-color: ${({ admin, theme }) =>
-    admin ? theme.primary : theme.smokeDark};
-  color: ${({ admin, theme }) => (admin ? theme.white : theme.text)};
-  border-radius: 2px;
-  font-size: 11px;
-  font-weight: 500;
-  text-transform: uppercase;
-  user-select: none;
+  handleOpenProfile = () => {
+    this.profileOpen = true;
+  };
+
+  handleCloseProfile = () => {
+    this.profileOpen = false;
+  };
+
+  render() {
+    const { user, showMenu } = this.props;
+
+    return (
+      <ListItem
+        title={<Title onClick={this.handleOpenProfile}>{user.name}</Title>}
+        image={
+          <React.Fragment>
+            <Avatar
+              src={user.avatarUrl}
+              size={40}
+              onClick={this.handleOpenProfile}
+            />
+            <UserProfile
+              user={user}
+              isOpen={this.profileOpen}
+              onRequestClose={this.handleCloseProfile}
+            />
+          </React.Fragment>
+        }
+        subtitle={
+          <React.Fragment>
+            {user.email ? `${user.email} · ` : undefined}
+            Joined <Time dateTime={user.createdAt} /> ago
+            {user.isAdmin && <Badge admin={user.isAdmin}>Admin</Badge>}
+            {user.isSuspended && <Badge>Suspended</Badge>}
+          </React.Fragment>
+        }
+        actions={showMenu ? <UserMenu user={user} /> : undefined}
+      />
+    );
+  }
+}
+
+const Title = styled.span`
+  &:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
 `;

 export default UserListItem;
--- a/app/scenes/UserProfile.js
+++ b/app/scenes/UserProfile.js
@ -0,0 +1,87 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import { inject, observer } from 'mobx-react';
+import { Link } from 'react-router-dom';
+import Flex from 'shared/components/Flex';
+import HelpText from 'components/HelpText';
+import Modal from 'components/Modal';
+import Button from 'components/Button';
+import Avatar from 'components/Avatar';
+import Badge from 'components/Badge';
+import PaginatedDocumentList from 'components/PaginatedDocumentList';
+import Subheading from 'components/Subheading';
+import User from 'models/User';
+import DocumentsStore from 'stores/DocumentsStore';
+import AuthStore from 'stores/AuthStore';
+
+type Props = {
+  user: User,
+  auth: AuthStore,
+  documents: DocumentsStore,
+  onRequestClose: () => *,
+};
+
+@observer
+class UserProfile extends React.Component<Props> {
+  render() {
+    const { user, auth, documents, ...rest } = this.props;
+    if (!user) return null;
+    const isCurrentUser = auth.user && auth.user.id === user.id;
+
+    return (
+      <Modal
+        title={
+          <Flex align="center">
+            <Avatar src={user.avatarUrl} size={38} />
+            <span>&nbsp;{user.name}</span>
+          </Flex>
+        }
+        {...rest}
+      >
+        <Flex column>
+          <Meta>
+            {isCurrentUser ? 'You joined' : 'Joined'}{' '}
+            {distanceInWordsToNow(new Date(user.createdAt))} ago.
+            {user.isAdmin && (
+              <StyledBadge admin={user.isAdmin}>Admin</StyledBadge>
+            )}
+            {user.isSuspended && <Badge>Suspended</Badge>}
+            {isCurrentUser && (
+              <Edit>
+                <Button to="/settings" as={Link} small neutral>
+                  Edit Profile
+                </Button>
+              </Edit>
+            )}
+          </Meta>
+          <Subheading>Recently updated</Subheading>
+          <PaginatedDocumentList
+            documents={documents.createdByUser(user.id)}
+            fetch={documents.fetchOwned}
+            options={{ user: user.id }}
+            showCollection
+          />
+        </Flex>
+      </Modal>
+    );
+  }
+}
+
+const Edit = styled.span`
+  position: absolute;
+  top: 46px;
+  right: 0;
+`;
+
+const StyledBadge = styled(Badge)`
+  position: relative;
+  top: -2px;
+`;
+
+const Meta = styled(HelpText)`
+  margin-top: -12px;
+`;
+
+export default inject('documents', 'auth')(UserProfile);
--- a/server/api/snapshots/users.test.js.snap
+++ b/server/api/snapshots/users.test.js.snap
@ -10,7 +10,6 @@ Object {
    "isAdmin": false,
    "isSuspended": false,
    "name": "User 1",
-    "username": "user1",
  },
  "ok": true,
  "status": 200,
@ -45,7 +44,6 @@ Object {
    "isAdmin": false,
    "isSuspended": false,
    "name": "User 1",
-    "username": "user1",
  },
  "ok": true,
  "status": 200,
@ -77,15 +75,17 @@ Object {
      "avatarUrl": "http://example.com/avatar.png",
      "createdAt": "2018-01-01T00:00:00.000Z",
      "id": "fa952cff-fa64-4d42-a6ea-6955c9689046",
+      "isAdmin": true,
+      "isSuspended": false,
      "name": "Admin User",
-      "username": "admin",
    },
    Object {
      "avatarUrl": "http://example.com/avatar.png",
      "createdAt": "2018-01-01T00:00:00.000Z",
      "id": "46fde1d4-0050-428f-9f0b-0bf77f4bdf61",
+      "isAdmin": false,
+      "isSuspended": false,
      "name": "User 1",
-      "username": "user1",
    },
  ],
  "ok": true,
@ -109,7 +109,6 @@ Object {
      "isAdmin": false,
      "isSuspended": false,
      "name": "User 1",
-      "username": "user1",
    },
    Object {
      "avatarUrl": "http://example.com/avatar.png",
@ -119,7 +118,6 @@ Object {
      "isAdmin": true,
      "isSuspended": false,
      "name": "Admin User",
-      "username": "admin",
    },
  ],
  "ok": true,
@ -142,7 +140,6 @@ Object {
    "isAdmin": true,
    "isSuspended": false,
    "name": "User 1",
-    "username": "user1",
  },
  "ok": true,
  "status": 200,
@ -177,7 +174,6 @@ Object {
    "isAdmin": false,
    "isSuspended": true,
    "name": "User 1",
-    "username": "user1",
  },
  "ok": true,
  "status": 200,
@ -212,7 +208,6 @@ Object {
    "isAdmin": false,
    "isSuspended": false,
    "name": "New name",
-    "username": "user1",
  },
  "ok": true,
  "status": 200,
--- a/server/presenters/snapshots/user.test.js.snap
+++ b/server/presenters/snapshots/user.test.js.snap
@ -5,8 +5,9 @@ Object {
  "avatarUrl": "http://example.com/avatar.png",
  "createdAt": undefined,
  "id": "123",
+  "isAdmin": undefined,
+  "isSuspended": undefined,
  "name": "Test User",
-  "username": "testuser",
 }
 `;

@ -15,7 +16,8 @@ Object {
  "avatarUrl": null,
  "createdAt": undefined,
  "id": "123",
+  "isAdmin": undefined,
+  "isSuspended": undefined,
  "name": "Test User",
-  "username": "testuser",
 }
 `;
--- a/server/presenters/user.js
+++ b/server/presenters/user.js
@ -7,11 +7,11 @@ type Options = {

 type UserPresentation = {
  id: string,
-  username: string,
  name: string,
  avatarUrl: ?string,
  email?: string,
-  isAdmin?: boolean,
+  isAdmin: boolean,
+  isSuspended: boolean,
 };

 export default (
@ -22,15 +22,14 @@ export default (
  const userData = {};
  userData.id = user.id;
  userData.createdAt = user.createdAt;
-  userData.username = user.username;
  userData.name = user.name;
+  userData.isAdmin = user.isAdmin;
+  userData.isSuspended = user.isSuspended;
  userData.avatarUrl =
    user.avatarUrl || (user.slackData ? user.slackData.image_192 : null);

  if (options.includeDetails) {
    userData.email = user.email;
-    userData.isAdmin = user.isAdmin;
-    userData.isSuspended = user.isSuspended;
  }

  return userData;