User Profile (#858)

* First pass user profile

* 💚

* More collaborator tooltip improvements

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;

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);