Renamed ApiKeys store

app/components/Auth.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { Provider } from 'mobx-react';
 import stores from 'stores';
-import ApiKeySettingsStore from 'stores/ApiKeySettingsStore';
+import ApiKeysStore from 'stores/ApiKeysStore';
 import MemberSettingsStore from 'stores/MemberSettingsStore';
 import DocumentsStore from 'stores/DocumentsStore';
 import CollectionsStore from 'stores/CollectionsStore';
@@ -23,7 +23,7 @@ const Auth = ({ children }: Props) => {
       const { user, team } = stores.auth;
       const cache = new CacheStore(user.id);
       authenticatedStores = {
-        apiKeys: new ApiKeySettingsStore(),
+        apiKeys: new ApiKeysStore(),
         memberSettings: new MemberSettingsStore(),
         documents: new DocumentsStore({
           ui: stores.ui,

app/scenes/Settings/Tokens.js

@@ -5,7 +5,7 @@ import { observer, inject } from 'mobx-react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import ApiToken from './components/ApiToken';
-import ApiKeySettingsStore from 'stores/ApiKeySettingsStore';
+import ApiKeysStore from 'stores/ApiKeysStore';
 import { color } from 'shared/styles/constants';
 
 import Button from 'components/Button';
@@ -19,11 +19,11 @@ import Subheading from 'components/Subheading';
 class Tokens extends Component {
   @observable name: string = '';
   props: {
-    apiKeys: ApiKeySettingsStore,
+    apiKeys: ApiKeysStore,
   };
 
   componentDidMount() {
-    this.props.apiKeys.fetchApiKeys();
+    this.props.apiKeys.fetchPage({ limit: 100 });
   }
 
   handleUpdate = (ev: SyntheticInputEvent) => {
@@ -38,7 +38,7 @@ class Tokens extends Component {
 
   render() {
     const { apiKeys } = this.props;
-    const hasApiKeys = apiKeys.apiKeys.length > 0;
+    const hasApiKeys = apiKeys.data.length > 0;
 
     return (
       <CenteredContent>
@@ -49,7 +49,7 @@ class Tokens extends Component {
           <Subheading>Your tokens</Subheading>,
           <Table>
             <tbody>
-              {apiKeys.apiKeys.map(key => (
+              {apiKeys.data.map(key => (
                 <ApiToken
                   id={key.id}
                   key={key.id}

app/stores/ApiKeysStore.js

@@ -2,24 +2,24 @@
 import { observable, action, runInAction } from 'mobx';
 import invariant from 'invariant';
 import { client } from 'utils/ApiClient';
-import type { ApiKey } from 'types';
+import type { ApiKey, PaginationParams } from 'types';
 
-class SettingsApiKeySettingsStore {
-  @observable apiKeys: ApiKey[] = [];
+class ApiKeysStore {
+  @observable data: ApiKey[] = [];
   @observable isFetching: boolean = false;
   @observable isSaving: boolean = false;
 
   @action
-  fetchApiKeys = async () => {
+  fetchPage = async (options: ?PaginationParams): Promise<*> => {
     this.isFetching = true;
 
     try {
-      const res = await client.post('/apiKeys.list');
+      const res = await client.post('/apiKeys.list', options);
       invariant(res && res.data, 'Data should be available');
       const { data } = res;
 
       runInAction('fetchApiKeys', () => {
-        this.apiKeys = data;
+        this.data = data;
       });
     } catch (e) {
       console.error('Something went wrong');
@@ -36,7 +36,7 @@ class SettingsApiKeySettingsStore {
       invariant(res && res.data, 'Data should be available');
       const { data } = res;
       runInAction('createApiKey', () => {
-        this.apiKeys.push(data);
+        this.data.push(data);
       });
     } catch (e) {
       console.error('Something went wrong');
@@ -49,7 +49,7 @@ class SettingsApiKeySettingsStore {
     try {
       await client.post('/apiKeys.delete', { id });
       runInAction('deleteApiKey', () => {
-        this.fetchApiKeys();
+        this.fetchPage();
       });
     } catch (e) {
       console.error('Something went wrong');
@@ -57,4 +57,4 @@ class SettingsApiKeySettingsStore {
   };
 }
 
-export default SettingsApiKeySettingsStore;
+export default ApiKeysStore;