mirror of
https://github.com/h3poteto/whalebird-desktop
synced 2025-02-09 08:18:44 +01:00
Remove marker in mentions
This commit is contained in:
parent
dad54b435e
commit
04467896df
@ -3,25 +3,18 @@
|
||||
<div></div>
|
||||
<DynamicScroller :items="mentions" :min-item-size="86" id="scroller" class="scroller" ref="scroller">
|
||||
<template v-slot="{ item, index, active }">
|
||||
<template v-if="item.id === 'loading-card'">
|
||||
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.id]" :data-index="index" :watchData="true">
|
||||
<StatusLoading :since_id="item.since_id" :max_id="item.max_id" :loading="loadingMore" @load_since="fetchMentionsSince" />
|
||||
</DynamicScrollerItem>
|
||||
</template>
|
||||
<template v-else>
|
||||
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.url]" :data-index="index" :watchData="true">
|
||||
<notification
|
||||
:message="item"
|
||||
:focused="item.id === focusedId"
|
||||
:overlaid="modalOpened"
|
||||
:filters="[]"
|
||||
v-on:update="updateToot"
|
||||
@focusRight="focusSidebar"
|
||||
@selectNotification="focusNotification(item)"
|
||||
>
|
||||
</notification>
|
||||
</DynamicScrollerItem>
|
||||
</template>
|
||||
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.url]" :data-index="index" :watchData="true">
|
||||
<notification
|
||||
:message="item"
|
||||
:focused="item.id === focusedId"
|
||||
:overlaid="modalOpened"
|
||||
:filters="[]"
|
||||
v-on:update="updateToot"
|
||||
@focusRight="focusSidebar"
|
||||
@selectNotification="focusNotification(item)"
|
||||
>
|
||||
</notification>
|
||||
</DynamicScrollerItem>
|
||||
</template>
|
||||
</DynamicScroller>
|
||||
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
|
||||
@ -33,9 +26,8 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import { computed, defineComponent, onBeforeUpdate, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import { useMagicKeys, whenever, and } from '@vueuse/core'
|
||||
import moment from 'moment'
|
||||
import { useI18next } from 'vue3-i18next'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { Entity } from 'megalodon'
|
||||
@ -63,7 +55,6 @@ export default defineComponent({
|
||||
const { j, k, Ctrl_r } = useMagicKeys()
|
||||
|
||||
const focusedId = ref<string | null>(null)
|
||||
const loadingMore = ref(false)
|
||||
const scroller = ref<any>()
|
||||
|
||||
const mentions = computed<Array<Entity.Notification | LoadingCard>>(() => store.getters[`${space}/mentions`])
|
||||
@ -78,10 +69,6 @@ export default defineComponent({
|
||||
onMounted(() => {
|
||||
store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_MENTIONS}`, false)
|
||||
document.getElementById('scroller')?.addEventListener('scroll', onScroll)
|
||||
|
||||
if (heading.value && mentions.value.length > 0) {
|
||||
store.dispatch(`${space}/${ACTION_TYPES.SAVE_MARKER}`)
|
||||
}
|
||||
})
|
||||
onBeforeUpdate(() => {
|
||||
if (store.state.TimelineSpace.SideMenu.unreadMentions && heading.value) {
|
||||
@ -104,15 +91,6 @@ export default defineComponent({
|
||||
})
|
||||
}
|
||||
})
|
||||
watch(
|
||||
mentions,
|
||||
(newVal, _oldVal) => {
|
||||
if (heading.value && newVal.length > 0) {
|
||||
store.dispatch(`${space}/${ACTION_TYPES.SAVE_MARKER}`)
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
watch(focusedId, (newVal, _oldVal) => {
|
||||
if (newVal && heading.value) {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
|
||||
@ -153,20 +131,11 @@ export default defineComponent({
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
|
||||
} else if ((event.target as HTMLElement)!.scrollTop <= 10 && !heading.value) {
|
||||
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
|
||||
store.dispatch(`${space}/${ACTION_TYPES.SAVE_MARKER}`)
|
||||
}
|
||||
}
|
||||
const updateToot = (message: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
|
||||
}
|
||||
const fetchMentionsSince = (since_id: string) => {
|
||||
loadingMore.value = true
|
||||
store.dispatch(`${space}/${ACTION_TYPES.FETCH_MENTIONS_SINCE}`, since_id).finally(() => {
|
||||
setTimeout(() => {
|
||||
loadingMore.value = false
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
const reload = async () => {
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
|
||||
try {
|
||||
@ -203,8 +172,6 @@ export default defineComponent({
|
||||
return {
|
||||
mentions,
|
||||
scroller,
|
||||
loadingMore,
|
||||
fetchMentionsSince,
|
||||
focusedId,
|
||||
modalOpened,
|
||||
updateToot,
|
||||
|
@ -33,9 +33,8 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed, onMounted, onBeforeUpdate, onBeforeUnmount, onUnmounted, watch } from 'vue'
|
||||
import { defineComponent, ref, computed, onMounted, onBeforeUpdate, onUnmounted, watch } from 'vue'
|
||||
import { useMagicKeys, whenever, and } from '@vueuse/core'
|
||||
import moment from 'moment'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Entity } from 'megalodon'
|
||||
import Notification from '@/components/organisms/Notification.vue'
|
||||
|
@ -1,11 +1,6 @@
|
||||
import generator, { Entity, NotificationType } from 'megalodon'
|
||||
import { Module, MutationTree, ActionTree, GetterTree } from 'vuex'
|
||||
import { RootState } from '@/store'
|
||||
import { MyWindow } from '~/src/types/global'
|
||||
import { LoadingCard } from '@/types/loading-card'
|
||||
import { LocalMarker } from '~/src/types/localMarker'
|
||||
|
||||
const win = (window as any) as MyWindow
|
||||
|
||||
const excludes: Array<string> = [
|
||||
NotificationType.Follow,
|
||||
@ -19,7 +14,7 @@ const excludes: Array<string> = [
|
||||
export type MentionsState = {
|
||||
lazyLoading: boolean
|
||||
heading: boolean
|
||||
mentions: Array<Entity.Notification | LoadingCard>
|
||||
mentions: Array<Entity.Notification>
|
||||
}
|
||||
|
||||
const state = (): MentionsState => ({
|
||||
@ -37,8 +32,7 @@ export const MUTATION_TYPES = {
|
||||
ARCHIVE_MENTIONS: 'archiveMentions',
|
||||
CLEAR_MENTIONS: 'clearMentions',
|
||||
UPDATE_TOOT: 'updateToot',
|
||||
DELETE_TOOT: 'deleteToot',
|
||||
APPEND_MENTIONS_AFTER_LOADING_CARD: 'appendMentionsAfterLoadingCard'
|
||||
DELETE_TOOT: 'deleteToot'
|
||||
}
|
||||
|
||||
const mutations: MutationTree<MentionsState> = {
|
||||
@ -51,13 +45,13 @@ const mutations: MutationTree<MentionsState> = {
|
||||
[MUTATION_TYPES.APPEND_MENTIONS]: (state, update: Entity.Notification) => {
|
||||
// Reject duplicated status in timeline
|
||||
if (!state.mentions.find(item => item.id === update.id)) {
|
||||
state.mentions = ([update] as Array<Entity.Notification | LoadingCard>).concat(state.mentions)
|
||||
state.mentions = [update].concat(state.mentions)
|
||||
}
|
||||
},
|
||||
[MUTATION_TYPES.UPDATE_MENTIONS]: (state, messages: Array<Entity.Notification | LoadingCard>) => {
|
||||
[MUTATION_TYPES.UPDATE_MENTIONS]: (state, messages: Array<Entity.Notification>) => {
|
||||
state.mentions = messages
|
||||
},
|
||||
[MUTATION_TYPES.INSERT_MENTIONS]: (state, messages: Array<Entity.Notification | LoadingCard>) => {
|
||||
[MUTATION_TYPES.INSERT_MENTIONS]: (state, messages: Array<Entity.Notification>) => {
|
||||
state.mentions = state.mentions.concat(messages)
|
||||
},
|
||||
[MUTATION_TYPES.ARCHIVE_MENTIONS]: state => {
|
||||
@ -94,30 +88,16 @@ const mutations: MutationTree<MentionsState> = {
|
||||
return true
|
||||
}
|
||||
})
|
||||
},
|
||||
[MUTATION_TYPES.APPEND_MENTIONS_AFTER_LOADING_CARD]: (state, mentions: Array<Entity.Notification | LoadingCard>) => {
|
||||
const m = state.mentions.flatMap(mention => {
|
||||
if (mention.id !== 'loading-card') {
|
||||
return mention
|
||||
} else {
|
||||
return mentions
|
||||
}
|
||||
})
|
||||
// Reject duplicated status in timeline
|
||||
state.mentions = Array.from(new Set(m))
|
||||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
FETCH_MENTIONS: 'fetchMentions',
|
||||
LAZY_FETCH_MENTIONS: 'lazyFetchMentions',
|
||||
FETCH_MENTIONS_SINCE: 'fetchMentionsSince',
|
||||
GET_MARKER: 'getMarker',
|
||||
SAVE_MARKER: 'saveMarker'
|
||||
LAZY_FETCH_MENTIONS: 'lazyFetchMentions'
|
||||
}
|
||||
|
||||
const actions: ActionTree<MentionsState, RootState> = {
|
||||
[ACTION_TYPES.FETCH_MENTIONS]: async ({ dispatch, commit, rootState }): Promise<Array<Entity.Notification>> => {
|
||||
[ACTION_TYPES.FETCH_MENTIONS]: async ({ commit, rootState }): Promise<Array<Entity.Notification>> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
@ -125,33 +105,6 @@ const actions: ActionTree<MentionsState, RootState> = {
|
||||
rootState.App.userAgent
|
||||
)
|
||||
|
||||
const localMarker: LocalMarker | null = await dispatch('getMarker').catch(err => {
|
||||
console.error(err)
|
||||
})
|
||||
|
||||
if (rootState.TimelineSpace.timelineSetting.useMarker.mentions && localMarker !== null) {
|
||||
const nextResponse = await client.getNotifications({
|
||||
limit: 1,
|
||||
min_id: localMarker.last_read_id,
|
||||
exclude_types: excludes
|
||||
})
|
||||
if (nextResponse.data.length > 0) {
|
||||
const card: LoadingCard = {
|
||||
type: 'middle-load',
|
||||
since_id: localMarker.last_read_id,
|
||||
max_id: null,
|
||||
id: 'loading-card',
|
||||
uri: 'loading-card'
|
||||
}
|
||||
let mentions: Array<Entity.Notification | LoadingCard> = [card]
|
||||
const res = await client.getNotifications({ limit: 30, max_id: nextResponse.data[0].id, exclude_types: excludes })
|
||||
mentions = mentions.concat(res.data)
|
||||
commit(MUTATION_TYPES.UPDATE_MENTIONS, mentions)
|
||||
commit('TimelineSpace/SideMenu/changeUnreadMentions', true, { root: true })
|
||||
return res.data
|
||||
}
|
||||
}
|
||||
|
||||
const res = await client.getNotifications({
|
||||
limit: 30,
|
||||
exclude_types: excludes
|
||||
@ -186,68 +139,6 @@ const actions: ActionTree<MentionsState, RootState> = {
|
||||
.finally(() => {
|
||||
commit(MUTATION_TYPES.CHANGE_LAZY_LOADING, false)
|
||||
})
|
||||
},
|
||||
[ACTION_TYPES.FETCH_MENTIONS_SINCE]: async (
|
||||
{ state, rootState, commit },
|
||||
since_id: string
|
||||
): Promise<Array<Entity.Notification> | null> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
rootState.TimelineSpace.account.accessToken,
|
||||
rootState.App.userAgent
|
||||
)
|
||||
const cardIndex = state.mentions.findIndex(s => {
|
||||
if (s.id === 'loading-card') {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
let maxID: string | null = null
|
||||
if (cardIndex > 0) {
|
||||
maxID = state.mentions[cardIndex - 1].id
|
||||
}
|
||||
let params = { min_id: since_id, limit: 30, exclude_types: excludes }
|
||||
if (maxID !== null) {
|
||||
params = Object.assign({}, params, {
|
||||
max_id: maxID
|
||||
})
|
||||
}
|
||||
|
||||
const res = await client.getNotifications(params)
|
||||
if (res.data.length >= 30) {
|
||||
const card: LoadingCard = {
|
||||
type: 'middle-load',
|
||||
since_id: res.data[0].id,
|
||||
max_id: maxID,
|
||||
id: 'loading-card',
|
||||
uri: 'loading-card'
|
||||
}
|
||||
let mentions: Array<Entity.Notification | LoadingCard> = [card]
|
||||
mentions = mentions.concat(res.data)
|
||||
commit(MUTATION_TYPES.APPEND_MENTIONS_AFTER_LOADING_CARD, mentions)
|
||||
} else {
|
||||
commit(MUTATION_TYPES.APPEND_MENTIONS_AFTER_LOADING_CARD, res.data)
|
||||
}
|
||||
return res.data
|
||||
},
|
||||
[ACTION_TYPES.GET_MARKER]: async ({ rootState }): Promise<LocalMarker | null> => {
|
||||
if (!rootState.TimelineSpace.timelineSetting.useMarker.mentions) {
|
||||
return null
|
||||
}
|
||||
const localMarker: LocalMarker | null = await win.ipcRenderer.invoke('get-mentions-marker', rootState.TimelineSpace.account._id)
|
||||
return localMarker
|
||||
},
|
||||
[ACTION_TYPES.SAVE_MARKER]: async ({ state, rootState }) => {
|
||||
const mentions = state.mentions
|
||||
if (mentions.length === 0 || mentions[0].id === 'loading-card') {
|
||||
return
|
||||
}
|
||||
win.ipcRenderer.send('save-marker', {
|
||||
owner_id: rootState.TimelineSpace.account._id,
|
||||
timeline: 'mentions',
|
||||
last_read_id: mentions[0].id
|
||||
} as LocalMarker)
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user