diff --git a/src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx b/src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx index b69ce32..0fd0073 100644 --- a/src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx +++ b/src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx @@ -21,9 +21,21 @@ interface QuestionListProps { onChange: (value: SignupFormQuestion[]) => void; } -class QuestionList extends React.Component { - handleNameInputChange = (questions: SignupFormQuestion[], index: number, lang: Lang): React.ChangeEventHandler => (event) => { - const { onChange } = this.props; +const QuestionList: React.FC = ({ questions, onChange }): JSX.Element => { + const handleDrag = (srcIndex, dstIndex) => { + const srcCopy = { ...questions[srcIndex] }; + questions.splice(srcIndex, 1); + questions.splice(dstIndex, 0, srcCopy); + onChange(questions); + }; + + const handleElementRemove = (index: number) => (): void => { + const newQuestions = [...questions]; + newQuestions.splice(index, 1); + onChange(newQuestions); + }; + + const handleNameInputChange = (index: number, lang: Lang): React.ChangeEventHandler => (event) => { const val = event.target.value; if (lang === "fi") { // eslint-disable-next-line no-param-reassign @@ -36,58 +48,39 @@ class QuestionList extends React.Component { onChange(questions); }; - handleElementRemove = (questions: SignupFormQuestion[], index: number) => (): void => { - const { onChange } = this.props; - const newQuestions = [...questions]; - newQuestions.splice(index, 1); - onChange(newQuestions); - }; - - handleDrag = (questions: SignupFormQuestion[]) => (srcIndex, dstIndex) => { - const { onChange } = this.props; - const srcCopy = { ...questions[srcIndex] }; - questions.splice(srcIndex, 1); - questions.splice(dstIndex, 0, srcCopy); - onChange(questions); - }; - - renderQuestions(): JSX.Element[] { - const { questions, onChange } = this.props; - return questions.map((q, index) => { - const dataProps = { - value: q.options, type: q.type, questions, index, - }; - const optionsWidget = ; - const typeSelectWidget = ; - return ( - - - - - - {typeSelectWidget} - {optionsWidget} - - - - ); - }); - } - - render(): JSX.Element { - return ( -
- {this.renderQuestions()} -
- ); - } -} + return ( +
+ {questions.map((q, index) => { + const inputProps = { + value: q.options, + type: q.type, + questions, + index, + }; + const optionsWidget = ; + const typeSelectWidget = ; + return ( + + + + + + {typeSelectWidget} + {optionsWidget} + + + + ); + })} +
+ ); +}; export default QuestionList;