[Client] Refactoring
This commit is contained in:
		| @@ -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 | ||||
| 		} | ||||
|   | ||||
| @@ -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 => { | ||||
|   | ||||
| @@ -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 | ||||
|   | ||||
| @@ -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 => { | ||||
|   | ||||
| @@ -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 => { | ||||
|   | ||||
| @@ -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 => { | ||||
|   | ||||
| @@ -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 => { | ||||
|   | ||||
| @@ -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); | ||||
|   | ||||
| @@ -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 => { | ||||
|   | ||||
| @@ -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); | ||||
| 		}); | ||||
|  | ||||
|   | ||||
| @@ -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', () => { | ||||
|   | ||||
| @@ -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 = () => { | ||||
|   | ||||
| @@ -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 => { | ||||
|   | ||||
| @@ -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 => { | ||||
|   | ||||
| @@ -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 = () => { | ||||
|   | ||||
| @@ -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 => { | ||||
|   | ||||
| @@ -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); | ||||
| 		}); | ||||
|  | ||||
|   | ||||
| @@ -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', () => { | ||||
|   | ||||
| @@ -12,19 +12,16 @@ | ||||
| 	</style> | ||||
| 	<script> | ||||
| 		this.mixin('i'); | ||||
|  | ||||
| 		this.mixin('stream'); | ||||
|  | ||||
| 		const stream = this.stream.event; | ||||
|  | ||||
| 		this.isDrawerOpening = false; | ||||
|  | ||||
| 		this.on('mount', () => { | ||||
| 			stream.on('notification', this.onStreamNotification); | ||||
| 			this.stream.on('notification', this.onStreamNotification); | ||||
| 		}); | ||||
|  | ||||
| 		this.on('unmount', () => { | ||||
| 			stream.off('notification', this.onStreamNotification); | ||||
| 			this.stream.off('notification', this.onStreamNotification); | ||||
| 		}); | ||||
|  | ||||
| 		this.toggleDrawer = () => { | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 syuilo
					syuilo