[Client] Refactoring

This commit is contained in:
syuilo 2017-03-20 14:49:24 +09:00
parent 431da9e087
commit b6475958d0
19 changed files with 72 additions and 102 deletions

View file

@ -8,12 +8,13 @@ class Connection {
this.onOpen = this.onOpen.bind(this); this.onOpen = this.onOpen.bind(this);
this.onClose = this.onClose.bind(this); this.onClose = this.onClose.bind(this);
this.onMessage = this.onMessage.bind(this); this.onMessage = this.onMessage.bind(this);
this.send = this.send.bind(this);
this.close = this.close.bind(this); this.close = this.close.bind(this);
// ---------------------------------------- // ----------------------------------------
riot.observable(this);
this.state = 'initializing'; this.state = 'initializing';
this.stateEv = riot.observable();
this.event = riot.observable();
this.me = me; this.me = me;
const host = CONFIG.apiUrl.replace('http', 'ws'); const host = CONFIG.apiUrl.replace('http', 'ws');
@ -22,23 +23,23 @@ class Connection {
this.socket.addEventListener('close', this.onClose); this.socket.addEventListener('close', this.onClose);
this.socket.addEventListener('message', this.onMessage); this.socket.addEventListener('message', this.onMessage);
this.event.on('i_updated', me.update); this.on('i_updated', me.update);
} }
onOpen() { onOpen() {
this.state = 'connected'; this.state = 'connected';
this.stateEv.trigger('connected'); this.trigger('_connected_');
} }
onClose() { onClose() {
this.state = 'reconnecting'; this.state = 'reconnecting';
this.stateEv.trigger('closed'); this.trigger('_closed_');
} }
onMessage(message) { onMessage(message) {
try { try {
const msg = JSON.parse(message.data); const msg = JSON.parse(message.data);
if (msg.type) this.event.trigger(msg.type, msg.body); if (msg.type) this.trigger(msg.type, msg.body);
} catch(e) { } catch(e) {
// noop // noop
} }

View file

@ -52,8 +52,6 @@
this.mixin('api'); this.mixin('api');
this.mixin('stream'); this.mixin('stream');
const stream = this.stream.event;
this.history = []; this.history = [];
this.fetching = true; this.fetching = true;
@ -65,11 +63,11 @@
}); });
}); });
stream.on('signin', this.onSignin); this.stream.on('signin', this.onSignin);
}); });
this.on('unmount', () => { this.on('unmount', () => {
stream.off('signin', this.onSignin); this.stream.off('signin', this.onSignin);
}); });
this.onSignin = signin => { this.onSignin = signin => {

View file

@ -44,7 +44,7 @@
} }
}); });
this.stream.stateEv.on('connected', () => { this.stream.on('_connected_', () => {
this.update(); this.update();
setTimeout(() => { setTimeout(() => {
Velocity(this.root, { Velocity(this.root, {
@ -53,7 +53,7 @@
}, 1000); }, 1000);
}); });
this.stream.stateEv.on('closed', () => { this.stream.on('_closed_', () => {
this.update(); this.update();
Velocity(this.root, { Velocity(this.root, {
opacity: 1 opacity: 1

View file

@ -76,8 +76,6 @@
this.mixin('api'); this.mixin('api');
this.mixin('stream'); this.mixin('stream');
const stream = this.stream.event;
this.user = null; this.user = null;
this.userPromise = isPromise(this.opts.user) this.userPromise = isPromise(this.opts.user)
? this.opts.user ? this.opts.user
@ -91,14 +89,14 @@
init: false, init: false,
user: user user: user
}); });
stream.on('follow', this.onStreamFollow); this.stream.on('follow', this.onStreamFollow);
stream.on('unfollow', this.onStreamUnfollow); this.stream.on('unfollow', this.onStreamUnfollow);
}); });
}); });
this.on('unmount', () => { this.on('unmount', () => {
stream.off('follow', this.onStreamFollow); this.stream.off('follow', this.onStreamFollow);
stream.off('unfollow', this.onStreamUnfollow); this.stream.off('unfollow', this.onStreamUnfollow);
}); });
this.onStreamFollow = user => { this.onStreamFollow = user => {

View file

@ -246,8 +246,6 @@
this.mixin('api'); this.mixin('api');
this.mixin('stream'); this.mixin('stream');
const stream = this.stream.event;
this.files = []; this.files = [];
this.folders = []; this.folders = [];
this.hierarchyFolders = []; this.hierarchyFolders = [];
@ -279,10 +277,10 @@
}); });
}); });
stream.on('drive_file_created', this.onStreamDriveFileCreated); this.stream.on('drive_file_created', this.onStreamDriveFileCreated);
stream.on('drive_file_updated', this.onStreamDriveFileUpdated); this.stream.on('drive_file_updated', this.onStreamDriveFileUpdated);
stream.on('drive_folder_created', this.onStreamDriveFolderCreated); this.stream.on('drive_folder_created', this.onStreamDriveFolderCreated);
stream.on('drive_folder_updated', this.onStreamDriveFolderUpdated); this.stream.on('drive_folder_updated', this.onStreamDriveFolderUpdated);
// Riotのバグでnullを渡しても""になる // Riotのバグでnullを渡しても""になる
// https://github.com/riot/riot/issues/2080 // https://github.com/riot/riot/issues/2080
@ -295,10 +293,10 @@
}); });
this.on('unmount', () => { this.on('unmount', () => {
stream.off('drive_file_created', this.onStreamDriveFileCreated); this.stream.off('drive_file_created', this.onStreamDriveFileCreated);
stream.off('drive_file_updated', this.onStreamDriveFileUpdated); this.stream.off('drive_file_updated', this.onStreamDriveFileUpdated);
stream.off('drive_folder_created', this.onStreamDriveFolderCreated); this.stream.off('drive_folder_created', this.onStreamDriveFolderCreated);
stream.off('drive_folder_updated', this.onStreamDriveFolderUpdated); this.stream.off('drive_folder_updated', this.onStreamDriveFolderUpdated);
}); });
this.onStreamDriveFileCreated = file => { this.onStreamDriveFileCreated = file => {

View file

@ -73,8 +73,6 @@
this.mixin('api'); this.mixin('api');
this.mixin('stream'); this.mixin('stream');
const stream = this.stream.event;
this.user = null; this.user = null;
this.userPromise = isPromise(this.opts.user) this.userPromise = isPromise(this.opts.user)
? this.opts.user ? this.opts.user
@ -88,14 +86,14 @@
init: false, init: false,
user: user user: user
}); });
stream.on('follow', this.onStreamFollow); this.stream.on('follow', this.onStreamFollow);
stream.on('unfollow', this.onStreamUnfollow); this.stream.on('unfollow', this.onStreamUnfollow);
}); });
}); });
this.on('unmount', () => { this.on('unmount', () => {
stream.off('follow', this.onStreamFollow); this.stream.off('follow', this.onStreamFollow);
stream.off('unfollow', this.onStreamUnfollow); this.stream.off('unfollow', this.onStreamUnfollow);
}); });
this.onStreamFollow = user => { this.onStreamFollow = user => {

View file

@ -61,13 +61,11 @@
this.mixin('api'); this.mixin('api');
this.mixin('stream'); this.mixin('stream');
const stream = this.stream.event;
this.images = []; this.images = [];
this.initializing = true; this.initializing = true;
this.on('mount', () => { this.on('mount', () => {
stream.on('drive_file_created', this.onStreamDriveFileCreated); this.stream.on('drive_file_created', this.onStreamDriveFileCreated);
this.api('drive/stream', { this.api('drive/stream', {
type: 'image/*', type: 'image/*',
@ -81,7 +79,7 @@
}); });
this.on('unmount', () => { this.on('unmount', () => {
stream.off('drive_file_created', this.onStreamDriveFileCreated); this.stream.off('drive_file_created', this.onStreamDriveFileCreated);
}); });
this.onStreamDriveFileCreated = file => { this.onStreamDriveFileCreated = file => {

View file

@ -36,17 +36,15 @@
this.mixin('api'); this.mixin('api');
this.mixin('stream'); this.mixin('stream');
const stream = this.stream.event;
this.isLoading = true; this.isLoading = true;
this.isEmpty = false; this.isEmpty = false;
this.moreLoading = false; this.moreLoading = false;
this.noFollowing = this.I.following_count == 0; this.noFollowing = this.I.following_count == 0;
this.on('mount', () => { this.on('mount', () => {
stream.on('post', this.onStreamPost); this.stream.on('post', this.onStreamPost);
stream.on('follow', this.onStreamFollow); this.stream.on('follow', this.onStreamFollow);
stream.on('unfollow', this.onStreamUnfollow); this.stream.on('unfollow', this.onStreamUnfollow);
document.addEventListener('keydown', this.onDocumentKeydown); document.addEventListener('keydown', this.onDocumentKeydown);
window.addEventListener('scroll', this.onScroll); window.addEventListener('scroll', this.onScroll);
@ -55,9 +53,9 @@
}); });
this.on('unmount', () => { this.on('unmount', () => {
stream.off('post', this.onStreamPost); this.stream.off('post', this.onStreamPost);
stream.off('follow', this.onStreamFollow); this.stream.off('follow', this.onStreamFollow);
stream.off('unfollow', this.onStreamUnfollow); this.stream.off('unfollow', this.onStreamUnfollow);
document.removeEventListener('keydown', this.onDocumentKeydown); document.removeEventListener('keydown', this.onDocumentKeydown);
window.removeEventListener('scroll', this.onScroll); window.removeEventListener('scroll', this.onScroll);

View file

@ -192,10 +192,8 @@
this.mixin('i'); this.mixin('i');
this.mixin('api'); this.mixin('api');
this.mixin('user-preview');
this.mixin('stream'); this.mixin('stream');
this.mixin('user-preview');
const stream = this.stream.event;
this.notifications = []; this.notifications = [];
this.loading = true; this.loading = true;
@ -208,11 +206,11 @@
}); });
}); });
stream.on('notification', this.onNotification); this.stream.on('notification', this.onNotification);
}); });
this.on('unmount', () => { this.on('unmount', () => {
stream.off('notification', this.onNotification); this.stream.off('notification', this.onNotification);
}); });
this.onNotification = notification => { this.onNotification = notification => {

View file

@ -14,8 +14,6 @@
this.mixin('api'); this.mixin('api');
this.mixin('stream'); this.mixin('stream');
const stream = this.stream.event;
this.unreadCount = 0; this.unreadCount = 0;
this.page = this.opts.mode || 'timeline'; this.page = this.opts.mode || 'timeline';
@ -26,12 +24,12 @@
}); });
document.title = 'Misskey'; document.title = 'Misskey';
Progress.start(); Progress.start();
stream.on('post', this.onStreamPost); this.stream.on('post', this.onStreamPost);
document.addEventListener('visibilitychange', this.windowOnVisibilitychange, false); document.addEventListener('visibilitychange', this.windowOnVisibilitychange, false);
}); });
this.on('unmount', () => { this.on('unmount', () => {
stream.off('post', this.onStreamPost); this.stream.off('post', this.onStreamPost);
document.removeEventListener('visibilitychange', this.windowOnVisibilitychange); document.removeEventListener('visibilitychange', this.windowOnVisibilitychange);
}); });

