diff --git a/src/client/init.ts b/src/client/init.ts index 1fcd97190..73e02145d 100644 --- a/src/client/init.ts +++ b/src/client/init.ts @@ -20,6 +20,7 @@ import Menu from './components/menu.vue'; import { router } from './router'; import { applyTheme, lightTheme, builtinThemes } from './theme'; import { isDeviceDarkmode } from './scripts/is-device-darkmode'; +import createStore from './store'; Vue.use(Vuex); Vue.use(VueHotkey); @@ -134,36 +135,38 @@ document.body.setAttribute('ontouchstart', ''); // アプリ基底要素マウント document.body.innerHTML = '
'; -const os = new MiOS(); +const store = createStore(); + +const os = new MiOS(store); os.init(async () => { window.addEventListener('storage', e => { if (e.key === 'vuex') { - os.store.replaceState(JSON.parse(localStorage['vuex'])); + store.replaceState(JSON.parse(localStorage['vuex'])); } else if (e.key === 'i') { location.reload(); } }, false) - os.store.watch(state => state.device.darkMode, darkMode => { + store.watch(state => state.device.darkMode, darkMode => { // TODO: このファイルでbuiltinThemesを参照するとcode splittingが効かず、初回読み込み時に全てのテーマコードを読み込むことになってしまい無駄なので何とかする - const themes = builtinThemes.concat(os.store.state.device.themes); - applyTheme(themes.find(x => x.id === (darkMode ? os.store.state.device.darkTheme : os.store.state.device.lightTheme))); + const themes = builtinThemes.concat(store.state.device.themes); + applyTheme(themes.find(x => x.id === (darkMode ? store.state.device.darkTheme : store.state.device.lightTheme))); }); //#region Sync dark mode - if (os.store.state.device.syncDeviceDarkMode) { - os.store.commit('device/set', { key: 'darkMode', value: isDeviceDarkmode() }); + if (store.state.device.syncDeviceDarkMode) { + store.commit('device/set', { key: 'darkMode', value: isDeviceDarkmode() }); } window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => { - if (os.store.state.device.syncDeviceDarkMode) { - os.store.commit('device/set', { key: 'darkMode', value: mql.matches }); + if (store.state.device.syncDeviceDarkMode) { + store.commit('device/set', { key: 'darkMode', value: mql.matches }); } }); //#endregion - if ('Notification' in window && os.store.getters.isSignedIn) { + if ('Notification' in window && store.getters.isSignedIn) { // 許可を得ていなかったらリクエスト if (Notification.permission === 'default') { Notification.requestPermission(); @@ -171,7 +174,7 @@ os.init(async () => { } const app = new Vue({ - store: os.store, + store: store, metaInfo: { title: null, titleTemplate: title => title ? `${title} | ${(instanceName || 'Misskey')}` : (instanceName || 'Misskey') @@ -183,7 +186,7 @@ os.init(async () => { }; }, methods: { - api: os.api, + api: (endpoint: string, data: { [x: string]: any } = {}, token?) => store.dispatch('api', { endpoint, data, token }), signout: os.signout, new(vm, props) { const x = new vm({ @@ -234,58 +237,58 @@ os.init(async () => { // マウント app.$mount('#app'); - if (app.$store.getters.isSignedIn) { + if (store.getters.isSignedIn) { const main = os.stream.useSharedConnection('main'); // 自分の情報が更新されたとき main.on('meUpdated', i => { - app.$store.dispatch('mergeMe', i); + store.dispatch('mergeMe', i); }); main.on('readAllNotifications', () => { - app.$store.dispatch('mergeMe', { + store.dispatch('mergeMe', { hasUnreadNotification: false }); }); main.on('unreadNotification', () => { - app.$store.dispatch('mergeMe', { + store.dispatch('mergeMe', { hasUnreadNotification: true }); }); main.on('unreadMention', () => { - app.$store.dispatch('mergeMe', { + store.dispatch('mergeMe', { hasUnreadMentions: true }); }); main.on('readAllUnreadMentions', () => { - app.$store.dispatch('mergeMe', { + store.dispatch('mergeMe', { hasUnreadMentions: false }); }); main.on('unreadSpecifiedNote', () => { - app.$store.dispatch('mergeMe', { + store.dispatch('mergeMe', { hasUnreadSpecifiedNotes: true }); }); main.on('readAllUnreadSpecifiedNotes', () => { - app.$store.dispatch('mergeMe', { + store.dispatch('mergeMe', { hasUnreadSpecifiedNotes: false }); }); main.on('readAllMessagingMessages', () => { - app.$store.dispatch('mergeMe', { + store.dispatch('mergeMe', { hasUnreadMessagingMessage: false }); }); main.on('unreadMessagingMessage', () => { - app.$store.dispatch('mergeMe', { + store.dispatch('mergeMe', { hasUnreadMessagingMessage: true }); @@ -293,13 +296,13 @@ os.init(async () => { }); main.on('readAllAntennas', () => { - app.$store.dispatch('mergeMe', { + store.dispatch('mergeMe', { hasUnreadAntenna: false }); }); main.on('unreadAntenna', () => { - app.$store.dispatch('mergeMe', { + store.dispatch('mergeMe', { hasUnreadAntenna: true }); @@ -307,13 +310,13 @@ os.init(async () => { }); main.on('readAllAnnouncements', () => { - app.$store.dispatch('mergeMe', { + store.dispatch('mergeMe', { hasUnreadAnnouncement: false }); }); main.on('clientSettingUpdated', x => { - app.$store.commit('settings/set', { + store.commit('settings/set', { key: x.key, value: x.value }); diff --git a/src/client/mios.ts b/src/client/mios.ts index aa2b202ab..63d9f7d3a 100644 --- a/src/client/mios.ts +++ b/src/client/mios.ts @@ -2,16 +2,11 @@ import autobind from 'autobind-decorator'; import Vue from 'vue'; import { EventEmitter } from 'eventemitter3'; -import initStore from './store'; import { apiUrl, version } from './config'; import Progress from './scripts/loading'; import Stream from './scripts/stream'; - -//#region api requests -let spinner = null; -let pending = 0; -//#endregion +import store from './store'; /** * Misskey Operating System @@ -19,7 +14,7 @@ let pending = 0; export default class MiOS extends EventEmitter { public app: Vue; - public store: ReturnType; + public store: ReturnType; /** * A connection manager of home stream @@ -31,6 +26,11 @@ export default class MiOS extends EventEmitter { */ private swRegistration: ServiceWorkerRegistration = null; + constructor(vuex: MiOS['store']) { + super(); + this.store = vuex; + } + @autobind public signout() { this.store.dispatch('logout'); @@ -52,8 +52,6 @@ export default class MiOS extends EventEmitter { }); }; - this.store = initStore(this); - // ユーザーをフェッチしてコールバックする const fetchme = (token, cb) => { let me = null; @@ -187,10 +185,13 @@ export default class MiOS extends EventEmitter { } // Register - this.api('sw/register', { - endpoint: subscription.endpoint, - auth: encode(subscription.getKey('auth')), - publickey: encode(subscription.getKey('p256dh')) + this.store.dispatch('api', { + endpoint: 'sw/register', + data: { + endpoint: subscription.endpoint, + auth: encode(subscription.getKey('auth')), + publickey: encode(subscription.getKey('p256dh')) + } }); }) // When subscribe failed @@ -214,52 +215,6 @@ export default class MiOS extends EventEmitter { // Register service worker navigator.serviceWorker.register(sw); } - - /** - * Misskey APIにリクエストします - * @param endpoint エンドポイント名 - * @param data パラメータ - */ - @autobind - public api(endpoint: string, data: { [x: string]: any } = {}, token?): Promise<{ [x: string]: any }> { - if (++pending === 1) { - spinner = document.createElement('div'); - spinner.setAttribute('id', 'wait'); - document.body.appendChild(spinner); - } - - const onFinally = () => { - if (--pending === 0) spinner.parentNode.removeChild(spinner); - }; - - const promise = new Promise((resolve, reject) => { - // Append a credential - if (this.store.getters.isSignedIn) (data as any).i = this.store.state.i.token; - if (token) (data as any).i = token; - - // Send request - fetch(endpoint.indexOf('://') > -1 ? endpoint : `${apiUrl}/${endpoint}`, { - method: 'POST', - body: JSON.stringify(data), - credentials: 'omit', - cache: 'no-cache' - }).then(async (res) => { - const body = res.status === 204 ? null : await res.json(); - - if (res.status === 200) { - resolve(body); - } else if (res.status === 204) { - resolve(); - } else { - reject(body.error); - } - }).catch(reject); - }); - - promise.then(onFinally, onFinally); - - return promise; - } } /** diff --git a/src/client/store.ts b/src/client/store.ts index 35b932d62..6d007493d 100644 --- a/src/client/store.ts +++ b/src/client/store.ts @@ -1,8 +1,7 @@ import Vuex from 'vuex'; import createPersistedState from 'vuex-persistedstate'; import * as nestedProperty from 'nested-property'; - -import MiOS from './mios'; +import { apiUrl } from './config'; const defaultSettings = { tutorial: 0, @@ -57,13 +56,15 @@ function copy(data: T): T { return JSON.parse(JSON.stringify(data)); } -export default (os: MiOS) => new Vuex.Store({ +export default () => new Vuex.Store({ plugins: [createPersistedState({ paths: ['i', 'device', 'deviceUser', 'settings', 'instance'] })], state: { i: null, + pendingApiRequestsCount: 0, + spinner: null }, getters: { @@ -121,6 +122,47 @@ export default (os: MiOS) => new Vuex.Store({ ctx.commit('settings/init', me.clientData); } }, + + api(ctx, { endpoint, data, token }) { + if (++ctx.state.pendingApiRequestsCount === 1) { + // TODO: spinnerの表示はstoreでやらない + ctx.state.spinner = document.createElement('div'); + ctx.state.spinner.setAttribute('id', 'wait'); + document.body.appendChild(ctx.state.spinner); + } + + const onFinally = () => { + if (--ctx.state.pendingApiRequestsCount === 0) ctx.state.spinner.parentNode.removeChild(ctx.state.spinner); + }; + + const promise = new Promise((resolve, reject) => { + // Append a credential + if (ctx.getters.isSignedIn) (data as any).i = ctx.state.i.token; + if (token) (data as any).i = token; + + // Send request + fetch(endpoint.indexOf('://') > -1 ? endpoint : `${apiUrl}/${endpoint}`, { + method: 'POST', + body: JSON.stringify(data), + credentials: 'omit', + cache: 'no-cache' + }).then(async (res) => { + const body = res.status === 204 ? null : await res.json(); + + if (res.status === 200) { + resolve(body); + } else if (res.status === 204) { + resolve(); + } else { + reject(body.error); + } + }).catch(reject); + }); + + promise.then(onFinally, onFinally); + + return promise; + } }, modules: { @@ -139,9 +181,12 @@ export default (os: MiOS) => new Vuex.Store({ actions: { async fetch(ctx) { - const meta = await os.api('meta', { - detail: false - }); + const meta = await ctx.dispatch('api', { + endpoint: 'meta', + data: { + detail: false + } + }, { root: true }); ctx.commit('set', meta); } @@ -246,10 +291,13 @@ export default (os: MiOS) => new Vuex.Store({ ctx.commit('set', x); if (ctx.rootGetters.isSignedIn) { - os.api('i/update-client-setting', { - name: x.key, - value: x.value - }); + ctx.dispatch('api', { + endpoint: 'i/update-client-setting', + data: { + name: x.key, + value: x.value + } + }, { root: true }); } }, }