mirror/elk
1
0
Fork 0
mirror of https://github.com/elk-zone/elk synced 2024-11-27 14:28:10 +09:00
Code

refactor: tidy composables

Browse Source
This commit is contained in:
三咲智子 2023-01-07 02:40:15 +08:00
parent bf8070c4b9
commit e0741d58a9
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
14 changed files with 177 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
composables/hydration.ts
View File

@ -1 +0,0 @@
export const isHydrated = ref(false)

160
composables/masto.ts
View File

@ -1,160 +0,0 @@
import type { Ref } from 'vue'
import type { Account, Relationship, Status } from 'masto'
import { withoutProtocol } from 'ufo'
import type { ElkMasto } from '~/types'
export const useMasto = () => useNuxtApp().$masto as ElkMasto
export const isMastoInitialised = computed(() => process.client && useMasto().loggedIn.value)
export const onMastoInit = (cb: () => unknown) => {
watchOnce(isMastoInitialised, () => {
cb()
}, { immediate: isMastoInitialised.value })
}
export function getDisplayName(account?: Account, options?: { rich?: boolean }) {
const displayName = account?.displayName || account?.username || ''
if (options?.rich)
return displayName
return displayName.replace(/:([\w-]+?):/g, '')
}
export function getShortHandle({ acct }: Account) {
if (!acct)
return ''
return `@${acct.includes('@') ? acct.split('@')[0] : acct}`
}
export function getServerName(account: Account) {
if (account.acct?.includes('@'))
return account.acct.split('@')[1]
// We should only lack the server name if we're on the same server as the account
return currentInstance.value?.uri || ''
}
export function getFullHandle(account: Account) {
const handle = `@${account.acct}`
if (!currentUser.value || account.acct.includes('@'))
return handle
return `${handle}@${getServerName(account)}`
}
export function toShortHandle(fullHandle: string) {
if (!currentUser.value)
return fullHandle
const server = currentUser.value.server
if (fullHandle.endsWith(`@${server}`))
return fullHandle.slice(0, -server.length - 1)
return fullHandle
}
export function extractAccountHandle(account: Account) {
let handle = getFullHandle(account).slice(1)
const uri = currentInstance.value?.uri ?? currentServer.value
if (currentInstance.value && handle.endsWith(`@${uri}`))
handle = handle.slice(0, -uri.length - 1)
return handle
}
export function getAccountRoute(account: Account) {
return useRouter().resolve({
name: 'account-index',
params: {
server: currentServer.value,
account: extractAccountHandle(account),
},
})
}
export function getAccountFollowingRoute(account: Account) {
return useRouter().resolve({
name: 'account-following',
params: {
server: currentServer.value,
account: extractAccountHandle(account),
},
})
}
export function getAccountFollowersRoute(account: Account) {
return useRouter().resolve({
name: 'account-followers',
params: {
server: currentServer.value,
account: extractAccountHandle(account),
},
})
}
export function getStatusRoute(status: Status) {
return useRouter().resolve({
name: 'status',
params: {
server: currentServer.value,
account: extractAccountHandle(status.account),
status: status.id,
},
})
}
export function getTagRoute(tag: string) {
return useRouter().resolve({
name: 'tag',
params: {
server: currentServer.value,
tag,
},
})
}
export function getStatusPermalinkRoute(status: Status) {
return status.url ? withoutProtocol(status.url) : null
}
export function getStatusInReplyToRoute(status: Status) {
return useRouter().resolve({
name: 'status-by-id',
params: {
server: currentServer.value,
status: status.inReplyToId,
},
})
}
export function useAccountHandle(account: Account, fullServer = true) {
return computed(() => fullServer
? getFullHandle(account)
: getShortHandle(account),
)
}
// Batch requests for relationships when used in the UI
// We don't want to hold to old values, so every time a Relationship is needed it
// is requested again from the server to show the latest state
const requestedRelationships = new Map<string, Ref<Relationship | undefined>>()
let timeoutHandle: NodeJS.Timeout | undefined
export function useRelationship(account: Account): Ref<Relationship | undefined> {
if (!currentUser.value)
return ref()
let relationship = requestedRelationships.get(account.id)
if (relationship)
return relationship
relationship = ref<Relationship | undefined>()
requestedRelationships.set(account.id, relationship)
if (timeoutHandle)
clearTimeout(timeoutHandle)
timeoutHandle = setTimeout(() => {
timeoutHandle = undefined
fetchRelationships()
}, 100)
return relationship
}
async function fetchRelationships() {
const requested = Array.from(requestedRelationships.entries()).filter(([, r]) => !r.value)
const relationships = await useMasto().accounts.fetchRelationships(requested.map(([id]) => id))
for (let i = 0; i < requested.length; i++)
requested[i][1].value = relationships[i]
}

