Fixes #687

Tidied people list, now displaying joined at date

app/scenes/Settings/People.js

@@ -32,9 +32,8 @@ class People extends React.Component<Props> {
         <PageTitle title="People" />
         <h1>People</h1>
         <HelpText>
-          Everyone that has signed in to your Outline appears here. It's
-          possible that there are other people who have access but haven't
-          signed in yet.
+          Everyone that has signed in to your Outline appear here. It’s possible
+          that there are other people who have access but haven’t signed in yet.
         </HelpText>
 
         <List>
@@ -42,7 +41,7 @@ class People extends React.Component<Props> {
             <UserListItem
               key={user.id}
               user={user}
-              isCurrentUser={currentUser.id === user.id}
+              showMenu={!!currentUser.isAdmin && currentUser.id !== user.id}
             />
           ))}
         </List>

app/scenes/Settings/components/UserListItem.js

@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import styled from 'styled-components';
 
 import UserMenu from 'menus/UserMenu';
@@ -9,10 +10,10 @@ import type { User } from '../../../types';
 
 type Props = {
   user: User,
-  isCurrentUser: boolean,
+  showMenu: boolean,
 };
 
-const UserListItem = ({ user, isCurrentUser }: Props) => {
+const UserListItem = ({ user, showMenu }: Props) => {
   return (
     <ListItem
       key={user.id}
@@ -20,12 +21,13 @@ const UserListItem = ({ user, isCurrentUser }: Props) => {
       image={<Avatar src={user.avatarUrl} size={40} />}
       subtitle={
         <React.Fragment>
-          {user.username ? user.username : user.email}
+          {user.email ? `${user.email} · ` : undefined}
+          {`Joined ${distanceInWordsToNow(user.createdAt)} ago`}
           {user.isAdmin && <Badge admin={user.isAdmin}>Admin</Badge>}
           {user.isSuspended && <Badge>Suspended</Badge>}
         </React.Fragment>
       }
-      actions={isCurrentUser ? undefined : <UserMenu user={user} />}
+      actions={showMenu ? <UserMenu user={user} /> : undefined}
     />
   );
 };

app/types/index.js

@@ -7,6 +7,7 @@ export type User = {
   username: string,
   isAdmin?: boolean,
   isSuspended?: boolean,
+  createdAt: string,
 };
 
 export type Toast = {

server/api/__snapshots__/team.test.js.snap

@@ -5,12 +5,14 @@ Object {
   "data": Array [
     Object {
       "avatarUrl": "http://example.com/avatar.png",
+      "createdAt": "2018-01-01T00:00:00.000Z",
       "id": "fa952cff-fa64-4d42-a6ea-6955c9689046",
       "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",
       "name": "User 1",
       "username": "user1",
@@ -31,15 +33,7 @@ Object {
   "data": Array [
     Object {
       "avatarUrl": "http://example.com/avatar.png",
-      "email": "admin@example.com",
-      "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",
       "email": "user1@example.com",
       "id": "46fde1d4-0050-428f-9f0b-0bf77f4bdf61",
       "isAdmin": false,
@@ -47,6 +41,16 @@ Object {
       "name": "User 1",
       "username": "user1",
     },
+    Object {
+      "avatarUrl": "http://example.com/avatar.png",
+      "createdAt": "2018-01-01T00:00:00.000Z",
+      "email": "admin@example.com",
+      "id": "fa952cff-fa64-4d42-a6ea-6955c9689046",
+      "isAdmin": true,
+      "isSuspended": false,
+      "name": "Admin User",
+      "username": "admin",
+    },
   ],
   "ok": true,
   "pagination": Object {

server/api/__snapshots__/user.test.js.snap

@@ -4,6 +4,7 @@ exports[`#user.activate should activate a suspended user 1`] = `
 Object {
   "data": Object {
     "avatarUrl": "http://example.com/avatar.png",
+    "createdAt": "2018-01-01T00:00:00.000Z",
     "email": "user1@example.com",
     "id": "46fde1d4-0050-428f-9f0b-0bf77f4bdf61",
     "isAdmin": false,
@@ -29,6 +30,7 @@ exports[`#user.demote should demote an admin 1`] = `
 Object {
   "data": Object {
     "avatarUrl": "http://example.com/avatar.png",
+    "createdAt": "2018-01-01T00:00:00.000Z",
     "email": "user1@example.com",
     "id": "46fde1d4-0050-428f-9f0b-0bf77f4bdf61",
     "isAdmin": false,
@@ -72,6 +74,7 @@ exports[`#user.info should return known user 1`] = `
 Object {
   "data": Object {
     "avatarUrl": "http://example.com/avatar.png",
+    "createdAt": "2018-01-01T00:00:00.000Z",
     "id": "46fde1d4-0050-428f-9f0b-0bf77f4bdf61",
     "name": "User 1",
     "username": "user1",
@@ -85,6 +88,7 @@ exports[`#user.promote should promote a new admin 1`] = `
 Object {
   "data": Object {
     "avatarUrl": "http://example.com/avatar.png",
+    "createdAt": "2018-01-01T00:00:00.000Z",
     "email": "user1@example.com",
     "id": "46fde1d4-0050-428f-9f0b-0bf77f4bdf61",
     "isAdmin": true,
@@ -119,6 +123,7 @@ exports[`#user.suspend should suspend an user 1`] = `
 Object {
   "data": Object {
     "avatarUrl": "http://example.com/avatar.png",
+    "createdAt": "2018-01-01T00:00:00.000Z",
     "email": "user1@example.com",
     "id": "46fde1d4-0050-428f-9f0b-0bf77f4bdf61",
     "isAdmin": false,
@@ -153,6 +158,7 @@ exports[`#user.update should update user profile information 1`] = `
 Object {
   "data": Object {
     "avatarUrl": "http://example.com/avatar.png",
+    "createdAt": "2018-01-01T00:00:00.000Z",
     "email": "user1@example.com",
     "id": "46fde1d4-0050-428f-9f0b-0bf77f4bdf61",
     "isAdmin": false,

server/presenters/__snapshots__/user.test.js.snap

@@ -3,6 +3,7 @@
 exports[`presents a user 1`] = `
 Object {
   "avatarUrl": "http://example.com/avatar.png",
+  "createdAt": undefined,
   "id": "123",
   "name": "Test User",
   "username": "testuser",
@@ -12,6 +13,7 @@ Object {
 exports[`presents a user without slack data 1`] = `
 Object {
   "avatarUrl": null,
+  "createdAt": undefined,
   "id": "123",
   "name": "Test User",
   "username": "testuser",

server/presenters/user.js

@@ -21,6 +21,7 @@ export default (
 ): UserPresentation => {
   const userData = {};
   userData.id = user.id;
+  userData.createdAt = user.createdAt;
   userData.username = user.username;
   userData.name = user.name;
   userData.avatarUrl =

server/test/factories.js

@@ -42,6 +42,7 @@ export async function buildUser(overrides: Object = {}) {
     password: 'test123!',
     service: 'slack',
     serviceId: uuid.v4(),
+    createdAt: new Date('2018-01-01T00:00:00.000Z'),
     ...overrides,
   });
 }

server/test/support.js

@@ -36,6 +36,7 @@ const seed = async () => {
       id: 'U2399UF2P',
       image_192: 'http://example.com/avatar.png',
     },
+    createdAt: new Date('2018-01-01T00:00:00.000Z'),
   });
 
   const admin = await User.create({
@@ -52,6 +53,7 @@ const seed = async () => {
       id: 'U2399UF1P',
       image_192: 'http://example.com/avatar.png',
     },
+    createdAt: new Date('2018-01-01T00:00:00.000Z'),
   });
 
   const collection = await Collection.create({