Merge ErrorsStore into UiStore

outline · May 31, 2018 · f633f63 · f633f63
1 parent 55e1451
commit f633f63
Show file tree

Hide file tree

Showing 18 changed files with 106 additions and 159 deletions.
diff --git a/app/components/Auth.js b/app/components/Auth.js
@@ -31,7 +31,9 @@ const Auth = observer(({ auth, children }: Props) => {
       // Stores for authenticated user
       const cache = new CacheStore(user.id);
       authenticatedStores = {
-        integrations: new IntegrationsStore(),
+        integrations: new IntegrationsStore({
+          ui: stores.ui,
+        }),
         apiKeys: new ApiKeysStore(),
         users: new UsersStore(),
         collections: new CollectionsStore({

diff --git a/app/components/Toasts/Toasts.js b/app/components/Toasts/Toasts.js
@@ -8,15 +8,15 @@ import Toast from './components/Toast';
 @observer
 class Toasts extends React.Component<*> {
   handleClose = index => {
-    this.props.errors.remove(index);
+    this.props.ui.remove(index);
   };
 
   render() {
-    const { errors } = this.props;
+    const { ui } = this.props;
 
     return (
       <List>
-        {errors.data.map((error, index) => (
+        {ui.toasts.map((error, index) => (
           <Toast
             key={index}
             onRequestClose={this.handleClose.bind(this, index)}
@@ -37,4 +37,4 @@ const List = styled.ol`
   padding: 0;
 `;
 
-export default inject('errors')(Toasts);
+export default inject('ui')(Toasts);
diff --git a/app/models/Collection.js b/app/models/Collection.js
@@ -6,13 +6,13 @@ import BaseModel from 'models/BaseModel';
 import Document from 'models/Document';
 import { client } from 'utils/ApiClient';
 import stores from 'stores';
-import ErrorsStore from 'stores/ErrorsStore';
+import UiStore from 'stores/UiStore';
 import type { NavigationNode } from 'types';
 
 class Collection extends BaseModel {
   isSaving: boolean = false;
   hasPendingChanges: boolean = false;
-  errors: ErrorsStore;
+  ui: UiStore;
   data: Object;
 
   createdAt: string;
@@ -79,7 +79,7 @@ class Collection extends BaseModel {
         this.updateData(data);
       });
     } catch (e) {
-      this.errors.add('Collection failed loading');
+      this.ui.showToast('Collection failed loading');
     }
 
     return this;
@@ -112,7 +112,7 @@ class Collection extends BaseModel {
         this.hasPendingChanges = false;
       });
     } catch (e) {
-      this.errors.add('Collection failed saving');
+      this.ui.showToast('Collection failed saving');
       return false;
     } finally {
       this.isSaving = false;
@@ -128,7 +128,7 @@ class Collection extends BaseModel {
       this.emit('collections.delete', { id: this.id });
       return true;
     } catch (e) {
-      this.errors.add('Collection failed to delete');
+      this.ui.showToast('Collection failed to delete');
     }
     return false;
   };
@@ -143,7 +143,7 @@ class Collection extends BaseModel {
     super();
 
     this.updateData(collection);
-    this.errors = stores.errors;
+    this.ui = stores.ui;
 
     this.on('documents.delete', (data: { collectionId: string }) => {
       if (data.collectionId === this.id) this.fetch();

diff --git a/app/models/Collection.test.js b/app/models/Collection.test.js
@@ -28,22 +28,5 @@ describe('Collection model', () => {
       expect(client.post).toHaveBeenCalledWith('/collections.info', { id: 123 });
       expect(collection.name).toBe('New collection');
     });
-
-    test('should report errors', async () => {
-      client.post = jest.fn(() => Promise.reject())
-
-      const collection = new Collection({
-        id: 123,
-      });
-      collection.errors = {
-        add: jest.fn(),
-      };
-
-      await collection.fetch();
-
-      expect(collection.errors.add).toHaveBeenCalledWith(
-        'Collection failed loading'
-      );
-    });
   });
 });
diff --git a/app/models/Document.js b/app/models/Document.js
@@ -4,7 +4,7 @@ import invariant from 'invariant';
 
 import { client } from 'utils/ApiClient';
 import stores from 'stores';
-import ErrorsStore from 'stores/ErrorsStore';
+import UiStore from 'stores/UiStore';
 import parseTitle from '../../shared/utils/parseTitle';
 
 import type { User } from 'types';
@@ -16,7 +16,7 @@ type SaveOptions = { publish?: boolean, done?: boolean, autosave?: boolean };
 class Document extends BaseModel {
   isSaving: boolean = false;
   hasPendingChanges: boolean = false;
-  errors: ErrorsStore;
+  ui: UiStore;
 
   collaborators: User[];
   collection: $Shape<Collection>;
@@ -107,7 +107,7 @@ class Document extends BaseModel {
 
       this.shareUrl = res.data.url;
     } catch (e) {
-      this.errors.add('Document failed to share');
+      this.ui.showToast('Document failed to share');
     }
   };
 
@@ -118,7 +118,7 @@ class Document extends BaseModel {
       await client.post('/documents.pin', { id: this.id });
     } catch (e) {
       this.pinned = false;
-      this.errors.add('Document failed to pin');
+      this.ui.showToast('Document failed to pin');
     }
   };
 
@@ -129,7 +129,7 @@ class Document extends BaseModel {
       await client.post('/documents.unpin', { id: this.id });
     } catch (e) {
       this.pinned = true;
-      this.errors.add('Document failed to unpin');
+      this.ui.showToast('Document failed to unpin');
     }
   };
 
@@ -140,7 +140,7 @@ class Document extends BaseModel {
       await client.post('/documents.star', { id: this.id });
     } catch (e) {
       this.starred = false;
-      this.errors.add('Document failed star');
+      this.ui.showToast('Document failed star');
     }
   };
 
@@ -151,7 +151,7 @@ class Document extends BaseModel {
       await client.post('/documents.unstar', { id: this.id });
     } catch (e) {
       this.starred = false;
-      this.errors.add('Document failed unstar');
+      this.ui.showToast('Document failed unstar');
     }
   };
 
@@ -161,7 +161,7 @@ class Document extends BaseModel {
     try {
       await client.post('/views.create', { id: this.id });
     } catch (e) {
-      this.errors.add('Document failed to record view');
+      this.ui.showToast('Document failed to record view');
     }
   };
 
@@ -175,7 +175,7 @@ class Document extends BaseModel {
         this.updateData(data);
       });
     } catch (e) {
-      this.errors.add('Document failed loading');
+      this.ui.showToast('Document failed loading');
     }
   };
 
@@ -228,7 +228,7 @@ class Document extends BaseModel {
         });
       }
     } catch (e) {
-      this.errors.add('Document failed to save');
+      this.ui.showToast('Document failed to save');
     } finally {
       this.isSaving = false;
     }
