[Upd #191] Harmonize way to provide intl

kbss-cvut · Apr 23, 2024 · 1d63f79 · 1d63f79
1 parent 6d538d3
commit 1d63f79
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 132 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,12 +1,8 @@
 import Constants from "../src/constants/Constants";
-import IntlContextProvider from "../src/contexts/IntlContextProvider";
-import { FormGenContextProvider } from "../src/contexts/FormGenContext";
-import { ConfigurationContextProvider } from "../src/contexts/ConfigurationContext";
 
 import "react-datepicker/dist/react-datepicker.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "../src/styles/s-forms.css";
-import possibleValues from "../src/stories/assets/possibleValues.json";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -117,63 +113,7 @@ export const globalTypes = {
   },
 };
 
-const options = {
-  i18n: {
-    "wizard.next": "Next",
-    "wizard.previous": "Previous",
-    "section.expand": "Expand",
-    "section.collapse": "Collapse",
-  },
-  intl: {
-    locale: "en",
-  },
-  modalView: false,
-  horizontalWizardNav: false,
-  wizardStepButtons: true,
-  startingStep: 1,
-  debugMode: false,
-  users: [
-    { id: "http://fel.cvut.cz/people/max-chopart", label: "Max Chopart" },
-    {
-      id: "http://fel.cvut.cz/people/miroslav-blasko",
-      label: "Miroslav Blasko",
-    },
-  ],
-  currentUser: "http://fel.cvut.cz/people/max-chopart",
-  icons: [
-    {
-      id: Constants.ICONS.QUESTION_HELP,
-      behavior: Constants.ICON_BEHAVIOR.ENABLE,
-    },
-    {
-      id: Constants.ICONS.QUESTION_LINK,
-      behavior: Constants.ICON_BEHAVIOR.ENABLE,
-    },
-    {
-      id: Constants.ICONS.QUESTION_COMMENTS,
-      behavior: Constants.ICON_BEHAVIOR.ENABLE,
-    },
-  ],
-};
-
-const fetchTypeAheadValues = () => {
-  return new Promise((resolve) =>
-    setTimeout(() => resolve(possibleValues), 1500)
-  );
-};
-
 const preview = {
-  decorators: [
-    (Story, context) => (
-      <ConfigurationContextProvider options={options}>
-        <FormGenContextProvider fetchTypeAheadValues={fetchTypeAheadValues}>
-          <IntlContextProvider locale={context.globals.locale}>
-            <Story />
-          </IntlContextProvider>
-        </FormGenContextProvider>
-      </ConfigurationContextProvider>
-    ),
-  ],
   parameters: {
     options: {
       storySort: {

diff --git a/src/components/FormManager.jsx b/src/components/FormManager.jsx
@@ -25,7 +25,7 @@ class FormManager extends React.Component {
 
     for (let i = 0; i < questions.length; i++) {
       const question = questions[i];
-      //TODO: Add intl from intl context
+      //TODO: Convert to functional component to add intl from intl context
       ValidationProcessor.updateQuestionValidation(
         questions,
         question,

diff --git a/src/components/Question.jsx b/src/components/Question.jsx
@@ -447,6 +447,7 @@ export default class Question extends React.Component {
   _renderCollapseToggle() {
     const { options } = this.context;
 
+    // TODO: Convert this component into a functional component to use useIntl() Hook
     const title = this.state.expanded
       ? options.i18n["section.collapse"]
       : options.i18n["section.expand"];

diff --git a/src/components/SForms.jsx b/src/components/SForms.jsx
@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { FormGenContextProvider } from "../contexts/FormGenContext";
 import { FormQuestionsProvider } from "../contexts/FormQuestionsContext";
 import { ConfigurationContextProvider } from "../contexts/ConfigurationContext";
+import IntlContextProvider from "../contexts/IntlContextProvider.tsx";
 import FormGenerator from "../model/FormGenerator";
 import FormManager from "./FormManager";
 import { Card } from "react-bootstrap";
@@ -73,19 +74,23 @@ const SForms = forwardRef((props, ref) => {
       mapComponent={_mapComponent}
       options={props.options}
     >
-      <FormGenContextProvider fetchTypeAheadValues={props.fetchTypeAheadValues}>
-        <FormQuestionsProvider
-          data={form}
-          formQuestions={formProperties.formQuestions}
-          isFormValid={props.isFormValid}
+      <IntlContextProvider locale={props.options.intl.locale}>
+        <FormGenContextProvider
+          fetchTypeAheadValues={props.fetchTypeAheadValues}
         >
-          <FormManager
-            ref={ref}
-            modalView={props.options && props.options.modalView}
-            mapComponent={_mapComponent}
-          />
-        </FormQuestionsProvider>
-      </FormGenContextProvider>
+          <FormQuestionsProvider
+            data={form}
+            formQuestions={formProperties.formQuestions}
+            isFormValid={props.isFormValid}
+          >
+            <FormManager
+              ref={ref}
+              modalView={props.options && props.options.modalView}
+              mapComponent={_mapComponent}
+            />
+          </FormQuestionsProvider>
+        </FormGenContextProvider>
+      </IntlContextProvider>
     </ConfigurationContextProvider>
   );
 });

diff --git a/src/components/wizard/WizardStep.jsx b/src/components/wizard/WizardStep.jsx
@@ -1,72 +1,67 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Button, ButtonToolbar } from "react-bootstrap";
 import { FormQuestionsContext } from "../../contexts/FormQuestionsContext";
 import Question from "../Question";
 import PropTypes from "prop-types";
 import FormUtils from "../../util/FormUtils.js";
+import { useIntl } from "react-intl";
 
-export default class WizardStep extends React.Component {
-  constructor(props) {
-    super(props);
-  }
+const WizardStep = (props) => {
+  const { updateFormQuestionsData, getFormQuestionsData } =
+    useContext(FormQuestionsContext);
+  const intl = useIntl();
 
-  onNextStep = () => {
-    this.context.updateFormQuestionsData(
-      this.props.index,
-      this.context.getFormQuestionsData()
-    );
-    this.props.onNextStep();
+  const onNextStep = () => {
+    updateFormQuestionsData(props.index, getFormQuestionsData());
+    props.onNextStep();
   };
 
-  onPreviousStep = () => {
-    this.props.onPreviousStep();
+  const onPreviousStep = () => {
+    props.onPreviousStep();
   };
 
-  _renderWizardStepButtons = () => {
+  const _renderWizardStepButtons = () => {
     return (
       <ButtonToolbar className="m-3 float-right">
-        {!this.props.isFirstStep && (
+        {!props.isFirstStep && (
           <Button
             className="mr-2"
-            onClick={this.onPreviousStep}
+            onClick={onPreviousStep}
             variant="primary"
             size="sm"
           >
-            {this.props.options.i18n["wizard.previous"]}
+            {intl.formatMessage({ id: "wizard.previous" })}
           </Button>
         )}
-        {!this.props.isLastStep && (
-          <Button onClick={this.onNextStep} variant="primary" size="sm">
-            {this.props.options.i18n["wizard.next"]}
+        {!props.isLastStep && (
+          <Button onClick={onNextStep} variant="primary" size="sm">
+            {intl.formatMessage({ id: "wizard.next" })}
           </Button>
         )}
       </ButtonToolbar>
     );
   };
 
-  onChange = (index, change) => {
-    this.context.updateFormQuestionsData(this.props.index || index, {
-      ...this.props.question,
+  const onChange = (index, change) => {
+    updateFormQuestionsData(props.index || index, {
+      ...props.question,
       ...change,
     });
   };
 
-  render() {
-    const question = this.context.getFormQuestionsData([this.props.index]);
+  const question = getFormQuestionsData([props.index]);
 
-    return (
-      <React.Fragment>
-        <Question
-          question={question}
-          onChange={this.onChange}
-          collapsible={FormUtils.isAnswerable(question)}
-        />
-        {this.props.options.wizardStepButtons &&
-          this._renderWizardStepButtons()}
-      </React.Fragment>
-    );
-  }
-}
+  return (
+    <React.Fragment>
+      <Question
+        question={question}
+        onChange={onChange}
+        collapsible={FormUtils.isAnswerable(question)}
+      />
+      {props.options.wizardStepButtons && _renderWizardStepButtons()}
+    </React.Fragment>
+  );
+};
 
 WizardStep.propTypes = {
   options: PropTypes.object.isRequired,
@@ -79,4 +74,4 @@ WizardStep.propTypes = {
   isLastStep: PropTypes.bool,
 };
 
-WizardStep.contextType = FormQuestionsContext;
+export default WizardStep;
diff --git a/src/contexts/ConfigurationContext.js b/src/contexts/ConfigurationContext.js
@@ -18,12 +18,6 @@ const defaultProps = {
   },
   options: {
     intl: { locale: "en" },
-    i18n: {
-      "wizard.next": "Next",
-      "wizard.previous": "Previous",
-      "section.collapse": "Collapse",
-      "section.expand": "Expand",
-    },
     modalView: false,
     modalProps: {},
     horizontalWizardNav: true,

diff --git a/src/i18n/cs.json b/src/i18n/cs.json
@@ -1,4 +1,9 @@
 {
   "comment.form.placeholder": "Sem napište své komentáře (Ctrl+Enter pro potvrzení)",
-  "wizard.nav.tooltip": "Navigace na této kartě je zakázána, aby nedošlo k přehlédnutí důležitých otázek. K navigaci na tuto kartu použijte tlačítka související s formulářem."
+
+  "wizard.nav.tooltip": "Navigace na této kartě je zakázána, aby nedošlo k přehlédnutí důležitých otázek. K navigaci na tuto kartu použijte tlačítka související s formulářem.",
+  "wizard.next": "Další",
+  "wizard.previous": "Předchozí",
+  "section.expand": "Rozbalit",
+  "section.collapse": "Sbalit"
 }
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -1,4 +1,9 @@
 {
   "comment.form.placeholder": "Write your comments here  (Ctrl+Enter to confirm, Esc to cancel)",
-  "wizard.nav.tooltip": "Navigation to this tab is disabled to prevent overlooking important questions. Use form-related buttons to navigate to this tab instead."
+
+  "wizard.nav.tooltip": "Navigation to this tab is disabled to prevent overlooking important questions. Use form-related buttons to navigate to this tab instead.",
+  "wizard.next": "Next",
+  "wizard.previous": "Previous",
+  "section.expand": "Expand",
+  "section.collapse": "Collapse"
 }
diff --git a/src/stories/SForms.stories.tsx b/src/stories/SForms.stories.tsx
@@ -52,12 +52,6 @@ const Template: ComponentStory<typeof SForms> = (
   }
 ) => {
   const options = {
-    i18n: {
-      "wizard.next": "Next",
-      "wizard.previous": "Previous",
-      "section.expand": "Expand",
-      "section.collapse": "Collapse",
-    },
     intl: {
       locale: locale,
     },

diff --git a/types/s-forms.d.ts b/types/s-forms.d.ts
@@ -8,12 +8,6 @@ export type Intl = {
 
 export interface SOptions {
   intl?: Intl; // default 'en'
-  i18n?: {
-    "wizard.next": string; // default 'Next'
-    "wizard.previous": string; // default 'Previous'
-    "section.expand": string; // default 'Expand'
-    "section.collapse": string; // default 'Collapse'
-  };
   modalView?: boolean; // default false
   modalProps?: Modal;
   horizontalWizardNav?: boolean; // default true