[Upd #193] Refactor into functional component to support intl

src/components/FormManager.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import QuestionAnswerProcessor from "../model/QuestionAnswerProcessor";
 import { FormQuestionsContext } from "../contexts/FormQuestionsContext";
 import Wizard from "./wizard/Wizard";
@@ -7,11 +7,16 @@ import { Card } from "react-bootstrap";
 import Question from "./Question";
 import FormUtils from "../util/FormUtils.js";
 import ValidationProcessor from "../model/ValidationProcessor.js";
+import { useIntl } from "react-intl";
 
-class FormManager extends React.Component {
-  getFormData = () => {
-    const data = this.context.getData();
-    const formQuestionsData = this.context.getFormQuestionsData();
+const FormManager = (props) => {
+  const { getFormQuestionsData, updateFormQuestionsData, getData } =
+    useContext(FormQuestionsContext);
+  const intl = useIntl();
+
+  const getFormData = () => {
+    const data = getData();
+    const formQuestionsData = getFormQuestionsData();
 
     return QuestionAnswerProcessor.buildQuestionAnswerModel(
       data,
@@ -20,86 +25,77 @@ class FormManager extends React.Component {
   };
 
   //TODO: Add optional argument "isRequiredForCompleteness"
-  validateForm = () => {
-    const questions = this.context.getFormQuestionsData();
+  const validateForm = () => {
+    const questions = getFormQuestionsData();
 
     for (let i = 0; i < questions.length; i++) {
       const question = questions[i];
-      //TODO: Convert to functional component to add intl from intl context
       ValidationProcessor.updateQuestionValidation(
         questions,
         question,
         i,
-        "en"
+        intl.locale
       );
     }
 
-    this.context.updateFormQuestionsData(null, questions);
-  };
-
-  getFormQuestionsData = () => {
-    return this.context.getFormQuestionsData();
+    updateFormQuestionsData(null, questions);
   };
 
-  getFormSpecification = () => {
-    const questions = this.context.getFormQuestionsData();
+  const getFormSpecification = () => {
+    const questions = getFormQuestionsData();
     return FormUtils.getFormSpecification(questions);
   };
 
-  handleStepChange = (question, index, change) => {
-    this.context.updateFormQuestionsData(index, { ...question, ...change });
+  const handleStepChange = (question, index, change) => {
+    updateFormQuestionsData(index, { ...question, ...change });
   };
 
-  renderWizardlessForm = () => {
-    const formQuestionsData = this.context.getFormQuestionsData();
+  const renderWizardlessForm = () => {
+    const formQuestionsData = getFormQuestionsData();
 
     return (
       <Card className="p-3">
-        {formQuestionsData.map((q, i) => this._mapQuestion(q, i))}
+        {formQuestionsData.map((q, i) => _mapQuestion(q, i))}
       </Card>
     );
   };
 
-  _mapQuestion(question, index) {
-    let component = this.props.mapComponent(question, Question);
+  const _mapQuestion = (question, index) => {
+    let component = props.mapComponent(question, Question);
     return React.createElement(component, {
       key: question["@id"],
       question: question,
-      onChange: (index, change) =>
-        this.handleStepChange(question, index, change),
+      onChange: (index, change) => handleStepChange(question, index, change),
       index: index,
+      intl: intl,
     });
-  }
-
-  render() {
-    const { modalView } = this.props;
+  };
 
-    const formQuestionsData = this.context.getFormQuestionsData();
+  const { modalView } = props;
 
-    if (!formQuestionsData.length) {
-      return (
-        <Card className="p-3 font-italic">
-          There are no questions available...
-        </Card>
-      );
-    }
+  const formQuestionsData = getFormQuestionsData();
 
-    const isWizardless = formQuestionsData.every(
-      (question) => !FormUtils.isWizardStep(question)
+  if (!formQuestionsData.length) {
+    return (
+      <Card className="p-3 font-italic">
+        There are no questions available...
+      </Card>
     );
+  }
 
-    if (modalView) {
-      return (
-        <FormWindow>
-          {isWizardless ? this.renderWizardlessForm() : <Wizard />}
-        </FormWindow>
-      );
-    }
+  const isWizardless = formQuestionsData.every(
+    (question) => !FormUtils.isWizardStep(question)
+  );
 
-    return isWizardless ? this.renderWizardlessForm() : <Wizard />;
+  if (modalView) {
+    return (
+      <FormWindow>
+        {isWizardless ? renderWizardlessForm() : <Wizard />}
+      </FormWindow>
+    );
   }
-}
 
-FormManager.contextType = FormQuestionsContext;
+  return isWizardless ? renderWizardlessForm() : <Wizard />;
+};
 
 export default FormManager;

src/components/Question.jsx

@@ -7,7 +7,7 @@ import Constants from "../constants/Constants";
 import FormUtils from "../util/FormUtils";
 import JsonLdObjectMap from "../util/JsonLdObjectMap";
 import QuestionAnswerProcessor from "../model/QuestionAnswerProcessor";
-import ValidatorFactory from "../model/ValidatorFactory";
+import { createValidator } from "../model/ValidatorFactory";
 import JsonLdObjectUtils from "../util/JsonLdObjectUtils";
 import PrefixIcon from "./PrefixIcon";
 import MediaContent from "./MediaContent";
@@ -33,10 +33,7 @@ export default class Question extends React.Component {
 
   componentDidMount() {
     this.setState({
-      validator: ValidatorFactory.createValidator(
-        this.props.question,
-        this.context.options.intl
-      ),
+      validator: createValidator(this.props.question, this.props.intl),
     });
   }
 

src/components/wizard/WizardStep.jsx

@@ -57,6 +57,7 @@ const WizardStep = (props) => {
         question={question}
         onChange={onChange}
         collapsible={FormUtils.isAnswerable(question)}
+        intl={intl}
       />
       {props.options.wizardStepButtons && _renderWizardStepButtons()}
     </React.Fragment>

src/i18n/cs.json

@@ -5,5 +5,12 @@
   "wizard.next": "Další",
   "wizard.previous": "Předchozí",
   "section.expand": "Rozbalit",
-  "section.collapse": "Sbalit"
+  "section.collapse": "Sbalit",
+
+  "validation.required": "Toto pole je povinné.",
+  "validation.required_only_for_completeness": "Toto pole je povinné pro vyplnění formuláře.",
+  "validation.invalid": "Toto pole je neplatné.",
+  "validation.check": "Toto pole musí být zkontrolováno.",
+  "validation.lower_or_equal": "Toto pole by mělo být číslo rovné nebo nižší než ",
+  "validation.greater_or_equal": "Toto pole musí být větší nebo rovno "
 }

src/i18n/en.json

@@ -5,5 +5,12 @@
   "wizard.next": "Next",
   "wizard.previous": "Previous",
   "section.expand": "Expand",
-  "section.collapse": "Collapse"
+  "section.collapse": "Collapse",
+
+  "validation.required": "This field is required.",
+  "validation.required_only_for_completeness": "This field is required to complete the form.",
+  "validation.invalid": "This field is invalid.",
+  "validation.check": "This field must be checked.",
+  "validation.lower_or_equal": "This field should be a number equal or lower to ",
+  "validation.greater_or_equal": "This field must be greater or equal to "
 }