@@ -250,7 +250,7 @@ class Document extends BaseModel {
         collectionId: this.collection.id,
       });
     } catch (e) {
-      this.errors.add('Error while moving the document');
+      this.ui.showToast('Error while moving the document');
     }
     return;
   };
@@ -265,7 +265,7 @@ class Document extends BaseModel {
       });
       return true;
     } catch (e) {
-      this.errors.add('Error while deleting the document');
+      this.ui.showToast('Error while deleting the document');
     }
     return false;
   };
@@ -294,7 +294,7 @@ class Document extends BaseModel {
     super();
 
     this.updateData(data);
-    this.errors = stores.errors;
+    this.ui = stores.ui;
   }
 }
 

diff --git a/app/models/Integration.js b/app/models/Integration.js
@@ -4,7 +4,7 @@ import { extendObservable, action } from 'mobx';
 import BaseModel from 'models/BaseModel';
 import { client } from 'utils/ApiClient';
 import stores from 'stores';
-import ErrorsStore from 'stores/ErrorsStore';
+import UiStore from 'stores/UiStore';
 
 type Settings = {
   url: string,
@@ -15,7 +15,7 @@ type Settings = {
 type Events = 'documents.create' | 'collections.create';
 
 class Integration extends BaseModel {
-  errors: ErrorsStore;
+  ui: UiStore;
 
   id: string;
   serviceId: string;
@@ -29,7 +29,7 @@ class Integration extends BaseModel {
       await client.post('/integrations.update', { id: this.id, ...data });
       extendObservable(this, data);
     } catch (e) {
-      this.errors.add('Integration failed to update');
+      this.ui.showToast('Integration failed to update');
     }
     return false;
   };
@@ -41,7 +41,7 @@ class Integration extends BaseModel {
       this.emit('integrations.delete', { id: this.id });
       return true;
     } catch (e) {
-      this.errors.add('Integration failed to delete');
+      this.ui.showToast('Integration failed to delete');
     }
     return false;
   };
@@ -50,7 +50,7 @@ class Integration extends BaseModel {
     super();
 
     extendObservable(this, data);
-    this.errors = stores.errors;
+    this.ui = stores.ui;
   }
 }
 

