From b6475958d03a1d91651e11498f31a1ad0fa01925 Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 20 Mar 2017 14:49:24 +0900 Subject: [PATCH] [Client] Refactoring --- src/web/app/common/scripts/stream.js | 13 +++++++------ src/web/app/common/tags/signin-history.tag | 6 ++---- src/web/app/common/tags/stream-indicator.tag | 4 ++-- src/web/app/desktop/tags/big-follow-button.tag | 10 ++++------ src/web/app/desktop/tags/drive/browser.tag | 18 ++++++++---------- src/web/app/desktop/tags/follow-button.tag | 10 ++++------ .../desktop/tags/home-widgets/photo-stream.tag | 6 ++---- .../app/desktop/tags/home-widgets/timeline.tag | 14 ++++++-------- src/web/app/desktop/tags/notifications.tag | 8 +++----- src/web/app/desktop/tags/pages/home.tag | 6 ++---- src/web/app/desktop/tags/timeline-post.tag | 4 ++-- src/web/app/desktop/tags/ui-header-nav.tag | 10 ++++------ src/web/app/mobile/tags/drive.tag | 18 ++++++++---------- src/web/app/mobile/tags/follow-button.tag | 10 ++++------ src/web/app/mobile/tags/home-timeline.tag | 14 ++++++-------- src/web/app/mobile/tags/notifications.tag | 6 ++---- src/web/app/mobile/tags/page/home.tag | 6 ++---- src/web/app/mobile/tags/timeline-post.tag | 4 ++-- src/web/app/mobile/tags/ui.tag | 7 ++----- 19 files changed, 72 insertions(+), 102 deletions(-) diff --git a/src/web/app/common/scripts/stream.js b/src/web/app/common/scripts/stream.js index 5296abfde..8004f11bc 100644 --- a/src/web/app/common/scripts/stream.js +++ b/src/web/app/common/scripts/stream.js @@ -8,12 +8,13 @@ class Connection { this.onOpen = this.onOpen.bind(this); this.onClose = this.onClose.bind(this); this.onMessage = this.onMessage.bind(this); + this.send = this.send.bind(this); this.close = this.close.bind(this); // ---------------------------------------- + riot.observable(this); + this.state = 'initializing'; - this.stateEv = riot.observable(); - this.event = riot.observable(); this.me = me; const host = CONFIG.apiUrl.replace('http', 'ws'); @@ -22,23 +23,23 @@ class Connection { this.socket.addEventListener('close', this.onClose); this.socket.addEventListener('message', this.onMessage); - this.event.on('i_updated', me.update); + this.on('i_updated', me.update); } onOpen() { this.state = 'connected'; - this.stateEv.trigger('connected'); + this.trigger('_connected_'); } onClose() { this.state = 'reconnecting'; - this.stateEv.trigger('closed'); + this.trigger('_closed_'); } onMessage(message) { try { 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) { // noop } diff --git a/src/web/app/common/tags/signin-history.tag b/src/web/app/common/tags/signin-history.tag index 00b0cecce..441e6b5bc 100644 --- a/src/web/app/common/tags/signin-history.tag +++ b/src/web/app/common/tags/signin-history.tag @@ -52,8 +52,6 @@ this.mixin('api'); this.mixin('stream'); - const stream = this.stream.event; - this.history = []; this.fetching = true; @@ -65,11 +63,11 @@ }); }); - stream.on('signin', this.onSignin); + this.stream.on('signin', this.onSignin); }); this.on('unmount', () => { - stream.off('signin', this.onSignin); + this.stream.off('signin', this.onSignin); }); this.onSignin = signin => { diff --git a/src/web/app/common/tags/stream-indicator.tag b/src/web/app/common/tags/stream-indicator.tag index 7127db8b3..0a48459d8 100644 --- a/src/web/app/common/tags/stream-indicator.tag +++ b/src/web/app/common/tags/stream-indicator.tag @@ -44,7 +44,7 @@ } }); - this.stream.stateEv.on('connected', () => { + this.stream.on('_connected_', () => { this.update(); setTimeout(() => { Velocity(this.root, { @@ -53,7 +53,7 @@ }, 1000); }); - this.stream.stateEv.on('closed', () => { + this.stream.on('_closed_', () => { this.update(); Velocity(this.root, { opacity: 1 diff --git a/src/web/app/desktop/tags/big-follow-button.tag b/src/web/app/desktop/tags/big-follow-button.tag index 376355414..86df2d492 100644 --- a/src/web/app/desktop/tags/big-follow-button.tag +++ b/src/web/app/desktop/tags/big-follow-button.tag @@ -76,8 +76,6 @@ this.mixin('api'); this.mixin('stream'); - const stream = this.stream.event; - this.user = null; this.userPromise = isPromise(this.opts.user) ? this.opts.user @@ -91,14 +89,14 @@ init: false, user: user }); - stream.on('follow', this.onStreamFollow); - stream.on('unfollow', this.onStreamUnfollow); + this.stream.on('follow', this.onStreamFollow); + this.stream.on('unfollow', this.onStreamUnfollow); }); }); this.on('unmount', () => { - stream.off('follow', this.onStreamFollow); - stream.off('unfollow', this.onStreamUnfollow); + this.stream.off('follow', this.onStreamFollow); + this.stream.off('unfollow', this.onStreamUnfollow); }); this.onStreamFollow = user => { diff --git a/src/web/app/desktop/tags/drive/browser.tag b/src/web/app/desktop/tags/drive/browser.tag index 3e06e807a..0e5463fcb 100644 --- a/src/web/app/desktop/tags/drive/browser.tag +++ b/src/web/app/desktop/tags/drive/browser.tag @@ -246,8 +246,6 @@ this.mixin('api'); this.mixin('stream'); - const stream = this.stream.event; - this.files = []; this.folders = []; this.hierarchyFolders = []; @@ -279,10 +277,10 @@ }); }); - stream.on('drive_file_created', this.onStreamDriveFileCreated); - stream.on('drive_file_updated', this.onStreamDriveFileUpdated); - stream.on('drive_folder_created', this.onStreamDriveFolderCreated); - stream.on('drive_folder_updated', this.onStreamDriveFolderUpdated); + this.stream.on('drive_file_created', this.onStreamDriveFileCreated); + this.stream.on('drive_file_updated', this.onStreamDriveFileUpdated); + this.stream.on('drive_folder_created', this.onStreamDriveFolderCreated); + this.stream.on('drive_folder_updated', this.onStreamDriveFolderUpdated); // Riotのバグでnullを渡しても""になる // https://github.com/riot/riot/issues/2080 @@ -295,10 +293,10 @@ }); this.on('unmount', () => { - stream.off('drive_file_created', this.onStreamDriveFileCreated); - stream.off('drive_file_updated', this.onStreamDriveFileUpdated); - stream.off('drive_folder_created', this.onStreamDriveFolderCreated); - stream.off('drive_folder_updated', this.onStreamDriveFolderUpdated); + this.stream.off('drive_file_created', this.onStreamDriveFileCreated); + this.stream.off('drive_file_updated', this.onStreamDriveFileUpdated); + this.stream.off('drive_folder_created', this.onStreamDriveFolderCreated); + this.stream.off('drive_folder_updated', this.onStreamDriveFolderUpdated); }); this.onStreamDriveFileCreated = file => { diff --git a/src/web/app/desktop/tags/follow-button.tag b/src/web/app/desktop/tags/follow-button.tag index d3e562c40..00ff686f6 100644 --- a/src/web/app/desktop/tags/follow-button.tag +++ b/src/web/app/desktop/tags/follow-button.tag @@ -73,8 +73,6 @@ this.mixin('api'); this.mixin('stream'); - const stream = this.stream.event; - this.user = null; this.userPromise = isPromise(this.opts.user) ? this.opts.user @@ -88,14 +86,14 @@ init: false, user: user }); - stream.on('follow', this.onStreamFollow); - stream.on('unfollow', this.onStreamUnfollow); + this.stream.on('follow', this.onStreamFollow); + this.stream.on('unfollow', this.onStreamUnfollow); }); }); this.on('unmount', () => { - stream.off('follow', this.onStreamFollow); - stream.off('unfollow', this.onStreamUnfollow); + this.stream.off('follow', this.onStreamFollow); + this.stream.off('unfollow', this.onStreamUnfollow); }); this.onStreamFollow = user => { diff --git a/src/web/app/desktop/tags/home-widgets/photo-stream.tag b/src/web/app/desktop/tags/home-widgets/photo-stream.tag index 1d66bcaad..c896746c1 100644 --- a/src/web/app/desktop/tags/home-widgets/photo-stream.tag +++ b/src/web/app/desktop/tags/home-widgets/photo-stream.tag @@ -61,13 +61,11 @@ this.mixin('api'); this.mixin('stream'); - const stream = this.stream.event; - this.images = []; this.initializing = true; this.on('mount', () => { - stream.on('drive_file_created', this.onStreamDriveFileCreated); + this.stream.on('drive_file_created', this.onStreamDriveFileCreated); this.api('drive/stream', { type: 'image/*', @@ -81,7 +79,7 @@ }); this.on('unmount', () => { - stream.off('drive_file_created', this.onStreamDriveFileCreated); + this.stream.off('drive_file_created', this.onStreamDriveFileCreated); }); this.onStreamDriveFileCreated = file => { diff --git a/src/web/app/desktop/tags/home-widgets/timeline.tag b/src/web/app/desktop/tags/home-widgets/timeline.tag index f4c870b99..a0a8790ea 100644 --- a/src/web/app/desktop/tags/home-widgets/timeline.tag +++ b/src/web/app/desktop/tags/home-widgets/timeline.tag @@ -36,17 +36,15 @@ this.mixin('api'); this.mixin('stream'); - const stream = this.stream.event; - this.isLoading = true; this.isEmpty = false; this.moreLoading = false; this.noFollowing = this.I.following_count == 0; this.on('mount', () => { - stream.on('post', this.onStreamPost); - stream.on('follow', this.onStreamFollow); - stream.on('unfollow', this.onStreamUnfollow); + this.stream.on('post', this.onStreamPost); + this.stream.on('follow', this.onStreamFollow); + this.stream.on('unfollow', this.onStreamUnfollow); document.addEventListener('keydown', this.onDocumentKeydown); window.addEventListener('scroll', this.onScroll); @@ -55,9 +53,9 @@ }); this.on('unmount', () => { - stream.off('post', this.onStreamPost); - stream.off('follow', this.onStreamFollow); - stream.off('unfollow', this.onStreamUnfollow); + this.stream.off('post', this.onStreamPost); + this.stream.off('follow', this.onStreamFollow); + this.stream.off('unfollow', this.onStreamUnfollow); document.removeEventListener('keydown', this.onDocumentKeydown); window.removeEventListener('scroll', this.onScroll); diff --git a/src/web/app/desktop/tags/notifications.tag b/src/web/app/desktop/tags/notifications.tag index 2a038b5e0..5d812895f 100644 --- a/src/web/app/desktop/tags/notifications.tag +++ b/src/web/app/desktop/tags/notifications.tag @@ -192,10 +192,8 @@ this.mixin('i'); this.mixin('api'); - this.mixin('user-preview'); this.mixin('stream'); - - const stream = this.stream.event; + this.mixin('user-preview'); this.notifications = []; this.loading = true; @@ -208,11 +206,11 @@ }); }); - stream.on('notification', this.onNotification); + this.stream.on('notification', this.onNotification); }); this.on('unmount', () => { - stream.off('notification', this.onNotification); + this.stream.off('notification', this.onNotification); }); this.onNotification = notification => { diff --git a/src/web/app/desktop/tags/pages/home.tag b/src/web/app/desktop/tags/pages/home.tag index 1bffbc7b4..09a663b6c 100644 --- a/src/web/app/desktop/tags/pages/home.tag +++ b/src/web/app/desktop/tags/pages/home.tag @@ -14,8 +14,6 @@ this.mixin('api'); this.mixin('stream'); - const stream = this.stream.event; - this.unreadCount = 0; this.page = this.opts.mode || 'timeline'; @@ -26,12 +24,12 @@ }); document.title = 'Misskey'; Progress.start(); - stream.on('post', this.onStreamPost); + this.stream.on('post', this.onStreamPost); document.addEventListener('visibilitychange', this.windowOnVisibilitychange, false); }); this.on('unmount', () => { - stream.off('post', this.onStreamPost); + this.stream.off('post', this.onStreamPost); document.removeEventListener('visibilitychange', this.windowOnVisibilitychange); }); diff --git a/src/web/app/desktop/tags/timeline-post.tag b/src/web/app/desktop/tags/timeline-post.tag index 220b8441b..0bec6e8cb 100644 --- a/src/web/app/desktop/tags/timeline-post.tag +++ b/src/web/app/desktop/tags/timeline-post.tag @@ -369,7 +369,7 @@ type: 'capture', id: this.p.id }); - this.stream.event.on('post-updated', this.onStreamPostUpdated); + this.stream.on('post-updated', this.onStreamPostUpdated); }; this.decapture = () => { @@ -377,7 +377,7 @@ type: 'decapture', id: this.p.id }); - this.stream.event.off('post-updated', this.onStreamPostUpdated); + this.stream.off('post-updated', this.onStreamPostUpdated); }; this.on('mount', () => { diff --git a/src/web/app/desktop/tags/ui-header-nav.tag b/src/web/app/desktop/tags/ui-header-nav.tag index 67ba47544..5ad0c9359 100644 --- a/src/web/app/desktop/tags/ui-header-nav.tag +++ b/src/web/app/desktop/tags/ui-header-nav.tag @@ -99,13 +99,11 @@ this.mixin('api'); this.mixin('stream'); - const stream = this.stream.event; - this.page = this.opts.page; this.on('mount', () => { - stream.on('read_all_messaging_messages', this.onReadAllMessagingMessages); - stream.on('unread_messaging_message', this.onUnreadMessagingMessage); + this.stream.on('read_all_messaging_messages', this.onReadAllMessagingMessages); + this.stream.on('unread_messaging_message', this.onUnreadMessagingMessage); // Fetch count of unread messaging messages this.api('messaging/unread').then(res => { @@ -118,8 +116,8 @@ }); this.on('unmount', () => { - stream.off('read_all_messaging_messages', this.onReadAllMessagingMessages); - stream.off('unread_messaging_message', this.onUnreadMessagingMessage); + this.stream.off('read_all_messaging_messages', this.onReadAllMessagingMessages); + this.stream.off('unread_messaging_message', this.onUnreadMessagingMessage); }); this.onReadAllMessagingMessages = () => { diff --git a/src/web/app/mobile/tags/drive.tag b/src/web/app/mobile/tags/drive.tag index 7770bd66b..dfccc41e3 100644 --- a/src/web/app/mobile/tags/drive.tag +++ b/src/web/app/mobile/tags/drive.tag @@ -159,8 +159,6 @@ this.mixin('api'); this.mixin('stream'); - const stream = this.stream.event; - this.files = []; this.folders = []; this.hierarchyFolders = []; @@ -176,10 +174,10 @@ this.multiple =this.opts.multiple; this.on('mount', () => { - stream.on('drive_file_created', this.onStreamDriveFileCreated); - stream.on('drive_file_updated', this.onStreamDriveFileUpdated); - stream.on('drive_folder_created', this.onStreamDriveFolderCreated); - stream.on('drive_folder_updated', this.onStreamDriveFolderUpdated); + this.stream.on('drive_file_created', this.onStreamDriveFileCreated); + this.stream.on('drive_file_updated', this.onStreamDriveFileUpdated); + this.stream.on('drive_folder_created', this.onStreamDriveFolderCreated); + this.stream.on('drive_folder_updated', this.onStreamDriveFolderUpdated); // Riotのバグでnullを渡しても""になる // https://github.com/riot/riot/issues/2080 @@ -195,10 +193,10 @@ }); this.on('unmount', () => { - stream.off('drive_file_created', this.onStreamDriveFileCreated); - stream.off('drive_file_updated', this.onStreamDriveFileUpdated); - stream.off('drive_folder_created', this.onStreamDriveFolderCreated); - stream.off('drive_folder_updated', this.onStreamDriveFolderUpdated); + this.stream.off('drive_file_created', this.onStreamDriveFileCreated); + this.stream.off('drive_file_updated', this.onStreamDriveFileUpdated); + this.stream.off('drive_folder_created', this.onStreamDriveFolderCreated); + this.stream.off('drive_folder_updated', this.onStreamDriveFolderUpdated); }); this.onStreamDriveFileCreated = file => { diff --git a/src/web/app/mobile/tags/follow-button.tag b/src/web/app/mobile/tags/follow-button.tag index 4f96afbdb..c37973367 100644 --- a/src/web/app/mobile/tags/follow-button.tag +++ b/src/web/app/mobile/tags/follow-button.tag @@ -54,8 +54,6 @@ this.mixin('api'); this.mixin('stream'); - const stream = this.stream.event; - this.user = null; this.userPromise = isPromise(this.opts.user) ? this.opts.user @@ -69,14 +67,14 @@ init: false, user: user }); - stream.on('follow', this.onStreamFollow); - stream.on('unfollow', this.onStreamUnfollow); + this.stream.on('follow', this.onStreamFollow); + this.stream.on('unfollow', this.onStreamUnfollow); }); }); this.on('unmount', () => { - stream.off('follow', this.onStreamFollow); - stream.off('unfollow', this.onStreamUnfollow); + this.stream.off('follow', this.onStreamFollow); + this.stream.off('unfollow', this.onStreamUnfollow); }); this.onStreamFollow = user => { diff --git a/src/web/app/mobile/tags/home-timeline.tag b/src/web/app/mobile/tags/home-timeline.tag index 7c929fc5a..aa12a7c10 100644 --- a/src/web/app/mobile/tags/home-timeline.tag +++ b/src/web/app/mobile/tags/home-timeline.tag @@ -9,8 +9,6 @@ this.mixin('api'); this.mixin('stream'); - const stream = this.stream.event; - this.init = new Promise((res, rej) => { this.api('posts/timeline').then(posts => { res(posts); @@ -19,15 +17,15 @@ }); this.on('mount', () => { - stream.on('post', this.onStreamPost); - stream.on('follow', this.onStreamFollow); - stream.on('unfollow', this.onStreamUnfollow); + this.stream.on('post', this.onStreamPost); + this.stream.on('follow', this.onStreamFollow); + this.stream.on('unfollow', this.onStreamUnfollow); }); this.on('unmount', () => { - stream.off('post', this.onStreamPost); - stream.off('follow', this.onStreamFollow); - stream.off('unfollow', this.onStreamUnfollow); + this.stream.off('post', this.onStreamPost); + this.stream.off('follow', this.onStreamFollow); + this.stream.off('unfollow', this.onStreamUnfollow); }); this.more = () => { diff --git a/src/web/app/mobile/tags/notifications.tag b/src/web/app/mobile/tags/notifications.tag index 4f49edd5a..d2396caa0 100644 --- a/src/web/app/mobile/tags/notifications.tag +++ b/src/web/app/mobile/tags/notifications.tag @@ -63,8 +63,6 @@ this.mixin('api'); this.mixin('stream'); - const stream = this.stream.event; - this.notifications = []; this.loading = true; @@ -78,11 +76,11 @@ this.trigger('fetched'); }); - stream.on('notification', this.onNotification); + this.stream.on('notification', this.onNotification); }); this.on('unmount', () => { - stream.off('notification', this.onNotification); + this.stream.off('notification', this.onNotification); }); this.onNotification = notification => { diff --git a/src/web/app/mobile/tags/page/home.tag b/src/web/app/mobile/tags/page/home.tag index 561e0be5f..fffb68532 100644 --- a/src/web/app/mobile/tags/page/home.tag +++ b/src/web/app/mobile/tags/page/home.tag @@ -15,8 +15,6 @@ this.mixin('i'); this.mixin('stream'); - const stream = this.stream.event; - this.unreadCount = 0; this.on('mount', () => { @@ -29,7 +27,7 @@ Progress.start(); - stream.on('post', this.onStreamPost); + this.stream.on('post', this.onStreamPost); document.addEventListener('visibilitychange', this.onVisibilitychange, false); this.refs.ui.refs.home.on('loaded', () => { @@ -38,7 +36,7 @@ }); this.on('unmount', () => { - stream.off('post', this.onStreamPost); + this.stream.off('post', this.onStreamPost); document.removeEventListener('visibilitychange', this.onVisibilitychange); }); diff --git a/src/web/app/mobile/tags/timeline-post.tag b/src/web/app/mobile/tags/timeline-post.tag index 7f02dd487..a492950fc 100644 --- a/src/web/app/mobile/tags/timeline-post.tag +++ b/src/web/app/mobile/tags/timeline-post.tag @@ -345,7 +345,7 @@ type: 'capture', id: this.p.id }); - this.stream.event.on('post-updated', this.onStreamPostUpdated); + this.stream.on('post-updated', this.onStreamPostUpdated); }; this.decapture = () => { @@ -353,7 +353,7 @@ type: 'decapture', id: this.p.id }); - this.stream.event.off('post-updated', this.onStreamPostUpdated); + this.stream.off('post-updated', this.onStreamPostUpdated); }; this.on('mount', () => { diff --git a/src/web/app/mobile/tags/ui.tag b/src/web/app/mobile/tags/ui.tag index 4c0e825a7..b047af264 100644 --- a/src/web/app/mobile/tags/ui.tag +++ b/src/web/app/mobile/tags/ui.tag @@ -12,19 +12,16 @@