View file

@ -369,7 +369,7 @@
type: 'capture', type: 'capture',
id: this.p.id id: this.p.id
}); });
this.stream.event.on('post-updated', this.onStreamPostUpdated); this.stream.on('post-updated', this.onStreamPostUpdated);
}; };
this.decapture = () => { this.decapture = () => {
@ -377,7 +377,7 @@
type: 'decapture', type: 'decapture',
id: this.p.id id: this.p.id
}); });
this.stream.event.off('post-updated', this.onStreamPostUpdated); this.stream.off('post-updated', this.onStreamPostUpdated);
}; };
this.on('mount', () => { this.on('mount', () => {

View file

@ -99,13 +99,11 @@
this.mixin('api'); this.mixin('api');
this.mixin('stream'); this.mixin('stream');
const stream = this.stream.event;
this.page = this.opts.page; this.page = this.opts.page;
this.on('mount', () => { this.on('mount', () => {
stream.on('read_all_messaging_messages', this.onReadAllMessagingMessages); this.stream.on('read_all_messaging_messages', this.onReadAllMessagingMessages);
stream.on('unread_messaging_message', this.onUnreadMessagingMessage); this.stream.on('unread_messaging_message', this.onUnreadMessagingMessage);
// Fetch count of unread messaging messages // Fetch count of unread messaging messages
this.api('messaging/unread').then(res => { this.api('messaging/unread').then(res => {
@ -118,8 +116,8 @@
}); });
this.on('unmount', () => { this.on('unmount', () => {
stream.off('read_all_messaging_messages', this.onReadAllMessagingMessages); this.stream.off('read_all_messaging_messages', this.onReadAllMessagingMessages);
stream.off('unread_messaging_message', this.onUnreadMessagingMessage); this.stream.off('unread_messaging_message', this.onUnreadMessagingMessage);
}); });
this.onReadAllMessagingMessages = () => { this.onReadAllMessagingMessages = () => {

View file

@ -159,8 +159,6 @@
this.mixin('api'); this.mixin('api');
this.mixin('stream'); this.mixin('stream');
const stream = this.stream.event;
this.files = []; this.files = [];
this.folders = []; this.folders = [];
this.hierarchyFolders = []; this.hierarchyFolders = [];
@ -176,10 +174,10 @@
this.multiple =this.opts.multiple; this.multiple =this.opts.multiple;
this.on('mount', () => { this.on('mount', () => {
stream.on('drive_file_created', this.onStreamDriveFileCreated); this.stream.on('drive_file_created', this.onStreamDriveFileCreated);
stream.on('drive_file_updated', this.onStreamDriveFileUpdated); this.stream.on('drive_file_updated', this.onStreamDriveFileUpdated);
stream.on('drive_folder_created', this.onStreamDriveFolderCreated); this.stream.on('drive_folder_created', this.onStreamDriveFolderCreated);
stream.on('drive_folder_updated', this.onStreamDriveFolderUpdated); this.stream.on('drive_folder_updated', this.onStreamDriveFolderUpdated);
// Riotのバグでnullを渡しても""になる // Riotのバグでnullを渡しても""になる
// https://github.com/riot/riot/issues/2080 // https://github.com/riot/riot/issues/2080
@ -195,10 +193,10 @@
}); });
this.on('unmount', () => { this.on('unmount', () => {
stream.off('drive_file_created', this.onStreamDriveFileCreated); this.stream.off('drive_file_created', this.onStreamDriveFileCreated);
stream.off('drive_file_updated', this.onStreamDriveFileUpdated); this.stream.off('drive_file_updated', this.onStreamDriveFileUpdated);
stream.off('drive_folder_created', this.onStreamDriveFolderCreated); this.stream.off('drive_folder_created', this.onStreamDriveFolderCreated);
stream.off('drive_folder_updated', this.onStreamDriveFolderUpdated); this.stream.off('drive_folder_updated', this.onStreamDriveFolderUpdated);
}); });
this.onStreamDriveFileCreated = file => { this.onStreamDriveFileCreated = file => {

View file

@ -54,8 +54,6 @@
this.mixin('api'); this.mixin('api');
this.mixin('stream'); this.mixin('stream');
const stream = this.stream.event;
this.user = null; this.user = null;
this.userPromise = isPromise(this.opts.user) this.userPromise = isPromise(this.opts.user)
? this.opts.user ? this.opts.user
@ -69,14 +67,14 @@
init: false, init: false,
user: user user: user
}); });
stream.on('follow', this.onStreamFollow); this.stream.on('follow', this.onStreamFollow);
stream.on('unfollow', this.onStreamUnfollow); this.stream.on('unfollow', this.onStreamUnfollow);
}); });
}); });
this.on('unmount', () => { this.on('unmount', () => {
stream.off('follow', this.onStreamFollow); this.stream.off('follow', this.onStreamFollow);
stream.off('unfollow', this.onStreamUnfollow); this.stream.off('unfollow', this.onStreamUnfollow);
}); });
this.onStreamFollow = user => { this.onStreamFollow = user => {

View file

@ -9,8 +9,6 @@
this.mixin('api'); this.mixin('api');
this.mixin('stream'); this.mixin('stream');
const stream = this.stream.event;
this.init = new Promise((res, rej) => { this.init = new Promise((res, rej) => {
this.api('posts/timeline').then(posts => { this.api('posts/timeline').then(posts => {
res(posts); res(posts);
@ -19,15 +17,15 @@
}); });
this.on('mount', () => { this.on('mount', () => {
stream.on('post', this.onStreamPost); this.stream.on('post', this.onStreamPost);
stream.on('follow', this.onStreamFollow); this.stream.on('follow', this.onStreamFollow);
stream.on('unfollow', this.onStreamUnfollow); this.stream.on('unfollow', this.onStreamUnfollow);
}); });
this.on('unmount', () => { this.on('unmount', () => {
stream.off('post', this.onStreamPost); this.stream.off('post', this.onStreamPost);
stream.off('follow', this.onStreamFollow); this.stream.off('follow', this.onStreamFollow);
stream.off('unfollow', this.onStreamUnfollow); this.stream.off('unfollow', this.onStreamUnfollow);
}); });
this.more = () => { this.more = () => {

View file

@ -63,8 +63,6 @@
this.mixin('api'); this.mixin('api');
this.mixin('stream'); this.mixin('stream');
const stream = this.stream.event;
this.notifications = []; this.notifications = [];
this.loading = true; this.loading = true;
@ -78,11 +76,11 @@
this.trigger('fetched'); this.trigger('fetched');
}); });
stream.on('notification', this.onNotification); this.stream.on('notification', this.onNotification);
}); });
this.on('unmount', () => { this.on('unmount', () => {
stream.off('notification', this.onNotification); this.stream.off('notification', this.onNotification);
}); });
this.onNotification = notification => { this.onNotification = notification => {

View file

@ -15,8 +15,6 @@
this.mixin('i'); this.mixin('i');
this.mixin('stream'); this.mixin('stream');
const stream = this.stream.event;
this.unreadCount = 0; this.unreadCount = 0;
this.on('mount', () => { this.on('mount', () => {
@ -29,7 +27,7 @@
Progress.start(); Progress.start();
stream.on('post', this.onStreamPost); this.stream.on('post', this.onStreamPost);
document.addEventListener('visibilitychange', this.onVisibilitychange, false); document.addEventListener('visibilitychange', this.onVisibilitychange, false);
this.refs.ui.refs.home.on('loaded', () => { this.refs.ui.refs.home.on('loaded', () => {
@ -38,7 +36,7 @@
}); });
this.on('unmount', () => { this.on('unmount', () => {
stream.off('post', this.onStreamPost); this.stream.off('post', this.onStreamPost);
document.removeEventListener('visibilitychange', this.onVisibilitychange); document.removeEventListener('visibilitychange', this.onVisibilitychange);
}); });

View file

@ -345,7 +345,7 @@
type: 'capture', type: 'capture',
id: this.p.id id: this.p.id
}); });
this.stream.event.on('post-updated', this.onStreamPostUpdated); this.stream.on('post-updated', this.onStreamPostUpdated);
}; };
this.decapture = () => { this.decapture = () => {
@ -353,7 +353,7 @@
type: 'decapture', type: 'decapture',
id: this.p.id id: this.p.id
}); });
this.stream.event.off('post-updated', this.onStreamPostUpdated); this.stream.off('post-updated', this.onStreamPostUpdated);
}; };
this.on('mount', () => { this.on('mount', () => {

View file

@ -12,19 +12,16 @@
</style> </style>
<script> <script>
this.mixin('i'); this.mixin('i');
this.mixin('stream'); this.mixin('stream');
const stream = this.stream.event;
this.isDrawerOpening = false; this.isDrawerOpening = false;
this.on('mount', () => { this.on('mount', () => {
stream.on('notification', this.onStreamNotification); this.stream.on('notification', this.onStreamNotification);
}); });
this.on('unmount', () => { this.on('unmount', () => {
stream.off('notification', this.onStreamNotification); this.stream.off('notification', this.onStreamNotification);
}); });
this.toggleDrawer = () => { this.toggleDrawer = () => {