re-write QuestionList as function component

2022-07-24 22:02:32 +03:00
parent 8ea71e41a0
commit 557310e81c
1 changed files with 49 additions and 56 deletions
@@ -21,9 +21,21 @@ interface QuestionListProps {
  onChange: (value: SignupFormQuestion[]) => void;
 }

-class QuestionList extends React.Component<QuestionListProps> {
-  handleNameInputChange = (questions: SignupFormQuestion[], index: number, lang: Lang): React.ChangeEventHandler<HTMLInputElement> => (event) => {
-    const { onChange } = this.props;
+const QuestionList: React.FC<QuestionListProps> = ({ 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<HTMLInputElement> => (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<QuestionListProps> {
    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 = <OptionsWidget inputProps={dataProps} onChange={onChange} />;
-      const typeSelectWidget = <TypeWidget inputProps={dataProps} onChange={onChange} />;
-      return (
-        <Draggable
-          key={q.id}
-          id={q.id}
-          index={index}
-          handleDrag={this.handleDrag(questions)}
-        >
-          <WidgetRow>
-            <QuestionElement
-              onClick={this.handleElementRemove(questions, index)}
-            >
-              <input type="text" value={q.title_fi} onChange={this.handleNameInputChange(questions, index, "fi")} />
-              <input type="text" value={q.title_en} onChange={this.handleNameInputChange(questions, index, "en")} />
-              {typeSelectWidget}
-              {optionsWidget}
-            </QuestionElement>
-          </WidgetRow>
-        </Draggable>
-      );
-    });
-  }
-
-  render(): JSX.Element {
-    return (
-      <div data-e2e="admin-signup-question">
-        {this.renderQuestions()}
-      </div>
-    );
-  }
-}
+  return (
+    <div data-e2e="admin-signup-question">
+      {questions.map((q, index) => {
+        const inputProps = {
+          value: q.options,
+          type: q.type,
+          questions,
+          index,
+        };
+        const optionsWidget = <OptionsWidget inputProps={inputProps} onChange={onChange} />;
+        const typeSelectWidget = <TypeWidget inputProps={inputProps} onChange={onChange} />;
+        return (
+          <Draggable
+            key={q.id}
+            id={q.id}
+            index={index}
+            handleDrag={handleDrag}
+          >
+            <WidgetRow>
+              <QuestionElement
+                onClick={handleElementRemove(index)}
+              >
+                <input type="text" value={q.title_fi} onChange={handleNameInputChange(index, "fi")} />
+                <input type="text" value={q.title_en} onChange={handleNameInputChange(index, "en")} />
+                {typeSelectWidget}
+                {optionsWidget}
+              </QuestionElement>
+            </WidgetRow>
+          </Draggable>
+        );
+      })}
+    </div>
+  );
+};

 export default QuestionList;