rutube

1
import { useCallback,useEffect,useMemo,useState } from "react";
2

3
import Question from "../../components/Question/Question";
4
import BlueButton from "../../components/UI/buttons/BlueButton/BlueButton";
5
import { useAppDispatch } from "../../hooks/useTypedDispatch";
6
import { useTypedSelector } from "../../hooks/useTypesSelector";
7
import { setFeedback } from "../../models/feedback";
8
import css from "./form.module.css";
9

10
interface IForm<TArgs = unknown>
11
{
12
	handleSubmit: (e: React.FormEvent,...args: TArgs[]) => void;
13
}
14
const Form = <TArgs,>({ handleSubmit }: IForm<TArgs>) =>
15
{
16
	const feedback = useTypedSelector((state) => state.extraQuestion);
17
	const firstQuestion = useTypedSelector((state) => state.feedback);
18
	const dispatch = useAppDispatch();
19

20
	const [isAllResponse,setIsAllResponse] = useState<boolean>(false);
21

22
	const handleResponseChangeRadioBtn = useCallback((question: number,value: number) =>
23
	{
24
		dispatch(setFeedback({ questionID: question,responseID: value }));
25
	},[dispatch]);
26

27
	useEffect(() =>
28
	{
29
		const isAllChoose = feedback.every((elem) => elem.responseID !== undefined);
30
		if (isAllChoose)
31
			setIsAllResponse(true);
32
	},[feedback]);
33

34
	const questions = useMemo((): string[] =>
35
	{
36
		return [
37
			" Клиентский сервис RUTUBE помог в решении проблемы?",
38
			" Специалист RUTUBE хорошо изъяснялся и владел языком?",
39
			" Специалист RUTUBE был отзывчив?",
40
			" Специалист RUTUBE был компетентен?",
41
			" Какова вероятность того, что вы порекомендуете RUTUBE коллеге или другу?"
42

43
		];
44
	},[]);
45

46
	return (
47
		<form onSubmit={(e) => handleSubmit(e,[firstQuestion,...feedback] as TArgs)}
48
			className={css.form}>
49
			<div className={css.form__question}>
50
				<Question
51
					question="1. Как быстро вы&nbsp;получили ответ от&nbsp;клиентского сервиса RUTUBE?"
52
					value={feedback[0]?.responseID}
53
					onChange={(value) => handleResponseChangeRadioBtn(feedback[0].questionID,value)}
54
					required
55
					labels={["Быстрее, чем ожидал","Как и ожидал","Медленнее, чем ожидал"]}
56
					extraCss={
57
						{
58
							questionParagraph: css.form__text_question,
59
							titleRadioBtn: css.title_radion_btn,
60
							wrapperRadioBtns: css.wrapper_radio_btns
61
						}
62
					}
63
					isChoosenValue={feedback[0]?.responseID ? true : false}
64
				/>
65
			</div>
66
			{
67
				questions.map((question,index) => 
68
				{
69
					return (
70
						<div key={index} className={css.form__question}>
71
							<Question
72
								question={`${index + 2}. ${question}`}
73
								value={feedback[index + 1]?.responseID}
74
								onChange={(value) => handleResponseChangeRadioBtn(feedback[index + 1].questionID,value)}
75
								required
76
								maxRaiting={index === questions.length - 1 ? 11 : 5}
77
								startFromZero={index === questions.length - 1 ? true : false}
78
								extraCss={
79
									{
80
										questionParagraph: css.form__text_question
81
									}
82
								}
83
								isChoosenValue={feedback[index + 1]?.responseID ? true : false}
84
							/>
85
						</div>
86
					);
87
				})
88
			}
89
			<div className={css.wrapper_submit}>
90
				<BlueButton
91
					disabled={!isAllResponse}
92
					typeBtn="submit"
93
					textBtn="Отправить ответы"
94
					extraClassBtn={`${css.btn} ${!isAllResponse ? css.btn_disable : ""}`}
95
				/>
96

97
			</div>
98
		</form>
99
	);
100
};
101

102
export default Form;
103