update profile
This commit is contained in:
@@ -387,6 +387,7 @@ function Failed({ items = [] }) {
|
|||||||
<ClockAlertIcon className="size-3.5" />
|
<ClockAlertIcon className="size-3.5" />
|
||||||
<span>{datetime.format(new Date(created_at))}</span>
|
<span>{datetime.format(new Date(created_at))}</span>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
{cause?.type === 'DeduplicationConflictError' ? (
|
{cause?.type === 'DeduplicationConflictError' ? (
|
||||||
<li className="text-red-400">
|
<li className="text-red-400">
|
||||||
<AlertTriangleIcon className="size-3.5" />
|
<AlertTriangleIcon className="size-3.5" />
|
||||||
|
|||||||
@@ -1,9 +1,12 @@
|
|||||||
import type { Route } from './+types/route'
|
import type { Route } from './+types/route'
|
||||||
|
|
||||||
|
import { useEffect } from 'react'
|
||||||
import { zodResolver } from '@hookform/resolvers/zod'
|
import { zodResolver } from '@hookform/resolvers/zod'
|
||||||
import { PatternFormat } from 'react-number-format'
|
import { PatternFormat } from 'react-number-format'
|
||||||
import { Link, useOutletContext } from 'react-router'
|
import { useFetcher, Link, useOutletContext } from 'react-router'
|
||||||
|
import { AlertCircleIcon } from 'lucide-react'
|
||||||
import { useForm } from 'react-hook-form'
|
import { useForm } from 'react-hook-form'
|
||||||
|
import { toast } from 'sonner'
|
||||||
|
|
||||||
import { Button } from '@repo/ui/components/ui/button'
|
import { Button } from '@repo/ui/components/ui/button'
|
||||||
import {
|
import {
|
||||||
@@ -24,24 +27,79 @@ import {
|
|||||||
import { Input } from '@repo/ui/components/ui/input'
|
import { Input } from '@repo/ui/components/ui/input'
|
||||||
import { Spinner } from '@repo/ui/components/ui/spinner'
|
import { Spinner } from '@repo/ui/components/ui/spinner'
|
||||||
import { type User } from '@repo/ui/routes/users/data'
|
import { type User } from '@repo/ui/routes/users/data'
|
||||||
|
import {
|
||||||
|
Alert,
|
||||||
|
AlertDescription,
|
||||||
|
AlertTitle
|
||||||
|
} from '@repo/ui/components/ui/alert'
|
||||||
|
import { request as req, HttpMethod } from '@repo/util/request'
|
||||||
|
|
||||||
import { formSchema, type Schema } from '../_.$orgid.users.add/data'
|
import { formSchema, type Schema } from '../_.$orgid.users.add/data'
|
||||||
|
|
||||||
|
export async function action({ params, request, context }: Route.ActionArgs) {
|
||||||
|
const body = await request.json()
|
||||||
|
const r = await req({
|
||||||
|
url: `/users/${params.id}`,
|
||||||
|
method: HttpMethod.PATCH,
|
||||||
|
headers: new Headers({ 'Content-Type': 'application/json' }),
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
request,
|
||||||
|
context
|
||||||
|
})
|
||||||
|
|
||||||
|
if (r.ok) {
|
||||||
|
return { ok: true }
|
||||||
|
}
|
||||||
|
|
||||||
|
return { ok: false, error: await r.json() }
|
||||||
|
}
|
||||||
|
|
||||||
export default function Route({}: Route.ComponentProps) {
|
export default function Route({}: Route.ComponentProps) {
|
||||||
const { user } = useOutletContext() as { user: User }
|
const { user } = useOutletContext() as { user: User }
|
||||||
|
const fetcher = useFetcher()
|
||||||
const form = useForm({
|
const form = useForm({
|
||||||
defaultValues: { ...user, given_email: false },
|
defaultValues: { ...user, given_email: false },
|
||||||
resolver: zodResolver(formSchema)
|
resolver: zodResolver(formSchema)
|
||||||
})
|
})
|
||||||
const { handleSubmit, control, formState } = form
|
const { handleSubmit, control, formState, setError } = form
|
||||||
|
|
||||||
const onSubmit = async (data: Schema) => {
|
const onSubmit = async (data: Schema) => {
|
||||||
console.log(data)
|
await fetcher.submit(JSON.stringify({ id: user.id, ...data }), {
|
||||||
|
method: 'post',
|
||||||
|
encType: 'application/json'
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (fetcher.data?.ok) {
|
||||||
|
toast.success('O colaborador foi atualizado.')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (fetcher.data?.error?.type) {
|
||||||
|
case 'RateLimitExceededError':
|
||||||
|
toast.error('Seu limite diário de atualizações foi atingido.')
|
||||||
|
case 'CPFConflictError':
|
||||||
|
setError('cpf', { message: 'CPF já está em uso' })
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(fetcher.data?.error)
|
||||||
|
}, [fetcher.data, setError])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form {...form}>
|
<Form {...form}>
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||||
|
{user?.rate_limit_exceeded && (
|
||||||
|
<Alert variant="destructive">
|
||||||
|
<AlertCircleIcon />
|
||||||
|
<AlertTitle>Limite diário de atualizações atingido.</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
Tente novamente a partir de{' '}
|
||||||
|
{getDaysRemaining(user.rate_limit_exceeded.ttl)}
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-2xl">Editar colaborador</CardTitle>
|
<CardTitle className="text-2xl">Editar colaborador</CardTitle>
|
||||||
@@ -115,20 +173,34 @@ export default function Route({}: Route.ComponentProps) {
|
|||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
className="cursor-pointer"
|
||||||
|
disabled={formState.isSubmitting}
|
||||||
|
>
|
||||||
|
{formState.isSubmitting && <Spinner />}
|
||||||
|
Editar
|
||||||
|
</Button>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
className="cursor-pointer"
|
|
||||||
disabled={formState.isSubmitting}
|
|
||||||
>
|
|
||||||
{formState.isSubmitting && <Spinner />}
|
|
||||||
Editar
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
</Form>
|
</Form>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getDaysRemaining(ttl: number) {
|
||||||
|
const date = new Date(ttl * 1000)
|
||||||
|
|
||||||
|
const day = date.toLocaleDateString('pt-BR', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: '2-digit'
|
||||||
|
})
|
||||||
|
|
||||||
|
const time = date.toLocaleTimeString('pt-BR', {
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit'
|
||||||
|
})
|
||||||
|
|
||||||
|
return `${day} às ${time}`
|
||||||
|
}
|
||||||
|
|||||||
@@ -20,6 +20,11 @@ import { Tabs, TabsList, TabsTrigger } from '@repo/ui/components/ui/tabs'
|
|||||||
import { initials } from '@repo/ui/lib/utils'
|
import { initials } from '@repo/ui/lib/utils'
|
||||||
import { request as req } from '@repo/util/request'
|
import { request as req } from '@repo/util/request'
|
||||||
|
|
||||||
|
const links = [
|
||||||
|
{ to: '', title: 'Perfil', end: true },
|
||||||
|
{ to: 'emails', title: 'Emails' }
|
||||||
|
]
|
||||||
|
|
||||||
export function meta() {
|
export function meta() {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
@@ -51,11 +56,6 @@ export function shouldRevalidate({
|
|||||||
return currentParams.id !== nextParams.id
|
return currentParams.id !== nextParams.id
|
||||||
}
|
}
|
||||||
|
|
||||||
const links = [
|
|
||||||
{ to: '', title: 'Perfil', end: true },
|
|
||||||
{ to: 'emails', title: 'Emails' }
|
|
||||||
]
|
|
||||||
|
|
||||||
export default function Route({
|
export default function Route({
|
||||||
loaderData: { data: user }
|
loaderData: { data: user }
|
||||||
}: Route.ComponentProps) {
|
}: Route.ComponentProps) {
|
||||||
|
|||||||
@@ -1,8 +1,9 @@
|
|||||||
import type { Route } from './+types/profile'
|
import type { Route } from './+types/profile'
|
||||||
|
|
||||||
|
import { useEffect } from 'react'
|
||||||
import { AlertCircleIcon } from 'lucide-react'
|
import { AlertCircleIcon } from 'lucide-react'
|
||||||
import { useForm } from 'react-hook-form'
|
import { useForm } from 'react-hook-form'
|
||||||
import { Link, useOutletContext } from 'react-router'
|
import { Link, useOutletContext, useFetcher } from 'react-router'
|
||||||
import { PatternFormat } from 'react-number-format'
|
import { PatternFormat } from 'react-number-format'
|
||||||
import { zodResolver } from '@hookform/resolvers/zod'
|
import { zodResolver } from '@hookform/resolvers/zod'
|
||||||
import { toast } from 'sonner'
|
import { toast } from 'sonner'
|
||||||
@@ -27,16 +28,14 @@ import { Input } from '@repo/ui/components/ui/input'
|
|||||||
import { Spinner } from '@repo/ui/components/ui/spinner'
|
import { Spinner } from '@repo/ui/components/ui/spinner'
|
||||||
import { type User } from '@repo/ui/routes/users/data'
|
import { type User } from '@repo/ui/routes/users/data'
|
||||||
import { request as req, HttpMethod } from '@repo/util/request'
|
import { request as req, HttpMethod } from '@repo/util/request'
|
||||||
|
|
||||||
import { formSchema, type Schema } from './emails/data'
|
|
||||||
import { useFetcher } from 'react-router'
|
|
||||||
import { userContext } from '@repo/auth/context'
|
import { userContext } from '@repo/auth/context'
|
||||||
import {
|
import {
|
||||||
Alert,
|
Alert,
|
||||||
AlertDescription,
|
AlertDescription,
|
||||||
AlertTitle
|
AlertTitle
|
||||||
} from '@repo/ui/components/ui/alert'
|
} from '@repo/ui/components/ui/alert'
|
||||||
import { useEffect } from 'react'
|
|
||||||
|
import { formSchema, type Schema } from './emails/data'
|
||||||
|
|
||||||
export async function action({ request, context }: Route.ActionArgs) {
|
export async function action({ request, context }: Route.ActionArgs) {
|
||||||
const body = await request.json()
|
const body = await request.json()
|
||||||
|
|||||||
Reference in New Issue
Block a user