Share links list WIP

app/components/Avatar/Avatar.js

@@ -6,10 +6,19 @@ import { observer } from 'mobx-react';
 import { color } from 'shared/styles/constants';
 import placeholder from './placeholder.png';
 
+type Props = {
+  src: string,
+  size: number,
+};
+
 @observer
-class Avatar extends React.Component<*> {
+class Avatar extends React.Component<Props> {
   @observable error: boolean;
 
+  static defaultProps = {
+    size: 24,
+  };
+
   handleError = () => {
     this.error = true;
   };
@@ -17,7 +26,7 @@ class Avatar extends React.Component<*> {
   render() {
     return (
       <CircleImg
-        {...this.props}
+        size={this.props.size}
         onError={this.handleError}
         src={this.error ? placeholder : this.props.src}
       />
@@ -26,8 +35,8 @@ class Avatar extends React.Component<*> {
 }
 
 const CircleImg = styled.img`
-  width: 24px;
-  height: 24px;
+  width: ${props => props.size}px;
+  height: ${props => props.size}px;
   border-radius: 50%;
   border: 2px solid ${color.white};
   flex-shrink: 0;

app/components/Button/Button.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { color } from 'shared/styles/constants';
-import { darken, lighten } from 'polished';
+import { darken } from 'polished';
 
 const RealButton = styled.button`
   display: inline-block;
@@ -40,11 +40,14 @@ const RealButton = styled.button`
   ${props =>
     props.light &&
     `
-    color: ${color.text};
-    background: ${lighten(0.08, color.slateLight)};
+    color: ${color.slate};
+    background: transparent;
+    border: 1px solid ${color.slate};
 
     &:hover {
-      background: ${color.slateLight};
+      background: transparent;
+      color: ${color.slateDark};
+      border: 1px solid ${color.slateDark};
     }
   `} ${props =>
       props.neutral &&

app/components/List/Item.js

@@ -0,0 +1,56 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import { color, fontSize } from 'shared/styles/constants';
+
+type Props = {
+  image?: React.Node,
+  title: string,
+  subtitle: React.Node,
+  actions?: React.Node,
+};
+
+const ListItem = ({ image, title, subtitle, actions }: Props) => {
+  return (
+    <Wrapper>
+      {image && <Image>{image}</Image>}
+      <Content>
+        <Heading>{title}</Heading>
+        <Subtitle>{subtitle}</Subtitle>
+      </Content>
+      {actions && <Actions>{actions}</Actions>}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.li`
+  display: flex;
+  padding: 12px 0;
+  margin: 0;
+  border-bottom: 1px solid ${color.smokeDark};
+`;
+
+const Image = styled.div`
+  padding: 0 8px 0 0;
+`;
+
+const Heading = styled.h2`
+  font-size: ${fontSize.medium};
+  margin: 0;
+`;
+
+const Content = styled.div`
+  flex-grow: 1;
+`;
+
+const Subtitle = styled.p`
+  margin: 0;
+  font-size: ${fontSize.small};
+  color: ${color.slate};
+`;
+
+const Actions = styled.div`
+  align-self: flex-end;
+`;
+
+export default ListItem;

app/components/List/List.js

@@ -0,0 +1,10 @@
+// @flow
+import styled from 'styled-components';
+
+const List = styled.ol`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;
+
+export default List;

app/components/List/index.js

@@ -0,0 +1,3 @@
+// @flow
+import List from './List';
+export default List;

app/components/Sidebar/Settings.js

@@ -1,7 +1,13 @@
 // @flow
 import * as React from 'react';
 import { observer, inject } from 'mobx-react';
-import { ProfileIcon, SettingsIcon, CodeIcon, UserIcon } from 'outline-icons';
+import {
+  ProfileIcon,
+  SettingsIcon,
+  CodeIcon,
+  UserIcon,
+  LinkIcon,
+} from 'outline-icons';
 
 import Flex from 'shared/components/Flex';
 import Sidebar, { Section } from './Sidebar';
@@ -51,6 +57,9 @@ class SettingsSidebar extends React.Component<Props> {
               <SidebarLink to="/settings/users" icon={<UserIcon />}>
                 Users
               </SidebarLink>
+              <SidebarLink to="/settings/shares" icon={<LinkIcon />}>
+                Share Links
+              </SidebarLink>
               <SidebarLink
                 to="/settings/integrations/slack"
                 icon={<SettingsIcon />}

app/index.js

@@ -23,6 +23,7 @@ import Search from 'scenes/Search';
 import Settings from 'scenes/Settings';
 import Users from 'scenes/Settings/Users';
 import Slack from 'scenes/Settings/Slack';
+import Shares from 'scenes/Settings/Shares';
 import Tokens from 'scenes/Settings/Tokens';
 import SlackAuth from 'scenes/SlackAuth';
 import ErrorAuth from 'scenes/ErrorAuth';
@@ -77,6 +78,7 @@ if (element) {
                       <Route exact path="/drafts" component={Drafts} />
                       <Route exact path="/settings" component={Settings} />
                       <Route exact path="/settings/users" component={Users} />
+                      <Route exact path="/settings/shares" component={Shares} />
                       <Route exact path="/settings/tokens" component={Tokens} />
                       <Route
                         exact

app/scenes/Settings/Shares.js

@@ -0,0 +1,63 @@
+// @flow
+import * as React from 'react';
+import { observer, inject } from 'mobx-react';
+import SharesStore from 'stores/SharesStore';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+
+import CopyToClipboard from 'components/CopyToClipboard';
+import Button from 'components/Button';
+import List from 'components/List';
+import ListItem from 'components/List/Item';
+import CenteredContent from 'components/CenteredContent';
+import PageTitle from 'components/PageTitle';
+
+type Props = {
+  shares: SharesStore,
+};
+
+@observer
+class Shares extends React.Component<Props> {
+  componentDidMount() {
+    this.props.shares.fetchPage({ limit: 100 });
+  }
+
+  render() {
+    const { shares } = this.props;
+
+    return (
+      <CenteredContent>
+        <PageTitle title="Share Links" />
+        <h1>Share Links</h1>
+        <List>
+          {shares.data.map(share => (
+            <ListItem
+              key={share.id}
+              title={share.documentTitle}
+              subtitle={
+                <React.Fragment>
+                  Created{' '}
+                  <time dateTime={share.createdAt}>
+                    {distanceInWordsToNow(new Date(share.createdAt))}
+                  </time>{' '}
+                  ago by {share.createdBy.name}
+                </React.Fragment>
+              }
+              actions={
+                <React.Fragment>
+                  <CopyToClipboard text={share.url}>
+                    <Button type="submit" light>
+                      Copy Link
+                    </Button>
+                  </CopyToClipboard>{' '}
+                  <Button light>Revoke</Button>
+                </React.Fragment>
+              }
+            />
+          ))}
+        </List>
+      </CenteredContent>
+    );
+  }
+}
+
+export default inject('shares')(Shares);

app/stores/SharesStore.js

@@ -0,0 +1,43 @@
+// @flow
+import { observable, action, runInAction } from 'mobx';
+import invariant from 'invariant';
+import { client } from 'utils/ApiClient';
+import type { Share, PaginationParams } from 'types';
+
+class SharesStore {
+  @observable data: Share[] = [];
+  @observable isFetching: boolean = false;
+  @observable isSaving: boolean = false;
+
+  @action
+  fetchPage = async (options: ?PaginationParams): Promise<*> => {
+    this.isFetching = true;
+
+    try {
+      const res = await client.post('/shares.list', options);
+      invariant(res && res.data, 'Data should be available');
+      const { data } = res;
+
+      runInAction('fetchShares', () => {
+        this.data = data;
+      });
+    } catch (e) {
+      console.error('Something went wrong');
+    }
+    this.isFetching = false;
+  };
+
+  @action
+  deleteShare = async (id: string) => {
+    try {
+      await client.post('/shares.delete', { id });
+      runInAction('deleteShare', () => {
+        this.fetchPage();
+      });
+    } catch (e) {
+      console.error('Something went wrong');
+    }
+  };
+}
+
+export default SharesStore;

app/stores/index.js

@@ -3,6 +3,7 @@ import AuthStore from './AuthStore';
 import UiStore from './UiStore';
 import ErrorsStore from './ErrorsStore';
 import DocumentsStore from './DocumentsStore';
+import SharesStore from './SharesStore';
 
 const ui = new UiStore();
 const errors = new ErrorsStore();
@@ -12,6 +13,7 @@ const stores = {
   ui,
   errors,
   documents: new DocumentsStore({ ui, errors }),
+  shares: new SharesStore(),
 };
 
 export default stores;

app/types/index.js

@@ -9,6 +9,15 @@ export type User = {
   isSuspended?: boolean,
 };
 
+export type Share = {
+  id: string,
+  url: string,
+  documentTitle: string,
+  createdBy: User,
+  createdAt: string,
+  updatedAt: string,
+};
+
 export type Team = {
   id: string,
   name: string,

server/emails/components/Button.js

@@ -15,5 +15,9 @@ export default (props: Props) => {
     cursor: 'pointer',
   };
 
-  return <a {...props} style={style}>{props.children}</a>;
+  return (
+    <a {...props} style={style}>
+      {props.children}
+    </a>
+  );
 };

server/presenters/share.js

@@ -5,9 +5,9 @@ import { presentUser } from '.';
 function present(ctx: Object, share: Share) {
   return {
     id: share.id,
-    user: presentUser(ctx, share.user),
     documentTitle: share.document.title,
     url: `${process.env.URL}/share/${share.id}`,
+    createdBy: presentUser(ctx, share.user),
     createdAt: share.createdAt,
     updatedAt: share.updatedAt,
   };