Refactor: Swap `dispatch`/`commit` calls with mapped actions/mutations

This commit is contained in:
Svallinn 2021-05-22 00:56:32 +01:00
parent e72fbcf0a4
commit 6ccc7e9fa4
No known key found for this signature in database
GPG Key ID: 09FB527F34037CCA
12 changed files with 81 additions and 45 deletions

View File

@ -1,5 +1,5 @@
import Vue from 'vue' import Vue from 'vue'
import { mapActions } from 'vuex' import { mapActions, mapMutations } from 'vuex'
import { ObserveVisibility } from 'vue-observe-visibility' import { ObserveVisibility } from 'vue-observe-visibility'
import FtFlexBox from './components/ft-flex-box/ft-flex-box.vue' import FtFlexBox from './components/ft-flex-box/ft-flex-box.vue'
import TopNav from './components/top-nav/top-nav.vue' import TopNav from './components/top-nav/top-nav.vue'
@ -82,11 +82,11 @@ export default Vue.extend({
} }
}, },
mounted: function () { mounted: function () {
this.$store.dispatch('grabUserSettings').then(() => { this.grabUserSettings().then(() => {
this.$store.dispatch('grabAllProfiles', this.$t('Profile.All Channels')).then(async () => { this.grabAllProfiles(this.$t('Profile.All Channels')).then(async () => {
this.$store.dispatch('grabHistory') this.grabHistory()
this.$store.dispatch('grabAllPlaylists') this.grabAllPlaylists()
this.$store.commit('setUsingElectron', useElectron) this.setUsingElectron(useElectron)
this.checkThemeSettings() this.checkThemeSettings()
await this.checkLocale() await this.checkLocale()
@ -134,7 +134,7 @@ export default Vue.extend({
locale: this.$i18n.locale locale: this.$i18n.locale
} }
this.$store.dispatch('getRegionData', payload) this.getRegionData(payload)
}, },
checkThemeSettings: function () { checkThemeSettings: function () {
@ -301,7 +301,7 @@ export default Vue.extend({
}, },
handleYoutubeLink: function (href) { handleYoutubeLink: function (href) {
this.$store.dispatch('getYoutubeUrlInfo', href).then((result) => { this.getYoutubeUrlInfo(href).then((result) => {
switch (result.urlType) { switch (result.urlType) {
case 'video': { case 'video': {
const { videoId, timestamp } = result const { videoId, timestamp } = result
@ -393,7 +393,17 @@ export default Vue.extend({
...mapActions([ ...mapActions([
'showToast', 'showToast',
'openExternalLink' 'openExternalLink',
'grabUserSettings',
'grabAllProfiles',
'grabHistory',
'grabAllPlaylists',
'getRegionData',
'getYoutubeUrlInfo'
]),
...mapMutations([
'setUsingElectron'
]) ])
} }
}) })

View File

@ -291,7 +291,7 @@ export default Vue.extend({
}, },
initializeSponsorBlock() { initializeSponsorBlock() {
this.$store.dispatch('sponsorBlockSkipSegments', { this.sponsorBlockSkipSegments({
videoId: this.videoId, videoId: this.videoId,
categories: ['sponsor'] categories: ['sponsor']
}).then((skipSegments) => { }).then((skipSegments) => {
@ -1341,7 +1341,8 @@ export default Vue.extend({
...mapActions([ ...mapActions([
'showToast', 'showToast',
'calculateColorLuminance' 'calculateColorLuminance',
'sponsorBlockSkipSegments'
]) ])
} }
}) })

View File

@ -105,7 +105,7 @@ export default Vue.extend({
searchInput.blur() searchInput.blur()
} }
this.$store.dispatch('getYoutubeUrlInfo', query).then((result) => { this.getYoutubeUrlInfo(query).then((result) => {
switch (result.urlType) { switch (result.urlType) {
case 'video': { case 'video': {
const { videoId, timestamp } = result const { videoId, timestamp } = result
@ -220,7 +220,7 @@ export default Vue.extend({
} }
} }
this.$store.dispatch('invidiousAPICall', searchPayload).then((results) => { this.invidiousAPICall(searchPayload).then((results) => {
this.searchSuggestionsDataList = results.suggestions this.searchSuggestionsDataList = results.suggestions
}).catch((err) => { }).catch((err) => {
console.log(err) console.log(err)
@ -267,7 +267,9 @@ export default Vue.extend({
}, },
...mapActions([ ...mapActions([
'showToast' 'showToast',
'getYoutubeUrlInfo',
'invidiousAPICall'
]) ])
} }
}) })

View File

@ -337,7 +337,7 @@ export default Vue.extend({
} }
} }
this.$store.dispatch('invidiousAPICall', payload).then((response) => { this.invidiousAPICall(payload).then((response) => {
const commentData = response.comments.map((comment) => { const commentData = response.comments.map((comment) => {
comment.showReplies = false comment.showReplies = false
comment.authorLink = comment.authorId comment.authorLink = comment.authorId

View File

@ -1,4 +1,5 @@
import Vue from 'vue' import Vue from 'vue'
import { mapActions } from 'vuex'
import FtLoader from '../ft-loader/ft-loader.vue' import FtLoader from '../ft-loader/ft-loader.vue'
import FtCard from '../ft-card/ft-card.vue' import FtCard from '../ft-card/ft-card.vue'
import FtButton from '../ft-button/ft-button.vue' import FtButton from '../ft-button/ft-button.vue'
@ -183,7 +184,7 @@ export default Vue.extend({
console.log(this.comments.length) console.log(this.comments.length)
if (typeof (comment.superchat) !== 'undefined') { if (typeof (comment.superchat) !== 'undefined') {
this.$store.dispatch('getRandomColorClass').then((data) => { this.getRandomColorClass().then((data) => {
comment.superchat.colorClass = data comment.superchat.colorClass = data
this.superChatComments.unshift(comment) this.superChatComments.unshift(comment)
@ -195,7 +196,7 @@ export default Vue.extend({
} }
if (comment.author.name[0] === 'Ge' || comment.author.name[0] === 'Ne') { if (comment.author.name[0] === 'Ge' || comment.author.name[0] === 'Ne') {
this.$store.dispatch('getRandomColorClass').then((data) => { this.getRandomColorClass().then((data) => {
comment.superChat = { comment.superChat = {
amount: '$5.00', amount: '$5.00',
colorClass: data colorClass: data
@ -260,6 +261,10 @@ export default Vue.extend({
preventDefault: function (event) { preventDefault: function (event) {
event.stopPropagation() event.stopPropagation()
event.preventDefault() event.preventDefault()
} },
...mapActions([
'getRandomColorClass'
])
} }
}) })

View File

@ -277,7 +277,7 @@ export default Vue.extend({
getPlaylistInformationLocal: function () { getPlaylistInformationLocal: function () {
this.isLoading = true this.isLoading = true
this.$store.dispatch('ytGetPlaylistInfo', this.playlistId).then((result) => { this.ytGetPlaylistInfo(this.playlistId).then((result) => {
console.log('done') console.log('done')
console.log(result) console.log(result)
@ -338,7 +338,7 @@ export default Vue.extend({
} }
} }
this.$store.dispatch('invidiousGetPlaylistInfo', payload).then((result) => { this.invidiousGetPlaylistInfo(payload).then((result) => {
console.log('done') console.log('done')
console.log(result) console.log(result)
@ -399,7 +399,9 @@ export default Vue.extend({
}, },
...mapActions([ ...mapActions([
'showToast' 'showToast',
'ytGetPlaylistInfo',
'invidiousGetPlaylistInfo'
]) ])
} }
}) })

View File

@ -341,7 +341,7 @@ export default Vue.extend({
this.isLoading = true this.isLoading = true
this.apiUsed = 'invidious' this.apiUsed = 'invidious'
this.$store.dispatch('invidiousGetChannelInfo', this.id).then((response) => { this.invidiousGetChannelInfo(this.id).then((response) => {
console.log(response) console.log(response)
this.channelName = response.author this.channelName = response.author
this.id = response.authorId this.id = response.authorId
@ -388,7 +388,7 @@ export default Vue.extend({
} }
} }
this.$store.dispatch('invidiousAPICall', payload).then((response) => { this.invidiousAPICall(payload).then((response) => {
this.latestVideos = this.latestVideos.concat(response) this.latestVideos = this.latestVideos.concat(response)
this.latestVideosPage++ this.latestVideosPage++
this.isElementListLoading = false this.isElementListLoading = false
@ -471,7 +471,7 @@ export default Vue.extend({
payload.params.continuation = this.playlistContinuationString payload.params.continuation = this.playlistContinuationString
} }
this.$store.dispatch('invidiousAPICall', payload).then((response) => { this.invidiousAPICall(payload).then((response) => {
this.playlistContinuationString = response.continuation this.playlistContinuationString = response.continuation
this.latestPlaylists = this.latestPlaylists.concat(response.playlists) this.latestPlaylists = this.latestPlaylists.concat(response.playlists)
this.isElementListLoading = false this.isElementListLoading = false
@ -680,7 +680,7 @@ export default Vue.extend({
} }
} }
this.$store.dispatch('invidiousAPICall', payload).then((response) => { this.invidiousAPICall(payload).then((response) => {
this.searchResults = this.searchResults.concat(response) this.searchResults = this.searchResults.concat(response)
this.isElementListLoading = false this.isElementListLoading = false
this.searchPage++ this.searchPage++
@ -707,7 +707,9 @@ export default Vue.extend({
...mapActions([ ...mapActions([
'showToast', 'showToast',
'updateProfile' 'updateProfile',
'invidiousGetChannelInfo',
'invidiousAPICall'
]) ])
} }
}) })

View File

@ -1,4 +1,5 @@
import Vue from 'vue' import Vue from 'vue'
import { mapActions } from 'vuex'
import dateFormat from 'dateformat' import dateFormat from 'dateformat'
import FtLoader from '../../components/ft-loader/ft-loader.vue' import FtLoader from '../../components/ft-loader/ft-loader.vue'
import FtCard from '../../components/ft-card/ft-card.vue' import FtCard from '../../components/ft-card/ft-card.vue'
@ -62,7 +63,7 @@ export default Vue.extend({
getPlaylistLocal: function () { getPlaylistLocal: function () {
this.isLoading = true this.isLoading = true
this.$store.dispatch('ytGetPlaylistInfo', this.playlistId).then((result) => { this.ytGetPlaylistInfo(this.playlistId).then((result) => {
console.log('done') console.log('done')
console.log(result) console.log(result)
@ -120,7 +121,7 @@ export default Vue.extend({
} }
} }
this.$store.dispatch('invidiousGetPlaylistInfo', payload).then((result) => { this.invidiousGetPlaylistInfo(payload).then((result) => {
console.log('done') console.log('done')
console.log(result) console.log(result)
@ -180,6 +181,11 @@ export default Vue.extend({
this.shownResults = history.data this.shownResults = history.data
this.nextPageRef = history.nextPageRef this.nextPageRef = history.nextPageRef
this.isLoading = false this.isLoading = false
} },
...mapActions([
'ytGetPlaylistInfo',
'invidiousGetPlaylistInfo'
])
} }
}) })

View File

@ -1,4 +1,5 @@
import Vue from 'vue' import Vue from 'vue'
import { mapActions } from 'vuex'
import FtLoader from '../../components/ft-loader/ft-loader.vue' import FtLoader from '../../components/ft-loader/ft-loader.vue'
import FtCard from '../../components/ft-card/ft-card.vue' import FtCard from '../../components/ft-card/ft-card.vue'
import FtElementList from '../../components/ft-element-list/ft-element-list.vue' import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
@ -38,7 +39,8 @@ export default Vue.extend({
} }
this.isLoading = true this.isLoading = true
const result = await this.$store.dispatch('invidiousAPICall', searchPayload).catch((err) => { const result = await this.invidiousAPICall(searchPayload)
.catch((err) => {
console.log(err) console.log(err)
}) })
@ -54,6 +56,10 @@ export default Vue.extend({
}) })
this.isLoading = false this.isLoading = false
this.$store.commit('setPopularCache', this.shownResults) this.$store.commit('setPopularCache', this.shownResults)
} },
...mapActions([
'invidiousAPICall'
])
} }
}) })

View File

@ -118,7 +118,7 @@ export default Vue.extend({
payload.options.pages = 1 payload.options.pages = 1
} }
this.$store.dispatch('ytSearch', payload).then((result) => { this.ytSearch(payload).then((result) => {
console.log(result) console.log(result)
if (!result) { if (!result) {
return return
@ -230,7 +230,7 @@ export default Vue.extend({
} }
} }
this.$store.dispatch('invidiousAPICall', searchPayload).then((result) => { this.invidiousAPICall(searchPayload).then((result) => {
if (!result) { if (!result) {
return return
} }
@ -333,7 +333,9 @@ export default Vue.extend({
}, },
...mapActions([ ...mapActions([
'showToast' 'showToast',
'ytSearch',
'invidiousAPICall'
]) ])
} }
}) })

View File

@ -112,7 +112,7 @@ export default Vue.extend({
params: { region: this.region } params: { region: this.region }
} }
this.$store.dispatch('invidiousAPICall', trendingPayload).then((result) => { this.invidiousAPICall(trendingPayload).then((result) => {
if (!result) { if (!result) {
return return
} }
@ -149,7 +149,8 @@ export default Vue.extend({
}, },
...mapActions([ ...mapActions([
'showToast' 'showToast',
'invidiousAPICall'
]) ])
} }
}) })

View File

@ -211,8 +211,7 @@ export default Vue.extend({
this.isLoading = true this.isLoading = true
} }
this.$store this.ytGetVideoInformation(this.videoId)
.dispatch('ytGetVideoInformation', this.videoId)
.then(async result => { .then(async result => {
console.log(result) console.log(result)
@ -516,8 +515,7 @@ export default Vue.extend({
this.dashSrc = this.createInvidiousDashManifest() this.dashSrc = this.createInvidiousDashManifest()
this.videoStoryboardSrc = `${this.invidiousInstance}/api/v1/storyboards/${this.videoId}?height=90` this.videoStoryboardSrc = `${this.invidiousInstance}/api/v1/storyboards/${this.videoId}?height=90`
this.$store this.invidiousGetVideoInformation(this.videoId)
.dispatch('invidiousGetVideoInformation', this.videoId)
.then(result => { .then(result => {
console.log(result) console.log(result)
@ -776,8 +774,7 @@ export default Vue.extend({
}, },
getLegacyFormats: function () { getLegacyFormats: function () {
this.$store this.ytGetVideoInformation(this.videoId)
.dispatch('ytGetVideoInformation', this.videoId)
.then(result => { .then(result => {
this.videoSourceList = result.player_response.streamingData.formats this.videoSourceList = result.player_response.streamingData.formats
}) })
@ -1194,7 +1191,9 @@ export default Vue.extend({
'buildVTTFileLocally', 'buildVTTFileLocally',
'updateHistory', 'updateHistory',
'updateWatchProgress', 'updateWatchProgress',
'getUserDataPath' 'getUserDataPath',
'ytGetVideoInformation',
'invidiousGetVideoInformation'
]) ])
} }
}) })