From 4f455eefe5af2914d7dece40e027ed35ec8a21b3 Mon Sep 17 00:00:00 2001 From: dave <starpumadev@gmail.com> Date: Mon, 11 Mar 2019 10:52:28 -0400 Subject: [PATCH 1/9] #433: do not remove the reply dialog --- src/components/conversation/conversation.js | 6 +++++- src/components/conversation/conversation.vue | 15 +++++++++----- src/components/status/status.js | 6 +++--- .../status_or_conversation.js | 6 +++++- .../status_or_conversation.vue | 20 +++++++++++++++++-- 5 files changed, 41 insertions(+), 12 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 48b8aaaa..95e484cd 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -30,7 +30,8 @@ const conversation = { }, props: [ 'statusoid', - 'collapsable' + 'collapsable', + 'replying' ], computed: { status () { @@ -102,6 +103,9 @@ const conversation = { }, setHighlight (id) { this.highlight = id + }, + toggleReplying () { + this.$emit('toggleReplying') } } } diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 5528fef6..42d009c9 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -10,14 +10,19 @@ <div class="timeline"> <status v-for="status in conversation" - @goto="setHighlight" :key="status.id" - :inlineExpanded="collapsable" :statusoid="status" - :expandable='false' :focused="focused(status.id)" + @goto="setHighlight" + @toggleReplying="toggleReplying" + :replying="replying && status.id === statusId" + :key="status.id" + :inlineExpanded="collapsable" + :statusoid="status" + :expandable='false' + :focused="focused(status.id)" :inConversation='true' :highlight="highlight" :replies="getReplies(status.id)" - class="status-fadein"> - </status> + class="status-fadein" + /> </div> </div> </div> diff --git a/src/components/status/status.js b/src/components/status/status.js index 9e18fe15..20ca86a6 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -25,11 +25,11 @@ const Status = { 'replies', 'isPreview', 'noHeading', - 'inlineExpanded' + 'inlineExpanded', + 'replying' ], data () { return { - replying: false, expanded: false, unmuted: false, userExpanded: false, @@ -307,7 +307,7 @@ const Status = { } }, toggleReplying () { - this.replying = !this.replying + this.$emit('toggleReplying') }, gotoOriginal (id) { // only handled by conversation, not status_or_conversation diff --git a/src/components/status_or_conversation/status_or_conversation.js b/src/components/status_or_conversation/status_or_conversation.js index 441552ca..749f7665 100644 --- a/src/components/status_or_conversation/status_or_conversation.js +++ b/src/components/status_or_conversation/status_or_conversation.js @@ -5,7 +5,8 @@ const statusOrConversation = { props: ['statusoid'], data () { return { - expanded: false + expanded: false, + replying: false } }, components: { @@ -15,6 +16,9 @@ const statusOrConversation = { methods: { toggleExpanded () { this.expanded = !this.expanded + }, + toggleReplying () { + this.replying = !this.replying } } } diff --git a/src/components/status_or_conversation/status_or_conversation.vue b/src/components/status_or_conversation/status_or_conversation.vue index 9647d5eb..43a60c3a 100644 --- a/src/components/status_or_conversation/status_or_conversation.vue +++ b/src/components/status_or_conversation/status_or_conversation.vue @@ -1,7 +1,23 @@ <template> <div> - <conversation v-if="expanded" @toggleExpanded="toggleExpanded" :collapsable="true" :statusoid="statusoid"></conversation> - <status v-if="!expanded" @toggleExpanded="toggleExpanded" :expandable="true" :inConversation="false" :focused="false" :statusoid="statusoid"></status> + <conversation + v-if="expanded" + @toggleExpanded="toggleExpanded" + @toggleReplying="toggleReplying" + :replying="replying" + :collapsable="true" + :statusoid="statusoid" + /> + <status + v-else + @toggleExpanded="toggleExpanded" + @toggleReplying="toggleReplying" + :replying="replying" + :expandable="true" + :inConversation="false" + :focused="false" + :statusoid="statusoid" + /> </div> </template> From 63d7c7bd80cf8028cdefee99c1cb75614385f96b Mon Sep 17 00:00:00 2001 From: dave <starpumadev@gmail.com> Date: Mon, 11 Mar 2019 16:24:37 -0400 Subject: [PATCH 2/9] #433: persistency of status form --- src/components/conversation/conversation.js | 36 +++++++++++++------ src/components/conversation/conversation.vue | 31 +++++++++++----- src/components/status/status.js | 7 ++-- .../status_or_conversation.js | 26 -------------- .../status_or_conversation.vue | 30 ---------------- src/components/timeline/timeline.js | 4 +-- src/components/timeline/timeline.vue | 8 ++++- 7 files changed, 60 insertions(+), 82 deletions(-) delete mode 100644 src/components/status_or_conversation/status_or_conversation.js delete mode 100644 src/components/status_or_conversation/status_or_conversation.vue diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 95e484cd..4cae0bdb 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -1,4 +1,4 @@ -import { reduce, filter } from 'lodash' +import { reduce, filter, findIndex } from 'lodash' import Status from '../status/status.vue' const sortById = (a, b) => { @@ -25,13 +25,13 @@ const sortAndFilterConversation = (conversation) => { const conversation = { data () { return { - highlight: null + highlight: null, + expanded: false } }, props: [ 'statusoid', - 'collapsable', - 'replying' + 'collapsable' ], computed: { status () { @@ -49,9 +49,18 @@ const conversation = { return [] } + if (!this.expanded) { + return [this.status] + } + const conversationId = this.status.statusnet_conversation_id const statuses = this.$store.state.statuses.allStatuses const conversation = filter(statuses, { statusnet_conversation_id: conversationId }) + + const statusIndex = findIndex(conversation, { id: this.statusId }) + if (statusIndex !== -1) { + conversation[statusIndex] = this.status + } return sortAndFilterConversation(conversation) }, replies () { @@ -75,11 +84,13 @@ const conversation = { components: { Status }, - created () { - this.fetchConversation() - }, watch: { - '$route': 'fetchConversation' + '$route': 'fetchConversation', + expanded (value) { + if (value) { + this.fetchConversation() + } + } }, methods: { fetchConversation () { @@ -99,13 +110,16 @@ const conversation = { return this.replies[id] || [] }, focused (id) { - return id === this.statusId + return this.expanded && id === this.statusId }, setHighlight (id) { this.highlight = id }, - toggleReplying () { - this.$emit('toggleReplying') + getHighlight () { + return this.expanded ? this.highlight : null + }, + toggleExpanded () { + this.expanded = !this.expanded } } } diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 42d009c9..b208d540 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -1,9 +1,9 @@ <template> - <div class="timeline panel panel-default"> - <div class="panel-heading conversation-heading"> + <div class="timeline panel-default" :class="[expanded ? 'panel' : 'panel-disabled']"> + <div v-if="expanded" class="panel-heading conversation-heading"> <span class="title"> {{ $t('timeline.conversation') }} </span> <span v-if="collapsable"> - <a href="#" @click.prevent="$emit('toggleExpanded')">{{ $t('timeline.collapse') }}</a> + <a href="#" @click.prevent="toggleExpanded">{{ $t('timeline.collapse') }}</a> </span> </div> <div class="panel-body"> @@ -11,15 +11,14 @@ <status v-for="status in conversation" @goto="setHighlight" - @toggleReplying="toggleReplying" - :replying="replying && status.id === statusId" + @toggleExpanded="toggleExpanded" :key="status.id" :inlineExpanded="collapsable" :statusoid="status" - :expandable='false' + :expandable='!expanded' :focused="focused(status.id)" - :inConversation='true' - :highlight="highlight" + :inConversation="expanded" + :highlight="getHighlight()" :replies="getReplies(status.id)" class="status-fadein" /> @@ -29,3 +28,19 @@ </template> <script src="./conversation.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.timeline { + .panel-disabled { + .status-el { + border-left: none; + border-bottom-width: 1px; + border-bottom-style: solid; + border-color: var(--border, $fallback--border); + border-radius: 0; + } + } +} +</style> diff --git a/src/components/status/status.js b/src/components/status/status.js index 20ca86a6..8e489704 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -25,11 +25,11 @@ const Status = { 'replies', 'isPreview', 'noHeading', - 'inlineExpanded', - 'replying' + 'inlineExpanded' ], data () { return { + replying: false, expanded: false, unmuted: false, userExpanded: false, @@ -307,10 +307,9 @@ const Status = { } }, toggleReplying () { - this.$emit('toggleReplying') + this.replying = !this.replying }, gotoOriginal (id) { - // only handled by conversation, not status_or_conversation if (this.inConversation) { this.$emit('goto', id) } diff --git a/src/components/status_or_conversation/status_or_conversation.js b/src/components/status_or_conversation/status_or_conversation.js deleted file mode 100644 index 749f7665..00000000 --- a/src/components/status_or_conversation/status_or_conversation.js +++ /dev/null @@ -1,26 +0,0 @@ -import Status from '../status/status.vue' -import Conversation from '../conversation/conversation.vue' - -const statusOrConversation = { - props: ['statusoid'], - data () { - return { - expanded: false, - replying: false - } - }, - components: { - Status, - Conversation - }, - methods: { - toggleExpanded () { - this.expanded = !this.expanded - }, - toggleReplying () { - this.replying = !this.replying - } - } -} - -export default statusOrConversation diff --git a/src/components/status_or_conversation/status_or_conversation.vue b/src/components/status_or_conversation/status_or_conversation.vue deleted file mode 100644 index 43a60c3a..00000000 --- a/src/components/status_or_conversation/status_or_conversation.vue +++ /dev/null @@ -1,30 +0,0 @@ -<template> - <div> - <conversation - v-if="expanded" - @toggleExpanded="toggleExpanded" - @toggleReplying="toggleReplying" - :replying="replying" - :collapsable="true" - :statusoid="statusoid" - /> - <status - v-else - @toggleExpanded="toggleExpanded" - @toggleReplying="toggleReplying" - :replying="replying" - :expandable="true" - :inConversation="false" - :focused="false" - :statusoid="statusoid" - /> - </div> -</template> - -<script src="./status_or_conversation.js"></script> - -<style lang="scss"> - .spacer { - height: 1em - } -</style> diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index c45f8947..1da7d5cc 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -1,6 +1,6 @@ import Status from '../status/status.vue' import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js' -import StatusOrConversation from '../status_or_conversation/status_or_conversation.vue' +import Conversation from '../conversation/conversation.vue' import { throttle } from 'lodash' const Timeline = { @@ -43,7 +43,7 @@ const Timeline = { }, components: { Status, - StatusOrConversation + Conversation }, created () { const store = this.$store diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 8f28d65c..e0a34bd1 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -16,7 +16,13 @@ </div> <div :class="classes.body"> <div class="timeline"> - <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status" class="status-fadein"></status-or-conversation> + <conversation + v-for="status in timeline.visibleStatuses" + class="status-fadein" + :key="status.id" + :statusoid="status" + :collapsable="true" + /> </div> </div> <div :class="classes.footer"> From 6a9159b25598d578018643673568bbcd06ea1e12 Mon Sep 17 00:00:00 2001 From: dave <starpumadev@gmail.com> Date: Mon, 25 Mar 2019 10:50:09 -0400 Subject: [PATCH 3/9] #433 - fix broken conversation page --- src/components/conversation-page/conversation-page.vue | 6 +++++- src/components/conversation/conversation.js | 8 ++++++-- src/components/conversation/conversation.vue | 4 ++-- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/conversation-page/conversation-page.vue b/src/components/conversation-page/conversation-page.vue index b03eea28..9e322cf5 100644 --- a/src/components/conversation-page/conversation-page.vue +++ b/src/components/conversation-page/conversation-page.vue @@ -1,5 +1,9 @@ <template> - <conversation :collapsable="false" :statusoid="statusoid"></conversation> + <conversation + :collapsable="false" + isPage="true" + :statusoid="statusoid" + ></conversation> </template> <script src="./conversation-page.js"></script> diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 4cae0bdb..5a9568a9 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -31,7 +31,8 @@ const conversation = { }, props: [ 'statusoid', - 'collapsable' + 'collapsable', + 'isPage' ], computed: { status () { @@ -49,7 +50,7 @@ const conversation = { return [] } - if (!this.expanded) { + if (!this.expanded && !this.isPage) { return [this.status] } @@ -79,6 +80,9 @@ const conversation = { i++ return result }, {}) + }, + isExpanded () { + return this.expanded || this.isPage } }, components: { diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index b208d540..3778cc15 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -1,6 +1,6 @@ <template> - <div class="timeline panel-default" :class="[expanded ? 'panel' : 'panel-disabled']"> - <div v-if="expanded" class="panel-heading conversation-heading"> + <div class="timeline panel-default" :class="[isExpanded ? 'panel' : 'panel-disabled']"> + <div v-if="isExpanded" class="panel-heading conversation-heading"> <span class="title"> {{ $t('timeline.conversation') }} </span> <span v-if="collapsable"> <a href="#" @click.prevent="toggleExpanded">{{ $t('timeline.collapse') }}</a> From 1a68a9db364de9511f89d39f12d329c92a532f04 Mon Sep 17 00:00:00 2001 From: dave <starpumadev@gmail.com> Date: Mon, 25 Mar 2019 14:55:58 -0400 Subject: [PATCH 4/9] #433 - Fix conversation page highlight, fetch conversation on converation page --- src/components/conversation/conversation.js | 7 ++++++- src/components/conversation/conversation.vue | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index c57c7e06..f8887557 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -36,6 +36,11 @@ const conversation = { 'collapsable', 'isPage' ], + created () { + if (this.isPage) { + this.fetchConversation() + } + }, computed: { status () { return this.statusoid @@ -140,7 +145,7 @@ const conversation = { this.highlight = id }, getHighlight () { - return this.expanded ? this.highlight : null + return this.isExpanded ? this.highlight : null }, toggleExpanded () { this.expanded = !this.expanded diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 3778cc15..043f3fb3 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -17,7 +17,7 @@ :statusoid="status" :expandable='!expanded' :focused="focused(status.id)" - :inConversation="expanded" + :inConversation="isExpanded" :highlight="getHighlight()" :replies="getReplies(status.id)" class="status-fadein" From 73dfb00be2037517ff5c62a3079c95f5f5b93563 Mon Sep 17 00:00:00 2001 From: dave <starpumadev@gmail.com> Date: Mon, 25 Mar 2019 14:59:47 -0400 Subject: [PATCH 5/9] #433 - remove needless nesting/bloating --- src/components/conversation/conversation.vue | 32 +++++++++----------- 1 file changed, 14 insertions(+), 18 deletions(-) diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 043f3fb3..c39a3ed9 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -6,24 +6,20 @@ <a href="#" @click.prevent="toggleExpanded">{{ $t('timeline.collapse') }}</a> </span> </div> - <div class="panel-body"> - <div class="timeline"> - <status - v-for="status in conversation" - @goto="setHighlight" - @toggleExpanded="toggleExpanded" - :key="status.id" - :inlineExpanded="collapsable" - :statusoid="status" - :expandable='!expanded' - :focused="focused(status.id)" - :inConversation="isExpanded" - :highlight="getHighlight()" - :replies="getReplies(status.id)" - class="status-fadein" - /> - </div> - </div> + <status + v-for="status in conversation" + @goto="setHighlight" + @toggleExpanded="toggleExpanded" + :key="status.id" + :inlineExpanded="collapsable" + :statusoid="status" + :expandable='!expanded' + :focused="focused(status.id)" + :inConversation="isExpanded" + :highlight="getHighlight()" + :replies="getReplies(status.id)" + class="status-fadein panel-body" + /> </div> </template> From c5ec4829a7a18b20a1525998ba27cc7af5a3da55 Mon Sep 17 00:00:00 2001 From: dave <starpumadev@gmail.com> Date: Mon, 25 Mar 2019 15:10:45 -0400 Subject: [PATCH 6/9] #433 - consider page on focused --- src/components/conversation/conversation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index f8887557..94709fd8 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -139,7 +139,7 @@ const conversation = { return this.replies[id] || [] }, focused (id) { - return this.expanded && id === this.statusId + return (this.expanded || this.isPage) && id === this.statusId }, setHighlight (id) { this.highlight = id From 467647d5d715730a14d41737e4326696ff971cc2 Mon Sep 17 00:00:00 2001 From: dave <starpumadev@gmail.com> Date: Mon, 25 Mar 2019 16:09:40 -0400 Subject: [PATCH 7/9] #433 - fix retweet abnormal behavior --- src/components/conversation/conversation.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 94709fd8..8ad1f44d 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -18,8 +18,13 @@ const sortById = (a, b) => { } } -const sortAndFilterConversation = (conversation) => { - conversation = filter(conversation, (status) => status.type !== 'retweet') +const sortAndFilterConversation = (conversation, statusoid) => { + if (statusoid.type === 'retweet') { + conversation = filter( + conversation, + (status) => (status.type === 'retweet' || status.id !== statusoid.retweeted_status.id) + ) + } return conversation.filter(_ => _).sort(sortById) } @@ -66,7 +71,7 @@ const conversation = { return [] } - if (!this.expanded && !this.isPage) { + if (!this.isExpanded) { return [this.status] } @@ -81,7 +86,7 @@ const conversation = { conversation[statusIndex] = this.status } - return sortAndFilterConversation(conversation) + return sortAndFilterConversation(conversation, this.status) }, replies () { let i = 1 @@ -139,7 +144,7 @@ const conversation = { return this.replies[id] || [] }, focused (id) { - return (this.expanded || this.isPage) && id === this.statusId + return (this.isExpanded) && id === this.status.id }, setHighlight (id) { this.highlight = id @@ -149,6 +154,9 @@ const conversation = { }, toggleExpanded () { this.expanded = !this.expanded + if (!this.expanded) { + this.setHighlight(null) + } } } } From 43e97e590c98d1f1bb500f96d2b604b968fbbbb3 Mon Sep 17 00:00:00 2001 From: dave <starpumadev@gmail.com> Date: Wed, 27 Mar 2019 16:00:54 -0400 Subject: [PATCH 8/9] #433 - sort conversation for retweets and clean up --- src/components/conversation/conversation.js | 18 +++++------------- src/components/status/status.vue | 4 ++-- 2 files changed, 7 insertions(+), 15 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 8ad1f44d..5357b67f 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -3,19 +3,9 @@ import { set } from 'vue' import Status from '../status/status.vue' const sortById = (a, b) => { - const seqA = Number(a.id) - const seqB = Number(b.id) - const isSeqA = !Number.isNaN(seqA) - const isSeqB = !Number.isNaN(seqB) - if (isSeqA && isSeqB) { - return seqA < seqB ? -1 : 1 - } else if (isSeqA && !isSeqB) { - return -1 - } else if (!isSeqA && isSeqB) { - return 1 - } else { - return a.id < b.id ? -1 : 1 - } + const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id + const idB = b.type === 'retweet' ? b.retweeted_status.id : b.id + return idA < idB ? -1 : 1 } const sortAndFilterConversation = (conversation, statusoid) => { @@ -24,6 +14,8 @@ const sortAndFilterConversation = (conversation, statusoid) => { conversation, (status) => (status.type === 'retweet' || status.id !== statusoid.retweeted_status.id) ) + } else { + conversation = filter(conversation, (status) => status.type !== 'retweet') } return conversation.filter(_ => _).sort(sortById) } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 1f6d0325..da329deb 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -12,7 +12,7 @@ </div> </template> <template v-else> - <div v-if="retweet && !noHeading" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info"> + <div v-if="retweet && !noHeading && !inConversation" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info"> <UserAvatar class="media-left" v-if="retweet" :betterShadow="betterShadow" :src="statusoid.user.profile_image_url_original"/> <div class="media-body faint"> <span class="user-name"> @@ -24,7 +24,7 @@ </div> </div> - <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status"> + <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]" :style="[ userStyle ]" class="media status"> <div v-if="!noHeading" class="media-left"> <router-link :to="userProfileLink" @click.stop.prevent.capture.native="toggleUserExpanded"> <UserAvatar :compact="compact" :betterShadow="betterShadow" :src="status.user.profile_image_url_original"/> From a39fc49e848c1444f76a7528eac4a7733199b336 Mon Sep 17 00:00:00 2001 From: dave <starpumadev@gmail.com> Date: Thu, 28 Mar 2019 10:02:33 -0400 Subject: [PATCH 9/9] #433 - update sort by for conversation --- src/components/conversation/conversation.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index f43f9c5e..69058bf6 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -5,7 +5,19 @@ import Status from '../status/status.vue' const sortById = (a, b) => { const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id const idB = b.type === 'retweet' ? b.retweeted_status.id : b.id - return idA < idB ? -1 : 1 + const seqA = Number(idA) + const seqB = Number(idB) + const isSeqA = !Number.isNaN(seqA) + const isSeqB = !Number.isNaN(seqB) + if (isSeqA && isSeqB) { + return seqA < seqB ? -1 : 1 + } else if (isSeqA && !isSeqB) { + return -1 + } else if (!isSeqA && isSeqB) { + return 1 + } else { + return idA < idB ? -1 : 1 + } } const sortAndFilterConversation = (conversation, statusoid) => {