API tokens to standard list item

app/scenes/Settings/Tokens.js

@@ -3,17 +3,15 @@ import * as React from 'react';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
-import ApiToken from './components/ApiToken';
 import ApiKeysStore from 'stores/ApiKeysStore';
-import { color } from 'shared/styles/constants';
 
 import Button from 'components/Button';
 import Input from 'components/Input';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
 import HelpText from 'components/HelpText';
-import Subheading from 'components/Subheading';
+import List from 'components/List';
+import TokenListItem from './components/TokenListItem';
 
 type Props = {
   apiKeys: ApiKeysStore,
@@ -46,29 +44,23 @@ class Tokens extends React.Component<Props> {
         <PageTitle title="API Tokens" />
         <h1>API Tokens</h1>
 
-        {hasApiKeys && [
-          <Subheading>Your tokens</Subheading>,
-          <Table>
-            <tbody>
-              {apiKeys.data.map(key => (
-                <ApiToken
-                  id={key.id}
-                  key={key.id}
-                  name={key.name}
-                  secret={key.secret}
-                  onDelete={apiKeys.deleteApiKey}
-                />
-              ))}
-            </tbody>
-          </Table>,
-          <Subheading>Create a token</Subheading>,
-        ]}
-
         <HelpText>
           You can create unlimited personal API tokens to hack on your wiki.
           Learn more in the <Link to="/developers">API documentation</Link>.
         </HelpText>
 
+        {hasApiKeys && (
+          <List>
+            {apiKeys.data.map(token => (
+              <TokenListItem
+                key={token.id}
+                token={token}
+                onDelete={apiKeys.deleteApiKey}
+              />
+            ))}
+          </List>
+        )}
+
         <form onSubmit={this.handleSubmit}>
           <Input
             onChange={this.handleUpdate}
@@ -87,14 +79,4 @@ class Tokens extends React.Component<Props> {
   }
 }
 
-const Table = styled.table`
-  margin-bottom: 30px;
-  width: 100%;
-
-  td {
-    margin-right: 20px;
-    color: ${color.slate};
-  }
-`;
-
 export default inject('apiKeys')(Tokens);

app/scenes/Settings/components/ApiToken.js

@@ -1,43 +0,0 @@
-// @flow
-import * as React from 'react';
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
-import Button from 'components/Button';
-
-type Props = {
-  id: string,
-  name: ?string,
-  secret: string,
-  onDelete: (id: string) => *,
-};
-
-@observer
-class ApiToken extends React.Component<Props> {
-  @observable disabled: boolean;
-
-  onClick = () => {
-    this.props.onDelete(this.props.id);
-    this.disabled = true;
-  };
-
-  render() {
-    const { name, secret } = this.props;
-    const { disabled } = this;
-
-    return (
-      <tr>
-        <td>{name}</td>
-        <td>
-          <code>{secret}</code>
-        </td>
-        <td align="right">
-          <Button onClick={this.onClick} disabled={disabled} neutral>
-            Revoke
-          </Button>
-        </td>
-      </tr>
-    );
-  }
-}
-
-export default ApiToken;

app/scenes/Settings/components/TokenListItem.js

@@ -0,0 +1,28 @@
+// @flow
+import * as React from 'react';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import Button from 'components/Button';
+import ListItem from 'components/List/Item';
+import type { ApiKey } from '../../../types';
+
+type Props = {
+  token: ApiKey,
+  onDelete: (tokenId: string) => *,
+};
+
+const TokenListItem = ({ token, onDelete }: Props) => {
+  return (
+    <ListItem
+      key={token.id}
+      title={token.name}
+      subtitle={<code>{token.secret}</code>}
+      actions={
+        <Button onClick={() => onDelete(token.id)} light>
+          Revoke
+        </Button>
+      }
+    />
+  );
+};
+
+export default TokenListItem;

app/types/index.js

@@ -67,6 +67,6 @@ export type PaginationParams = {
 
 export type ApiKey = {
   id: string,
-  name: ?string,
+  name: string,
   secret: string,
 };