refactor: improve UI & types

zio/stable
三咲智子 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 account: Account
}>() }>()
const isSelf = $computed(() => currentUser.value?.account?.id === account.id) const isSelf = $computed(() => currentUser.value?.account.id === account.id)
const relationship = $(useRelationship(account)) const relationship = $(useRelationship(account))
async function toggleFollow() { async function toggleFollow() {

View File

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

View File

@ -14,7 +14,7 @@ const clipboard = useClipboard()
const router = useRouter() const router = useRouter()
const route = useRoute() 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 // Use different states to let the user press different actions right after the other
const isLoading = $ref({ const isLoading = $ref({

View File

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

View File

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

View File

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

View File

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

View File

@ -3,7 +3,7 @@ const params = useRoute().params
const accountName = $computed(() => params.account as string) const accountName = $computed(() => params.account as string)
const account = await fetchAccountByName(accountName) const account = await fetchAccountByName(accountName)
const paginator = account ? masto.accounts.getFollowersIterable(account!.id!, {}) : null const paginator = account ? masto.accounts.getFollowersIterable(account.id, {}) : null
</script> </script>
<template> <template>

View File

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