refs #1804 Move user timeline under nested directory
This commit is contained in:
AkiraFukushima
parent
5d4e1578e7
commit
167095bc7e
|
|
@ -1,166 +1,43 @@
|
|||
<template>
|
||||
<div id="account_timeline">
|
||||
<template v-for="message in pinnedToots">
|
||||
<toot
|
||||
:message="message"
|
||||
:key="message.id"
|
||||
:focused="message.uri + message.id === focusedId"
|
||||
:pinned="true"
|
||||
:overlaid="modalOpened"
|
||||
v-on:update="updatePinnedToot"
|
||||
v-on:delete="deleteToot"
|
||||
@focusNext="focusNext"
|
||||
@focusPrev="focusPrev"
|
||||
@focusLeft="focusTimeline"
|
||||
@selectToot="focusToot(message)"
|
||||
>
|
||||
</toot>
|
||||
</template>
|
||||
<DynamicScroller :items="timeline" :min-item-size="60" class="scroller" page-mode>
|
||||
<template v-slot="{ item, index, active }">
|
||||
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index">
|
||||
<toot
|
||||
:message="item"
|
||||
:key="item.id"
|
||||
:focused="item.uri + item.id === focusedId"
|
||||
:overlaid="modalOpened"
|
||||
v-on:update="updateToot"
|
||||
v-on:delete="deleteToot"
|
||||
@focusNext="focusNext"
|
||||
@focusPrev="focusPrev"
|
||||
@focusLeft="focusTimeline"
|
||||
@selectToot="focusToot(item)"
|
||||
>
|
||||
</toot>
|
||||
</DynamicScrollerItem>
|
||||
</template>
|
||||
</DynamicScroller>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
|
||||
<div class="tabs">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick" stretch>
|
||||
<el-tab-pane label="Posts" name="posts"><Posts :account="account" /></el-tab-pane>
|
||||
<el-tab-pane label="Posts and replies" name="posts_and_replies">Posts and replies</el-tab-pane>
|
||||
<el-tab-pane label="Media" name="media">Media</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
import { Event } from '~/src/renderer/components/event'
|
||||
import Posts from './Timeline/Posts'
|
||||
|
||||
export default {
|
||||
name: 'timeline',
|
||||
props: ['account'],
|
||||
components: { Toot },
|
||||
components: {
|
||||
Posts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
focusedId: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('TimelineSpace/Contents/SideBar/AccountProfile/Timeline', {
|
||||
timeline: state => state.timeline,
|
||||
pinnedToots: state => state.pinnedToots,
|
||||
lazyLoading: state => state.lazyLoading
|
||||
}),
|
||||
...mapState('App', {
|
||||
backgroundColor: state => state.theme.background_color
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened'])
|
||||
},
|
||||
created() {
|
||||
this.load()
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/clearTimeline')
|
||||
document.getElementById('sidebar_scrollable').addEventListener('scroll', this.onScroll)
|
||||
Event.$on('focus-sidebar', () => {
|
||||
this.focusedId = 0
|
||||
this.$nextTick(function () {
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
})
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
Event.$emit('focus-timeline')
|
||||
Event.$off('focus-sidebar')
|
||||
},
|
||||
destroyed() {
|
||||
if (document.getElementById('sidebar_scrollable') !== undefined && document.getElementById('sidebar_scrollable') !== null) {
|
||||
document.getElementById('sidebar_scrollable').removeEventListener('scroll', this.onScroll)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
account: function (_newAccount, _oldAccount) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/clearTimeline')
|
||||
this.load()
|
||||
activeName: 'posts'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/fetchTimeline', this.account).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
onScroll(event) {
|
||||
// for lazyLoading
|
||||
if (
|
||||
event.target.clientHeight + event.target.scrollTop >= document.getElementById('account_profile').clientHeight - 10 &&
|
||||
!this.lazyloading
|
||||
) {
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/lazyFetchTimeline', {
|
||||
account: this.account,
|
||||
status: this.timeline[this.timeline.length - 1]
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err)
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
updatePinnedToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/updatePinnedToot', message)
|
||||
},
|
||||
updateToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/updateToot', message)
|
||||
},
|
||||
deleteToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/deleteToot', message)
|
||||
},
|
||||
focusNext() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === -1) {
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
} else if (currentIndex < this.timeline.length - 1) {
|
||||
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
|
||||
}
|
||||
},
|
||||
focusPrev() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex > 0) {
|
||||
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
|
||||
}
|
||||
},
|
||||
focusToot(message) {
|
||||
this.focusedId = message.uri + message.id
|
||||
},
|
||||
focusTimeline() {
|
||||
this.focusedId = 0
|
||||
Event.$emit('focus-timeline')
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.loading-card {
|
||||
height: 60px;
|
||||
}
|
||||
.tabs /deep/ {
|
||||
.el-tabs__item {
|
||||
color: unset;
|
||||
}
|
||||
|
||||
.loading-card:empty {
|
||||
height: 0;
|
||||
.el-tabs__item.is-active {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<div id="timeline">
|
||||
<template v-for="message in pinnedToots">
|
||||
<toot
|
||||
:message="message"
|
||||
:key="message.id"
|
||||
:focused="message.uri + message.id === focusedId"
|
||||
:pinned="true"
|
||||
:overlaid="modalOpened"
|
||||
v-on:update="updatePinnedToot"
|
||||
v-on:delete="deleteToot"
|
||||
@focusNext="focusNext"
|
||||
@focusPrev="focusPrev"
|
||||
@focusLeft="focusTimeline"
|
||||
@selectToot="focusToot(message)"
|
||||
>
|
||||
</toot>
|
||||
</template>
|
||||
<DynamicScroller :items="timeline" :min-item-size="60" class="scroller" page-mode>
|
||||
<template v-slot="{ item, index, active }">
|
||||
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index">
|
||||
<toot
|
||||
:message="item"
|
||||
:key="item.id"
|
||||
:focused="item.uri + item.id === focusedId"
|
||||
:overlaid="modalOpened"
|
||||
v-on:update="updateToot"
|
||||
v-on:delete="deleteToot"
|
||||
@focusNext="focusNext"
|
||||
@focusPrev="focusPrev"
|
||||
@focusLeft="focusTimeline"
|
||||
@selectToot="focusToot(item)"
|
||||
>
|
||||
</toot>
|
||||
</DynamicScrollerItem>
|
||||
</template>
|
||||
</DynamicScroller>
|
||||
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
import { Event } from '~/src/renderer/components/event'
|
||||
|
||||
export default {
|
||||
name: 'posts',
|
||||
props: ['account'],
|
||||
components: { Toot },
|
||||
data() {
|
||||
return {
|
||||
focusedId: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts', {
|
||||
timeline: state => state.timeline,
|
||||
pinnedToots: state => state.pinnedToots,
|
||||
lazyLoading: state => state.lazyLoading
|
||||
}),
|
||||
...mapState('App', {
|
||||
backgroundColor: state => state.theme.background_color
|
||||
}),
|
||||
...mapGetters('TimelineSpace/Modals', ['modalOpened'])
|
||||
},
|
||||
created() {
|
||||
this.load()
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/clearTimeline')
|
||||
document.getElementById('sidebar_scrollable').addEventListener('scroll', this.onScroll)
|
||||
Event.$on('focus-sidebar', () => {
|
||||
this.focusedId = 0
|
||||
this.$nextTick(function () {
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
})
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
Event.$emit('focus-timeline')
|
||||
Event.$off('focus-sidebar')
|
||||
},
|
||||
destroyed() {
|
||||
if (document.getElementById('sidebar_scrollable') !== undefined && document.getElementById('sidebar_scrollable') !== null) {
|
||||
document.getElementById('sidebar_scrollable').removeEventListener('scroll', this.onScroll)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
account: function (_newAccount, _oldAccount) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/clearTimeline')
|
||||
this.load()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/fetchTimeline', this.account).catch(() => {
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
onScroll(event) {
|
||||
// for lazyLoading
|
||||
if (
|
||||
event.target.clientHeight + event.target.scrollTop >= document.getElementById('account_profile').clientHeight - 10 &&
|
||||
!this.lazyloading
|
||||
) {
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/lazyFetchTimeline', {
|
||||
account: this.account,
|
||||
status: this.timeline[this.timeline.length - 1]
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err)
|
||||
this.$message({
|
||||
message: this.$t('message.timeline_fetch_error'),
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
updatePinnedToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/updatePinnedToot', message)
|
||||
},
|
||||
updateToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/updateToot', message)
|
||||
},
|
||||
deleteToot(message) {
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/Posts/deleteToot', message)
|
||||
},
|
||||
focusNext() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex === -1) {
|
||||
this.focusedId = this.timeline[0].uri + this.timeline[0].id
|
||||
} else if (currentIndex < this.timeline.length - 1) {
|
||||
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
|
||||
}
|
||||
},
|
||||
focusPrev() {
|
||||
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
|
||||
if (currentIndex > 0) {
|
||||
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
|
||||
}
|
||||
},
|
||||
focusToot(message) {
|
||||
this.focusedId = message.uri + message.id
|
||||
},
|
||||
focusTimeline() {
|
||||
this.focusedId = 0
|
||||
Event.$emit('focus-timeline')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.loading-card {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.loading-card:empty {
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -227,9 +227,9 @@ const getters: GetterTree<AccountProfileState, RootState> = {
|
|||
const AccountProfile: Module<AccountProfileState, RootState> = {
|
||||
namespaced: true,
|
||||
modules: {
|
||||
Timeline,
|
||||
Follows,
|
||||
Followers
|
||||
Followers,
|
||||
Timeline
|
||||
},
|
||||
state: state,
|
||||
mutations: mutations,
|
||||
|
|
|
|||
|
|
@ -1,136 +1,24 @@
|
|||
import generator, { Entity } from 'megalodon'
|
||||
import { Module, MutationTree, ActionTree } from 'vuex'
|
||||
import { Module } from 'vuex'
|
||||
import { RootState } from '@/store'
|
||||
import { LoadPositionWithAccount } from '@/types/loadPosition'
|
||||
|
||||
export type TimelineState = {
|
||||
timeline: Array<Entity.Status>
|
||||
pinnedToots: Array<Entity.Status>
|
||||
lazyLoading: boolean
|
||||
import Posts, { PostsState } from './Timeline/Posts'
|
||||
|
||||
export type TimelineState = {}
|
||||
|
||||
type TimelineModule = {
|
||||
Posts: PostsState
|
||||
}
|
||||
|
||||
const state = (): TimelineState => ({
|
||||
timeline: [],
|
||||
pinnedToots: [],
|
||||
lazyLoading: false
|
||||
})
|
||||
export type TimelineModuleState = TimelineModule & TimelineState
|
||||
|
||||
export const MUTATION_TYPES = {
|
||||
UPDATE_TIMELINE: 'updateTimeline',
|
||||
INSERT_TIMELINE: 'insertTimeline',
|
||||
UPDATE_PINNED_TOOTS: 'updatePinnedToots',
|
||||
CHANGE_LAZY_LOADING: 'changeLazyLoading',
|
||||
UPDATE_PINNED_TOOT: 'updatePinnedToot',
|
||||
UPDATE_TOOT: 'updateToot',
|
||||
DELETE_TOOT: 'deleteToot'
|
||||
}
|
||||
|
||||
const mutations: MutationTree<TimelineState> = {
|
||||
[MUTATION_TYPES.UPDATE_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_PINNED_TOOTS]: (state, messages: Array<Entity.Status>) => {
|
||||
state.pinnedToots = messages
|
||||
},
|
||||
[MUTATION_TYPES.CHANGE_LAZY_LOADING]: (state, value: boolean) => {
|
||||
state.lazyLoading = value
|
||||
},
|
||||
[MUTATION_TYPES.UPDATE_PINNED_TOOT]: (state, message: Entity.Status) => {
|
||||
state.pinnedToots = state.pinnedToots.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.UPDATE_TOOT]: (state, message: Entity.Status) => {
|
||||
// Replace target message in timeline
|
||||
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, message: Entity.Status) => {
|
||||
state.timeline = state.timeline.filter(toot => {
|
||||
if (toot.reblog !== null && toot.reblog.id === message.id) {
|
||||
return false
|
||||
} else {
|
||||
return toot.id !== message.id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const actions: ActionTree<TimelineState, RootState> = {
|
||||
fetchTimeline: async ({ commit, rootState }, account: Account) => {
|
||||
commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true, { root: true })
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
rootState.TimelineSpace.account.accessToken,
|
||||
rootState.App.userAgent
|
||||
)
|
||||
const pinned = await client.getAccountStatuses(account.id, { pinned: true, limit: 10 })
|
||||
commit(MUTATION_TYPES.UPDATE_PINNED_TOOTS, pinned.data)
|
||||
const res = await client.getAccountStatuses(account.id, { limit: 40, pinned: false })
|
||||
commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false, { root: true })
|
||||
commit(MUTATION_TYPES.UPDATE_TIMELINE, res.data)
|
||||
return res.data
|
||||
},
|
||||
lazyFetchTimeline: async ({ state, commit, rootState }, loadPosition: LoadPositionWithAccount): Promise<null> => {
|
||||
if (state.lazyLoading) {
|
||||
return Promise.resolve(null)
|
||||
}
|
||||
commit(MUTATION_TYPES.CHANGE_LAZY_LOADING, true)
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
rootState.TimelineSpace.account.accessToken,
|
||||
rootState.App.userAgent
|
||||
)
|
||||
try {
|
||||
const res = await client.getAccountStatuses(loadPosition.account.id, {
|
||||
max_id: loadPosition.status.id,
|
||||
limit: 40,
|
||||
pinned: false
|
||||
})
|
||||
commit(MUTATION_TYPES.INSERT_TIMELINE, res.data)
|
||||
} finally {
|
||||
commit(MUTATION_TYPES.CHANGE_LAZY_LOADING, false)
|
||||
}
|
||||
return null
|
||||
},
|
||||
clearTimeline: ({ commit }) => {
|
||||
commit(MUTATION_TYPES.UPDATE_TIMELINE, [])
|
||||
}
|
||||
}
|
||||
const state = (): TimelineState => ({})
|
||||
|
||||
const Timeline: Module<TimelineState, RootState> = {
|
||||
namespaced: true,
|
||||
state: state,
|
||||
mutations: mutations,
|
||||
actions: actions
|
||||
modules: {
|
||||
Posts
|
||||
},
|
||||
state: state
|
||||
}
|
||||
|
||||
export default Timeline
|
||||
|
|
|
|||
|
|
@ -0,0 +1,136 @@
|
|||
import generator, { Entity } from 'megalodon'
|
||||
import { Module, MutationTree, ActionTree } from 'vuex'
|
||||
import { RootState } from '@/store'
|
||||
import { LoadPositionWithAccount } from '@/types/loadPosition'
|
||||
|
||||
export type PostsState = {
|
||||
timeline: Array<Entity.Status>
|
||||
pinnedToots: Array<Entity.Status>
|
||||
lazyLoading: boolean
|
||||
}
|
||||
|
||||
const state = (): PostsState => ({
|
||||
timeline: [],
|
||||
pinnedToots: [],
|
||||
lazyLoading: false
|
||||
})
|
||||
|
||||
export const MUTATION_TYPES = {
|
||||
UPDATE_TIMELINE: 'updateTimeline',
|
||||
INSERT_TIMELINE: 'insertTimeline',
|
||||
UPDATE_PINNED_TOOTS: 'updatePinnedToots',
|
||||
CHANGE_LAZY_LOADING: 'changeLazyLoading',
|
||||
UPDATE_PINNED_TOOT: 'updatePinnedToot',
|
||||
UPDATE_TOOT: 'updateToot',
|
||||
DELETE_TOOT: 'deleteToot'
|
||||
}
|
||||
|
||||
const mutations: MutationTree<PostsState> = {
|
||||
[MUTATION_TYPES.UPDATE_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_PINNED_TOOTS]: (state, messages: Array<Entity.Status>) => {
|
||||
state.pinnedToots = messages
|
||||
},
|
||||
[MUTATION_TYPES.CHANGE_LAZY_LOADING]: (state, value: boolean) => {
|
||||
state.lazyLoading = value
|
||||
},
|
||||
[MUTATION_TYPES.UPDATE_PINNED_TOOT]: (state, message: Entity.Status) => {
|
||||
state.pinnedToots = state.pinnedToots.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.UPDATE_TOOT]: (state, message: Entity.Status) => {
|
||||
// Replace target message in timeline
|
||||
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, message: Entity.Status) => {
|
||||
state.timeline = state.timeline.filter(toot => {
|
||||
if (toot.reblog !== null && toot.reblog.id === message.id) {
|
||||
return false
|
||||
} else {
|
||||
return toot.id !== message.id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const actions: ActionTree<PostsState, RootState> = {
|
||||
fetchTimeline: async ({ commit, rootState }, account: Account) => {
|
||||
commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', true, { root: true })
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
rootState.TimelineSpace.account.accessToken,
|
||||
rootState.App.userAgent
|
||||
)
|
||||
const pinned = await client.getAccountStatuses(account.id, { pinned: true, limit: 10 })
|
||||
commit(MUTATION_TYPES.UPDATE_PINNED_TOOTS, pinned.data)
|
||||
const res = await client.getAccountStatuses(account.id, { limit: 40, pinned: false })
|
||||
commit('TimelineSpace/Contents/SideBar/AccountProfile/changeLoading', false, { root: true })
|
||||
commit(MUTATION_TYPES.UPDATE_TIMELINE, res.data)
|
||||
return res.data
|
||||
},
|
||||
lazyFetchTimeline: async ({ state, commit, rootState }, loadPosition: LoadPositionWithAccount): Promise<null> => {
|
||||
if (state.lazyLoading) {
|
||||
return Promise.resolve(null)
|
||||
}
|
||||
commit(MUTATION_TYPES.CHANGE_LAZY_LOADING, true)
|
||||
const client = generator(
|
||||
rootState.TimelineSpace.sns,
|
||||
rootState.TimelineSpace.account.baseURL,
|
||||
rootState.TimelineSpace.account.accessToken,
|
||||
rootState.App.userAgent
|
||||
)
|
||||
try {
|
||||
const res = await client.getAccountStatuses(loadPosition.account.id, {
|
||||
max_id: loadPosition.status.id,
|
||||
limit: 40,
|
||||
pinned: false
|
||||
})
|
||||
commit(MUTATION_TYPES.INSERT_TIMELINE, res.data)
|
||||
} finally {
|
||||
commit(MUTATION_TYPES.CHANGE_LAZY_LOADING, false)
|
||||
}
|
||||
return null
|
||||
},
|
||||
clearTimeline: ({ commit }) => {
|
||||
commit(MUTATION_TYPES.UPDATE_TIMELINE, [])
|
||||
}
|
||||
}
|
||||
|
||||
const Posts: Module<PostsState, RootState> = {
|
||||
namespaced: true,
|
||||
state: state,
|
||||
mutations: mutations,
|
||||
actions: actions
|
||||
}
|
||||
|
||||
export default Posts
|
||||
Loading…
Reference in New Issue