refactor: type PollQuestionsManager form with PollQuestionInput
This commit is contained in:
1 parent
0d027dba99
commit
907a4399d0
1 file changed
+13
-7
@@ -19,6 +19,7 @@ import {
|
|||||||
SelectValue,
|
SelectValue,
|
||||||
} from "@/components/ui/select";
|
} from "@/components/ui/select";
|
||||||
import { useServerAction } from "@/hooks/use-server-action";
|
import { useServerAction } from "@/hooks/use-server-action";
|
||||||
|
import type { PollQuestionInput } from "@/lib/validators/poll";
|
||||||
|
|
||||||
interface Question {
|
interface Question {
|
||||||
id: number;
|
id: number;
|
||||||
@@ -33,11 +34,14 @@ interface Props {
|
|||||||
questions: Question[];
|
questions: Question[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type PollQuestionUpdateInput = PollQuestionInput & { id: number };
|
||||||
|
|
||||||
export function PollQuestionsManager({ pollId, questions }: Props) {
|
export function PollQuestionsManager({ pollId, questions }: Props) {
|
||||||
const { run, isPending } = useServerAction();
|
const { run, isPending } = useServerAction();
|
||||||
const [showForm, setShowForm] = useState(false);
|
const [showForm, setShowForm] = useState(false);
|
||||||
const [editingId, setEditingId] = useState<number | null>(null);
|
const [editingId, setEditingId] = useState<number | null>(null);
|
||||||
const [form, setForm] = useState({
|
const [form, setForm] = useState<PollQuestionInput>({
|
||||||
|
pollId,
|
||||||
question: "",
|
question: "",
|
||||||
type: "single",
|
type: "single",
|
||||||
sortOrder: questions.length,
|
sortOrder: questions.length,
|
||||||
@@ -46,6 +50,7 @@ export function PollQuestionsManager({ pollId, questions }: Props) {
|
|||||||
|
|
||||||
function resetForm() {
|
function resetForm() {
|
||||||
setForm({
|
setForm({
|
||||||
|
pollId,
|
||||||
question: "",
|
question: "",
|
||||||
type: "single",
|
type: "single",
|
||||||
sortOrder: questions.length,
|
sortOrder: questions.length,
|
||||||
@@ -57,8 +62,9 @@ export function PollQuestionsManager({ pollId, questions }: Props) {
|
|||||||
|
|
||||||
function handleEdit(q: Question) {
|
function handleEdit(q: Question) {
|
||||||
setForm({
|
setForm({
|
||||||
|
pollId,
|
||||||
question: q.question,
|
question: q.question,
|
||||||
type: q.type,
|
type: q.type as PollQuestionInput["type"],
|
||||||
sortOrder: q.sortOrder,
|
sortOrder: q.sortOrder,
|
||||||
options: q.options,
|
options: q.options,
|
||||||
});
|
});
|
||||||
@@ -69,13 +75,11 @@ export function PollQuestionsManager({ pollId, questions }: Props) {
|
|||||||
function handleSubmit(e: React.FormEvent) {
|
function handleSubmit(e: React.FormEvent) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (editingId) {
|
if (editingId) {
|
||||||
// biome-ignore lint/suspicious/noExplicitAny: explicitly chosen here, see surrounding code
|
run(() => updatePollQuestion({ id: editingId, ...form } as PollQuestionUpdateInput), {
|
||||||
run(() => updatePollQuestion({ id: editingId, ...form } as any), {
|
|
||||||
successMessage: "Question updated!",
|
successMessage: "Question updated!",
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// biome-ignore lint/suspicious/noExplicitAny: explicitly chosen here, see surrounding code
|
run(() => addPollQuestion(form), {
|
||||||
run(() => addPollQuestion({ pollId, ...form } as any), {
|
|
||||||
successMessage: "Question added!",
|
successMessage: "Question added!",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -115,7 +119,9 @@ export function PollQuestionsManager({ pollId, questions }: Props) {
|
|||||||
<Label>Type</Label>
|
<Label>Type</Label>
|
||||||
<Select
|
<Select
|
||||||
value={form.type}
|
value={form.type}
|
||||||
onValueChange={(v) => setForm({ ...form, type: v })}
|
onValueChange={(v) =>
|
||||||
|
setForm({ ...form, type: v as PollQuestionInput["type"] })
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<SelectTrigger>
|
<SelectTrigger>
|
||||||
<SelectValue />
|
<SelectValue />
|
||||||
|
|||||||
Reference in new issue
Block a user