-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
68 lines (60 loc) · 2.33 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
import React from 'react';
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 } from 'types/answer';
import { DisplayType, Question, getDisplayTypeEnum } from 'types/question';
import { AnswerRequest } from 'types/request/surveySubmitRequest';
export const answerDataTestIds = {
base: 'answer__base',
};
interface AnswerProps {
question: Question;
}
const Answer = ({ question }: AnswerProps): JSX.Element => {
const displayTypeEnum = getDisplayTypeEnum(question);
const onValueChanged = (answer: number | AnswerType | AnswerRequest) => {
// TODO
console.log(answer);
};
const onValuesChanged = (answers: AnswerType[] | AnswerRequest[]) => {
// TODO
console.log(answers);
};
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;