[Upd #193] Unified way to provide locale

.storybook/preview.js

@@ -1,6 +1,5 @@
 import Constants from "../src/constants/Constants";
 import { addDecorator } from "@storybook/react";
-import IntlContextProvider from "../src/contexts/IntlContextProvider";
 import { FormGenContextProvider } from "../src/contexts/FormGenContext";
 import { ConfigurationContextProvider } from "../src/contexts/ConfigurationContext";
 
@@ -107,9 +106,7 @@ const fetchTypeAheadValues = () => {
 addDecorator((story) => (
   <ConfigurationContextProvider options={options}>
     <FormGenContextProvider fetchTypeAheadValues={fetchTypeAheadValues}>
-      <IntlContextProvider locale={globalTypes.locale.defaultValue}>
-        {story()}
-      </IntlContextProvider>
+      {story()}
     </FormGenContextProvider>
   </ConfigurationContextProvider>
 ));

package.json

@@ -59,7 +59,6 @@
     "prop-types": "^15.7.2",
     "react-bootstrap": "1.0.1",
     "react-datepicker": "^4.2.1",
-    "react-intl": "^5.24.6",
     "react-loader-spinner": "^5.1.0",
     "react-select": "^3.1.0",
     "react-window": "^1.8.5",

src/components/comment/CommentForm.jsx

@@ -1,15 +1,19 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { Button, Form, Col, Row } from "react-bootstrap";
 import PropTypes from "prop-types";
 import ArrowRight from "../../styles/icons/ArrowRight";
-import { useIntl } from "react-intl";
+import { ConfigurationContext } from "../../contexts/ConfigurationContext.js";
+import cs from "../../i18n/cs.json";
+import en from "../../i18n/en.json";
 
 const MAX_TEXT_AREA_HEIGHT = "300px";
 
 const CommentForm = (props) => {
+  const configurationContext = useContext(ConfigurationContext);
   const [commentValue, setCommentValue] = useState("");
   const formInputRef = useRef(null);
-  const intl = useIntl();
+
+  const intl = configurationContext.options.intl;
 
   useEffect(() => {
     formInputRef.current.focus();
@@ -62,9 +66,11 @@ const CommentForm = (props) => {
                 className="comment-form-control"
                 name="comment"
                 as="textarea"
-                placeholder={intl.formatMessage({
-                  id: "comment.form.placeholder",
-                })}
+                placeholder={
+                  intl.locale !== "en"
+                    ? cs["comment.form.placeholder"]
+                    : en["comment.form.placeholder"]
+                }
                 required
                 value={commentValue}
                 onChange={handleValueChange}