gettext issues

.eslintrc.json

@@ -50,5 +50,12 @@
     "react/prop-types": ["error"],
     "react/require-default-props": ["error"],
     "react/display-name": ["off", { "ignoreTranspilerName": true }]
+  },
+  "globals": {
+    "gettext": "readonly",
+    "pgettext": "readonly",
+    "ngettext": "readonly",
+    "npgettext": "readonly",
+    "interpolate": "readonly"
   }
 }

package.json

@@ -35,6 +35,7 @@
   "dependencies": {
     "@sentry/browser": "^5.9.0",
     "abortcontroller-polyfill": "^1.3.0",
+    "antd": "^4.3.0",
     "bootstrap": "^4.0.0",
     "core-decorators": "^0.20.0",
     "ds-frontend": "https://github.com/django-stars/ds-frontend.git#9dbaa21",

src/app/App.js

@@ -4,6 +4,8 @@ import { CheckCache } from '@ds-frontend/cache'
 import { hot } from 'react-hot-loader/root'
 import routes from './routes'
 import PropTypes from 'prop-types'
+import { TranslateProvider } from '@ds-frontend/i18n'
+import api from 'api'
 
 AppProvider.propTypes = {
   store: PropTypes.object.isRequired,
@@ -13,11 +15,18 @@ AppProvider.propTypes = {
 
 function AppProvider({ store, history }) {
   return (
-    <Provider store={store}>
-      <CheckCache>
-        <Router history={history} routes={routes}/>
-      </CheckCache>
-    </Provider>
+    <TranslateProvider
+      defaultLanguage="en"
+      storage={localStorage}
+      url="jsi18n"
+      api={api}
+    >
+      <Provider store={store}>
+        <CheckCache>
+          <Router history={history} routes={routes}/>
+        </CheckCache>
+      </Provider>
+    </TranslateProvider>
   )
 }
 

src/app/common/forms/validation/constants.js

@@ -1,6 +1,6 @@
 const errors = {
-  required: 'Required',
-  email: 'Email is wrong',
+  required: gettext('Required'),
+  email: gettext('Email is wrong'),
 }
 
 export default errors

src/app/pages/auth/login/LoginView.js

@@ -1,6 +1,8 @@
+import { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { TextField } from 'common/forms'
 import classNames from './login.scss'
+import { notification } from 'antd'
 
 
 LoginView.propTypes = {
@@ -14,13 +16,28 @@ LoginView.defaultProps = {
   valid: true,
 }
 
+// ussage with variables
+const title = gettext('Login')
+
 export default function LoginView({ handleSubmit, submitting, valid }) {
+  useEffect(() => {
+    notification.success({
+      description: gettext('message description'),
+    })
+  }, [])
+
   return (
     <form onSubmit={handleSubmit} className={classNames.login}>
-      <h2>Login</h2>
-      <TextField name="email" label="Email" type="email" />
-      <TextField name="password" label="Password" type="password" />
-      <button disabled={submitting || !valid }>Login</button>
+      <h2>{title}</h2>
+      <TextField name="email" label={gettext('Email')} type="email" />
+      <TextField name="password" label={gettext('Password')} type="password" />
+      <button disabled={submitting || !valid }>{gettext('Login')}</button>
+      <span dangerouslySetInnerHTML={{
+        __html: interpolate(
+          pgettext('EMAIL VALIDATION', 'It looks like an account with this email address already exists. Please %slog in%s to continue'),
+          ['<a href="/login/">', '</a>'],
+        ),
+      }} />
     </form>
   )
 }

webpack.config.babel.js

@@ -30,6 +30,7 @@ import {
   proxy,
   sentry,
   babel,
+  i18n,
 } from './presets'
 
 module.exports = createConfig([
@@ -128,6 +129,7 @@ module.exports = createConfig([
   react(),
   sentry(),
   // sass(),
+  i18n(),
   styles(),
   // postcss(),
   assets(),