Merge branch 'rc/2.1.2' into 'master'

Merge 2.1.2 to MASTER

See merge request pleroma/pleroma-fe!1236

CHANGELOG.md

@@ -4,6 +4,13 @@ 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]
+## [Unreleased patch]
+
+## [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
@@ -13,6 +20,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - 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

src/components/chat/chat.js

@@ -204,9 +204,9 @@ const Chat = {
       }
     },
     readChat () {
-      if (!(this.currentChatMessageService && this.currentChatMessageService.lastMessage)) { return }
+      if (!(this.currentChatMessageService && this.currentChatMessageService.maxId)) { return }
       if (document.hidden) { return }
-      const lastReadId = this.currentChatMessageService.lastMessage.id
+      const lastReadId = this.currentChatMessageService.maxId
       this.$store.dispatch('readChat', { id: this.currentChat.id, lastReadId })
     },
     bottomedOut (offset) {
@@ -244,7 +244,7 @@ const Chat = {
 
       const chatId = chatMessageService.chatId
       const fetchOlderMessages = !!maxId
-      const sinceId = fetchLatest && chatMessageService.lastMessage && chatMessageService.lastMessage.id
+      const sinceId = fetchLatest && chatMessageService.maxId
 
       this.backendInteractor.chatMessages({ id: chatId, maxId, sinceId })
         .then((messages) => {
@@ -303,7 +303,11 @@ const Chat = {
 
       return this.backendInteractor.sendChatMessage(params)
         .then(data => {
-          this.$store.dispatch('addChatMessages', { chatId: this.currentChat.id, messages: [data] }).then(() => {
+          this.$store.dispatch('addChatMessages', {
+            chatId: this.currentChat.id,
+            messages: [data],
+            updateMaxId: false
+          }).then(() => {
             this.$nextTick(() => {
               this.handleResize()
               // When the posting form size changes because of a media attachment, we need an extra resize

src/components/chat_panel/chat_panel.vue

@@ -63,7 +63,7 @@
         @click.stop.prevent="togglePanel"
       >
         <div class="title">
-          <i class="icon-comment-empty" />
+          <i class="icon-megaphone" />
           {{ $t('shoutbox.title') }}
         </div>
       </div>

src/components/contrast_ratio/contrast_ratio.vue

@@ -39,13 +39,16 @@
 export default {
   props: {
     large: {
-      required: false
+      required: false,
+      type: Boolean,
+      default: false
     },
     // TODO: Make theme switcher compute theme initially so that contrast
     // component won't be called without contrast data
     contrast: {
       required: false,
-      type: Object
+      type: Object,
+      default: () => ({})
     }
   },
   computed: {

src/components/poll/poll.vue

@@ -17,6 +17,7 @@
           <span class="result-percentage">
             {{ percentageForOption(option.votes_count) }}%
           </span>
+          <!-- eslint-disable-next-line vue/no-v-html -->
           <span v-html="option.title_html" />
         </div>
         <div

src/components/settings_modal/tabs/theme_tab/theme_tab.vue

@@ -278,7 +278,7 @@
             />
             <ContrastRatio
               :contrast="previewContrast.alertErrorText"
-              large="true"
+              large
             />
             <ColorInput
               v-model="alertWarningColorLocal"
@@ -294,7 +294,7 @@
             />
             <ContrastRatio
               :contrast="previewContrast.alertWarningText"
-              large="true"
+              large
             />
             <ColorInput
               v-model="alertNeutralColorLocal"
@@ -310,7 +310,7 @@
             />
             <ContrastRatio
               :contrast="previewContrast.alertNeutralText"
-              large="true"
+              large
             />
             <OpacityInput
               v-model="alertOpacityLocal"
@@ -334,7 +334,7 @@
             />
             <ContrastRatio
               :contrast="previewContrast.badgeNotificationText"
-              large="true"
+              large
             />
           </div>
           <div class="color-item">
@@ -359,7 +359,7 @@
             />
             <ContrastRatio
               :contrast="previewContrast.panelText"
-              large="true"
+              large
             />
             <ColorInput
               v-model="panelLinkColorLocal"
@@ -369,7 +369,7 @@
             />
             <ContrastRatio
               :contrast="previewContrast.panelLink"
-              large="true"
+              large
             />
           </div>
           <div class="color-item">
@@ -740,57 +740,57 @@
             <ColorInput
               v-model="chatBgColorLocal"
               name="chatBgColor"
-              :fallback="previewTheme.colors.bg || 1"
+              :fallback="previewTheme.colors.bg"
               :label="$t('settings.background')"
             />
             <h5>{{ $t('settings.style.advanced_colors.chat.incoming') }}</h5>
             <ColorInput
               v-model="chatMessageIncomingBgColorLocal"
               name="chatMessageIncomingBgColor"
-              :fallback="previewTheme.colors.bg || 1"
+              :fallback="previewTheme.colors.bg"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="chatMessageIncomingTextColorLocal"
               name="chatMessageIncomingTextColor"
-              :fallback="previewTheme.colors.text || 1"
+              :fallback="previewTheme.colors.text"
               :label="$t('settings.text')"
             />
             <ColorInput
               v-model="chatMessageIncomingLinkColorLocal"
               name="chatMessageIncomingLinkColor"
-              :fallback="previewTheme.colors.link || 1"
+              :fallback="previewTheme.colors.link"
               :label="$t('settings.links')"
             />
             <ColorInput
               v-model="chatMessageIncomingBorderColorLocal"
               name="chatMessageIncomingBorderLinkColor"
-              :fallback="previewTheme.colors.fg || 1"
+              :fallback="previewTheme.colors.fg"
               :label="$t('settings.style.advanced_colors.chat.border')"
             />
             <h5>{{ $t('settings.style.advanced_colors.chat.outgoing') }}</h5>
             <ColorInput
               v-model="chatMessageOutgoingBgColorLocal"
               name="chatMessageOutgoingBgColor"
-              :fallback="previewTheme.colors.bg || 1"
+              :fallback="previewTheme.colors.bg"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="chatMessageOutgoingTextColorLocal"
               name="chatMessageOutgoingTextColor"
-              :fallback="previewTheme.colors.text || 1"
+              :fallback="previewTheme.colors.text"
               :label="$t('settings.text')"
             />
             <ColorInput
               v-model="chatMessageOutgoingLinkColorLocal"
               name="chatMessageOutgoingLinkColor"
-              :fallback="previewTheme.colors.link || 1"
+              :fallback="previewTheme.colors.link"
               :label="$t('settings.links')"
             />
             <ColorInput
               v-model="chatMessageOutgoingBorderColorLocal"
               name="chatMessageOutgoingBorderLinkColor"
-              :fallback="previewTheme.colors.bg || 1"
+              :fallback="previewTheme.colors.bg"
               :label="$t('settings.style.advanced_colors.chat.border')"
             />
           </div>

src/components/side_drawer/side_drawer.vue

@@ -90,7 +90,7 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'chat' }">
-            <i class="button-icon icon-chat" /> {{ $t("nav.chat") }}
+            <i class="button-icon icon-megaphone" /> {{ $t("shoutbox.title") }}
           </router-link>
         </li>
       </ul>

src/i18n/en.json

@@ -113,7 +113,6 @@
     "about": "About",
     "administration": "Administration",
     "back": "Back",
-    "chat": "Local Chat",
     "friend_requests": "Follow Requests",
     "mentions": "Mentions",
     "interactions": "Interactions",

src/modules/chats.js

@@ -143,6 +143,7 @@ const chats = {
           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)
           }
@@ -181,30 +182,16 @@ const chats = {
     setChatsLoading (state, { value }) {
       state.chats.loading = value
     },
-    addChatMessages (state, { commit, chatId, messages }) {
+    addChatMessages (state, { chatId, messages, updateMaxId }) {
       const chatMessageService = state.openedChatMessageServices[chatId]
       if (chatMessageService) {
-        chatService.add(chatMessageService, { messages: messages.map(parseChatMessage) })
-        commit('refreshLastMessage', { chatId })
+        chatService.add(chatMessageService, { messages: messages.map(parseChatMessage), updateMaxId })
       }
     },
-    refreshLastMessage (state, { chatId }) {
-      const chatMessageService = state.openedChatMessageServices[chatId]
-      if (chatMessageService) {
-        const chat = getChatById(state, chatId)
-        if (chat) {
-          chat.lastMessage = chatMessageService.lastMessage
-          if (chatMessageService.lastMessage) {
-            chat.updated_at = chatMessageService.lastMessage.created_at
-          }
-        }
-      }
-    },
-    deleteChatMessage (state, { commit, chatId, messageId }) {
+    deleteChatMessage (state, { chatId, messageId }) {
       const chatMessageService = state.openedChatMessageServices[chatId]
       if (chatMessageService) {
         chatService.deleteMessage(chatMessageService, messageId)
-        commit('refreshLastMessage', { chatId })
       }
     },
     resetChatNewMessageCount (state, _value) {

src/services/chat_service/chat_service.js

@@ -8,7 +8,7 @@ const empty = (chatId) => {
     lastSeenTimestamp: 0,
     chatId: chatId,
     minId: undefined,
-    lastMessage: undefined
+    maxId: undefined
   }
 }
 
@@ -18,7 +18,7 @@ const clear = (storage) => {
   storage.newMessageCount = 0
   storage.lastSeenTimestamp = 0
   storage.minId = undefined
-  storage.lastMessage = undefined
+  storage.maxId = undefined
 }
 
 const deleteMessage = (storage, messageId) => {
@@ -26,8 +26,9 @@ const deleteMessage = (storage, messageId) => {
   storage.messages = storage.messages.filter(m => m.id !== messageId)
   delete storage.idIndex[messageId]
 
-  if (storage.lastMessage && (storage.lastMessage.id === messageId)) {
-    storage.lastMessage = _.maxBy(storage.messages, 'id')
+  if (storage.maxId === messageId) {
+    const lastMessage = _.maxBy(storage.messages, 'id')
+    storage.maxId = lastMessage.id
   }
 
   if (storage.minId === messageId) {
@@ -36,7 +37,7 @@ const deleteMessage = (storage, messageId) => {
   }
 }
 
-const add = (storage, { messages: newMessages }) => {
+const add = (storage, { messages: newMessages, updateMaxId = true }) => {
   if (!storage) { return }
   for (let i = 0; i < newMessages.length; i++) {
     const message = newMessages[i]
@@ -48,8 +49,10 @@ const add = (storage, { messages: newMessages }) => {
       storage.minId = message.id
     }
 
-    if (!storage.lastMessage || message.id > storage.lastMessage.id) {
-      storage.lastMessage = message
+    if (!storage.maxId || message.id > storage.maxId) {
+      if (updateMaxId) {
+        storage.maxId = message.id
+      }
     }
 
     if (!storage.idIndex[message.id]) {

static/fontello.json

@@ -405,6 +405,12 @@
       "css": "block",
       "code": 59434,
       "src": "fontawesome"
+    },
+    {
+      "uid": "3e674995cacc2b09692c096ea7eb6165",
+      "css": "megaphone",
+      "code": 59435,
+      "src": "fontawesome"
     }
   ]
 }

test/unit/specs/services/chat_service/chat_service.spec.js

@@ -33,12 +33,12 @@ describe('chatService', () => {
       const chat = chatService.empty()
 
       chatService.add(chat, { messages: [ message1 ] })
-      expect(chat.lastMessage.id).to.eql(message1.id)
+      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.lastMessage.id).to.eql(message2.id)
+      expect(chat.maxId).to.eql(message2.id)
       expect(chat.minId).to.eql(message1.id)
       expect(chat.newMessageCount).to.eql(2)
 
@@ -60,15 +60,15 @@ describe('chatService', () => {
       chatService.add(chat, { messages: [ message2 ] })
       chatService.add(chat, { messages: [ message3 ] })
 
-      expect(chat.lastMessage.id).to.eql(message3.id)
+      expect(chat.maxId).to.eql(message3.id)
       expect(chat.minId).to.eql(message1.id)
 
       chatService.deleteMessage(chat, message3.id)
-      expect(chat.lastMessage.id).to.eql(message2.id)
+      expect(chat.maxId).to.eql(message2.id)
       expect(chat.minId).to.eql(message1.id)
 
       chatService.deleteMessage(chat, message1.id)
-      expect(chat.lastMessage.id).to.eql(message2.id)
+      expect(chat.maxId).to.eql(message2.id)
       expect(chat.minId).to.eql(message2.id)
     })
   })