[refactor] Favourites store
This commit is contained in:
parent
44d36d48fb
commit
f2393b33cb
|
@ -5,10 +5,13 @@
|
|||
<template v-slot="{ item, index, active }">
|
||||
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
|
||||
<toot
|
||||
v-if="account.account && account.server"
|
||||
:message="item"
|
||||
:focused="item.uri === focusedId"
|
||||
:overlaid="modalOpened"
|
||||
:filters="[]"
|
||||
:account="account.account"
|
||||
:server="account.server"
|
||||
v-on:update="updateToot"
|
||||
v-on:delete="deleteToot"
|
||||
@focusRight="focusSidebar"
|
||||
|
@ -27,7 +30,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, ref, onMounted, onUnmounted, watch } from 'vue'
|
||||
import { defineComponent, computed, ref, onMounted, onUnmounted, watch, reactive } from 'vue'
|
||||
import { logicAnd } from '@vueuse/math'
|
||||
import { useMagicKeys, whenever } from '@vueuse/core'
|
||||
import { useStore } from '@/store'
|
||||
|
@ -40,6 +43,10 @@ import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Fav
|
|||
import { MUTATION_TYPES as CONTENTS_MUTATION } from '@/store/TimelineSpace/Contents'
|
||||
import { MUTATION_TYPES as HEADER_MUTATION } from '@/store/TimelineSpace/HeaderMenu'
|
||||
import { MUTATION_TYPES as TIMELINE_MUTATION } from '@/store/TimelineSpace'
|
||||
import { LocalAccount } from '~/src/types/localAccount'
|
||||
import { LocalServer } from '~/src/types/localServer'
|
||||
import { MyWindow } from '~/src/types/global'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'favourites',
|
||||
|
@ -47,6 +54,7 @@ export default defineComponent({
|
|||
setup() {
|
||||
const space = 'TimelineSpace/Contents/Favourites'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const i18n = useI18next()
|
||||
|
||||
const heading = ref<boolean>(false)
|
||||
|
@ -54,20 +62,32 @@ export default defineComponent({
|
|||
const scroller = ref<any>()
|
||||
const { j, k, Ctrl_r } = useMagicKeys()
|
||||
|
||||
const win = (window as any) as MyWindow
|
||||
const id = computed(() => parseInt(route.params.id as string))
|
||||
|
||||
const lazyLoading = ref(false)
|
||||
const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
|
||||
account: null,
|
||||
server: null
|
||||
})
|
||||
|
||||
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
|
||||
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
|
||||
const favourites = computed(() => store.state.TimelineSpace.Contents.Favourites.favourites)
|
||||
const lazyLoading = computed(() => store.state.TimelineSpace.Contents.Favourites.lazyLoading)
|
||||
const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
|
||||
const currentFocusedIndex = computed(() => favourites.value.findIndex(status => focusedId.value === status.uri))
|
||||
const shortcutEnabled = computed(() => !modalOpened.value)
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
|
||||
account.account = a
|
||||
account.server = s
|
||||
|
||||
document.getElementById('scroller')?.addEventListener('scroll', onScroll)
|
||||
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
|
||||
store
|
||||
.dispatch(`${space}/${ACTION_TYPES.FETCH_FAVOURITES}`)
|
||||
.dispatch(`${space}/${ACTION_TYPES.FETCH_FAVOURITES}`, account)
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.favourite_fetch_error'),
|
||||
|
@ -115,12 +135,18 @@ export default defineComponent({
|
|||
document.getElementById('scroller')!.scrollHeight - 10 &&
|
||||
!lazyLoading.value
|
||||
) {
|
||||
store.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_FAVOURITES}`, favourites.value[favourites.value.length - 1]).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.favourite_fetch_error'),
|
||||
type: 'error'
|
||||
lazyLoading.value = true
|
||||
store
|
||||
.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_FAVOURITES}`, account)
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.favourite_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
lazyLoading.value = false
|
||||
})
|
||||
})
|
||||
}
|
||||
// for upper
|
||||
if ((event.target as HTMLElement)!.scrollTop > 10 && heading.value) {
|
||||
|
@ -138,7 +164,7 @@ export default defineComponent({
|
|||
const reload = async () => {
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
|
||||
try {
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_FAVOURITES}`).catch(() => {
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_FAVOURITES}`, account).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.favourite_fetch_error'),
|
||||
type: 'error'
|
||||
|
@ -184,7 +210,8 @@ export default defineComponent({
|
|||
focusToot,
|
||||
openSideBar,
|
||||
heading,
|
||||
upper
|
||||
upper,
|
||||
account
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
@ -100,7 +100,7 @@ const actions: ActionTree<BookmarksState, RootState> = {
|
|||
// Parse link header
|
||||
try {
|
||||
const link = parse(res.headers.link)
|
||||
if (link !== null) {
|
||||
if (link !== null && link.next) {
|
||||
commit(MUTATION_TYPES.CHANGE_MAX_ID, link.next.max_id)
|
||||
} else {
|
||||
commit(MUTATION_TYPES.CHANGE_MAX_ID, null)
|
||||
|
|
|
@ -2,16 +2,16 @@ import generator, { Entity } from 'megalodon'
|
|||
import parse from 'parse-link-header'
|
||||
import { Module, MutationTree, ActionTree } from 'vuex'
|
||||
import { RootState } from '@/store'
|
||||
import { LocalAccount } from '~/src/types/localAccount'
|
||||
import { LocalServer } from '~/src/types/localServer'
|
||||
|
||||
export type FavouritesState = {
|
||||
favourites: Array<Entity.Status>
|
||||
lazyLoading: boolean
|
||||
maxId: string | null
|
||||
}
|
||||
|
||||
const state = (): FavouritesState => ({
|
||||
favourites: [],
|
||||
lazyLoading: false,
|
||||
maxId: null
|
||||
})
|
||||
|
||||
|
@ -20,7 +20,6 @@ export const MUTATION_TYPES = {
|
|||
INSERT_FAVOURITES: 'insertFavourites',
|
||||
UPDATE_TOOT: 'updateToot',
|
||||
DELETE_TOOT: 'deleteToot',
|
||||
CHANGE_LAZY_LOADING: 'changeLazyLoading',
|
||||
CHANGE_MAX_ID: 'changeMaxId'
|
||||
}
|
||||
|
||||
|
@ -56,9 +55,6 @@ const mutations: MutationTree<FavouritesState> = {
|
|||
}
|
||||
})
|
||||
},
|
||||
[MUTATION_TYPES.CHANGE_LAZY_LOADING]: (state, value: boolean) => {
|
||||
state.lazyLoading = value
|
||||
},
|
||||
[MUTATION_TYPES.CHANGE_MAX_ID]: (state, id: string | null) => {
|
||||
state.maxId = id
|
||||
}
|
||||
|
@ -70,19 +66,17 @@ export const ACTION_TYPES = {
|
|||
}
|
||||
|
||||
const actions: ActionTree<FavouritesState, RootState> = {
|
||||
[ACTION_TYPES.FETCH_FAVOURITES]: async ({ commit, rootState }): Promise<Array<Entity.Status>> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.server!.sns,
|
||||
rootState.TimelineSpace.server!.baseURL,
|
||||
rootState.TimelineSpace.account!.accessToken,
|
||||
rootState.App.userAgent
|
||||
)
|
||||
[ACTION_TYPES.FETCH_FAVOURITES]: async (
|
||||
{ commit, rootState },
|
||||
req: { account: LocalAccount; server: LocalServer }
|
||||
): Promise<Array<Entity.Status>> => {
|
||||
const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
|
||||
const res = await client.getFavourites({ limit: 20 })
|
||||
commit(MUTATION_TYPES.UPDATE_FAVOURITES, res.data)
|
||||
// Parse link header
|
||||
try {
|
||||
const link = parse(res.headers.link)
|
||||
if (link !== null) {
|
||||
if (link !== null && link.next) {
|
||||
commit(MUTATION_TYPES.CHANGE_MAX_ID, link.next.max_id)
|
||||
} else {
|
||||
commit(MUTATION_TYPES.CHANGE_MAX_ID, null)
|
||||
|
@ -93,28 +87,20 @@ const actions: ActionTree<FavouritesState, RootState> = {
|
|||
}
|
||||
return res.data
|
||||
},
|
||||
lazyFetchFavourites: async ({ state, commit, rootState }): Promise<Array<Entity.Status> | null> => {
|
||||
if (state.lazyLoading) {
|
||||
return Promise.resolve(null)
|
||||
}
|
||||
lazyFetchFavourites: async (
|
||||
{ state, commit, rootState },
|
||||
req: { account: LocalAccount; server: LocalServer }
|
||||
): Promise<Array<Entity.Status> | null> => {
|
||||
if (!state.maxId) {
|
||||
return Promise.resolve(null)
|
||||
}
|
||||
commit(MUTATION_TYPES.CHANGE_LAZY_LOADING, true)
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.server!.sns,
|
||||
rootState.TimelineSpace.server!.baseURL,
|
||||
rootState.TimelineSpace.account!.accessToken,
|
||||
rootState.App.userAgent
|
||||
)
|
||||
const res = await client.getFavourites({ max_id: state.maxId, limit: 20 }).finally(() => {
|
||||
commit(MUTATION_TYPES.CHANGE_LAZY_LOADING, false)
|
||||
})
|
||||
const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
|
||||
const res = await client.getFavourites({ max_id: state.maxId, limit: 20 })
|
||||
commit(MUTATION_TYPES.INSERT_FAVOURITES, res.data)
|
||||
// Parse link header
|
||||
try {
|
||||
const link = parse(res.headers.link)
|
||||
if (link !== null) {
|
||||
if (link !== null && link.next) {
|
||||
commit(MUTATION_TYPES.CHANGE_MAX_ID, link.next.max_id)
|
||||
} else {
|
||||
commit(MUTATION_TYPES.CHANGE_MAX_ID, null)
|
||||
|
|
Loading…
Reference in New Issue