Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

refs #3301 Rewrite TimelineSpace/HeaderMenu with composition API

This commit is contained in:
AkiraFukushima 2022-07-01 01:20:25 +09:00
parent 70e1d2c66c
commit 226c36acc1
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
2 changed files with 104 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
src/renderer/components/TimelineSpace/HeaderMenu.vue
View File

@ -36,96 +36,101 @@
</nav> </nav>
</template> </template>
<script> <script lang="ts">
import { mapState } from 'vuex' import { defineComponent, ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18next } from 'vue3-i18next'
import { useStore } from '@/store'
import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/HeaderMenu'
import { ACTION_TYPES as NEW_TOOT_ACTION } from '@/store/TimelineSpace/Modals/NewToot'
import { MUTATION_TYPES as HOME_MUTATION } from '@/store/TimelineSpace/Contents/Home'
export default { export default defineComponent({
name: 'header-menu', name: 'header-menu',
data() { setup() {
return { const space = 'TimelineSpace/HeaderMenu'
showReblogs: true, const store = useStore()
showReplies: true const route = useRoute()
} const router = useRouter()
}, const i18n = useI18next()
computed: {
...mapState('TimelineSpace/HeaderMenu', { const showReblogs = ref<boolean>(true)
title: state => state.title, const showReplies = ref<boolean>(true)
loading: state => state.loading
const title = computed(() => store.state.TimelineSpace.HeaderMenu.title)
const loading = computed(() => store.state.TimelineSpace.HeaderMenu.loading)
const id = computed(() => route.params.id)
onMounted(() => {
channelName()
loadTLOption()
store.dispatch(`${space}/${ACTION_TYPES.SETUP_LOADING}`)
}) })
}, watch(
created() { () => route.name,
this.channelName() () => {
this.loadTLOption() channelName()
this.$store.dispatch('TimelineSpace/HeaderMenu/setupLoading') loadTLOption()
},
watch: {
$route: function () {
this.channelName()
this.loadTLOption()
} }
}, )
methods: { const channelName = () => {
id() { switch (route.name) {
return this.$route.params.id
},
channelName() {
switch (this.$route.name) {
case 'home': case 'home':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.home')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.home'))
break break
case 'notifications': case 'notifications':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.notification')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.notification'))
break break
case 'favourites': case 'favourites':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.favourite')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.favourite'))
break break
case 'bookmarks': case 'bookmarks':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.bookmark')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.bookmark'))
break break
case 'mentions': case 'mentions':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.mention')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.mention'))
break break
case 'follow-requests': case 'follow-requests':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.follow_requests')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.follow_requests'))
break break
case 'local': case 'local':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.local')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.local'))
break break
case 'public': case 'public':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.public')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.public'))
break break
case 'hashtag-list': case 'hashtag-list':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.hashtag')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.hashtag'))
break break
case 'tag': case 'tag':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', `#${this.$route.params.tag}`) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, `#${route.params.tag}`)
break break
case 'search': case 'search':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.search')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.search'))
break break
case 'lists': case 'lists':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.lists')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.lists'))
break break
case 'direct-messages': case 'direct-messages':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.direct_messages')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.direct_messages'))
break break
case 'edit-list': case 'edit-list':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.members')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.members'))
break break
case 'list': case 'list':
this.$store.dispatch('TimelineSpace/HeaderMenu/fetchList', this.$route.params.list_id) store.dispatch(`${space}/${ACTION_TYPES.FETCH_LIST}`, route.params.list_id)
break break
default: default:
console.log(this.$route) console.debug(route)
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.home')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.home'))
break break
} }
}, }
openNewTootModal() { const openNewTootModal = () => {
this.$store.dispatch('TimelineSpace/Modals/NewToot/openModal') store.dispatch(`TimelineSpace/Modals/NewToot/${NEW_TOOT_ACTION.OPEN_MODAL}`)
}, }
reload() { const reload = () => {
switch (this.$route.name) { switch (route.name) {
case 'home': case 'home':
case 'notifications': case 'notifications':
case 'mentions': case 'mentions':
@ -136,14 +141,14 @@ export default {
case 'tag': case 'tag':
case 'list': case 'list':
case 'direct-messages': case 'direct-messages':
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', true) store.commit(`${space}/${MUTATION_TYPES.CHANGE_RELOAD}`, true)
break break
default: default:
console.error('Not implemented') console.error('Not implemented: ', route.name)
} }
}, }
reloadable() { const reloadable = () => {
switch (this.$route.name) { switch (route.name) {
case 'home': case 'home':
case 'notifications': case 'notifications':
case 'mentions': case 'mentions':
@ -158,41 +163,54 @@ export default {
default: default:
return false return false
} }
}, }
loadTLOption() { const loadTLOption = () => {
switch (this.$route.name) { switch (route.name) {
case 'home': case 'home':
this.showReblogs = this.$store.state.TimelineSpace.Contents.Home.showReblogs showReblogs.value = store.state.TimelineSpace.Contents.Home.showReblogs
this.showReplies = this.$store.state.TimelineSpace.Contents.Home.showReplies showReplies.value = store.state.TimelineSpace.Contents.Home.showReplies
break break
default: default:
console.log('Not implemented') break
} }
}, }
applyTLOption() { const applyTLOption = () => {
switch (this.$route.name) { switch (route.name) {
case 'home': case 'home':
this.$store.commit('TimelineSpace/Contents/Home/showReblogs', this.showReblogs) store.commit(`TimelineSpace/Contents/Home/${HOME_MUTATION.SHOW_REBLOGS}`, showReblogs.value)
this.$store.commit('TimelineSpace/Contents/Home/showReplies', this.showReplies) store.commit(`TimelineSpace/Contents/Home/${HOME_MUTATION.SHOW_REPLIES}`, showReplies.value)
break break
default: default:
console.log('Not implemented') break
} }
}, }
TLOption() { const TLOption = () => {
switch (this.$route.name) { switch (route.name) {
case 'home': case 'home':
return true return true
default: default:
return false return false
} }
}, }
settings() { const settings = () => {
const url = `/${this.id()}/settings` const url = `/${id.value}/settings`
this.$router.push(url) router.push(url)
} }
return {
title,
loading,
openNewTootModal,
reloadable,
reload,
TLOption,
showReblogs,
showReplies,
applyTLOption,
settings
} }
} }
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