53
composables/masto/account.ts Normal file
View File

@ -0,0 +1,53 @@
import type { Account } from 'masto'
export function getDisplayName(account?: Account, options?: { rich?: boolean }) {
const displayName = account?.displayName || account?.username || ''
if (options?.rich)
return displayName
return displayName.replace(/:([\w-]+?):/g, '')
}
export function getShortHandle({ acct }: Account) {
if (!acct)
return ''
return `@${acct.includes('@') ? acct.split('@')[0] : acct}`
}
export function getServerName(account: Account) {
if (account.acct?.includes('@'))
return account.acct.split('@')[1]
// We should only lack the server name if we're on the same server as the account
return currentInstance.value?.uri || ''
}
export function getFullHandle(account: Account) {
const handle = `@${account.acct}`
if (!currentUser.value || account.acct.includes('@'))
return handle
return `${handle}@${getServerName(account)}`
}
export function toShortHandle(fullHandle: string) {
if (!currentUser.value)
return fullHandle
const server = currentUser.value.server
if (fullHandle.endsWith(`@${server}`))
return fullHandle.slice(0, -server.length - 1)
return fullHandle
}
export function extractAccountHandle(account: Account) {
let handle = getFullHandle(account).slice(1)
const uri = currentInstance.value?.uri ?? currentServer.value
if (currentInstance.value && handle.endsWith(`@${uri}`))
handle = handle.slice(0, -uri.length - 1)
return handle
}
export function useAccountHandle(account: Account, fullServer = true) {
return computed(() => fullServer
? getFullHandle(account)
: getShortHandle(account),
)
}

11
composables/masto/masto.ts Normal file
View File

@ -0,0 +1,11 @@
import type { ElkMasto } from '~/types'
export const useMasto = () => useNuxtApp().$masto as ElkMasto
export const isMastoInitialised = computed(() => process.client && useMasto().loggedIn.value)
export const onMastoInit = (cb: () => unknown) => {
watchOnce(isMastoInitialised, () => {
cb()
}, { immediate: isMastoInitialised.value })
}

33
composables/masto/relationship.ts Normal file
View File

@ -0,0 +1,33 @@
import type { Account, Relationship } from 'masto'
import type { Ref } from 'vue'
// Batch requests for relationships when used in the UI
// We don't want to hold to old values, so every time a Relationship is needed it
// is requested again from the server to show the latest state
const requestedRelationships = new Map<string, Ref<Relationship | undefined>>()
let timeoutHandle: NodeJS.Timeout | undefined
export function useRelationship(account: Account): Ref<Relationship | undefined> {
if (!currentUser.value)
return ref()
let relationship = requestedRelationships.get(account.id)
if (relationship)
return relationship
relationship = ref<Relationship | undefined>()
requestedRelationships.set(account.id, relationship)
if (timeoutHandle)
clearTimeout(timeoutHandle)
timeoutHandle = setTimeout(() => {
timeoutHandle = undefined
fetchRelationships()
}, 100)
return relationship
}
async function fetchRelationships() {
const requested = Array.from(requestedRelationships.entries()).filter(([, r]) => !r.value)
const relationships = await useMasto().accounts.fetchRelationships(requested.map(([id]) => id))
for (let i = 0; i < requested.length; i++)
requested[i][1].value = relationships[i]
}