diff --git a/app/scenes/Settings/Profile.js b/app/scenes/Settings/Profile.js
@@ -1,14 +1,11 @@
 // @flow
 import * as React from 'react';
-import { observable, runInAction } from 'mobx';
+import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
-import invariant from 'invariant';
 import styled from 'styled-components';
 import { color, size } from 'shared/styles/constants';
 
-import { client } from 'utils/ApiClient';
 import AuthStore from 'stores/AuthStore';
-import ErrorsStore from 'stores/ErrorsStore';
 import ImageUpload from './components/ImageUpload';
 import Input, { LabelText } from 'components/Input';
 import Button from 'components/Button';
@@ -18,7 +15,6 @@ import Flex from 'shared/components/Flex';
 
 type Props = {
   auth: AuthStore,
-  errors: ErrorsStore,
 };
 
 @observer
@@ -27,8 +23,6 @@ class Profile extends React.Component<Props> {
 
   @observable name: string;
   @observable avatarUrl: ?string;
-  @observable isUpdated: boolean;
-  @observable isSaving: boolean;
 
   componentDidMount() {
     if (this.props.auth.user) {
@@ -42,25 +36,11 @@ class Profile extends React.Component<Props> {
 
   handleSubmit = async (ev: SyntheticEvent<*>) => {
     ev.preventDefault();
-    this.isSaving = true;
-
-    try {
-      const res = await client.post(`/user.update`, {
-        name: this.name,
-        avatarUrl: this.avatarUrl,
-      });
-      invariant(res && res.data, 'User response not available');
-      const { data } = res;
-      runInAction('Settings#handleSubmit', () => {
-        this.props.auth.user = data;
-        this.isUpdated = true;
-        this.timeout = setTimeout(() => (this.isUpdated = false), 2500);
-      });
-    } catch (e) {
-      this.props.errors.add('Failed to update user');
-    } finally {
-      this.isSaving = false;
-    }
+
+    await this.props.auth.updateUser({
+      name: this.name,
+      avatarUrl: this.avatarUrl,
+    });
   };
 
   handleNameChange = (ev: SyntheticInputEvent<*>) => {
@@ -72,7 +52,7 @@ class Profile extends React.Component<Props> {
   };
 
   handleAvatarError = (error: ?string) => {
-    this.props.errors.add(error || 'Unable to upload new avatar');
+    this.props.ui.showToast(error || 'Unable to upload new avatar');
   };
 
   render() {
@@ -85,7 +65,7 @@ class Profile extends React.Component<Props> {
         <PageTitle title="Profile" />
         <h1>Profile</h1>
         <ProfilePicture column>
-          <LabelText>Profile picture</LabelText>
+          <LabelText>Picture</LabelText>
           <AvatarContainer>
             <ImageUpload
               onSuccess={this.handleAvatarUpload}
@@ -108,31 +88,20 @@ class Profile extends React.Component<Props> {
           <Button type="submit" disabled={this.isSaving || !this.name}>
             Save
           </Button>
-          <SuccessMessage visible={this.isUpdated}>
-            Profile updated!
-          </SuccessMessage>
         </form>
       </CenteredContent>
     );
   }
 }
 
-const SuccessMessage = styled.span`
-  margin-left: ${size.large};
-  color: ${color.slate};
-  opacity: ${props => (props.visible ? 1 : 0)};
-
-  transition: opacity 0.25s;
-`;
-
 const ProfilePicture = styled(Flex)`
   margin-bottom: ${size.huge};
 `;
 
 const avatarStyles = `
-  width: 150px;
-  height: 150px;
-  border-radius: 50%;
+  width: 80px;
+  height: 80px;
+  border-radius: 10px;
 `;
 
 const AvatarContainer = styled(Flex)`
@@ -166,4 +135,4 @@ const StyledInput = styled(Input)`
   max-width: 350px;
 `;
 
-export default inject('auth', 'errors')(Profile);
+export default inject('auth', 'ui')(Profile);