[refactor] Remove list timeline store

This commit is contained in:
AkiraFukushima 2023-01-30 01:12:35 +09:00
parent 3a6d5fe687
commit d2a1c4ac52
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
10 changed files with 160 additions and 405 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<div id="bookmarks"> <div id="bookmarks">
<div></div> <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"> <DynamicScroller :items="bookmarks" :min-item-size="60" id="scroller" class="scroller" ref="scroller" v-else>
<template #default="{ item, index, active }"> <template #default="{ item, index, active }">
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true"> <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
<toot <toot
@ -70,6 +70,7 @@ export default defineComponent({
const currentFocusedIndex = computed(() => bookmarks.value.findIndex(toot => focusedId.value === toot.uri)) const currentFocusedIndex = computed(() => bookmarks.value.findIndex(toot => focusedId.value === toot.uri))
const shortcutEnabled = computed(() => !modalOpened.value) const shortcutEnabled = computed(() => !modalOpened.value)
const userAgent = computed(() => store.state.App.userAgent) const userAgent = computed(() => store.state.App.userAgent)
const backgroundColor = computed(() => store.state.App.theme.background_color)
onMounted(async () => { onMounted(async () => {
const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value) const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
@ -222,7 +223,9 @@ export default defineComponent({
deleteToot, deleteToot,
focusToot, focusToot,
heading, heading,
account account,
loading,
backgroundColor
} }
} }
}) })

View File

