[refactor] Remove list timeline store
This commit is contained in:
parent
3a6d5fe687
commit
d2a1c4ac52
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div id="bookmarks">
|
||||
<div></div>
|
||||
<DynamicScroller :items="bookmarks" :min-item-size="60" id="scroller" class="scroller" ref="scroller">
|
||||
<div style="width: 100%; height: 120px" v-loading="loading" :element-loading-background="backgroundColor" v-if="loading" />
|
||||
<DynamicScroller :items="bookmarks" :min-item-size="60" id="scroller" class="scroller" ref="scroller" v-else>
|
||||
<template #default="{ item, index, active }">
|
||||
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
|
||||
<toot
|
||||
|
@ -70,6 +70,7 @@ export default defineComponent({
|
|||
const currentFocusedIndex = computed(() => bookmarks.value.findIndex(toot => focusedId.value === toot.uri))
|
||||
const shortcutEnabled = computed(() => !modalOpened.value)
|
||||
const userAgent = computed(() => store.state.App.userAgent)
|
||||
const backgroundColor = computed(() => store.state.App.theme.background_color)
|
||||
|
||||
onMounted(async () => {
|
||||
const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
|
||||
|
@ -222,7 +223,9 @@ export default defineComponent({
|
|||
deleteToot,
|
||||
focusToot,
|
||||
heading,
|
||||
account
|
||||
account,
|
||||
loading,
|
||||
backgroundColor
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
@ -12,18 +12,20 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onMounted, toRefs } from 'vue'
|
||||
import { computed, defineComponent, onMounted, toRefs, ref, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useI18next } from 'vue3-i18next'
|
||||
import { Entity } from 'megalodon'
|
||||
import generator, { Entity, MegalodonInterface } from 'megalodon'
|
||||
import { useStore } from '@/store'
|
||||
import User from '@/components/molecules/User.vue'
|
||||
import { MUTATION_TYPES as CONTENTS_MUTATION } from '@/store/TimelineSpace/Contents'
|
||||
import { ACTION_TYPES } from '@/store/TimelineSpace/Contents/Lists/Edit'
|
||||
import {
|
||||
MUTATION_TYPES as ADD_LIST_MEMBER_MUTATION,
|
||||
ACTION_TYPES as ADD_LIST_MEMBER_ACTION
|
||||
} from '@/store/TimelineSpace/Modals/AddListMember'
|
||||
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: 'edit-list',
|
||||
|
@ -31,43 +33,55 @@ export default defineComponent({
|
|||
components: { User },
|
||||
setup(props) {
|
||||
const { list_id } = toRefs(props)
|
||||
const space = 'TimelineSpace/Contents/Lists/Edit'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const i18n = useI18next()
|
||||
|
||||
const members = computed(() => store.state.TimelineSpace.Contents.Lists.Edit.members)
|
||||
const win = (window as any) as MyWindow
|
||||
const id = computed(() => parseInt(route.params.id as string))
|
||||
|
||||
const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
|
||||
account: null,
|
||||
server: null
|
||||
})
|
||||
const client = ref<MegalodonInterface | null>(null)
|
||||
|
||||
const members = ref<Array<Entity.Account>>([])
|
||||
const userAgent = computed(() => store.state.App.userAgent)
|
||||
|
||||
onMounted(async () => {
|
||||
await init()
|
||||
const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
|
||||
account.account = a
|
||||
account.server = s
|
||||
|
||||
client.value = generator(s.sns, s.baseURL, a.accessToken, userAgent.value)
|
||||
await load()
|
||||
})
|
||||
const init = async () => {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
|
||||
|
||||
const load = async () => {
|
||||
if (!client.value) return
|
||||
try {
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_MEMBERS}`, list_id.value)
|
||||
const res = await client.value.getAccountsInList(list_id.value, { limit: 0 })
|
||||
members.value = res.data
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
ElMessage({
|
||||
message: i18n.t('message.members_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
} finally {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
|
||||
}
|
||||
}
|
||||
|
||||
const removeAccount = async (account: Entity.Account) => {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
|
||||
if (!client.value) return
|
||||
try {
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.REMOVE_ACCOUNT}`, {
|
||||
account: account,
|
||||
listId: list_id.value
|
||||
})
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_MEMBERS}`, list_id.value)
|
||||
await client.value.deleteAccountsFromList(list_id.value, [account.id])
|
||||
await load()
|
||||
} catch (err) {
|
||||
ElMessage({
|
||||
message: i18n.t('message.remove_user_error'),
|
||||
type: 'error'
|
||||
})
|
||||
} finally {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
|
||||
}
|
||||
}
|
||||
const addAccount = () => {
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div id="lists">
|
||||
<div class="new-list" v-loading="creating" :element-loading-background="loadingBackground">
|
||||
<div style="width: 100%; height: 120px" v-loading="loading" :element-loading-background="backgroundColor" v-if="loading" />
|
||||
<div class="new-list" v-else>
|
||||
<el-form :inline="true">
|
||||
<input v-model="title" :placeholder="$t('lists.index.new_list')" class="list-title" />
|
||||
<el-button link class="create" @click="createList">
|
||||
|
@ -25,61 +26,78 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onMounted, ref } from 'vue'
|
||||
import { computed, defineComponent, onMounted, ref, reactive } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Entity } from 'megalodon'
|
||||
import generator, { Entity, MegalodonInterface } from 'megalodon'
|
||||
import { useI18next } from 'vue3-i18next'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useStore } from '@/store'
|
||||
import { MUTATION_TYPES as TIMELINE_MUTATION } from '@/store/TimelineSpace'
|
||||
import { ACTION_TYPES } from '@/store/TimelineSpace/Contents/Lists/Index'
|
||||
import { ACTION_TYPES as SIDE_MENU_ACTION } from '@/store/TimelineSpace/SideMenu'
|
||||
import { LocalAccount } from '~/src/types/localAccount'
|
||||
import { LocalServer } from '~/src/types/localServer'
|
||||
import { MyWindow } from '~/src/types/global'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'lists',
|
||||
setup() {
|
||||
const space = 'TimelineSpace/Contents/Lists/Index'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const i18n = useI18next()
|
||||
|
||||
const title = ref<string>('')
|
||||
const creating = ref<boolean>(false)
|
||||
const loading = ref<boolean>(false)
|
||||
|
||||
const lists = computed(() => store.state.TimelineSpace.Contents.Lists.Index.lists)
|
||||
const loadingBackground = computed(() => store.state.App.theme.wrapper_mask_color)
|
||||
const lists = ref<Array<Entity.List>>([])
|
||||
const backgroundColor = computed(() => store.state.App.theme.background_color)
|
||||
const userAgent = computed(() => store.state.App.userAgent)
|
||||
|
||||
const win = (window as any) as MyWindow
|
||||
const id = computed(() => route.params.id)
|
||||
const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
|
||||
account: null,
|
||||
server: null
|
||||
})
|
||||
const client = ref<MegalodonInterface | null>(null)
|
||||
|
||||
onMounted(() => {
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
|
||||
fetch().finally(() => {
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
|
||||
})
|
||||
onMounted(async () => {
|
||||
const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
|
||||
account.account = a
|
||||
account.server = s
|
||||
|
||||
client.value = generator(s.sns, s.baseURL, a.accessToken, userAgent.value)
|
||||
loading.value = true
|
||||
await load().finally(() => (loading.value = false))
|
||||
})
|
||||
|
||||
const fetch = async () => {
|
||||
return store.dispatch(`${space}/${ACTION_TYPES.FETCH_LISTS}`).catch(() => {
|
||||
const load = async () => {
|
||||
if (!client.value) return
|
||||
try {
|
||||
const res = await client.value.getLists()
|
||||
lists.value = res.data
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
ElMessage({
|
||||
message: i18n.t('message.lists_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const createList = async () => {
|
||||
creating.value = true
|
||||
if (!client.value) return
|
||||
loading.value = true
|
||||
try {
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.CREATE_LIST}`, title.value)
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_LISTS}`)
|
||||
await client.value.createList(title.value)
|
||||
await load()
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
ElMessage({
|
||||
message: i18n.t('message.list_create_error'),
|
||||
type: 'error'
|
||||
})
|
||||
} finally {
|
||||
creating.value = false
|
||||
loading.value = false
|
||||
}
|
||||
await store.dispatch(`TimelineSpace/SideMenu/${SIDE_MENU_ACTION.FETCH_LISTS}`)
|
||||
}
|
||||
const edit = (list: Entity.List) => {
|
||||
return router.push(`/${id.value}/lists/${list.id}/edit`)
|
||||
|
@ -89,19 +107,19 @@ export default defineComponent({
|
|||
confirmButtonText: i18n.t('lists.index.delete.confirm.ok'),
|
||||
cancelButtonText: i18n.t('lists.index.delete.confirm.cancel'),
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
if (!client.value) return
|
||||
await client.value.deleteList(list.id)
|
||||
await load()
|
||||
})
|
||||
.then(() => {
|
||||
store.dispatch(`${space}/${ACTION_TYPES.DELETE_LIST}`, list)
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
return {
|
||||
id,
|
||||
creating,
|
||||
loading,
|
||||
title,
|
||||
lists,
|
||||
loadingBackground,
|
||||
backgroundColor,
|
||||
createList,
|
||||
edit,
|
||||
del
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div name="list" class="list-timeline">
|
||||
<DynamicScroller :items="timeline" :min-item-size="86" id="scroller" class="scroller" ref="scroller">
|
||||
<div style="width: 100%; height: 120px" v-loading="loading" :element-loading-background="backgroundColor" v-if="loading" />
|
||||
<DynamicScroller :items="statuses" :min-item-size="86" id="scroller" class="scroller" ref="scroller" v-else>
|
||||
<template #default="{ item, index, active }">
|
||||
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
|
||||
<toot
|
||||
|
@ -23,18 +24,15 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRefs, ref, computed, onMounted, watch, onBeforeUnmount, onUnmounted, reactive } from 'vue'
|
||||
import { defineComponent, toRefs, ref, computed, onMounted, watch, onUnmounted, reactive } from 'vue'
|
||||
import { logicAnd } from '@vueuse/math'
|
||||
import { useMagicKeys, whenever } from '@vueuse/core'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useI18next } from 'vue3-i18next'
|
||||
import { Entity } from 'megalodon'
|
||||
import generator, { Entity, MegalodonInterface } from 'megalodon'
|
||||
import { useStore } from '@/store'
|
||||
import Toot from '@/components/organisms/Toot.vue'
|
||||
import { MUTATION_TYPES as CONTENTS_MUTATION } from '@/store/TimelineSpace/Contents'
|
||||
import { MUTATION_TYPES as HEADER_MUTATION } from '@/store/TimelineSpace/HeaderMenu'
|
||||
import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Lists/Show'
|
||||
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'
|
||||
|
@ -45,7 +43,6 @@ export default defineComponent({
|
|||
props: ['list_id'],
|
||||
components: { Toot },
|
||||
setup(props) {
|
||||
const space = 'TimelineSpace/Contents/Lists/Show'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const i18n = useI18next()
|
||||
|
@ -58,17 +55,21 @@ export default defineComponent({
|
|||
const focusedId = ref<string | null>(null)
|
||||
const scroller = ref<any>(null)
|
||||
const lazyLoading = ref<boolean>(false)
|
||||
const loading = ref(false)
|
||||
const heading = ref<boolean>(true)
|
||||
const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
|
||||
account: null,
|
||||
server: null
|
||||
})
|
||||
const client = ref<MegalodonInterface | null>(null)
|
||||
|
||||
const timeline = computed(() => store.state.TimelineSpace.Contents.Lists.Show.timeline)
|
||||
const statuses = ref<Array<Entity.Status>>([])
|
||||
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
|
||||
const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
|
||||
const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
|
||||
const currentFocusedIndex = computed(() => statuses.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
|
||||
const shortcutEnabled = computed(() => !modalOpened.value)
|
||||
const userAgent = computed(() => store.state.App.userAgent)
|
||||
const backgroundColor = computed(() => store.state.App.theme.background_color)
|
||||
|
||||
onMounted(async () => {
|
||||
const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
|
||||
|
@ -76,15 +77,18 @@ export default defineComponent({
|
|||
account.server = s
|
||||
|
||||
document.getElementById('scroller')?.addEventListener('scroll', onScroll)
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
|
||||
load().finally(() => {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
|
||||
})
|
||||
client.value = generator(s.sns, s.baseURL, a.accessToken, userAgent.value)
|
||||
loading.value = true
|
||||
try {
|
||||
await load(list_id.value)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
watch(list_id, () => {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
|
||||
load().finally(() => {
|
||||
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
|
||||
watch(list_id, id => {
|
||||
loading.value = true
|
||||
load(id).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
watch(startReload, (newVal, oldVal) => {
|
||||
|
@ -103,7 +107,7 @@ export default defineComponent({
|
|||
})
|
||||
whenever(logicAnd(j, shortcutEnabled), () => {
|
||||
if (focusedId.value === null) {
|
||||
focusedId.value = timeline.value[0].uri + timeline.value[0].id
|
||||
focusedId.value = statuses.value[0].uri + statuses.value[0].id
|
||||
} else {
|
||||
focusNext()
|
||||
}
|
||||
|
@ -115,9 +119,6 @@ export default defineComponent({
|
|||
reload()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
heading.value = true
|
||||
const el = document.getElementById('scroller')
|
||||
|
@ -127,42 +128,42 @@ export default defineComponent({
|
|||
}
|
||||
})
|
||||
|
||||
const load = async () => {
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
|
||||
const load = async (id: string) => {
|
||||
if (!client.value) return
|
||||
try {
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_TIMELINE}`, {
|
||||
listID: list_id.value,
|
||||
account: account.account,
|
||||
server: account.server
|
||||
})
|
||||
const res = await client.value.getListTimeline(id, { limit: 20 })
|
||||
statuses.value = res.data
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
ElMessage({
|
||||
message: i18n.t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
store.dispatch(`${space}/${ACTION_TYPES.START_STREAMING}`, { listID: list_id.value, account: account.account }).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.start_streaming_error'),
|
||||
type: 'error'
|
||||
})
|
||||
if (!account.account) return
|
||||
win.ipcRenderer.on(`update-list-streamings-${account.account.id}`, (_, update: Entity.Status) => {
|
||||
statuses.value = [update, ...statuses.value]
|
||||
})
|
||||
win.ipcRenderer.on(`delete-list-streamings-${account.account.id}`, (_, id: string) => {
|
||||
deleteToot(id)
|
||||
})
|
||||
|
||||
win.ipcRenderer.send('start-list-streaming', {
|
||||
listId: id,
|
||||
accountId: account.account.id
|
||||
})
|
||||
return 'started'
|
||||
}
|
||||
|
||||
const onScroll = (event: Event) => {
|
||||
if (
|
||||
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
|
||||
document.getElementById('scroller')!.scrollHeight - 10 &&
|
||||
!lazyLoading
|
||||
!lazyLoading.value
|
||||
) {
|
||||
const lastStatus = statuses.value[statuses.value.length - 1]
|
||||
lazyLoading.value = true
|
||||
store
|
||||
.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, {
|
||||
list_id: list_id.value,
|
||||
status: timeline.value[timeline.value.length - 1],
|
||||
account: account.account,
|
||||
server: account.server
|
||||
})
|
||||
client.value
|
||||
?.getListTimeline(list_id.value, { max_id: lastStatus.id, limit: 20 })
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.timeline_fetch_error'),
|
||||
|
@ -181,47 +182,46 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
const reload = async () => {
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true)
|
||||
loading.value = true
|
||||
try {
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
|
||||
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_TIMELINE}`, list_id.value).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
store.dispatch(`${space}/${ACTION_TYPES.START_STREAMING}`, list_id.value).catch(() => {
|
||||
ElMessage({
|
||||
message: i18n.t('message.start_streaming_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
await load(list_id.value)
|
||||
} finally {
|
||||
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
const updateToot = (message: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
|
||||
statuses.value = statuses.value.map(status => {
|
||||
if (status.id === message.id) {
|
||||
return message
|
||||
} else if (status.reblog && status.reblog.id === message.id) {
|
||||
return Object.assign(status, {
|
||||
reblog: message
|
||||
})
|
||||
}
|
||||
return status
|
||||
})
|
||||
}
|
||||
const deleteToot = (message: Entity.Status) => {
|
||||
store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, message.id)
|
||||
}
|
||||
const upper = () => {
|
||||
scroller.value.scrollToItem(0)
|
||||
focusedId.value = null
|
||||
const deleteToot = (id: string) => {
|
||||
statuses.value = statuses.value.filter(status => {
|
||||
if (status.reblog !== null && status.reblog.id === id) {
|
||||
return false
|
||||
} else {
|
||||
return status.id !== id
|
||||
}
|
||||
})
|
||||
}
|
||||
const focusNext = () => {
|
||||
if (currentFocusedIndex.value === -1) {
|
||||
focusedId.value = timeline.value[0].uri + timeline.value[0].id
|
||||
} else if (currentFocusedIndex.value < timeline.value.length) {
|
||||
focusedId.value = timeline.value[currentFocusedIndex.value + 1].uri + timeline.value[currentFocusedIndex.value + 1].id
|
||||
focusedId.value = statuses.value[0].uri + statuses.value[0].id
|
||||
} else if (currentFocusedIndex.value < statuses.value.length) {
|
||||
focusedId.value = statuses.value[currentFocusedIndex.value + 1].uri + statuses.value[currentFocusedIndex.value + 1].id
|
||||
}
|
||||
}
|
||||
const focusPrev = () => {
|
||||
if (currentFocusedIndex.value === 0) {
|
||||
focusedId.value = null
|
||||
} else if (currentFocusedIndex.value > 0) {
|
||||
focusedId.value = timeline.value[currentFocusedIndex.value - 1].uri + timeline.value[currentFocusedIndex.value - 1].id
|
||||
focusedId.value = statuses.value[currentFocusedIndex.value - 1].uri + statuses.value[currentFocusedIndex.value - 1].id
|
||||
}
|
||||
}
|
||||
const focusToot = (message: Entity.Status) => {
|
||||
|
@ -230,15 +230,16 @@ export default defineComponent({
|
|||
|
||||
return {
|
||||
scroller,
|
||||
timeline,
|
||||
statuses,
|
||||
focusedId,
|
||||
modalOpened,
|
||||
updateToot,
|
||||
deleteToot,
|
||||
focusToot,
|
||||
heading,
|
||||
upper,
|
||||
account
|
||||
account,
|
||||
loading,
|
||||
backgroundColor
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
@ -41,7 +41,6 @@ import { useI18next } from 'vue3-i18next'
|
|||
import { useMagicKeys, whenever } from '@vueuse/core'
|
||||
import { useStore } from '@/store'
|
||||
import { ACTION_TYPES } from '@/store/TimelineSpace/Modals/AddListMember'
|
||||
import { ACTION_TYPES as LIST_ACTION_TYPES } from '@/store/TimelineSpace/Contents/Lists/Edit'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'add-list-member',
|
||||
|
@ -55,7 +54,6 @@ export default defineComponent({
|
|||
|
||||
const loadingBackground = computed(() => store.state.App.theme.wrapper_mask_color)
|
||||
const accounts = computed(() => store.state.TimelineSpace.Modals.AddListMember.accounts)
|
||||
const listId = computed(() => store.state.TimelineSpace.Modals.AddListMember.targetListId)
|
||||
const addListMemberModal = computed({
|
||||
get: () => store.state.TimelineSpace.Modals.AddListMember.modalOpen,
|
||||
set: (value: boolean) => store.dispatch(`${space}/${ACTION_TYPES.CHANGE_MODAL}`, value)
|
||||
|
@ -80,7 +78,6 @@ export default defineComponent({
|
|||
.dispatch(`${space}/${ACTION_TYPES.ADD}`, account)
|
||||
.then(() => {
|
||||
store.dispatch(`${space}/${ACTION_TYPES.CHANGE_MODAL}`, false)
|
||||
store.dispatch(`TimelineSpace/Contents/Lists/Edit/${LIST_ACTION_TYPES.FETCH_MEMBERS}`, listId.value)
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
|
|
|
@ -2,7 +2,6 @@ import Home, { HomeState } from './Contents/Home'
|
|||
import Notifications, { NotificationsState } from './Contents/Notifications'
|
||||
import Local, { LocalState } from './Contents/Local'
|
||||
import Search, { SearchModuleState } from './Contents/Search'
|
||||
import Lists, { ListsModuleState } from './Contents/Lists'
|
||||
import DirectMessages, { DirectMessagesState } from './Contents/DirectMessages'
|
||||
import { Module, MutationTree, ActionTree } from 'vuex'
|
||||
import { RootState } from '@/store'
|
||||
|
@ -17,7 +16,6 @@ type ContentsModule = {
|
|||
DirectMessages: DirectMessagesState
|
||||
Local: LocalState
|
||||
Search: SearchModuleState
|
||||
Lists: ListsModuleState
|
||||
}
|
||||
|
||||
export type ContentsModuleState = ContentsModule & ContentsState
|
||||
|
@ -54,8 +52,7 @@ const Contents: Module<ContentsState, RootState> = {
|
|||
Notifications,
|
||||
Local,
|
||||
DirectMessages,
|
||||
Search,
|
||||
Lists
|
||||
Search
|
||||
},
|
||||
mutations: mutations,
|
||||
actions: actions
|
||||
|
|
|
@ -1,27 +0,0 @@
|
|||
import Index, { IndexState } from './Lists/Index'
|
||||
import Show, { ShowState } from './Lists/Show'
|
||||
import Edit, { EditState } from './Lists/Edit'
|
||||
import { Module } from 'vuex'
|
||||
import { RootState } from '@/store'
|
||||
|
||||
export type ListsState = {}
|
||||
|
||||
type ListModule = {
|
||||
Index: IndexState
|
||||
Show: ShowState
|
||||
Edit: EditState
|
||||
}
|
||||
|
||||
export type ListsModuleState = ListModule & ListsState
|
||||
|
||||
const state = (): ListsState => ({})
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: state,
|
||||
modules: {
|
||||
Index,
|
||||
Show,
|
||||
Edit
|
||||
}
|
||||
} as Module<ListsState, RootState>
|
|
@ -1,57 +0,0 @@
|
|||
import generator, { Entity } from 'megalodon'
|
||||
import { Module, MutationTree, ActionTree } from 'vuex'
|
||||
import { RootState } from '@/store'
|
||||
import { RemoveAccountFromList } from '@/types/removeAccountFromList'
|
||||
|
||||
export type EditState = {
|
||||
members: Array<Entity.Account>
|
||||
}
|
||||
|
||||
const state = (): EditState => ({
|
||||
members: []
|
||||
})
|
||||
|
||||
export const MUTATION_TYPES = {
|
||||
CHANGE_MEMBERS: 'changeMembers'
|
||||
}
|
||||
|
||||
const mutations: MutationTree<EditState> = {
|
||||
[MUTATION_TYPES.CHANGE_MEMBERS]: (state, members: Array<Entity.Account>) => {
|
||||
state.members = members
|
||||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
FETCH_MEMBERS: 'fetchMembers',
|
||||
REMOVE_ACCOUNT: 'removeAccount'
|
||||
}
|
||||
|
||||
const actions: ActionTree<EditState, RootState> = {
|
||||
[ACTION_TYPES.FETCH_MEMBERS]: async ({ commit, rootState }, listId: string): Promise<Array<Entity.Account>> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.server!.sns,
|
||||
rootState.TimelineSpace.server!.baseURL,
|
||||
rootState.TimelineSpace.account!.accessToken,
|
||||
rootState.App.userAgent
|
||||
)
|
||||
const res = await client.getAccountsInList(listId, { limit: 0 })
|
||||
commit(MUTATION_TYPES.CHANGE_MEMBERS, res.data)
|
||||
return res.data
|
||||
},
|
||||
[ACTION_TYPES.REMOVE_ACCOUNT]: async ({ rootState }, remove: RemoveAccountFromList): Promise<{}> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.server!.sns,
|
||||
rootState.TimelineSpace.server!.baseURL,
|
||||
rootState.TimelineSpace.account!.accessToken,
|
||||
rootState.App.userAgent
|
||||
)
|
||||
return client.deleteAccountsFromList(remove.listId, [remove.account.id])
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: state,
|
||||
mutations: mutations,
|
||||
actions: actions
|
||||
} as Module<EditState, RootState>
|
|
@ -1,69 +0,0 @@
|
|||
import generator, { Entity } from 'megalodon'
|
||||
import { Module, MutationTree, ActionTree } from 'vuex'
|
||||
import { RootState } from '@/store'
|
||||
|
||||
export type IndexState = {
|
||||
lists: Array<Entity.List>
|
||||
}
|
||||
|
||||
const state = (): IndexState => ({
|
||||
lists: []
|
||||
})
|
||||
|
||||
export const MUTATION_TYPES = {
|
||||
CHANGE_LISTS: 'changeLists'
|
||||
}
|
||||
|
||||
const mutations: MutationTree<IndexState> = {
|
||||
[MUTATION_TYPES.CHANGE_LISTS]: (state, lists: Array<Entity.List>) => {
|
||||
state.lists = lists
|
||||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
FETCH_LISTS: 'fetchLists',
|
||||
CREATE_LIST: 'createList',
|
||||
DELETE_LIST: 'deleteList'
|
||||
}
|
||||
|
||||
const actions: ActionTree<IndexState, RootState> = {
|
||||
[ACTION_TYPES.FETCH_LISTS]: async ({ commit, rootState }): Promise<Array<Entity.List>> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.server!.sns,
|
||||
rootState.TimelineSpace.server!.baseURL,
|
||||
rootState.TimelineSpace.account!.accessToken,
|
||||
rootState.App.userAgent
|
||||
)
|
||||
const res = await client.getLists()
|
||||
commit(MUTATION_TYPES.CHANGE_LISTS, res.data)
|
||||
return res.data
|
||||
},
|
||||
[ACTION_TYPES.CREATE_LIST]: async ({ rootState }, title: string): Promise<Entity.List> => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.server!.sns,
|
||||
rootState.TimelineSpace.server!.baseURL,
|
||||
rootState.TimelineSpace.account!.accessToken,
|
||||
rootState.App.userAgent
|
||||
)
|
||||
const res = await client.createList(title)
|
||||
return res.data
|
||||
},
|
||||
[ACTION_TYPES.DELETE_LIST]: async ({ dispatch, rootState }, list: Entity.List) => {
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.server!.sns,
|
||||
rootState.TimelineSpace.server!.baseURL,
|
||||
rootState.TimelineSpace.account!.accessToken,
|
||||
rootState.App.userAgent
|
||||
)
|
||||
const res = await client.deleteList(list.id)
|
||||
dispatch(ACTION_TYPES.FETCH_LISTS)
|
||||
return res.data
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: state,
|
||||
mutations: mutations,
|
||||
actions: actions
|
||||
} as Module<IndexState, RootState>
|
|
@ -1,122 +0,0 @@
|
|||
import generator, { Entity } from 'megalodon'
|
||||
import { Module, MutationTree, ActionTree } from 'vuex'
|
||||
import { RootState } from '@/store'
|
||||
import { MyWindow } from '~/src/types/global'
|
||||
import { LocalAccount } from '~/src/types/localAccount'
|
||||
import { LocalServer } from '~/src/types/localServer'
|
||||
|
||||
const win = (window as any) as MyWindow
|
||||
|
||||
export type ShowState = {
|
||||
timeline: Array<Entity.Status>
|
||||
}
|
||||
|
||||
const state = (): ShowState => ({
|
||||
timeline: []
|
||||
})
|
||||
|
||||
export const MUTATION_TYPES = {
|
||||
APPEND_TIMELINE: 'appendTimeline',
|
||||
REPLACE_TIMELINE: 'replaceTimeline',
|
||||
INSERT_TIMELINE: 'insertTimeline',
|
||||
UPDATE_TOOT: 'updateToot',
|
||||
DELETE_TOOT: 'deleteToot'
|
||||
}
|
||||
|
||||
const mutations: MutationTree<ShowState> = {
|
||||
[MUTATION_TYPES.APPEND_TIMELINE]: (state, update: Entity.Status) => {
|
||||
state.timeline = [update].concat(state.timeline)
|
||||
},
|
||||
[MUTATION_TYPES.REPLACE_TIMELINE]: (state, timeline: Array<Entity.Status>) => {
|
||||
state.timeline = timeline
|
||||
},
|
||||
[MUTATION_TYPES.INSERT_TIMELINE]: (state, messages: Array<Entity.Status>) => {
|
||||
state.timeline = state.timeline.concat(messages)
|
||||
},
|
||||
[MUTATION_TYPES.UPDATE_TOOT]: (state, message: Entity.Status) => {
|
||||
state.timeline = state.timeline.map(toot => {
|
||||
if (toot.id === message.id) {
|
||||
return message
|
||||
} else if (toot.reblog !== null && toot.reblog.id === message.id) {
|
||||
// When user reblog/favourite a reblogged toot, target message is a original toot.
|
||||
// So, a message which is received now is original toot.
|
||||
const reblog = {
|
||||
reblog: message
|
||||
}
|
||||
return Object.assign(toot, reblog)
|
||||
} else {
|
||||
return toot
|
||||
}
|
||||
})
|
||||
},
|
||||
[MUTATION_TYPES.DELETE_TOOT]: (state, id: string) => {
|
||||
state.timeline = state.timeline.filter(toot => {
|
||||
if (toot.reblog !== null && toot.reblog.id === id) {
|
||||
return false
|
||||
} else {
|
||||
return toot.id !== id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
FETCH_TIMELINE: 'fetchTimeline',
|
||||
START_STREAMING: 'startStreaming',
|
||||
STOP_STREAMING: 'stopStreaming',
|
||||
LAZY_FETCH_TIMELINE: 'lazyFetchTimeline'
|
||||
}
|
||||
|
||||
const actions: ActionTree<ShowState, RootState> = {
|
||||
[ACTION_TYPES.FETCH_TIMELINE]: async (
|
||||
{ commit, rootState },
|
||||
req: { listID: string; 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.getListTimeline(req.listID, { limit: 20 })
|
||||
commit(MUTATION_TYPES.REPLACE_TIMELINE, res.data)
|
||||
return res.data
|
||||
},
|
||||
[ACTION_TYPES.START_STREAMING]: ({ commit }, req: { listID: string; account: LocalAccount }) => {
|
||||
win.ipcRenderer.on(`update-list-streamings-${req.account.id}`, (_, update: Entity.Status) => {
|
||||
commit(MUTATION_TYPES.APPEND_TIMELINE, update)
|
||||
})
|
||||
win.ipcRenderer.on(`delete-list-streamings-${req.account.id}`, (_, id: string) => {
|
||||
commit(MUTATION_TYPES.DELETE_TOOT, id)
|
||||
})
|
||||
// @ts-ignore
|
||||
return new Promise((resolve, reject) => {
|
||||
// eslint-disable-line no-unused-vars
|
||||
win.ipcRenderer.send('start-list-streaming', {
|
||||
listId: req.listID,
|
||||
accountId: req.account.id
|
||||
})
|
||||
})
|
||||
},
|
||||
[ACTION_TYPES.STOP_STREAMING]: ({ rootState }) => {
|
||||
return new Promise(resolve => {
|
||||
if (rootState.TimelineSpace.account) {
|
||||
win.ipcRenderer.removeAllListeners(`update-list-streamings-${rootState.TimelineSpace.account.id}`)
|
||||
win.ipcRenderer.removeAllListeners(`delete-list-streamings-${rootState.TimelineSpace.account.id}`)
|
||||
}
|
||||
resolve(null)
|
||||
})
|
||||
},
|
||||
[ACTION_TYPES.LAZY_FETCH_TIMELINE]: async (
|
||||
{ commit, rootState },
|
||||
req: { list_id: string; status: Entity.Status; account: LocalAccount; server: LocalServer }
|
||||
): Promise<Array<Entity.Status> | null> => {
|
||||
const client = generator(req.server.sns, req.server.baseURL, req.account.accessToken, rootState.App.userAgent)
|
||||
return client.getListTimeline(req.list_id, { max_id: req.status.id, limit: 20 }).then(res => {
|
||||
commit(MUTATION_TYPES.INSERT_TIMELINE, res.data)
|
||||
return res.data
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: state,
|
||||
mutations: mutations,
|
||||
actions: actions
|
||||
} as Module<ShowState, RootState>
|
Loading…
Reference in New Issue