Botão Desfazer

[dvgba]

Adicionei a issue do Botão Desfazer:

No Server

./function/undo-goal-completion-request.ts

`import { eq, gte, lte, and, desc } from 'drizzle-orm'
import { db } from '../db'
import { goalCompletions } from '../db/schema'
import dayjs from 'dayjs'

interface UndoGoalCompletionRequest {
goalId: string
}

export async function undoGoalCompletion({
goalId,
}: UndoGoalCompletionRequest) {
const firstDayOfWeek = dayjs().startOf('week').toDate()
const lastDayOfWeek = dayjs().endOf('week').toDate()

const recentCompletion = await db
    .select()
    .from(goalCompletions)
    .where(
        and(
            eq(goalCompletions.goalId, goalId),
            gte(goalCompletions.createdAt, firstDayOfWeek),
            lte(goalCompletions.createdAt, lastDayOfWeek)
        )
    )
    .orderBy(desc(goalCompletions.createdAt))
    .limit(1)

if (recentCompletion.length === 0) {
    throw new Error('No completion found to undo!')
}

const { id } = recentCompletion[0]

await db.delete(goalCompletions).where(eq(goalCompletions.id, id))

return { status: 'Undo successful' }

}`

./http/routes/undo-completion.ts

`
import { z } from 'zod'
import type { FastifyPluginAsyncZod } from 'fastify-type-provider-zod'
import { undoGoalCompletion } from '../../functions/undo-goal-completion-request'

export const undoCompletionRoute: FastifyPluginAsyncZod = async (
app,
_opts
) => {
app.delete(
'/completions/:goalId',
{
schema: {
params: z.object({
goalId: z.string(),
}),
},
},
async request => {
const { goalId } = request.params

        try {
            await undoGoalCompletion({ goalId })
            return { status: 'Undo successful' }
        } catch (error) {
            if (error instanceof Error) {
                return { status: 'Error', message: error.message }
                // biome-ignore lint/style/noUselessElse: <explanation>
            } else {
                return {
                    status: 'Error',
                    message: 'An unknown error occurred',
                }
            }
        }
    }
)

}
`
E adicionando a rota no server.ts
app.register(undoCompletionRoute)

No Front temos as seguintes funções e chamadas

./componentes/undo-button.tsx

`import { undoGoalCompletion } from '../http/undo-goal-completion'

interface UndoButtonProps {
goalId: string
onUndoSuccess?: () => void
}

export function UndoButton({ goalId, onUndoSuccess }: UndoButtonProps) {
const handleUndo = async () => {
try {
await undoGoalCompletion(goalId)
// Chama a função de callback se fornecida
if (onUndoSuccess) onUndoSuccess()
} catch (error) {
console.error('Error undoing goal completion:', error)
}
}

return (
    // biome-ignore lint/a11y/useButtonType: <explanation>
    <button
        className="text-zinc-400 underline hover:no-underline"
        onClick={handleUndo}
    >
        Desfazer
    </button>
)

}
`

./http/undo-goal-completion.tsx

export async function undoGoalCompletion(goalId: string) { try { const response = await fetch( http://localhost:3333/completions/${goalId}`,
{
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
},
}
)

    if (!response.ok) {
        throw new Error('Failed to undo goal completion')
    }
} catch (error) {
    console.error('Failed to undo goal completion:', error)
}

}
`

No ./componentes/summary.tsx
Começei adicionando uma "const queryClient = useQueryClient()" dentro da função summary e o botão ficou assim:
`
<UndoButton
goalId={goal.id}
onUndoSuccess={() => {
queryClient.invalidateQueries({
queryKey: ['summary'],
})
queryClient.invalidateQueries({
queryKey: ['pending-goals'],
})
}}
/>

`