2dd8c2197c
- Add data-access-analytics for error book analytics queries - Update actions, data-access for improved error book operations - Update components: add-error-book-dialog, analytics-stats-cards, chapter-weakness-chart, class-error-bar-chart, class-filter, error-book-detail-dialog, error-book-filters, error-book-item-card, error-book-list, error-book-stats-cards, grouped-student-error-table, knowledge-point-weakness-chart, review-buttons, subject-distribution-chart, subject-tabs, top-wrong-questions - Remove class-error-overview (replaced by new components)
103 lines
2.9 KiB
TypeScript
103 lines
2.9 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useTransition } from "react"
|
|
import { RotateCcw, ThumbsUp, Check, Zap } from "lucide-react"
|
|
import { toast } from "sonner"
|
|
import { useTranslations } from "next-intl"
|
|
|
|
import { Button } from "@/shared/components/ui/button"
|
|
import { reviewErrorBookItemAction } from "../actions"
|
|
import type { ErrorBookReviewResultValue } from "../types"
|
|
|
|
interface ReviewButtonsProps {
|
|
itemId: string
|
|
onReviewed?: () => void
|
|
}
|
|
|
|
type ReviewOption = {
|
|
result: ErrorBookReviewResultValue
|
|
label: string
|
|
description: string
|
|
icon: typeof RotateCcw
|
|
variant: "destructive" | "secondary" | "default" | "outline"
|
|
}
|
|
|
|
export function ReviewButtons({ itemId, onReviewed }: ReviewButtonsProps) {
|
|
const t = useTranslations("error-book")
|
|
const [isPending, startTransition] = useTransition()
|
|
const [selected, setSelected] = useState<ErrorBookReviewResultValue | null>(null)
|
|
|
|
const reviewOptions: ReviewOption[] = [
|
|
{
|
|
result: "again",
|
|
label: t("review.again"),
|
|
description: t("review.againDesc"),
|
|
icon: RotateCcw,
|
|
variant: "destructive",
|
|
},
|
|
{
|
|
result: "hard",
|
|
label: t("review.hard"),
|
|
description: t("review.hardDesc"),
|
|
icon: Zap,
|
|
variant: "secondary",
|
|
},
|
|
{
|
|
result: "good",
|
|
label: t("review.good"),
|
|
description: t("review.goodDesc"),
|
|
icon: ThumbsUp,
|
|
variant: "default",
|
|
},
|
|
{
|
|
result: "easy",
|
|
label: t("review.easy"),
|
|
description: t("review.easyDesc"),
|
|
icon: Check,
|
|
variant: "outline",
|
|
},
|
|
]
|
|
|
|
function handleReview(result: ErrorBookReviewResultValue) {
|
|
setSelected(result)
|
|
startTransition(async () => {
|
|
const formData = new FormData()
|
|
formData.append("json", JSON.stringify({ itemId, result }))
|
|
const res = await reviewErrorBookItemAction(undefined, formData)
|
|
if (res.success) {
|
|
toast.success(res.message ?? t("messages.reviewRecorded"))
|
|
onReviewed?.()
|
|
} else {
|
|
toast.error(res.message ?? t("messages.recordFailed"))
|
|
setSelected(null)
|
|
}
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
|
|
{reviewOptions.map((opt) => {
|
|
const Icon = opt.icon
|
|
const isLoading = isPending && selected === opt.result
|
|
return (
|
|
<Button
|
|
key={opt.result}
|
|
variant={opt.variant}
|
|
size="sm"
|
|
disabled={isPending}
|
|
onClick={() => handleReview(opt.result)}
|
|
className="flex flex-col items-center gap-1 h-auto py-3"
|
|
>
|
|
<Icon className="h-4 w-4" data-icon="inline-start" />
|
|
<span className="font-medium">{opt.label}</span>
|
|
<span className="text-[10px] font-normal text-muted-foreground">
|
|
{opt.description}
|
|
</span>
|
|
{isLoading ? "..." : null}
|
|
</Button>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|