-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
111 lines (98 loc) · 3.85 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React, { useEffect } from 'react';
import isEmpty from 'lodash/isEmpty';
import AppSlider from 'components/AppSlider';
import Dropdown from 'components/Dropdown';
import MultiChoice from 'components/MultiChoice';
import MultiInputs from 'components/MultiInputs';
import Nps from 'components/Nps';
import Rating from 'components/Rating';
import TextArea from 'components/TextArea';
import { Answer as AnswerType, instanceOfAnswer } from 'types/answer';
import { DisplayType, Question, getDisplayTypeEnum } from 'types/question';
import { AnswerRequest, instanceOfAnswerRequest } from 'types/request/surveySubmitRequest';
export const answerDataTestIds = {
base: 'answer__base',
};
interface AnswerProps {
question: Question;
onAnswerChanged: (answers: AnswerRequest[]) => void;
}
const Answer = ({ question, onAnswerChanged }: AnswerProps): JSX.Element => {
const displayTypeEnum = getDisplayTypeEnum(question);
const onValueChanged = (answer: number | AnswerType | AnswerRequest) => {
if (typeof answer === 'number') {
onAnswerChanged([{ id: question.answers[answer - 1].id, answer: '' }]);
} else if (instanceOfAnswer(answer)) {
onAnswerChanged([{ id: answer.id, answer: '' }]);
} else if (instanceOfAnswerRequest(answer)) {
onAnswerChanged([answer]);
}
};
const onValuesChanged = (answers: AnswerType[] | AnswerRequest[]) => {
if (!isEmpty(answers)) {
if (instanceOfAnswer(answers[0])) {
const answerRequests: AnswerRequest[] = answers.map((answer) => ({
id: answer.id,
answer: '',
}));
onAnswerChanged(answerRequests);
} else if (instanceOfAnswerRequest(answers[0])) {
onAnswerChanged(answers as AnswerRequest[]);
}
}
};
useEffect(() => {
const setDefaultAnswers = () => {
switch (displayTypeEnum) {
case DisplayType.Heart:
case DisplayType.Smiley:
case DisplayType.Thumbs:
case DisplayType.Star:
case DisplayType.Slider:
case DisplayType.Dropdown:
onValueChanged({ id: question.answers[0].id, answer: '' });
break;
case DisplayType.Nps:
const answerRequests: AnswerRequest[] = question.answers
.slice(0, Math.round(question.answers.length / 2) + 1)
.map((answer) => ({ id: answer.id, answer: '' }));
onValuesChanged(answerRequests);
break;
}
};
setDefaultAnswers();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [question]);
const answerComponent = (): JSX.Element => {
switch (displayTypeEnum) {
case DisplayType.Heart:
case DisplayType.Smiley:
case DisplayType.Thumbs:
case DisplayType.Star:
return <Rating items={question.answers} displayType={displayTypeEnum} onValueChanged={onValueChanged} />;
case DisplayType.Choice:
return <MultiChoice items={question.answers} isPickOne={question?.pick === 'one'} onValuesChanged={onValuesChanged} />;
case DisplayType.Nps:
return <Nps items={question.answers} onValuesChanged={onValuesChanged} />;
case DisplayType.Textarea:
return <TextArea items={question.answers} onValueChange={onValueChanged} />;
case DisplayType.Textfield:
return <MultiInputs questionId={question.id} items={question.answers} onValuesChanged={onValuesChanged} />;
case DisplayType.Dropdown:
return <Dropdown items={question.answers} onValueChanged={onValueChanged} />;
case DisplayType.Slider:
return <AppSlider min={0} max={question.answers.length} onValueChanged={onValueChanged} />;
case DisplayType.Unknown:
case DisplayType.Intro:
case DisplayType.Outro:
default:
return <></>;
}
};
return (
<div key={question.id} data-test-id={answerDataTestIds.base}>
{answerComponent()}
</div>
);
};
export default Answer;