65
composables/masto/routes.ts Normal file
View File

@ -0,0 +1,65 @@
import { withoutProtocol } from 'ufo'
import type { Account, Status } from 'masto'
export function getAccountRoute(account: Account) {
return useRouter().resolve({
name: 'account-index',
params: {
server: currentServer.value,
account: extractAccountHandle(account),
},
})
}
export function getAccountFollowingRoute(account: Account) {
return useRouter().resolve({
name: 'account-following',
params: {
server: currentServer.value,
account: extractAccountHandle(account),
},
})
}
export function getAccountFollowersRoute(account: Account) {
return useRouter().resolve({
name: 'account-followers',
params: {
server: currentServer.value,
account: extractAccountHandle(account),
},
})
}
export function getStatusRoute(status: Status) {
return useRouter().resolve({
name: 'status',
params: {
server: currentServer.value,
account: extractAccountHandle(status.account),
status: status.id,
},
})
}
export function getTagRoute(tag: string) {
return useRouter().resolve({
name: 'tag',
params: {
server: currentServer.value,
tag,
},
})
}
export function getStatusPermalinkRoute(status: Status) {
return status.url ? withoutProtocol(status.url) : null
}
export function getStatusInReplyToRoute(status: Status) {
return useRouter().resolve({
name: 'status-by-id',
params: {
server: currentServer.value,
status: status.inReplyToId,
},
})
}

0
composables/search.ts → composables/masto/search.ts
View File

0
composables/status.ts → composables/masto/status.ts
View File

0
composables/statusDrafts.ts → composables/masto/statusDrafts.ts
View File

0
composables/translate.ts → composables/masto/translate.ts
View File

0
composables/utils.ts → composables/misc.ts
View File

1
composables/paginator.ts
View File

@ -1,5 +1,4 @@
import type { Paginator, WsEvents } from 'masto'
import { useDeactivated } from './lifecycle'
import type { PaginatorState } from '~/types'
export function usePaginator<T>(

15
composables/lifecycle.ts → composables/vue.ts
View File

@ -1,5 +1,10 @@
import type { ComponentInternalInstance } from 'vue'
import { onActivated, onDeactivated, ref } from 'vue'
import type { ActiveHeadEntry, HeadEntryOptions, UseHeadInput } from '@vueuse/head'
import type { HeadAugmentations } from '@nuxt/schema'
import { useHead } from '#head'
export const isHydrated = ref(false)
/**
* ### Whether the current component is running in the background
@ -28,3 +33,13 @@ export function onReactivated(hook: Function, target?: ComponentInternalInstance
}, target)
onDeactivated(() => initial.value = false)
}
// TODO: Workaround for Nuxt bug: https://github.com/elk-zone/elk/pull/199#issuecomment-1329771961
export function useHeadFixed<T extends HeadAugmentations>(input: UseHeadInput<T>, options?: HeadEntryOptions): ActiveHeadEntry<UseHeadInput<T>> | void {
const deactivated = useDeactivated()
return useHead(() => {
if (deactivated.value)
return {}
return resolveUnref(input)
}, options)
}

13
composables/workarounds.ts
View File

@ -1,13 +0,0 @@
import type { ActiveHeadEntry, HeadEntryOptions, UseHeadInput } from '@vueuse/head'
import type { HeadAugmentations } from '@nuxt/schema'
import { useHead } from '#head'
// TODO: Workaround for Nuxt bug: https://github.com/elk-zone/elk/pull/199#issuecomment-1329771961
export function useHeadFixed<T extends HeadAugmentations>(input: UseHeadInput<T>, options?: HeadEntryOptions): ActiveHeadEntry<UseHeadInput<T>> | void {
const deactivated = useDeactivated()
return useHead(() => {
if (deactivated.value)
return {}
return resolveUnref(input)
}, options)
}