coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge ErrorsStore into UiStore

Browse Source
This commit is contained in:
Tom Moor
2018-05-31 11:42:39 -07:00
parent 55e1451160
commit f633f63a61
18 changed files with 105 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/Auth.js
View File

@ -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({

8
app/components/Toasts/Toasts.js
View File

@ -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);

12
app/models/Collection.js
View File

@ -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();

17
app/models/Collection.test.js
View File

@ -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'
);
});
});
});

26
app/models/Document.js
View File

@ -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;
}
}

10
app/models/Integration.js
View File

@ -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;
}
}

53
app/scenes/Settings/Profile.js
View File

@ -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);

10
app/stores/AuthStore.js
View File

@ -49,6 +49,16 @@ class AuthStore {
}
};
@action
updateUser = async (params: { name: string, avatarUrl?: string }) => {
const res = await client.post(`/user.update`, params);
invariant(res && res.data, 'User response not available');
runInAction('AuthStore#updateUser', () => {
this.user = res.data.user;
});
};
@action
logout = async () => {
this.user = null;

7
app/stores/CollectionsStore.js
View File

@ -6,7 +6,6 @@ import invariant from 'invariant';
import stores from 'stores';
import BaseStore from './BaseStore';
import ErrorsStore from './ErrorsStore';
import UiStore from './UiStore';
import Collection from 'models/Collection';
import naturalSort from 'shared/utils/naturalSort';
@ -32,7 +31,6 @@ class CollectionsStore extends BaseStore {
@observable isLoaded: boolean = false;
@observable isFetching: boolean = false;
errors: ErrorsStore;
ui: UiStore;
@computed
@ -106,7 +104,7 @@ class CollectionsStore extends BaseStore {
});
return res;
} catch (e) {
this.errors.add('Failed to load collections');
this.ui.showToast('Failed to load collections');
} finally {
this.isFetching = false;
}
@ -134,7 +132,7 @@ class CollectionsStore extends BaseStore {
return collection;
} catch (e) {
this.errors.add('Something went wrong');
this.ui.showToast('Something went wrong');
} finally {
this.isFetching = false;
}
@ -156,7 +154,6 @@ class CollectionsStore extends BaseStore {
constructor(options: Options) {
super();
this.errors = stores.errors;
this.ui = options.ui;
this.on('collections.delete', (data: { id: string }) => {

8
app/stores/DocumentsStore.js
View File

@ -6,7 +6,6 @@ import invariant from 'invariant';
import BaseStore from 'stores/BaseStore';
import Document from 'models/Document';
import ErrorsStore from 'stores/ErrorsStore';
import UiStore from 'stores/UiStore';
import type { PaginationParams } from 'types';
@ -14,7 +13,6 @@ export const DEFAULT_PAGINATION_LIMIT = 25;
type Options = {
ui: UiStore,
errors: ErrorsStore,
};
type FetchOptions = {
@ -29,7 +27,6 @@ class DocumentsStore extends BaseStore {
@observable isLoaded: boolean = false;
@observable isFetching: boolean = false;
errors: ErrorsStore;
ui: UiStore;
/* Computed */
@ -114,7 +111,7 @@ class DocumentsStore extends BaseStore {
});
return data;
} catch (e) {
this.errors.add('Failed to load documents');
this.ui.showToast('Failed to load documents');
} finally {
this.isFetching = false;
}
@ -200,7 +197,7 @@ class DocumentsStore extends BaseStore {
return document;
} catch (e) {
this.errors.add('Failed to load document');
this.ui.showToast('Failed to load document');
} finally {
this.isFetching = false;
}
@ -230,7 +227,6 @@ class DocumentsStore extends BaseStore {
constructor(options: Options) {
super();
this.errors = options.errors;
this.ui = options.ui;
this.on('documents.delete', (data: { id: string }) => {

20
app/stores/ErrorsStore.js
View File

@ -1,20 +0,0 @@
// @flow
import { observable, action } from 'mobx';
class ErrorsStore {
@observable data = observable.array([]);
/* Actions */
@action
add = (message: string): void => {
this.data.push(message);
};
@action
remove = (index: number): void => {
this.data.splice(index, 1);
};
}
export default ErrorsStore;

27
app/stores/ErrorsStore.test.js
View File

@ -1,27 +0,0 @@
/* eslint-disable */
import ErrorsStore from './ErrorsStore';
// Actions
describe('ErrorsStore', () => {
let store;
beforeEach(() => {
store = new ErrorsStore();
});
test('#add should add errors', () => {
expect(store.data.length).toBe(0);
store.add('first error');
store.add('second error');
expect(store.data.length).toBe(2);
});
test('#remove should remove errors', () => {
store.add('first error');
store.add('second error');
expect(store.data.length).toBe(2);
store.remove(0);
expect(store.data.length).toBe(1);
expect(store.data[0]).toBe('second error');
});
});

11
app/stores/IntegrationsStore.js
View File

@ -3,8 +3,7 @@ import { observable, computed, action, runInAction, ObservableMap } from 'mobx';
import { client } from 'utils/ApiClient';
import _ from 'lodash';
import invariant from 'invariant';
import stores from './';
import ErrorsStore from './ErrorsStore';
import UiStore from './UiStore';
import BaseStore from './BaseStore';
import Integration from 'models/Integration';
@ -15,7 +14,7 @@ class IntegrationsStore extends BaseStore {
@observable isLoaded: boolean = false;
@observable isFetching: boolean = false;
errors: ErrorsStore;
ui: UiStore;
@computed
get orderedData(): Integration[] {
@ -43,7 +42,7 @@ class IntegrationsStore extends BaseStore {
});
return res;
} catch (e) {
this.errors.add('Failed to load integrations');
this.ui.showToast('Failed to load integrations');
} finally {
this.isFetching = false;
}
@ -63,9 +62,9 @@ class IntegrationsStore extends BaseStore {
return this.data.get(id);
};
constructor() {
constructor(options: { ui: UiStore }) {
super();
this.errors = stores.errors;
this.ui = options.ui;
this.on('integrations.delete', (data: { id: string }) => {
this.remove(data.id);

11
app/stores/UiStore.js
View File

@ -11,6 +11,7 @@ class UiStore {
@observable progressBarVisible: boolean = false;
@observable editMode: boolean = false;
@observable mobileSidebarVisible: boolean = false;
@observable toasts: string[] = observable.array([]);
/* Actions */
@action
@ -79,6 +80,16 @@ class UiStore {
hideMobileSidebar() {
this.mobileSidebarVisible = false;
}
@action
showToast = (message: string): void => {
this.toasts.push(message);
};
@action
removeToast = (index: number): void => {
this.toasts.splice(index, 1);
};
}
export default UiStore;

27
app/stores/UiStore.test.js Normal file
View File

@ -0,0 +1,27 @@
/* eslint-disable */
import UiStore from './UiStore';
// Actions
describe('UiStore', () => {
let store;
beforeEach(() => {
store = new UiStore();
});
test('#add should add errors', () => {
expect(store.data.length).toBe(0);
store.showToast('first error');
store.showToast('second error');
expect(store.toasts.length).toBe(2);
});
test('#remove should remove errors', () => {
store.showToast('first error');
store.showToast('second error');
expect(store.toasts.length).toBe(2);
store.removeToast(0);
expect(store.toasts.length).toBe(1);
expect(store.toasts[0]).toBe('second error');
});
});

5
app/stores/index.js
View File

@ -1,18 +1,15 @@
// @flow
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();
const stores = {
user: null, // Including for Layout
auth: new AuthStore(),
ui,
errors,
documents: new DocumentsStore({ ui, errors }),
documents: new DocumentsStore({ ui }),
shares: new SharesStore(),
};

2
package.json
View File

@ -8,7 +8,7 @@
"build:analyze": "NODE_ENV=production webpack --config webpack.config.prod.js --json > stats.json",
"build": "npm run clean && npm run build:webpack",
"start": "NODE_ENV=production node index.js",
"dev": "NODE_ENV=development nodemon --watch server index.js",
"dev": "NODE_ENV=development node index.js",
"lint": "npm run lint:flow && npm run lint:js",
"lint:js": "eslint app server",
"lint:flow": "flow",

5
webpack.config.js
View File

@ -34,7 +34,10 @@ module.exports = {
include: [
path.join(__dirname, 'app'),
path.join(__dirname, 'shared'),
]
],
options: {
cacheDirectory: true
}
},
{ test: /\.json$/, loader: 'json-loader' },
// inline base64 URLs for <=8k images, direct URLs for the rest