[Upd #91] Add react-intl library

kbss-cvut · Mar 10, 2022 · ffb9cac · ffb9cac
1 parent 2f2d21f
commit ffb9cac
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 64 deletions.
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "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",

diff --git a/src/components/comment/CommentForm.jsx b/src/components/comment/CommentForm.jsx
@@ -1,20 +1,15 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { 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 { ConfigurationContext } from '../../contexts/ConfigurationContext';
+import { useIntl } from 'react-intl';
 
-const MAX_TEXT_AREA_HEIGHT = "300px";
+const MAX_TEXT_AREA_HEIGHT = '300px';
 
 const CommentForm = (props) => {
   const [commentValue, setCommentValue] = useState('');
   const formInputRef = useRef(null);
-  const { options } = useContext(ConfigurationContext);
-
-  let placeholder = 'Write your comments here  (Ctrl+Enter to confirm, Esc to cancel)';
-  if (options.intl.locale === 'cs') {
-    placeholder = 'Sem napište své komentáře (Ctrl+Enter pro potvrzení)';
-  }
+  const intl = useIntl();
 
   useEffect(() => {
     formInputRef.current.focus();
@@ -38,43 +33,46 @@ const CommentForm = (props) => {
     e.stopPropagation();
   };
 
-    const autoResizeTextArea = () => {
-        const textArea = formInputRef.current;
-        textArea.style.height = "auto";
-        let scrollHeight = textArea.scrollHeight;
-        textArea.style.height = `${scrollHeight}px`;
-        if (parseInt(textArea.style.height) > parseInt(MAX_TEXT_AREA_HEIGHT)) {
-            textArea.style.height = MAX_TEXT_AREA_HEIGHT
-        }
+  const autoResizeTextArea = () => {
+    const textArea = formInputRef.current;
+    textArea.style.height = 'auto';
+    let scrollHeight = textArea.scrollHeight;
+    textArea.style.height = `${scrollHeight}px`;
+    if (parseInt(textArea.style.height) > parseInt(MAX_TEXT_AREA_HEIGHT)) {
+      textArea.style.height = MAX_TEXT_AREA_HEIGHT;
     }
+  };
 
-    return (
-        <Form onSubmit={onSubmitHandler} onKeyUp={onKeyUpHandler} onClick={onClickHandler}>
-            <Form.Group className="m-2" controlId="formBasicComment">
-                <Col className="col-lg-12 p-0">
-                    <Row className="container-fluid p-0 m-0">
-                        <div id="comment-form">
-                            <Form.Control
-                                className="comment-form-control"
-                                name="comment"
-                                as="textarea"
-                                placeholder={placeholder}
-                                required
-                                value={commentValue}
-                                onChange={onValueChange}
-                                ref={formInputRef}
-                                onKeyPress={autoResizeTextArea}
-                                onKeyDown={autoResizeTextArea}
-                            />
-                            <Button className="comment-form-button" variant="primary" type="submit" >
-                                <ArrowRight/>
-                            </Button>
-                        </div>
-                    </Row>
-                </Col>
-            </Form.Group>
-        </Form>
-    );
+  return (
+    <Form onSubmit={onSubmitHandler} onKeyUp={onKeyUpHandler} onClick={onClickHandler}>
+      <Form.Group className="m-2" controlId="formBasicComment">
+        <Col className="col-lg-12 p-0">
+          <Row className="container-fluid p-0 m-0">
+            <div id="comment-form">
+              <Form.Control
+                className="comment-form-control"
+                name="comment"
+                as="textarea"
+                placeholder={intl.formatMessage({
+                  id: 'comment.form.placeholder',
+                  defaultMessage: 'Write your comments here  (Ctrl+Enter to confirm, Esc to cancel)'
+                })}
+                required
+                value={commentValue}
+                onChange={onValueChange}
+                ref={formInputRef}
+                onKeyPress={autoResizeTextArea}
+                onKeyDown={autoResizeTextArea}
+              />
+              <Button className="comment-form-button" variant="primary" type="submit">
+                <ArrowRight />
+              </Button>
+            </div>
+          </Row>
+        </Col>
+      </Form.Group>
+    </Form>
+  );
 };
 
 CommentForm.propTypes = {

diff --git a/src/components/comment/CommentList.tsx b/src/components/comment/CommentList.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, {useState, useRef, useEffect} from 'react';
 import CommentView from './CommentView';
 import Constants from '../../constants/Constants';
 import { Rings } from 'react-loader-spinner';

diff --git a/src/components/comment/CommentView.jsx b/src/components/comment/CommentView.jsx
@@ -8,6 +8,7 @@ import IconOverlay from '../IconOverlay';
 import PropTypes from 'prop-types';
 import RecycleBin from "../../styles/icons/RecycleBin";
 import {motion} from 'framer-motion/dist/framer-motion';
+import Constants from "../../constants/Constants";
 
 const UNKNOWN_AUTHOR = 'Unknown author';
 
@@ -18,7 +19,7 @@ const CommentView = (props) => {
 
   TimeAgo.addLocale(cs);
   TimeAgo.addLocale(en);
-  TimeAgo.setDefaultLocale('en');
+  TimeAgo.setDefaultLocale(Constants.LANG.en.locale);
 
   const time = new TimeAgo(options.intl.locale);
 

diff --git a/src/constants/Constants.js b/src/constants/Constants.js
@@ -127,4 +127,15 @@ export default class Constants {
       { id: Constants.ICONS.QUESTION_LINK, behavior: Constants.ICON_BEHAVIOR.ON_HOVER }
     ]
   };
+
+  static LANG = {
+    cs: {
+      locale: 'cs',
+      label: 'Čestina'
+    },
+    en: {
+      locale: 'en',
+      label: 'English'
+    }
+  };
 }
diff --git a/src/contexts/IntlContextProvider.tsx b/src/contexts/IntlContextProvider.tsx
@@ -0,0 +1,29 @@
+import React, { ReactNode} from 'react';
+import Constants from '../constants/Constants';
+import cs from '../i18n/cs.json';
+import en from '../i18n/en.json';
+import { IntlProvider } from 'react-intl';
+
+export const IntlContext = React.createContext({});
+
+interface Props {
+  children: ReactNode;
+  locale: string;
+}
+
+const IntlContextProvider = ({ children, locale }: Props) => {
+  let lang = en;
+  if (locale === Constants.LANG.cs.locale) {
+    lang = cs;
+  }
+
+  return (
+    <IntlContext.Provider value={{ locale, lang }}>
+      <IntlProvider locale={locale} messages={lang}>
+        {children}
+      </IntlProvider>
+    </IntlContext.Provider>
+  );
+};
+
+export default IntlContextProvider;
diff --git a/src/i18n/cs.json b/src/i18n/cs.json
@@ -0,0 +1,3 @@
+{
+  "comment.form.placeholder": "Sem napište své komentáře (Ctrl+Enter pro potvrzení)"
+}
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -0,0 +1,3 @@
+{
+  "comment.form.placeholder": "Write your comments here  (Ctrl+Enter to confirm, Esc to cancel)"
+}
diff --git a/test/rendering/TestApp.jsx b/test/rendering/TestApp.jsx
@@ -6,6 +6,7 @@ import '../../src/styles/s-forms.css';
 import 'react-datepicker/dist/react-datepicker.css';
 import queryString from 'query-string';
 import Constants from '../../src/constants/Constants';
+import IntlContext from "../../src/contexts/IntlContextProvider";
 
 const form1 = require('./form1.json'); // form with wizard steps
 const form2 = require('./form2.json'); // form without wizard steps (proudly assembled in Semantic Form Web Editor)
@@ -78,24 +79,26 @@ class TestApp extends React.Component {
 
     return (
       <div className="p-4">
-        <SForms
-          ref={this.refForm}
-          form={this.state.selectedForm}
-          options={options}
-          fetchTypeAheadValues={this.fetchTypeAheadValues}
-          isFormValid={(isFormValid) => this.setState({ isFormValid })}
-        />
-        <button
-          disabled={!this.state.isFormValid}
-          style={{ width: '100px', margin: '1rem -50px', position: 'relative', left: '50%' }}
-          onClick={() => {
-            this.setState((prevState) => ({
-              selectedForm: prevState.selectedForm === form2 ? form1 : form2
-            }));
-          }}
-        >
-          Switch form
-        </button>
+        <IntlContext locale={options.intl.locale}>
+          <SForms
+            ref={this.refForm}
+            form={this.state.selectedForm}
+            options={options}
+            fetchTypeAheadValues={this.fetchTypeAheadValues}
+            isFormValid={(isFormValid) => this.setState({ isFormValid })}
+          />
+          <button
+            disabled={!this.state.isFormValid}
+            style={{ width: '100px', margin: '1rem -50px', position: 'relative', left: '50%' }}
+            onClick={() => {
+              this.setState((prevState) => ({
+                selectedForm: prevState.selectedForm === form2 ? form1 : form2
+              }));
+            }}
+          >
+            Switch form
+          </button>
+        </IntlContext>
       </div>
     );
   }