@ -12,18 +12,20 @@
</template> </template>
<script lang="ts"> <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 { ElMessage } from 'element-plus'
import { useI18next } from 'vue3-i18next' import { useI18next } from 'vue3-i18next'
import { Entity } from 'megalodon' import generator, { Entity, MegalodonInterface } from 'megalodon'
import { useStore } from '@/store' import { useStore } from '@/store'
import User from '@/components/molecules/User.vue' 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 { import {
MUTATION_TYPES as ADD_LIST_MEMBER_MUTATION, MUTATION_TYPES as ADD_LIST_MEMBER_MUTATION,
ACTION_TYPES as ADD_LIST_MEMBER_ACTION ACTION_TYPES as ADD_LIST_MEMBER_ACTION
} from '@/store/TimelineSpace/Modals/AddListMember' } 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({ export default defineComponent({
name: 'edit-list', name: 'edit-list',
@ -31,43 +33,55 @@ export default defineComponent({
components: { User }, components: { User },
setup(props) { setup(props) {
const { list_id } = toRefs(props) const { list_id } = toRefs(props)
const space = 'TimelineSpace/Contents/Lists/Edit'
const store = useStore() const store = useStore()
const route = useRoute()
const i18n = useI18next() 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 () => { 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 { 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) { } catch (err) {
console.error(err)
ElMessage({ ElMessage({
message: i18n.t('message.members_fetch_error'), message: i18n.t('message.members_fetch_error'),
type: 'error' type: 'error'
}) })
} finally {
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
} }
} }
const removeAccount = async (account: Entity.Account) => { const removeAccount = async (account: Entity.Account) => {
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true) if (!client.value) return
try { try {
await store.dispatch(`${space}/${ACTION_TYPES.REMOVE_ACCOUNT}`, { await client.value.deleteAccountsFromList(list_id.value, [account.id])
account: account, await load()
listId: list_id.value
})
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_MEMBERS}`, list_id.value)
} catch (err) { } catch (err) {
ElMessage({ ElMessage({
message: i18n.t('message.remove_user_error'), message: i18n.t('message.remove_user_error'),
type: 'error' type: 'error'
}) })
} finally {
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false)
} }
} }
const addAccount = () => { const addAccount = () => {

View File

@ -1,6 +1,7 @@
<template> <template>
<div id="lists"> <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"> <el-form :inline="true">
<input v-model="title" :placeholder="$t('lists.index.new_list')" class="list-title" /> <input v-model="title" :placeholder="$t('lists.index.new_list')" class="list-title" />
<el-button link class="create" @click="createList"> <el-button link class="create" @click="createList">
@ -25,61 +26,78 @@
</template> </template>
<script lang="ts"> <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 { ElMessage, ElMessageBox } from 'element-plus'
import { Entity } from 'megalodon' import generator, { Entity, MegalodonInterface } from 'megalodon'
import { useI18next } from 'vue3-i18next' import { useI18next } from 'vue3-i18next'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import { useStore } from '@/store' import { useStore } from '@/store'
import { MUTATION_TYPES as TIMELINE_MUTATION } from '@/store/TimelineSpace' import { LocalAccount } from '~/src/types/localAccount'
import { ACTION_TYPES } from '@/store/TimelineSpace/Contents/Lists/Index' import { LocalServer } from '~/src/types/localServer'
import { ACTION_TYPES as SIDE_MENU_ACTION } from '@/store/TimelineSpace/SideMenu' import { MyWindow } from '~/src/types/global'
export default defineComponent({ export default defineComponent({
name: 'lists', name: 'lists',
setup() { setup() {
const space = 'TimelineSpace/Contents/Lists/Index'
const store = useStore() const store = useStore()
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
const i18n = useI18next() const i18n = useI18next()
const title = ref<string>('') 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 lists = ref<Array<Entity.List>>([])
const loadingBackground = computed(() => store.state.App.theme.wrapper_mask_color) 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 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(() => { onMounted(async () => {
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true) const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
fetch().finally(() => { account.account = a
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false) 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 () => { const load = async () => {
return store.dispatch(`${space}/${ACTION_TYPES.FETCH_LISTS}`).catch(() => { if (!client.value) return
try {
const res = await client.value.getLists()
lists.value = res.data
} catch (err) {
console.error(err)
ElMessage({ ElMessage({
message: i18n.t('message.lists_fetch_error'), message: i18n.t('message.lists_fetch_error'),
type: 'error' type: 'error'
}) })
}) }
} }
const createList = async () => { const createList = async () => {
creating.value = true if (!client.value) return
loading.value = true
try { try {
await store.dispatch(`${space}/${ACTION_TYPES.CREATE_LIST}`, title.value) await client.value.createList(title.value)
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_LISTS}`) await load()
} catch (err) { } catch (err) {
console.error(err)
ElMessage({ ElMessage({
message: i18n.t('message.list_create_error'), message: i18n.t('message.list_create_error'),
type: 'error' type: 'error'
}) })
} finally { } finally {
creating.value = false loading.value = false
} }
await store.dispatch(`TimelineSpace/SideMenu/${SIDE_MENU_ACTION.FETCH_LISTS}`)
} }
const edit = (list: Entity.List) => { const edit = (list: Entity.List) => {
return router.push(`/${id.value}/lists/${list.id}/edit`) return router.push(`/${id.value}/lists/${list.id}/edit`)
@ -89,19 +107,19 @@ export default defineComponent({
confirmButtonText: i18n.t('lists.index.delete.confirm.ok'), confirmButtonText: i18n.t('lists.index.delete.confirm.ok'),
cancelButtonText: i18n.t('lists.index.delete.confirm.cancel'), cancelButtonText: i18n.t('lists.index.delete.confirm.cancel'),
type: 'warning' 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 { return {
id, id,
creating, loading,
title, title,
lists, lists,
loadingBackground, backgroundColor,
createList, createList,
edit, edit,
del del

View File

@ -1,6 +1,7 @@
<template> <template>
<div name="list" class="list-timeline"> <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 }"> <template #default="{ item, index, active }">
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true"> <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
<toot <toot
@ -23,18 +24,15 @@
</template> </template>
<script lang="ts"> <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 { logicAnd } from '@vueuse/math'
import { useMagicKeys, whenever } from '@vueuse/core' import { useMagicKeys, whenever } from '@vueuse/core'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { useI18next } from 'vue3-i18next' import { useI18next } from 'vue3-i18next'
import { Entity } from 'megalodon' import generator, { Entity, MegalodonInterface } from 'megalodon'
import { useStore } from '@/store' import { useStore } from '@/store'
import Toot from '@/components/organisms/Toot.vue' 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 { 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 { LocalAccount } from '~/src/types/localAccount'
import { LocalServer } from '~/src/types/localServer' import { LocalServer } from '~/src/types/localServer'
import { MyWindow } from '~/src/types/global' import { MyWindow } from '~/src/types/global'
@ -45,7 +43,6 @@ export default defineComponent({
props: ['list_id'], props: ['list_id'],
components: { Toot }, components: { Toot },
setup(props) { setup(props) {
const space = 'TimelineSpace/Contents/Lists/Show'
const store = useStore() const store = useStore()
const route = useRoute() const route = useRoute()
const i18n = useI18next() const i18n = useI18next()
@ -58,17 +55,21 @@ export default defineComponent({
const focusedId = ref<string | null>(null) const focusedId = ref<string | null>(null)
const scroller = ref<any>(null) const scroller = ref<any>(null)
const lazyLoading = ref<boolean>(false) const lazyLoading = ref<boolean>(false)
const loading = ref(false)
const heading = ref<boolean>(true) const heading = ref<boolean>(true)
const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({ const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
account: null, account: null,
server: 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 startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`]) 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 shortcutEnabled = computed(() => !modalOpened.value)
const userAgent = computed(() => store.state.App.userAgent)
const backgroundColor = computed(() => store.state.App.theme.background_color)
onMounted(async () => { onMounted(async () => {
const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value) const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
@ -76,15 +77,18 @@ export default defineComponent({
account.server = s account.server = s
document.getElementById('scroller')?.addEventListener('scroll', onScroll) document.getElementById('scroller')?.addEventListener('scroll', onScroll)
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true) client.value = generator(s.sns, s.baseURL, a.accessToken, userAgent.value)
load().finally(() => { loading.value = true
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false) try {
}) await load(list_id.value)
} finally {
loading.value = false
}
}) })
watch(list_id, () => { watch(list_id, id => {
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true) loading.value = true
load().finally(() => { load(id).finally(() => {
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, false) loading.value = false
}) })
}) })
watch(startReload, (newVal, oldVal) => { watch(startReload, (newVal, oldVal) => {
@ -103,7 +107,7 @@ export default defineComponent({
}) })
whenever(logicAnd(j, shortcutEnabled), () => { whenever(logicAnd(j, shortcutEnabled), () => {
if (focusedId.value === null) { 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 { } else {
focusNext() focusNext()
} }
@ -115,9 +119,6 @@ export default defineComponent({
reload() reload()
}) })
onBeforeUnmount(() => {
store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
})
onUnmounted(() => { onUnmounted(() => {
heading.value = true heading.value = true
const el = document.getElementById('scroller') const el = document.getElementById('scroller')
@ -127,42 +128,42 @@ export default defineComponent({
} }
}) })
const load = async () => { const load = async (id: string) => {
await store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`) if (!client.value) return
try { try {
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_TIMELINE}`, { const res = await client.value.getListTimeline(id, { limit: 20 })
listID: list_id.value, statuses.value = res.data
account: account.account,
server: account.server
})
} catch (err) { } catch (err) {
console.error(err)
ElMessage({ ElMessage({
message: i18n.t('message.timeline_fetch_error'), message: i18n.t('message.timeline_fetch_error'),
type: 'error' type: 'error'
}) })
} }
store.dispatch(`${space}/${ACTION_TYPES.START_STREAMING}`, { listID: list_id.value, account: account.account }).catch(() => { if (!account.account) return
ElMessage({ win.ipcRenderer.on(`update-list-streamings-${account.account.id}`, (_, update: Entity.Status) => {
message: i18n.t('message.start_streaming_error'), statuses.value = [update, ...statuses.value]
type: 'error' })
}) 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) => { const onScroll = (event: Event) => {
if ( if (
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >= (event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
document.getElementById('scroller')!.scrollHeight - 10 && document.getElementById('scroller')!.scrollHeight - 10 &&
!lazyLoading !lazyLoading.value
) { ) {
const lastStatus = statuses.value[statuses.value.length - 1]
lazyLoading.value = true lazyLoading.value = true
store client.value
.dispatch(`${space}/${ACTION_TYPES.LAZY_FETCH_TIMELINE}`, { ?.getListTimeline(list_id.value, { max_id: lastStatus.id, limit: 20 })
list_id: list_id.value,
status: timeline.value[timeline.value.length - 1],
account: account.account,
server: account.server
})
.catch(() => { .catch(() => {
ElMessage({ ElMessage({
message: i18n.t('message.timeline_fetch_error'), message: i18n.t('message.timeline_fetch_error'),
@ -181,47 +182,46 @@ export default defineComponent({
} }
} }
const reload = async () => { const reload = async () => {
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, true) loading.value = true
try { try {
await store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`) await load(list_id.value)
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'
})
})
} finally { } finally {
store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false) loading.value = false
} }
} }
const updateToot = (message: Entity.Status) => { 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) => { const deleteToot = (id: string) => {
store.commit(`${space}/${MUTATION_TYPES.DELETE_TOOT}`, message.id) statuses.value = statuses.value.filter(status => {
} if (status.reblog !== null && status.reblog.id === id) {
const upper = () => { return false
scroller.value.scrollToItem(0) } else {
focusedId.value = null return status.id !== id
}
})
} }
const focusNext = () => { const focusNext = () => {
if (currentFocusedIndex.value === -1) { if (currentFocusedIndex.value === -1) {
focusedId.value = timeline.value[0].uri + timeline.value[0].id focusedId.value = statuses.value[0].uri + statuses.value[0].id
} else if (currentFocusedIndex.value < timeline.value.length) { } else if (currentFocusedIndex.value < statuses.value.length) {
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 focusPrev = () => { const focusPrev = () => {
if (currentFocusedIndex.value === 0) { if (currentFocusedIndex.value === 0) {
focusedId.value = null focusedId.value = null
} else if (currentFocusedIndex.value > 0) { } 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) => { const focusToot = (message: Entity.Status) => {
@ -230,15 +230,16 @@ export default defineComponent({
return { return {
scroller, scroller,
timeline, statuses,
focusedId, focusedId,
modalOpened, modalOpened,
updateToot, updateToot,
deleteToot, deleteToot,
focusToot, focusToot,
heading, heading,
upper, account,
account loading,
backgroundColor
} }
} }
}) })

View File

@ -41,7 +41,6 @@ import { useI18next } from 'vue3-i18next'
import { useMagicKeys, whenever } from '@vueuse/core' import { useMagicKeys, whenever } from '@vueuse/core'
import { useStore } from '@/store' import { useStore } from '@/store'
import { ACTION_TYPES } from '@/store/TimelineSpace/Modals/AddListMember' import { ACTION_TYPES } from '@/store/TimelineSpace/Modals/AddListMember'
import { ACTION_TYPES as LIST_ACTION_TYPES } from '@/store/TimelineSpace/Contents/Lists/Edit'
export default defineComponent({ export default defineComponent({
name: 'add-list-member', name: 'add-list-member',
@ -55,7 +54,6 @@ export default defineComponent({
const loadingBackground = computed(() => store.state.App.theme.wrapper_mask_color) const loadingBackground = computed(() => store.state.App.theme.wrapper_mask_color)
const accounts = computed(() => store.state.TimelineSpace.Modals.AddListMember.accounts) const accounts = computed(() => store.state.TimelineSpace.Modals.AddListMember.accounts)
const listId = computed(() => store.state.TimelineSpace.Modals.AddListMember.targetListId)
const addListMemberModal = computed({ const addListMemberModal = computed({
get: () => store.state.TimelineSpace.Modals.AddListMember.modalOpen, get: () => store.state.TimelineSpace.Modals.AddListMember.modalOpen,
set: (value: boolean) => store.dispatch(`${space}/${ACTION_TYPES.CHANGE_MODAL}`, value) set: (value: boolean) => store.dispatch(`${space}/${ACTION_TYPES.CHANGE_MODAL}`, value)
@ -80,7 +78,6 @@ export default defineComponent({
.dispatch(`${space}/${ACTION_TYPES.ADD}`, account) .dispatch(`${space}/${ACTION_TYPES.ADD}`, account)
.then(() => { .then(() => {
store.dispatch(`${space}/${ACTION_TYPES.CHANGE_MODAL}`, false) store.dispatch(`${space}/${ACTION_TYPES.CHANGE_MODAL}`, false)
store.dispatch(`TimelineSpace/Contents/Lists/Edit/${LIST_ACTION_TYPES.FETCH_MEMBERS}`, listId.value)
}) })
.catch(() => { .catch(() => {
ElMessage({ ElMessage({

View File

@ -2,7 +2,6 @@ import Home, { HomeState } from './Contents/Home'
import Notifications, { NotificationsState } from './Contents/Notifications' import Notifications, { NotificationsState } from './Contents/Notifications'
import Local, { LocalState } from './Contents/Local' import Local, { LocalState } from './Contents/Local'
import Search, { SearchModuleState } from './Contents/Search' import Search, { SearchModuleState } from './Contents/Search'
import Lists, { ListsModuleState } from './Contents/Lists'
import DirectMessages, { DirectMessagesState } from './Contents/DirectMessages' import DirectMessages, { DirectMessagesState } from './Contents/DirectMessages'
import { Module, MutationTree, ActionTree } from 'vuex' import { Module, MutationTree, ActionTree } from 'vuex'
import { RootState } from '@/store' import { RootState } from '@/store'
@ -17,7 +16,6 @@ type ContentsModule = {
DirectMessages: DirectMessagesState DirectMessages: DirectMessagesState
Local: LocalState Local: LocalState
Search: SearchModuleState Search: SearchModuleState
Lists: ListsModuleState
} }
export type ContentsModuleState = ContentsModule & ContentsState export type ContentsModuleState = ContentsModule & ContentsState
@ -54,8 +52,7 @@ const Contents: Module<ContentsState, RootState> = {
Notifications, Notifications,
Local, Local,
DirectMessages, DirectMessages,
Search, Search
Lists
}, },
mutations: mutations, mutations: mutations,
actions: actions actions: actions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>