refactor: improve UI & types

This commit is contained in:
三咲智子 2022-11-24 23:48:52 +08:00
parent 86c29776a1
commit 2ab3d5dbe7
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
9 changed files with 18 additions and 15 deletions

View file

@ -5,7 +5,7 @@ const { account } = defineProps<{
account: Account
}>()
const isSelf = $computed(() => currentUser.value?.account?.id === account.id)
const isSelf = $computed(() => currentUser.value?.account.id === account.id)
const relationship = $(useRelationship(account))
async function toggleFollow() {

View file

@ -118,7 +118,7 @@ onUnmounted(() => {
</template>
<div p4 flex gap-4>
<NuxtLink w-12 h-12 :to="getAccountPath(currentUser.account!)">
<NuxtLink w-12 h-12 :to="getAccountPath(currentUser.account)">
<AccountAvatar :account="currentUser.account" w-12 h-12 />
</NuxtLink>
<div
@ -154,9 +154,11 @@ onUnmounted(() => {
</div>
<div flex="~ gap-2">
<button btn-action-icon @click="pickAttachments">
<div i-ri:upload-line />
</button>
<CommonTooltip placement="bottom" content="Add images, a video or an audio file">
<button btn-action-icon @click="pickAttachments">
<div i-ri:upload-line />
</button>
</CommonTooltip>
<div flex-auto />

View file

@ -14,7 +14,7 @@ const clipboard = useClipboard()
const router = useRouter()
const route = useRoute()
const isAuthor = $computed(() => status.account.id === currentUser.value?.account?.id)
const isAuthor = $computed(() => status.account.id === currentUser.value?.account.id)
// Use different states to let the user press different actions right after the other
const isLoading = $ref({

View file

@ -41,7 +41,7 @@ const sorted = computed(() => {
@click="signout"
>
<div i-ri:logout-box-line />
Sign out {{ getAccountHandle(currentUser.account!) }}
Sign out {{ getAccountHandle(currentUser.account) }}
</button>
</div>
</div>

View file

@ -14,7 +14,7 @@ export function setCached(key: string, value: any, override = false) {
cache.set(key, value)
}
export function fetchStatus(id: string) {
export function fetchStatus(id: string): Promise<Status> {
const key = `status:${id}`
const cached = cache.get(key)
if (cached)
@ -28,7 +28,7 @@ export function fetchStatus(id: string) {
return promise
}
export function fetchAccount(id: string) {
export function fetchAccount(id: string): Promise<Account> {
const key = `account:${id}`
const cached = cache.get(key)
if (cached)
@ -42,7 +42,7 @@ export function fetchAccount(id: string) {
return promise
}
export function fetchAccountByName(acct: string) {
export function fetchAccountByName(acct: string): Promise<Account> {
const key = `account:${acct}`
const cached = cache.get(key)
if (cached)

View file

@ -14,7 +14,7 @@ export type DraftMap = Record<string, Draft>
const allDrafts = useLocalStorage<Record<string, DraftMap>>(STORAGE_KEY_DRAFTS, {})
export const currentUserDrafts = computed(() => {
if (!currentUser.value?.account?.id)
if (!currentUser.value?.account.id)
return {}
const id = `${currentUser.value.account.acct}@${currentUser.value.server}`
if (!allDrafts.value[id])

View file

@ -1,3 +1,4 @@
import type { AccountCredentials } from 'masto'
import { login as loginMasto } from 'masto'
import type { UserLogin } from '~/types'
import { DEFAULT_SERVER, STORAGE_KEY_CURRENT_USER, STORAGE_KEY_USERS } from '~/constants'
@ -20,7 +21,7 @@ export const currentServer = computed<string>(() => currentUser.value?.server ||
export const useUsers = () => users
export async function loginTo(user: UserLogin) {
export async function loginTo(user: UserLogin & { account?: AccountCredentials }) {
const existing = users.value.findIndex(u => u.server === user.server && u.token === user.token)
if (existing !== -1) {
if (currentUserId.value === users.value[existing].account?.id)
@ -48,7 +49,7 @@ export async function signout() {
if (!currentUser.value)
return
const index = users.value.findIndex(u => u.account?.id === currentUser.value?.account?.id)
const index = users.value.findIndex(u => u.account?.id === currentUser.value?.account.id)
if (index === -1)
return

View file

@ -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 ? masto.accounts.getFollowersIterable(account.id, {}) : null
</script>
<template>

View file

@ -13,7 +13,7 @@ export interface AppInfo {
export interface UserLogin {
server: string
token: string
account?: AccountCredentials
account: AccountCredentials
}
export type PaginatorState = 'idle' | 'loading' | 'done' | 'error'