No OneTemporary
Actions

Size

44 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/CHANGELOG.md b/CHANGELOG.md
	index c11c3162ba..be68925b93 100644
	--- a/CHANGELOG.md
	+++ b/CHANGELOG.md
	@@ -1,228 +1,229 @@
	# Changelog
	All notable changes to this project will be documented in this file.

	The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).

	## [Unreleased]
	### Fixed
	- Button to remove uploaded media in post status form is now properly placed and sized.
	- Fixed shoutbox not working in mobile layout

	### Changed
	- Display 'people voted' instead of 'votes' for multi-choice polls
	+- Optimized chat to not get horrible performance after keeping the same chat open for a long time

	### Added
	- Added reason field for registration when approval is required

	## [2.2.3] - 2021-01-18
	### Added
	- Added Report button to status ellipsis menu for easier reporting

	### Fixed
	- Follows/Followers tabs on user profiles now display the content properly.
	- Handle punycode in screen names

	### Changed
	- Don't filter own posts when they hit your wordfilter
	- Language picker now uses native language names


	## [2.2.2] - 2020-12-22
	### Added
	- Mouseover titles for emojis in reaction picker
	- Support to input emoji into the search box in reaction picker
	- Added some missing unicode emoji
	- Added the upload limit to the Features panel in the About page
	- Support for solid color wallpaper, instance doesn't have to define a wallpaper anymore
	- Group staff members by role in the About page

	### Fixed
	- Fixed the occasional bug where screen would scroll 1px when typing into a reply form
	- Fixed timeline errors locking timelines
	- Fixed missing highlighted border in expanded conversations
	- Fixed custom emoji not working in profile field names
	- Fixed pinned statuses not appearing in user profiles
	- Fixed some elements not being keyboard navigation friendly
	- Fixed error handling when updating various profile images
	- Fixed your latest chat messages disappearing when closing chat view and opening it again during the same session
	- Fixed custom emoji not showing in poll options before voting
	- Fixed link color not applied to instance name in topbar

	### Changed
	- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers
	- Made reply/fav/repeat etc buttons easier to hit
	- Adjusted timeline menu clickable area to match the visible button
	- Moved external source link from status heading to the ellipsis menu
	- Disabled horizontal textarea resize
	- Wallpaper is now top-aligned, horizontally centered.


	## [2.2.1] - 2020-11-11
	### Fixed
	- Fixed regression in react popup alignment and overflowing


	## [2.2.0] - 2020-11-06
	### Added
	- New option to optimize timeline rendering to make the site more responsive (enabled by default)
	- New instance option `logoLeft` to move logo to the left side in desktop nav bar
	- Import/export a muted users
	- Proper handling of deletes when using websocket streaming
	- Added optimistic chat message sending, so you can start writing next message before the previous one has been sent
	- Added a small red badge to the favicon when there's unread notifications
	- Added the NSFW alert to link previews

	### Fixed
	- Fixed clicking NSFW hider through status popover
	- Fixed chat-view back button being hard to click
	- Fixed fresh chat notifications being cleared immediately while leaving the chat view and not having time to actually see the messages
	- Fixed multiple regressions in CSS styles
	- Fixed multiple issues with input fields when using CJK font as default
	- Fixed search field in navbar infringing into logo in some cases
	- Fixed not being able to load the chat history in vertical screens when the message list doesn't take the full height of the scrollable container on the first fetch.

	### Changed
	- Clicking immediately when timeline shifts is now blocked to prevent misclicks
	- Icons changed from fontello (FontAwesome 4 + others) to FontAwesome 5 due to problems with fontello.
	- Some icons changed for better accessibility (lock, globe)
	- Logo is now clickable
	- Changed default logo to SVG version


	## [2.1.2] - 2020-09-17
	### Fixed
	- Fixed chats list not updating its order when new messages come in
	- Fixed chat messages sometimes getting lost when you receive a message at the same time


	## [2.1.1] - 2020-09-08
	### Changed
	- Polls will be hidden with status content if "Collapse posts with subjects" is enabled and the post is collapsed.

	### Fixed
	- Network fetches don't pile up anymore but wait for previous ones to finish to reduce throttling.
	- Autocomplete won't stop at the second @, so it'll still work with "@lain@l" and not start over.
	- Fixed weird autocomplete behavior when you write ":custom_emoji: ?"


	## [2.1.0] - 2020-08-28
	### Added
	- Autocomplete domains from list of known instances
	- 'Bot' settings option and badge
	- Added profile meta data fields that can be set in profile settings
	- Added option to reset avatar/banner in profile settings
	- Descriptions can be set on uploaded files before posting
	- Added status preview option to preview your statuses before posting
	- When a post is a reply to an unavailable post, the 'Reply to'-text has a strike-through style
	- Added ability to see all favoriting or repeating users when hovering the number on highlighted statuses
	- Bookmarks

	### Changed
	- Change heart to thumbs up in reaction picker
	- Close the media modal on navigation events
	- Add colons to the emoji alt text, to make them copyable
	- Add better visual indication for drag-and-drop for files
	- When disabling attachments, the placeholder links now show an icon and the description instead of just IMAGE or VIDEO etc
	- Remove unnecessary options for 'automatic loading when loading older' and 'reply previews'
	- Greentext now has separate color slot for it
	- Removed the use of with_move parameters when fetching notifications
	- Push notifications now are the same as normal notfication, and are localized.
	- Updated Notification Settings to match new BE API

	### Fixed
	- Custom Emoji will display in poll options now.
	- Status ellipsis menu closes properly when selecting certain options
	- Cropped images look correct in Chrome
	- Newlines in the muted words settings work again
	- Clicking on non-latin hashtags won't open a new window
	- Uploading and drag-dropping multiple files works correctly now.
	- Subject field now appears disabled when posting
	- Fix status ellipsis menu being cut off in notifications column
	- Fixed autocomplete sometimes not returning the right user when there's already some results
	- Videos and audio and misc files show description as alt/title properly now
	- Clicking on non-image/video files no longer opens an empty modal
	- Audio files can now be played back in the frontend with hidden attachments
	- Videos are not cropped awkwardly in the uploads section anymore
	- Reply filtering options in Settings -> Filtering now work again using filtering on server
	- Don't show just blank-screen when cookies are disabled
	- Add status idempotency to prevent accidental double posting when posting returns an error
	- Weird bug related to post being sent seemingly after pasting with keyboard (hopefully)
	- Multiple issues with muted statuses/notifications

	## [2.0.5] - 2020-05-12
	### Added
	- Added private notifications option for push notifications
	- 'Copy link' button for statuses (in the ellipsis menu)

	### Changed
	- Registration page no longer requires email if the server is configured not to require it

	### Fixed
	- Status ellipsis menu closes properly when selecting certain options

	## [2.0.3] - 2020-05-02
	### Fixed
	- Show more/less works correctly with auto-collapsed subjects and long posts
	- RTL characters won't look messed up in notifications

	### Changed
	- Emoji autocomplete will match any part of the word and not just start, for example :drool will now helpfully suggest :blobcatdrool: and :blobcatdroolreach:

	### Added
	- Follow request notification support

	## [2.0.2] - 2020-04-08
	### Fixed
	- Favorite/Repeat avatars not showing up on private instances/non-public posts
	- Autocorrect getting triggered in the captcha field
	- Overflow on long domains in follow/move notifications

	### Changed
	- Polish translation updated

	## [2.0.0] - 2020-02-28
	### Added
	- Tons of color slots including ones for hover/pressed/toggled buttons
	- Experimental `--variable[,mod]` syntax support for color slots in themes. the `mod` makes color brighter/darker depending on background color (makes darker color brighter/darker depending on background color)
	- Paper theme by Shpuld
	- Icons in nav panel
	- Private mode support
	- Support for 'Move' type notifications
	- Pleroma AMOLED dark theme
	- User level domain mutes, under User Settings -> Mutes
	- Emoji reactions for statuses
	- MRF keyword policy disclosure
	### Changed
	- Updated Pleroma default themes
	- theme engine update to 3 (themes v2.1 introduction)
	- massive internal changes in theme engine - slowly away from "generate things separately with spaghetti code" towards "feed all data into single 'generateTheme' function and declare slot inheritance and all in a separate file"
	- Breezy theme updates to make it closer to actual Breeze in some aspects
	- when using `--variable` in shadows it no longer uses the actual CSS3 variable, instead it generates color from other slots
	- theme doesn't get saved to local storage when opening FE anonymously
	- Captcha now resets on failed registrations
	- Notifications column now cleans itself up to optimize performance when tab is left open for a long time
	- 403 messaging
	### Fixed
	- Fixed loader-spinner not disappearing when a status preview fails to load
	- anon viewers won't get theme data saved to local storage, so admin changing default theme will have an effect for users coming back to instance.
	- Single notifications left unread when hitting read on another device/tab
	- Registration fixed
	- Deactivation of remote accounts from frontend
	- Fixed NSFW unhiding not working with videos when using one-click unhiding/displaying
	- Improved performance of anything that uses popovers (most notably statuses)

	## [1.1.7 and earlier] - 2019-12-14
	### Added
	- Ability to hide/show repeats from user
	- User profile button clutter organized into a menu
	- Emoji picker
	- Started changelog anew
	- Ability to change user's email
	- About page
	- Added remote user redirect

	### Changed
	- changed the way fading effects for user profile/long statuses works, now uses css-mask instead of gradient background hacks which weren't exactly compatible with semi-transparent themes

	### Fixed
	- improved hotkey behavior on autocomplete popup
	diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
	index e57fcb91e7..2780be75e9 100644
	--- a/src/components/chat/chat.js
	+++ b/src/components/chat/chat.js
	@@ -1,401 +1,409 @@
	import _ from 'lodash'
	import { WSConnectionStatus } from '../../services/api/api.service.js'
	import { mapGetters, mapState } from 'vuex'
	import ChatMessage from '../chat_message/chat_message.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	import ChatTitle from '../chat_title/chat_title.vue'
	import chatService from '../../services/chat_service/chat_service.js'
	import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
	import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight, isScrollable } from './chat_layout_utils.js'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faChevronDown,
	faChevronLeft
	} from '@fortawesome/free-solid-svg-icons'
	import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'

	library.add(
	faChevronDown,
	faChevronLeft
	)

	const BOTTOMED_OUT_OFFSET = 10
	const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
	const SAFE_RESIZE_TIME_OFFSET = 100
	const MARK_AS_READ_DELAY = 1500
	const MAX_RETRIES = 10

	const Chat = {
	components: {
	ChatMessage,
	ChatTitle,
	PostStatusForm
	},
	data () {
	return {
	jumpToBottomButtonVisible: false,
	hoveredMessageChainId: undefined,
	lastScrollPosition: {},
	scrollableContainerHeight: '100%',
	errorLoadingChat: false,
	messageRetriers: {}
	}
	},
	created () {
	this.startFetching()
	window.addEventListener('resize', this.handleLayoutChange)
	},
	mounted () {
	window.addEventListener('scroll', this.handleScroll)
	if (typeof document.hidden !== 'undefined') {
	document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
	}

	this.$nextTick(() => {
	this.updateScrollableContainerHeight()
	this.handleResize()
	})
	this.setChatLayout()
	},
	destroyed () {
	window.removeEventListener('scroll', this.handleScroll)
	window.removeEventListener('resize', this.handleLayoutChange)
	this.unsetChatLayout()
	if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
	this.$store.dispatch('clearCurrentChat')
	},
	computed: {
	recipient () {
	return this.currentChat && this.currentChat.account
	},
	recipientId () {
	return this.$route.params.recipient_id
	},
	formPlaceholder () {
	if (this.recipient) {
	return this.$t('chats.message_user', { nickname: this.recipient.screen_name })
	} else {
	return ''
	}
	},
	chatViewItems () {
	return chatService.getView(this.currentChatMessageService)
	},
	newMessageCount () {
	return this.currentChatMessageService && this.currentChatMessageService.newMessageCount
	},
	streamingEnabled () {
	return this.mergedConfig.useStreamingApi && this.mastoUserSocketStatus === WSConnectionStatus.JOINED
	},
	...mapGetters([
	'currentChat',
	'currentChatMessageService',
	'findOpenedChatByRecipientId',
	'mergedConfig'
	]),
	...mapState({
	backendInteractor: state => state.api.backendInteractor,
	mastoUserSocketStatus: state => state.api.mastoUserSocketStatus,
	mobileLayout: state => state.interface.mobileLayout,
	layoutHeight: state => state.interface.layoutHeight,
	currentUser: state => state.users.currentUser
	})
	},
	watch: {
	chatViewItems () {
	// We don't want to scroll to the bottom on a new message when the user is viewing older messages.
	// Therefore we need to know whether the scroll position was at the bottom before the DOM update.
	const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET)
	this.$nextTick(() => {
	if (bottomedOutBeforeUpdate) {
	this.scrollDown()
	}
	})
	},
	'$route': function () {
	this.startFetching()
	},
	layoutHeight () {
	this.handleResize({ expand: true })
	},
	mastoUserSocketStatus (newValue) {
	if (newValue === WSConnectionStatus.JOINED) {
	this.fetchChat({ isFirstFetch: true })
	}
	}
	},
	methods: {
	// Used to animate the avatar near the first message of the message chain when any message belonging to the chain is hovered
	onMessageHover ({ isHovered, messageChainId }) {
	this.hoveredMessageChainId = isHovered ? messageChainId : undefined
	},
	onFilesDropped () {
	this.$nextTick(() => {
	this.handleResize()
	this.updateScrollableContainerHeight()
	})
	},
	handleVisibilityChange () {
	this.$nextTick(() => {
	if (!document.hidden && this.bottomedOut(BOTTOMED_OUT_OFFSET)) {
	this.scrollDown({ forceRead: true })
	}
	})
	},
	setChatLayout () {
	// This is a hacky way to adjust the global layout to the mobile chat (without modifying the rest of the app).
	// This layout prevents empty spaces from being visible at the bottom
	// of the chat on iOS Safari (`safe-area-inset`) when
	// - the on-screen keyboard appears and the user starts typing
	// - the user selects the text inside the input area
	// - the user selects and deletes the text that is multiple lines long
	// TODO: unify the chat layout with the global layout.
	let html = document.querySelector('html')
	if (html) {
	html.classList.add('chat-layout')
	}

	this.$nextTick(() => {
	this.updateScrollableContainerHeight()
	})
	},
	unsetChatLayout () {
	let html = document.querySelector('html')
	if (html) {
	html.classList.remove('chat-layout')
	}
	},
	handleLayoutChange () {
	this.$nextTick(() => {
	this.updateScrollableContainerHeight()
	this.scrollDown()
	})
	},
	// Ensures the proper position of the posting form in the mobile layout (the mobile browser panel does not overlap or hide it)
	updateScrollableContainerHeight () {
	const header = this.$refs.header
	const footer = this.$refs.footer
	const inner = this.mobileLayout ? window.document.body : this.$refs.inner
	this.scrollableContainerHeight = scrollableContainerHeight(inner, header, footer) + 'px'
	},
	// Preserves the scroll position when OSK appears or the posting form changes its height.
	handleResize (opts = {}) {
	const { expand = false, delayed = false } = opts

	if (delayed) {
	setTimeout(() => {
	this.handleResize({ ...opts, delayed: false })
	}, SAFE_RESIZE_TIME_OFFSET)
	return
	}

	this.$nextTick(() => {
	this.updateScrollableContainerHeight()

	const { offsetHeight = undefined } = this.lastScrollPosition
	this.lastScrollPosition = getScrollPosition(this.$refs.scrollable)

	const diff = this.lastScrollPosition.offsetHeight - offsetHeight
	if (diff < 0 \|\| (!this.bottomedOut() && expand)) {
	this.$nextTick(() => {
	this.updateScrollableContainerHeight()
	this.$refs.scrollable.scrollTo({
	top: this.$refs.scrollable.scrollTop - diff,
	left: 0
	})
	})
	}
	})
	},
	scrollDown (options = {}) {
	const { behavior = 'auto', forceRead = false } = options
	const scrollable = this.$refs.scrollable
	if (!scrollable) { return }
	this.$nextTick(() => {
	scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
	})
	if (forceRead) {
	this.readChat()
	}
	},
	readChat () {
	if (!(this.currentChatMessageService && this.currentChatMessageService.maxId)) { return }
	if (document.hidden) { return }
	const lastReadId = this.currentChatMessageService.maxId
	this.$store.dispatch('readChat', {
	id: this.currentChat.id,
	lastReadId
	})
	},
	bottomedOut (offset) {
	return isBottomedOut(this.$refs.scrollable, offset)
	},
	reachedTop () {
	const scrollable = this.$refs.scrollable
	return scrollable && scrollable.scrollTop <= 0
	},
	+ cullOlderCheck () {
	+ window.setTimeout(() => {
	+ if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
	+ this.$store.dispatch('cullOlderMessages', this.currentChatMessageService.chatId)
	+ }
	+ }, 5000)
	+ },
	handleScroll: _.throttle(function () {
	if (!this.currentChat) { return }

	if (this.reachedTop()) {
	this.fetchChat({ maxId: this.currentChatMessageService.minId })
	} else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
	this.jumpToBottomButtonVisible = false
	+ this.cullOlderCheck()
	if (this.newMessageCount > 0) {
	// Use a delay before marking as read to prevent situation where new messages
	// arrive just as you're leaving the view and messages that you didn't actually
	// get to see get marked as read.
	window.setTimeout(() => {
	// Don't mark as read if the element doesn't exist, user has left chat view
	if (this.$el) this.readChat()
	}, MARK_AS_READ_DELAY)
	}
	} else {
	this.jumpToBottomButtonVisible = true
	}
	}, 200),
	handleScrollUp (positionBeforeLoading) {
	const positionAfterLoading = getScrollPosition(this.$refs.scrollable)
	this.$refs.scrollable.scrollTo({
	top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
	left: 0
	})
	},
	fetchChat ({ isFirstFetch = false, fetchLatest = false, maxId }) {
	const chatMessageService = this.currentChatMessageService
	if (!chatMessageService) { return }
	if (fetchLatest && this.streamingEnabled) { return }

	const chatId = chatMessageService.chatId
	const fetchOlderMessages = !!maxId
	const sinceId = fetchLatest && chatMessageService.maxId

	return this.backendInteractor.chatMessages({ id: chatId, maxId, sinceId })
	.then((messages) => {
	// Clear the current chat in case we're recovering from a ws connection loss.
	if (isFirstFetch) {
	chatService.clear(chatMessageService)
	}

	const positionBeforeUpdate = getScrollPosition(this.$refs.scrollable)
	this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => {
	this.$nextTick(() => {
	if (fetchOlderMessages) {
	this.handleScrollUp(positionBeforeUpdate)
	}

	if (isFirstFetch) {
	this.updateScrollableContainerHeight()
	}

	// In vertical screens, the first batch of fetched messages may not always take the
	// full height of the scrollable container.
	// If this is the case, we want to fetch the messages until the scrollable container
	// is fully populated so that the user has the ability to scroll up and load the history.
	if (!isScrollable(this.$refs.scrollable) && messages.length > 0) {
	this.fetchChat({ maxId: this.currentChatMessageService.minId })
	}
	})
	})
	})
	},
	async startFetching () {
	let chat = this.findOpenedChatByRecipientId(this.recipientId)
	if (!chat) {
	try {
	chat = await this.backendInteractor.getOrCreateChat({ accountId: this.recipientId })
	} catch (e) {
	console.error('Error creating or getting a chat', e)
	this.errorLoadingChat = true
	}
	}
	if (chat) {
	this.$nextTick(() => {
	this.scrollDown({ forceRead: true })
	})
	this.$store.dispatch('addOpenedChat', { chat })
	this.doStartFetching()
	}
	},
	doStartFetching () {
	this.$store.dispatch('startFetchingCurrentChat', {
	fetcher: () => promiseInterval(() => this.fetchChat({ fetchLatest: true }), 5000)
	})
	this.fetchChat({ isFirstFetch: true })
	},
	handleAttachmentPosting () {
	this.$nextTick(() => {
	this.handleResize()
	// When the posting form size changes because of a media attachment, we need an extra resize
	// to account for the potential delay in the DOM update.
	setTimeout(() => {
	this.updateScrollableContainerHeight()
	}, SAFE_RESIZE_TIME_OFFSET)
	this.scrollDown({ forceRead: true })
	})
	},
	sendMessage ({ status, media, idempotencyKey }) {
	const params = {
	id: this.currentChat.id,
	content: status,
	idempotencyKey
	}

	if (media[0]) {
	params.mediaId = media[0].id
	}

	const fakeMessage = buildFakeMessage({
	attachments: media,
	chatId: this.currentChat.id,
	content: status,
	userId: this.currentUser.id,
	idempotencyKey
	})

	this.$store.dispatch('addChatMessages', {
	chatId: this.currentChat.id,
	messages: [fakeMessage]
	}).then(() => {
	this.handleAttachmentPosting()
	})

	return this.doSendMessage({ params, fakeMessage, retriesLeft: MAX_RETRIES })
	},
	doSendMessage ({ params, fakeMessage, retriesLeft = MAX_RETRIES }) {
	if (retriesLeft <= 0) return

	this.backendInteractor.sendChatMessage(params)
	.then(data => {
	this.$store.dispatch('addChatMessages', {
	chatId: this.currentChat.id,
	updateMaxId: false,
	messages: [{ ...data, fakeId: fakeMessage.id }]
	})

	return data
	})
	.catch(error => {
	console.error('Error sending message', error)
	this.$store.dispatch('handleMessageError', {
	chatId: this.currentChat.id,
	fakeId: fakeMessage.id,
	isRetry: retriesLeft !== MAX_RETRIES
	})
	if ((error.statusCode >= 500 && error.statusCode < 600) \|\| error.message === 'Failed to fetch') {
	this.messageRetriers[fakeMessage.id] = setTimeout(() => {
	this.doSendMessage({ params, fakeMessage, retriesLeft: retriesLeft - 1 })
	}, 1000 * (2 ** (MAX_RETRIES - retriesLeft)))
	}
	return {}
	})

	return Promise.resolve(fakeMessage)
	},
	goBack () {
	this.$router.push({ name: 'chats', params: { username: this.currentUser.screen_name } })
	}
	}
	}

	export default Chat
	diff --git a/src/modules/chats.js b/src/modules/chats.js
	index 0a373d88a8..69d683bd85 100644
	--- a/src/modules/chats.js
	+++ b/src/modules/chats.js
	@@ -1,234 +1,240 @@
	import Vue from 'vue'
	import { find, omitBy, orderBy, sumBy } from 'lodash'
	import chatService from '../services/chat_service/chat_service.js'
	import { parseChat, parseChatMessage } from '../services/entity_normalizer/entity_normalizer.service.js'
	import { maybeShowChatNotification } from '../services/chat_utils/chat_utils.js'
	import { promiseInterval } from '../services/promise_interval/promise_interval.js'

	const emptyChatList = () => ({
	data: [],
	idStore: {}
	})

	const defaultState = {
	chatList: emptyChatList(),
	chatListFetcher: null,
	openedChats: {},
	openedChatMessageServices: {},
	fetcher: undefined,
	currentChatId: null,
	lastReadMessageId: null
	}

	const getChatById = (state, id) => {
	return find(state.chatList.data, { id })
	}

	const sortedChatList = (state) => {
	return orderBy(state.chatList.data, ['updated_at'], ['desc'])
	}

	const unreadChatCount = (state) => {
	return sumBy(state.chatList.data, 'unread')
	}

	const chats = {
	state: { ...defaultState },
	getters: {
	currentChat: state => state.openedChats[state.currentChatId],
	currentChatMessageService: state => state.openedChatMessageServices[state.currentChatId],
	findOpenedChatByRecipientId: state => recipientId => find(state.openedChats, c => c.account.id === recipientId),
	sortedChatList,
	unreadChatCount
	},
	actions: {
	// Chat list
	startFetchingChats ({ dispatch, commit }) {
	const fetcher = () => dispatch('fetchChats', { latest: true })
	fetcher()
	commit('setChatListFetcher', {
	fetcher: () => promiseInterval(fetcher, 5000)
	})
	},
	stopFetchingChats ({ commit }) {
	commit('setChatListFetcher', { fetcher: undefined })
	},
	fetchChats ({ dispatch, rootState, commit }, params = {}) {
	return rootState.api.backendInteractor.chats()
	.then(({ chats }) => {
	dispatch('addNewChats', { chats })
	return chats
	})
	},
	addNewChats (store, { chats }) {
	const { commit, dispatch, rootGetters } = store
	const newChatMessageSideEffects = (chat) => {
	maybeShowChatNotification(store, chat)
	}
	commit('addNewChats', { dispatch, chats, rootGetters, newChatMessageSideEffects })
	},
	updateChat ({ commit }, { chat }) {
	commit('updateChat', { chat })
	},

	// Opened Chats
	startFetchingCurrentChat ({ commit, dispatch }, { fetcher }) {
	dispatch('setCurrentChatFetcher', { fetcher })
	},
	setCurrentChatFetcher ({ rootState, commit }, { fetcher }) {
	commit('setCurrentChatFetcher', { fetcher })
	},
	addOpenedChat ({ rootState, commit, dispatch }, { chat }) {
	commit('addOpenedChat', { dispatch, chat: parseChat(chat) })
	dispatch('addNewUsers', [chat.account])
	},
	addChatMessages ({ commit }, value) {
	commit('addChatMessages', { commit, ...value })
	},
	resetChatNewMessageCount ({ commit }, value) {
	commit('resetChatNewMessageCount', value)
	},
	clearCurrentChat ({ rootState, commit, dispatch }, value) {
	commit('setCurrentChatId', { chatId: undefined })
	commit('setCurrentChatFetcher', { fetcher: undefined })
	},
	readChat ({ rootState, commit, dispatch }, { id, lastReadId }) {
	const isNewMessage = rootState.chats.lastReadMessageId !== lastReadId

	dispatch('resetChatNewMessageCount')
	commit('readChat', { id, lastReadId })

	if (isNewMessage) {
	rootState.api.backendInteractor.readChat({ id, lastReadId })
	}
	},
	deleteChatMessage ({ rootState, commit }, value) {
	rootState.api.backendInteractor.deleteChatMessage(value)
	commit('deleteChatMessage', { commit, ...value })
	},
	resetChats ({ commit, dispatch }) {
	dispatch('clearCurrentChat')
	commit('resetChats', { commit })
	},
	clearOpenedChats ({ rootState, commit, dispatch, rootGetters }) {
	commit('clearOpenedChats', { commit })
	},
	handleMessageError ({ commit }, value) {
	commit('handleMessageError', { commit, ...value })
	+ },
	+ cullOlderMessages ({ commit }, chatId) {
	+ commit('cullOlderMessages', chatId)
	}
	},
	mutations: {
	setChatListFetcher (state, { commit, fetcher }) {
	const prevFetcher = state.chatListFetcher
	if (prevFetcher) {
	prevFetcher.stop()
	}
	state.chatListFetcher = fetcher && fetcher()
	},
	setCurrentChatFetcher (state, { fetcher }) {
	const prevFetcher = state.fetcher
	if (prevFetcher) {
	prevFetcher.stop()
	}
	state.fetcher = fetcher && fetcher()
	},
	addOpenedChat (state, { _dispatch, chat }) {
	state.currentChatId = chat.id
	Vue.set(state.openedChats, chat.id, chat)

	if (!state.openedChatMessageServices[chat.id]) {
	Vue.set(state.openedChatMessageServices, chat.id, chatService.empty(chat.id))
	}
	},
	setCurrentChatId (state, { chatId }) {
	state.currentChatId = chatId
	},
	addNewChats (state, { chats, newChatMessageSideEffects }) {
	chats.forEach((updatedChat) => {
	const chat = getChatById(state, updatedChat.id)

	if (chat) {
	const isNewMessage = (chat.lastMessage && chat.lastMessage.id) !== (updatedChat.lastMessage && updatedChat.lastMessage.id)
	chat.lastMessage = updatedChat.lastMessage
	chat.unread = updatedChat.unread
	chat.updated_at = updatedChat.updated_at
	if (isNewMessage && chat.unread) {
	newChatMessageSideEffects(updatedChat)
	}
	} else {
	state.chatList.data.push(updatedChat)
	Vue.set(state.chatList.idStore, updatedChat.id, updatedChat)
	}
	})
	},
	updateChat (state, { _dispatch, chat: updatedChat, _rootGetters }) {
	const chat = getChatById(state, updatedChat.id)
	if (chat) {
	chat.lastMessage = updatedChat.lastMessage
	chat.unread = updatedChat.unread
	chat.updated_at = updatedChat.updated_at
	}
	if (!chat) { state.chatList.data.unshift(updatedChat) }
	Vue.set(state.chatList.idStore, updatedChat.id, updatedChat)
	},
	deleteChat (state, { _dispatch, id, _rootGetters }) {
	state.chats.data = state.chats.data.filter(conversation =>
	conversation.last_status.id !== id
	)
	state.chats.idStore = omitBy(state.chats.idStore, conversation => conversation.last_status.id === id)
	},
	resetChats (state, { commit }) {
	state.chatList = emptyChatList()
	state.currentChatId = null
	commit('setChatListFetcher', { fetcher: undefined })
	for (const chatId in state.openedChats) {
	chatService.clear(state.openedChatMessageServices[chatId])
	Vue.delete(state.openedChats, chatId)
	Vue.delete(state.openedChatMessageServices, chatId)
	}
	},
	setChatsLoading (state, { value }) {
	state.chats.loading = value
	},
	addChatMessages (state, { chatId, messages, updateMaxId }) {
	const chatMessageService = state.openedChatMessageServices[chatId]
	if (chatMessageService) {
	chatService.add(chatMessageService, { messages: messages.map(parseChatMessage), updateMaxId })
	}
	},
	deleteChatMessage (state, { chatId, messageId }) {
	const chatMessageService = state.openedChatMessageServices[chatId]
	if (chatMessageService) {
	chatService.deleteMessage(chatMessageService, messageId)
	}
	},
	resetChatNewMessageCount (state, _value) {
	const chatMessageService = state.openedChatMessageServices[state.currentChatId]
	chatService.resetNewMessageCount(chatMessageService)
	},
	// Used when a connection loss occurs
	clearOpenedChats (state) {
	const currentChatId = state.currentChatId
	for (const chatId in state.openedChats) {
	if (currentChatId !== chatId) {
	chatService.clear(state.openedChatMessageServices[chatId])
	Vue.delete(state.openedChats, chatId)
	Vue.delete(state.openedChatMessageServices, chatId)
	}
	}
	},
	readChat (state, { id, lastReadId }) {
	state.lastReadMessageId = lastReadId
	const chat = getChatById(state, id)
	if (chat) {
	chat.unread = 0
	}
	},
	handleMessageError (state, { chatId, fakeId, isRetry }) {
	const chatMessageService = state.openedChatMessageServices[chatId]
	chatService.handleMessageError(chatMessageService, fakeId, isRetry)
	+ },
	+ cullOlderMessages (state, chatId) {
	+ chatService.cullOlderMessages(state.openedChatMessageServices[chatId])
	}
	}
	}

	export default chats
	diff --git a/src/services/chat_service/chat_service.js b/src/services/chat_service/chat_service.js
	index e653ebc120..92ff689d17 100644
	--- a/src/services/chat_service/chat_service.js
	+++ b/src/services/chat_service/chat_service.js
	@@ -1,209 +1,226 @@
	import _ from 'lodash'

	const empty = (chatId) => {
	return {
	idIndex: {},
	idempotencyKeyIndex: {},
	messages: [],
	newMessageCount: 0,
	lastSeenMessageId: '0',
	chatId: chatId,
	minId: undefined,
	maxId: undefined
	}
	}

	const clear = (storage) => {
	const failedMessageIds = []

	for (const message of storage.messages) {
	if (message.error) {
	failedMessageIds.push(message.id)
	} else {
	delete storage.idIndex[message.id]
	delete storage.idempotencyKeyIndex[message.idempotency_key]
	}
	}

	storage.messages = storage.messages.filter(m => failedMessageIds.includes(m.id))
	storage.newMessageCount = 0
	storage.lastSeenMessageId = '0'
	storage.minId = undefined
	storage.maxId = undefined
	}

	const deleteMessage = (storage, messageId) => {
	if (!storage) { return }
	storage.messages = storage.messages.filter(m => m.id !== messageId)
	delete storage.idIndex[messageId]

	if (storage.maxId === messageId) {
	const lastMessage = _.maxBy(storage.messages, 'id')
	storage.maxId = lastMessage.id
	}

	if (storage.minId === messageId) {
	const firstMessage = _.minBy(storage.messages, 'id')
	storage.minId = firstMessage.id
	}
	}

	+const cullOlderMessages = (storage) => {
	+ const maxIndex = storage.messages.length
	+ const minIndex = maxIndex - 50
	+ if (maxIndex <= 50) return
	+
	+ storage.messages = _.sortBy(storage.messages, ['id'])
	+ storage.minId = storage.messages[minIndex].id
	+ for (const message of storage.messages) {
	+ if (message.id < storage.minId) {
	+ delete storage.idIndex[message.id]
	+ delete storage.idempotencyKeyIndex[message.idempotency_key]
	+ }
	+ }
	+ storage.messages = storage.messages.slice(minIndex, maxIndex)
	+}
	+
	const handleMessageError = (storage, fakeId, isRetry) => {
	if (!storage) { return }
	const fakeMessage = storage.idIndex[fakeId]
	if (fakeMessage) {
	fakeMessage.error = true
	fakeMessage.pending = false
	if (!isRetry) {
	// Ensure the failed message doesn't stay at the bottom of the list.
	const lastPersistedMessage = _.orderBy(storage.messages, ['pending', 'id'], ['asc', 'desc'])[0]
	if (lastPersistedMessage) {
	const oldId = fakeMessage.id
	fakeMessage.id = `${lastPersistedMessage.id}-${new Date().getTime()}`
	storage.idIndex[fakeMessage.id] = fakeMessage
	delete storage.idIndex[oldId]
	}
	}
	}
	}

	const add = (storage, { messages: newMessages, updateMaxId = true }) => {
	if (!storage) { return }
	for (let i = 0; i < newMessages.length; i++) {
	const message = newMessages[i]

	// sanity check
	if (message.chat_id !== storage.chatId) { return }

	if (message.fakeId) {
	const fakeMessage = storage.idIndex[message.fakeId]
	if (fakeMessage) {
	// In case the same id exists (chat update before POST response)
	// make sure to remove the older duplicate message.
	if (storage.idIndex[message.id]) {
	delete storage.idIndex[message.id]
	storage.messages = storage.messages.filter(msg => msg.id !== message.id)
	}
	Object.assign(fakeMessage, message, { error: false })
	delete fakeMessage['fakeId']
	storage.idIndex[fakeMessage.id] = fakeMessage
	delete storage.idIndex[message.fakeId]

	return
	}
	}

	if (!storage.minId \|\| (!message.pending && message.id < storage.minId)) {
	storage.minId = message.id
	}

	if (!storage.maxId \|\| message.id > storage.maxId) {
	if (updateMaxId) {
	storage.maxId = message.id
	}
	}

	if (!storage.idIndex[message.id] && !isConfirmation(storage, message)) {
	if (storage.lastSeenMessageId < message.id) {
	storage.newMessageCount++
	}
	storage.idIndex[message.id] = message
	storage.messages.push(storage.idIndex[message.id])
	storage.idempotencyKeyIndex[message.idempotency_key] = true
	}
	}
	}

	const isConfirmation = (storage, message) => {
	if (!message.idempotency_key) return
	return storage.idempotencyKeyIndex[message.idempotency_key]
	}

	const resetNewMessageCount = (storage) => {
	if (!storage) { return }
	storage.newMessageCount = 0
	storage.lastSeenMessageId = storage.maxId
	}

	// Inserts date separators and marks the head and tail if it's the chain of messages made by the same user
	const getView = (storage) => {
	if (!storage) { return [] }

	const result = []
	const messages = _.orderBy(storage.messages, ['pending', 'id'], ['asc', 'asc'])
	const firstMessage = messages[0]
	let previousMessage = messages[messages.length - 1]
	let currentMessageChainId

	if (firstMessage) {
	const date = new Date(firstMessage.created_at)
	date.setHours(0, 0, 0, 0)
	result.push({
	type: 'date',
	date,
	id: date.getTime().toString()
	})
	}

	let afterDate = false

	for (let i = 0; i < messages.length; i++) {
	const message = messages[i]
	const nextMessage = messages[i + 1]

	const date = new Date(message.created_at)
	date.setHours(0, 0, 0, 0)

	// insert date separator and start a new message chain
	if (previousMessage && previousMessage.date < date) {
	result.push({
	type: 'date',
	date,
	id: date.getTime().toString()
	})

	previousMessage['isTail'] = true
	currentMessageChainId = undefined
	afterDate = true
	}

	const object = {
	type: 'message',
	data: message,
	date,
	id: message.id,
	messageChainId: currentMessageChainId
	}

	// end a message chian
	if ((nextMessage && nextMessage.account_id) !== message.account_id) {
	object['isTail'] = true
	currentMessageChainId = undefined
	}

	// start a new message chain
	if ((previousMessage && previousMessage.data && previousMessage.data.account_id) !== message.account_id \|\| afterDate) {
	currentMessageChainId = _.uniqueId()
	object['isHead'] = true
	object['messageChainId'] = currentMessageChainId
	}

	result.push(object)
	previousMessage = object
	afterDate = false
	}

	return result
	}

	const ChatService = {
	add,
	empty,
	getView,
	deleteMessage,
	+ cullOlderMessages,
	resetNewMessageCount,
	clear,
	handleMessageError
	}

	export default ChatService
	diff --git a/test/unit/specs/services/chat_service/chat_service.spec.js b/test/unit/specs/services/chat_service/chat_service.spec.js
	index 0251cae782..fbbca4361b 100644
	--- a/test/unit/specs/services/chat_service/chat_service.spec.js
	+++ b/test/unit/specs/services/chat_service/chat_service.spec.js
	@@ -1,91 +1,108 @@
	import chatService from '../../../../../src/services/chat_service/chat_service.js'

	const message1 = {
	id: '9wLkdcmQXD21Oy8lEX',
	idempotency_key: '1',
	created_at: (new Date('2020-06-22T18:45:53.000Z'))
	}

	const message2 = {
	id: '9wLkdp6ihaOVdNj8Wu',
	idempotency_key: '2',
	account_id: '9vmRb29zLQReckr5ay',
	created_at: (new Date('2020-06-22T18:45:56.000Z'))
	}

	const message3 = {
	id: '9wLke9zL4Dy4OZR2RM',
	idempotency_key: '3',
	account_id: '9vmRb29zLQReckr5ay',
	created_at: (new Date('2020-07-22T18:45:59.000Z'))
	}

	describe('chatService', () => {
	describe('.add', () => {
	it("Doesn't add duplicates", () => {
	const chat = chatService.empty()
	chatService.add(chat, { messages: [ message1 ] })
	chatService.add(chat, { messages: [ message1 ] })
	expect(chat.messages.length).to.eql(1)

	chatService.add(chat, { messages: [ message2 ] })
	expect(chat.messages.length).to.eql(2)
	})

	it('Updates minId and lastMessage and newMessageCount', () => {
	const chat = chatService.empty()

	chatService.add(chat, { messages: [ message1 ] })
	expect(chat.maxId).to.eql(message1.id)
	expect(chat.minId).to.eql(message1.id)
	expect(chat.newMessageCount).to.eql(1)

	chatService.add(chat, { messages: [ message2 ] })
	expect(chat.maxId).to.eql(message2.id)
	expect(chat.minId).to.eql(message1.id)
	expect(chat.newMessageCount).to.eql(2)

	chatService.resetNewMessageCount(chat)
	expect(chat.newMessageCount).to.eql(0)
	expect(chat.lastSeenMessageId).to.eql(message2.id)

	// Add message with higher id
	chatService.add(chat, { messages: [ message3 ] })
	expect(chat.newMessageCount).to.eql(1)
	})
	})

	describe('.delete', () => {
	it('Updates minId and lastMessage', () => {
	const chat = chatService.empty()

	chatService.add(chat, { messages: [ message1 ] })
	chatService.add(chat, { messages: [ message2 ] })
	chatService.add(chat, { messages: [ message3 ] })

	expect(chat.maxId).to.eql(message3.id)
	expect(chat.minId).to.eql(message1.id)

	chatService.deleteMessage(chat, message3.id)
	expect(chat.maxId).to.eql(message2.id)
	expect(chat.minId).to.eql(message1.id)

	chatService.deleteMessage(chat, message1.id)
	expect(chat.maxId).to.eql(message2.id)
	expect(chat.minId).to.eql(message2.id)
	})
	})

	describe('.getView', () => {
	it('Inserts date separators', () => {
	const chat = chatService.empty()

	chatService.add(chat, { messages: [ message1 ] })
	chatService.add(chat, { messages: [ message2 ] })
	chatService.add(chat, { messages: [ message3 ] })

	const view = chatService.getView(chat)
	expect(view.map(i => i.type)).to.eql(['date', 'message', 'message', 'date', 'message'])
	})
	})
	+
	+ describe('.cullOlderMessages', () => {
	+ it('keeps 50 newest messages and idIndex matches', () => {
	+ const chat = chatService.empty()
	+
	+ for (let i = 100; i > 0; i--) {
	+ // Use decimal values with toFixed to hack together constant length predictable strings
	+ chatService.add(chat, { messages: [{ ...message1, id: 'a' + (i / 1000).toFixed(3), idempotency_key: i }] })
	+ }
	+ chatService.cullOlderMessages(chat)
	+ expect(chat.messages.length).to.eql(50)
	+ expect(chat.messages[0].id).to.eql('a0.051')
	+ expect(chat.minId).to.eql('a0.051')
	+ expect(chat.messages[49].id).to.eql('a0.100')
	+ expect(Object.keys(chat.idIndex).length).to.eql(50)
	+ })
	+ })
	})

File Metadata

Mime Type: text/x-diff
Expires: Sat, Aug 29, 9:02 AM (1 d, 13 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1736964
Default Alt Text: (44 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions