Function QuestionForm

webapp/src/app/questions/ask/QuestionForm.tsx:24–129

({questionToUpdate}: Props)

}

export default function QuestionForm({questionToUpdate}: Props) {
    const [pending, startTransition] = useTransition();
    const tags = useTagStore(state => state.tags);
    const router = useRouter();
    const { register, control, reset, handleSubmit, formState: {isSubmitting, isValid, errors} } = useForm({
        mode: 'onTouched',
        resolver: zodResolver(questionSchema)
    });

    useEffect(() => {
        if (questionToUpdate) reset({
            ...questionToUpdate,
            tags: questionToUpdate.tagSlugs
        })
    }, [questionToUpdate, reset])

    const onSubmit = (data: QuestionSchema) => {
        startTransition(async () => {
            if (questionToUpdate) {
                const {error} = await updateQuestion(data, questionToUpdate.id);
                if (error) handleError(error);
                router.push(`/questions/${questionToUpdate.id}`);
            } else {
                const {data: question, error} = await postQuestion(data);
                if (error) handleError(error);
                if (question) router.push(`/questions/${question.id}`);
            }
        })
    }

    return (
        <Form onSubmit={handleSubmit(onSubmit)} 
            className='flex flex-col gap-3 p-6 shadow-xl bg-white dark:bg-black' >
            <div className="flex flex-col gap-3 w-full">
                <h3 className='text-2xl font-semibold'>Title</h3>
                <Input
                    {...register('title')}
                    type="text"
                    className="w-full"
                    label="Be specific and imagine you’re asking a question to another person"
                    labelPlacement='outside-top'
                    placeholder="e.g how would you truncate text in Tailwind?"
                    isInvalid={!!errors?.title}
                    errorMessage={errors.title?.message}
                />
            </div>
            <div className="flex flex-col gap-3 w-full">
                <h3 className='text-2xl font-semibold'>Body</h3>
                <Controller
                    name='content'
                    control={control}
                    render={({field: {onChange, onBlur, value}, fieldState}) => (
                        <>
                            <p className={`text-sm ${fieldState.error?.message && 'text-danger'}`}>
                                Include all the information someone would need to answer your question
                            </p>
                            <RichTextEditor
                                onChange={onChange}