9
src/renderer/store/TimelineSpace/HeaderMenu.ts
View File

@ -33,8 +33,13 @@ const mutations: MutationTree<HeaderMenuState> = {
} }
} }
export const ACTION_TYPES = {
FETCH_LIST: 'fetchList',
SETUP_LOADING: 'setupLoading'
}
const actions: ActionTree<HeaderMenuState, RootState> = { const actions: ActionTree<HeaderMenuState, RootState> = {
fetchList: async ({ commit, rootState }, listID: string): Promise<Entity.List> => { [ACTION_TYPES.FETCH_LIST]: async ({ commit, rootState }, listID: string): Promise<Entity.List> => {
const client = generator( const client = generator(
rootState.TimelineSpace.sns, rootState.TimelineSpace.sns,
rootState.TimelineSpace.account.baseURL, rootState.TimelineSpace.account.baseURL,
@ -45,7 +50,7 @@ const actions: ActionTree<HeaderMenuState, RootState> = {
commit(MUTATION_TYPES.UPDATE_TITLE, `#${res.data.title}`) commit(MUTATION_TYPES.UPDATE_TITLE, `#${res.data.title}`)
return res.data return res.data
}, },
setupLoading: ({ commit }) => { [ACTION_TYPES.SETUP_LOADING]: ({ commit }) => {
const axiosLoading = new AxiosLoading() const axiosLoading = new AxiosLoading()
axiosLoading.on('start', (_: number) => { axiosLoading.on('start', (_: number) => {
commit(MUTATION_TYPES.CHANGE_LOADING, true) commit(MUTATION_TYPES.CHANGE_LOADING, true)