From 39b005899e2533e93cd9a4e38b898d0f0a85884d Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Sat, 26 Nov 2022 15:42:58 +0000 Subject: [PATCH] refactor: inject masto instance via nuxt app (#134) --- components/account/AccountFollowButton.vue | 2 +- components/account/AccountMoreButton.vue | 8 +++--- components/publish/PublishWidget.vue | 6 ++--- components/status/StatusActions.vue | 12 ++++----- components/status/edit/StatusEditHistory.vue | 2 +- composables/cache.ts | 6 ++--- composables/client.ts | 10 +------- composables/masto.ts | 2 +- composables/tiptap/suggestion.ts | 2 +- composables/users.ts | 4 +-- pages/@[account]/[status].vue | 2 +- pages/@[account]/index/followers.vue | 2 +- pages/@[account]/index/following.vue | 2 +- pages/@[account]/index/index.vue | 4 +-- pages/blocks.vue | 2 +- pages/bookmarks.vue | 2 +- pages/conversations.vue | 2 +- pages/domain_blocks.vue | 4 +-- pages/explore.vue | 2 +- pages/favourites.vue | 2 +- pages/home.vue | 2 +- pages/mutes.vue | 2 +- pages/notifications.vue | 2 +- pages/pinned.vue | 2 +- pages/tags/[tag].vue | 2 +- plugins/masto.ts | 27 ++++++++++++++++++++ 26 files changed, 67 insertions(+), 48 deletions(-) create mode 100644 plugins/masto.ts diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue index bc4e496a..e53b6aa0 100644 --- a/components/account/AccountFollowButton.vue +++ b/components/account/AccountFollowButton.vue @@ -11,7 +11,7 @@ let relationship = $(useRelationship(account)) async function toggleFollow() { relationship!.following = !relationship!.following try { - relationship = await masto.accounts[relationship!.following ? 'follow' : 'unfollow'](account.id) + relationship = await useMasto().accounts[relationship!.following ? 'follow' : 'unfollow'](account.id) } catch { // TODO error handling diff --git a/components/account/AccountMoreButton.vue b/components/account/AccountMoreButton.vue index 62590c8f..3a069b16 100644 --- a/components/account/AccountMoreButton.vue +++ b/components/account/AccountMoreButton.vue @@ -13,24 +13,24 @@ const toggleMute = async () => { relationship!.muting = !relationship!.muting relationship = relationship!.muting - ? await masto.accounts.mute(account.id, { + ? await useMasto().accounts.mute(account.id, { // TODO support more options }) - : await masto.accounts.unmute(account.id) + : await useMasto().accounts.unmute(account.id) } const toggleBlockUser = async () => { // TODO: Add confirmation relationship!.blocking = !relationship!.blocking - relationship = await masto.accounts[relationship!.blocking ? 'block' : 'unblock'](account.id) + relationship = await useMasto().accounts[relationship!.blocking ? 'block' : 'unblock'](account.id) } const toggleBlockDomain = async () => { // TODO: Add confirmation relationship!.domainBlocking = !relationship!.domainBlocking - await masto.domainBlocks[relationship!.domainBlocking ? 'block' : 'unblock'](getServerName(account)) + await useMasto().domainBlocks[relationship!.domainBlocking ? 'block' : 'unblock'](getServerName(account)) } diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue index df372816..16fe65ad 100644 --- a/components/publish/PublishWidget.vue +++ b/components/publish/PublishWidget.vue @@ -76,7 +76,7 @@ async function toggleSensitive() { async function uploadAttachments(files: File[]) { isUploading = true for (const file of files) { - const attachment = await masto.mediaAttachments.create({ + const attachment = await useMasto().mediaAttachments.create({ file, }) draft.attachments.push(attachment) @@ -114,9 +114,9 @@ async function publish() { isSending = true if (!draft.editingStatus) - await masto.statuses.create(payload) + await useMasto().statuses.create(payload) else - await masto.statuses.update(draft.editingStatus.id, payload) + await useMasto().statuses.update(draft.editingStatus.id, payload) draft = getDefaultDraft({ inReplyToId }) isPublishDialogOpen.value = false diff --git a/components/status/StatusActions.vue b/components/status/StatusActions.vue index c706127e..1a918bc7 100644 --- a/components/status/StatusActions.vue +++ b/components/status/StatusActions.vue @@ -43,7 +43,7 @@ async function toggleStatusAction(action: Action, newStatus: Promise, co } const toggleReblog = () => toggleStatusAction( 'reblogged', - masto.statuses[status.reblogged ? 'unreblog' : 'reblog'](status.id).then((res) => { + useMasto().statuses[status.reblogged ? 'unreblog' : 'reblog'](status.id).then((res) => { if (status.reblogged) // returns the original status return res.reblog! @@ -54,17 +54,17 @@ const toggleReblog = () => toggleStatusAction( const toggleFavourite = () => toggleStatusAction( 'favourited', - masto.statuses[status.favourited ? 'unfavourite' : 'favourite'](status.id), + useMasto().statuses[status.favourited ? 'unfavourite' : 'favourite'](status.id), 'favouritesCount', ) const toggleBookmark = () => toggleStatusAction( 'bookmarked', - masto.statuses[status.bookmarked ? 'unbookmark' : 'bookmark'](status.id), + useMasto().statuses[status.bookmarked ? 'unbookmark' : 'bookmark'](status.id), ) const togglePin = async () => toggleStatusAction( 'pinned', - masto.statuses[status.pinned ? 'unpin' : 'pin'](status.id), + useMasto().statuses[status.pinned ? 'unpin' : 'pin'](status.id), ) const { toggle: _toggleTranslation, translation, enabled: isTranslationEnabled } = useTranslation(_status) @@ -80,7 +80,7 @@ const copyLink = async () => { const deleteStatus = async () => { // TODO confirm to delete - await masto.statuses.remove(status.id) + await useMasto().statuses.remove(status.id) if (route.name === '@user-post') router.back() @@ -90,7 +90,7 @@ const deleteStatus = async () => { const deleteAndRedraft = async () => { // TODO confirm to delete - const { text } = await masto.statuses.remove(status.id) + const { text } = await useMasto().statuses.remove(status.id) if (!dialogDraft.isEmpty) { // TODO confirm to overwrite diff --git a/components/status/edit/StatusEditHistory.vue b/components/status/edit/StatusEditHistory.vue index 38210bd1..2b05eb2c 100644 --- a/components/status/edit/StatusEditHistory.vue +++ b/components/status/edit/StatusEditHistory.vue @@ -5,7 +5,7 @@ const { status } = defineProps<{ status: Status }>() -const { data: statusEdits } = useAsyncData(`status:history:${status.id}`, () => masto.statuses.fetchHistory(status.id).then(res => res.reverse())) +const { data: statusEdits } = useAsyncData(`status:history:${status.id}`, () => useMasto().statuses.fetchHistory(status.id).then(res => res.reverse())) const showHistory = (edit: StatusEdit) => { openEditHistoryDialog(edit) diff --git a/composables/cache.ts b/composables/cache.ts index 82af96c9..5b7cbbb5 100644 --- a/composables/cache.ts +++ b/composables/cache.ts @@ -19,7 +19,7 @@ export function fetchStatus(id: string): Promise { const cached = cache.get(key) if (cached) return cached - const promise = masto.statuses.fetch(id) + const promise = useMasto().statuses.fetch(id) .then((status) => { cacheStatus(status) return status @@ -33,7 +33,7 @@ export function fetchAccount(id: string): Promise { const cached = cache.get(key) if (cached) return cached - const promise = masto.accounts.fetch(id) + const promise = useMasto().accounts.fetch(id) .then((account) => { cacheAccount(account, true) return account @@ -47,7 +47,7 @@ export async function fetchAccountByName(acct: string): Promise { const cached = cache.get(key) if (cached) return cached - const account = masto.accounts.lookup({ acct }) + const account = useMasto().accounts.lookup({ acct }) .then((r) => { cacheAccount(r, true) return r diff --git a/composables/client.ts b/composables/client.ts index 9e6dce21..1c9079ae 100644 --- a/composables/client.ts +++ b/composables/client.ts @@ -1,9 +1 @@ -import { login } from 'masto' -import { currentUser } from './users' -import { DEFAULT_SERVER } from '~/constants' - -// TODO: improve upsteam to make this synchronous (delayed auth) -export const masto = await login({ - url: `https://${currentUser.value?.server || DEFAULT_SERVER}`, - accessToken: currentUser.value?.token || undefined, -}) +export const useMasto = () => useNuxtApp().$masto diff --git a/composables/masto.ts b/composables/masto.ts index 21380229..55f991b5 100644 --- a/composables/masto.ts +++ b/composables/masto.ts @@ -112,7 +112,7 @@ async function fetchRelationships() { const requested = Array.from(requestedRelationships.entries()) requestedRelationships.clear() - const relationships = await masto.accounts.fetchRelationships(requested.map(([id]) => id)) + const relationships = await useMasto().accounts.fetchRelationships(requested.map(([id]) => id)) for (let i = 0; i < requested.length; i++) requested[i][1].value = relationships[i] } diff --git a/composables/tiptap/suggestion.ts b/composables/tiptap/suggestion.ts index f88d2422..a0084ea1 100644 --- a/composables/tiptap/suggestion.ts +++ b/composables/tiptap/suggestion.ts @@ -12,7 +12,7 @@ export const MentionSuggestion: Partial = { if (query.length === 0) return [] - const mentionPaginator = masto.search({ q: query, type: 'accounts', limit: 25, resolve: true }) + const mentionPaginator = useMasto().search({ q: query, type: 'accounts', limit: 25, resolve: true }) const results = await mentionPaginator.next() return results.value.accounts diff --git a/composables/users.ts b/composables/users.ts index a9941940..9f91da97 100644 --- a/composables/users.ts +++ b/composables/users.ts @@ -40,12 +40,12 @@ export async function loginTo(user: UserLogin & { account?: AccountCredentials } url: `https://${user.server}`, accessToken: user.token, }) - const me = await masto.accounts.verifyCredentials() + const me = await useMasto().accounts.verifyCredentials() user.account = me users.value.push(user) currentUserId.value = me.id - servers.value[me.id] = await masto.instances.fetch() + servers.value[me.id] = await useMasto().instances.fetch() await reloadPage() return true } diff --git a/pages/@[account]/[status].vue b/pages/@[account]/[status].vue index ba8891c3..24b5bcd0 100644 --- a/pages/@[account]/[status].vue +++ b/pages/@[account]/[status].vue @@ -6,7 +6,7 @@ const id = $computed(() => route.params.status as string) const main = ref(null) const status = window.history.state?.status ?? await fetchStatus(id) -const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fetchContext(id)) +const { data: context } = useAsyncData(`context:${id}`, () => useMasto().statuses.fetchContext(id)) const unsubscribe = watch(context, async (context) => { if (context) { const statusElement = document.querySelector(`#status-${id}`) diff --git a/pages/@[account]/index/followers.vue b/pages/@[account]/index/followers.vue index d989af8c..09c65fe3 100644 --- a/pages/@[account]/index/followers.vue +++ b/pages/@[account]/index/followers.vue @@ -3,7 +3,7 @@ const params = useRoute().params const accountName = $computed(() => params.account as string) const account = await fetchAccountByName(accountName) -const paginator = account ? masto.accounts.getFollowersIterable(account.id, {}) : null +const paginator = account ? useMasto().accounts.getFollowersIterable(account.id, {}) : null