96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
import type { Route } from './+types/route'
|
|
|
|
import { Suspense } from 'react'
|
|
import { Await, useOutletContext } from 'react-router'
|
|
|
|
import { Skeleton } from '@repo/ui/components/skeleton'
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle
|
|
} from '@repo/ui/components/ui/card'
|
|
import { Kbd } from '@repo/ui/components/ui/kbd'
|
|
import {
|
|
NativeSelect,
|
|
NativeSelectOption
|
|
} from '@repo/ui/components/ui/native-select'
|
|
import { request as req } from '@repo/util/request'
|
|
|
|
import { Button } from '@repo/ui/components/ui/button'
|
|
|
|
export async function loader({ params, request, context }: Route.LoaderArgs) {
|
|
const { id } = params
|
|
const data = req({
|
|
url: `/users/${id}/emails`,
|
|
request,
|
|
context
|
|
}).then((r) => r.json())
|
|
|
|
return { data }
|
|
}
|
|
|
|
export default function Route({ loaderData: { data } }: Route.ComponentProps) {
|
|
const { user } = useOutletContext()
|
|
|
|
return (
|
|
<Suspense fallback={<Skeleton />}>
|
|
<Await resolve={data}>
|
|
{({ items = [] }) => (
|
|
<div className="space-y-4">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Emails</CardTitle>
|
|
<CardDescription>
|
|
Podem ser associados vários emails a uma conta. É possível
|
|
usar qualquer email para recuperar a senha, mas apenas o email
|
|
principal receberá as mensagens.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ul>
|
|
{items.map(({ sk }: { sk: string }, idx: number) => {
|
|
const [, email] = sk.split('#')
|
|
return <li key={idx}>{email}</li>
|
|
})}
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Email principal</CardTitle>
|
|
<CardDescription>
|
|
<Kbd className="font-mono border">
|
|
<span className="truncate max-lg:max-w-62">
|
|
{user.email}
|
|
</span>
|
|
</Kbd>{' '}
|
|
será usado para mensagens e pode ser usado para redefinições
|
|
de senha.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form className="flex gap-1.5">
|
|
<NativeSelect value={user.email}>
|
|
{items.map(({ sk }: { sk: string }, idx: number) => {
|
|
const [, email] = sk.split('#')
|
|
return (
|
|
<NativeSelectOption key={idx} value={email}>
|
|
{email}
|
|
</NativeSelectOption>
|
|
)
|
|
})}
|
|
</NativeSelect>
|
|
<Button>Alterar email</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
</Await>
|
|
</Suspense>
|
|
)
|
|
}
|