Add Slovenian translation

dblenkus · Aug 20, 2022 · aec7d80 · aec7d80
1 parent b61b53e
commit aec7d80
Show file tree

Hide file tree

Showing 36 changed files with 398 additions and 112 deletions.
diff --git a/package.json b/package.json
@@ -19,11 +19,14 @@
         "@types/react": "^16.9.0",
         "@types/react-dom": "^16.9.0",
         "axios": "^0.19.2",
+        "i18next": "^21.9.1",
+        "i18next-browser-languagedetector": "^6.1.5",
         "lodash": "^4.17.19",
         "luxon": "^1.25.0",
         "query-string": "^6.12.1",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
+        "react-i18next": "^11.18.4",
         "react-redux": "^7.2.0",
         "react-router-dom": "^5.1.2",
         "react-scripts": "3.4.1",
@@ -68,7 +71,7 @@
         "eslint-plugin-jsx-a11y": "^6.2.3",
         "eslint-plugin-prettier": "^3.1.2",
         "eslint-plugin-react": "^7.19.0",
-        "eslint-plugin-react-hooks": "^3.0.0",
+        "eslint-plugin-react-hooks": "^2.5.0",
         "prettier": "^2.0.4"
     }
 }
diff --git a/src/components/Auth/LoginForm.tsx b/src/components/Auth/LoginForm.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Button } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
@@ -32,6 +33,7 @@ const useStyles = makeStyles(authStyles);
 
 const LoginForm: React.FC<LoginFormProps> = (props) => {
     const classes = useStyles();
+    const { t } = useTranslation();
     const { errors, fields, onChange, onSubmit } = props;
 
     const getError = (field: string): string => {
@@ -47,7 +49,7 @@ const LoginForm: React.FC<LoginFormProps> = (props) => {
         <form onSubmit={handleSubmit}>
             <InputField
                 name="email"
-                label="Email"
+                label={t('email')}
                 value={fields.email}
                 error={getError('email')}
                 autoComplete="email"
@@ -57,7 +59,7 @@ const LoginForm: React.FC<LoginFormProps> = (props) => {
             />
             <InputField
                 name="password"
-                label="Password"
+                label={t('password')}
                 value={fields.password}
                 error={getError('password')}
                 autoComplete="current-password"
@@ -79,7 +81,7 @@ const LoginForm: React.FC<LoginFormProps> = (props) => {
                 color="primary"
                 className={classes.submit}
             >
-                Sign In
+                {t('login')}
             </Button>
         </form>
     );

diff --git a/src/components/Auth/PasswordResetForm.tsx b/src/components/Auth/PasswordResetForm.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { useTranslation } from 'react-i18next';
+
 import { Button } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import { makeStyles } from '@material-ui/core/styles';
@@ -30,6 +32,7 @@ const useStyles = makeStyles(authStyles);
 
 const PasswordResetForm: React.FC<PasswordReserFormProps> = (props) => {
     const classes = useStyles();
+    const { t } = useTranslation();
     const { errors, fields, onChange, onSubmit } = props;
 
     const getError = (field: string): string => {
@@ -45,7 +48,7 @@ const PasswordResetForm: React.FC<PasswordReserFormProps> = (props) => {
         <form onSubmit={handleSubmit}>
             <InputField
                 name="new_password"
-                label="New password"
+                label={t('new_password')}
                 value={fields.new_password}
                 error={getError('new_password')}
                 autoComplete="new-password"
@@ -67,7 +70,7 @@ const PasswordResetForm: React.FC<PasswordReserFormProps> = (props) => {
                 color="primary"
                 className={classes.submit}
             >
-                Reset Password
+                {t('password_reset')}
             </Button>
         </form>
     );

diff --git a/src/components/Auth/PasswordResetRequestConfirm.tsx b/src/components/Auth/PasswordResetRequestConfirm.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { useTranslation } from 'react-i18next';
+
 import Confirm from './utils/Confirm';
 
 interface PasswordResetRequestConfirmProps {
@@ -8,11 +10,11 @@ interface PasswordResetRequestConfirmProps {
 
 const PasswordResetRequestConfirm: React.FC<PasswordResetRequestConfirmProps> = (props) => {
     const { email } = props;
+    const { t } = useTranslation();
 
     return (
-        <Confirm title={'Email sent to ' + email}>
-            To get back into your account, follow the instruction we've sent you to your {email}
-            email address.
+        <Confirm title={t('reset_link_sent_title', { email })}>
+            {t('reset_link_sent', { email })}
         </Confirm>
     );
 };

diff --git a/src/components/Auth/PasswordResetRequestForm.tsx b/src/components/Auth/PasswordResetRequestForm.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { useTranslation } from 'react-i18next';
+
 import { Button } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -22,6 +24,7 @@ const useStyles = makeStyles(authStyles);
 
 const PasswordResetRequestForm: React.FC<PasswordResetRequestFormProps> = (props) => {
     const classes = useStyles();
+    const { t } = useTranslation();
 
     const handleSubmit = (event: React.FormEvent) => {
         event.preventDefault();
@@ -32,7 +35,7 @@ const PasswordResetRequestForm: React.FC<PasswordResetRequestFormProps> = (props
         <form onSubmit={handleSubmit}>
             <InputField
                 name="email"
-                label="Email"
+                label={t('email')}
                 value={props.fields.email}
                 autoComplete="email"
                 autoFocus
@@ -46,7 +49,7 @@ const PasswordResetRequestForm: React.FC<PasswordResetRequestFormProps> = (props
                 color="primary"
                 className={classes.submit}
             >
-                Request Password Reset
+                {t('send_reset_link')}
             </Button>
         </form>
     );

diff --git a/src/components/Auth/RegisterActivateFailed.tsx b/src/components/Auth/RegisterActivateFailed.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { useTranslation } from 'react-i18next';
+
 import { Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -9,13 +11,14 @@ const useStyles = makeStyles(authStyles);
 
 const RegisterActivateFailed: React.FC = () => {
     const classes = useStyles();
+    const { t } = useTranslation();
 
     return (
         <>
             <Typography component="h3" variant="h6">
-                Account activation failed!
+                {t('activation_failed')}
             </Typography>
-            <Typography className={classes.paragraph}>Invalid token.</Typography>
+            <Typography className={classes.paragraph}>{t('invalid_token')}</Typography>
         </>
     );
 };

diff --git a/src/components/Auth/RegisterActivateSuccess.tsx b/src/components/Auth/RegisterActivateSuccess.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { useTranslation } from 'react-i18next';
+
 import Success from './utils/Success';
 
 interface RegisterActivateSuccessProps {
@@ -8,9 +10,10 @@ interface RegisterActivateSuccessProps {
 
 const RegisterActivateSuccess: React.FC<RegisterActivateSuccessProps> = (props) => {
     const { onClick } = props;
+    const { t } = useTranslation();
 
     return (
-        <Success title="Your account is now active!" buttonText="Go to Log in" onClick={onClick} />
+        <Success title={t('activation_succeeded')} buttonText={t('goto_login')} onClick={onClick} />
     );
 };
 

diff --git a/src/components/Auth/RegisterConfirm.tsx b/src/components/Auth/RegisterConfirm.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { useTranslation } from 'react-i18next';
+
 import Confirm from './utils/Confirm';
 
 interface RegisterConfirmProps {
@@ -8,11 +10,11 @@ interface RegisterConfirmProps {
 
 const RegisterConfirm: React.FC<RegisterConfirmProps> = (props) => {
     const { email } = props;
+    const { t } = useTranslation();
 
     return (
-        <Confirm title="Thanks for registration!">
-            To activate your account, follow the instruction we've sent you to your {email}
-            email address.
+        <Confirm title={t('registration_confirmed_title')}>
+            {t('registration_confirmed', { email })}
         </Confirm>
     );
 };

diff --git a/src/components/Auth/RegisterForm.tsx b/src/components/Auth/RegisterForm.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { useTranslation } from 'react-i18next';
+
 import { Button, Grid } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import { makeStyles } from '@material-ui/core/styles';
@@ -44,6 +46,7 @@ const useStyles = makeStyles(authStyles);
 
 const RegisterForm: React.FC<RegisterFormProps> = (props) => {
     const classes = useStyles();
+    const { t } = useTranslation();
     const { errors, fields, onChange, onSubmit } = props;
 
     const getError = (field: string): string => {
@@ -61,7 +64,7 @@ const RegisterForm: React.FC<RegisterFormProps> = (props) => {
                 <Grid item xs={12} sm={6}>
                     <InputField
                         name="first_name"
-                        label="First name"
+                        label={t('first_name')}
                         value={fields.first_name}
                         error={getError('first_name')}
                         autoComplete="given-name"
@@ -73,7 +76,7 @@ const RegisterForm: React.FC<RegisterFormProps> = (props) => {
                 <Grid item xs={12} sm={6}>
                     <InputField
                         name="last_name"
-                        label="Last name"
+                        label={t('last_name')}
                         value={fields.last_name}
                         error={getError('last_name')}
                         autoComplete="family-name"
@@ -84,7 +87,7 @@ const RegisterForm: React.FC<RegisterFormProps> = (props) => {
                 <Grid item xs={12}>
                     <InputField
                         name="email"
-                        label="Email"
+                        label={t('email')}
                         value={fields.email}
                         error={getError('email')}
                         autoComplete="email"
@@ -95,7 +98,7 @@ const RegisterForm: React.FC<RegisterFormProps> = (props) => {
                 <Grid item xs={12}>
                     <InputField
                         name="password"
-                        label="Password"
+                        label={t('password')}
                         value={fields.password}
                         error={getError('password')}
                         autoComplete="new-password"
@@ -107,7 +110,7 @@ const RegisterForm: React.FC<RegisterFormProps> = (props) => {
                 <Grid item xs={12}>
                     <InputField
                         name="address"
-                        label="Address"
+                        label={t('address')}
                         value={fields.address}
                         error={getError('address')}
                         autoComplete="street-address"
@@ -118,7 +121,7 @@ const RegisterForm: React.FC<RegisterFormProps> = (props) => {
                 <Grid item xs={12}>
                     <InputField
                         name="city"
-                        label="City"
+                        label={t('city')}
                         value={fields.city}
                         error={getError('city')}
                         autoComplete="address-level2"
@@ -129,7 +132,7 @@ const RegisterForm: React.FC<RegisterFormProps> = (props) => {
                 <Grid item xs={12}>
                     <InputField
                         name="postal_code"
-                        label="Postal code"
+                        label={t('postal_code')}
                         value={fields.postal_code}
                         error={getError('postal_code')}
                         autoComplete="postal-code"
@@ -140,7 +143,7 @@ const RegisterForm: React.FC<RegisterFormProps> = (props) => {
                 <Grid item xs={12}>
                     <InputField
                         name="country"
-                        label="Country"
+                        label={t('country')}
                         value={fields.country}
                         error={getError('country')}
                         autoComplete="country-name"
@@ -163,7 +166,7 @@ const RegisterForm: React.FC<RegisterFormProps> = (props) => {
                 color="primary"
                 className={classes.submit}
             >
-                Register
+                {t('register')}
             </Button>
         </form>
     );

diff --git a/src/components/Jury/SubmissionRater.tsx b/src/components/Jury/SubmissionRater.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { useTranslation } from 'react-i18next';
+
 import { IconButton, makeStyles } from '@material-ui/core';
 import { Close, NavigateBefore, NavigateNext } from '@material-ui/icons';
 
@@ -61,6 +63,7 @@ const SubmissionRater: React.FC<SubmissionRaterProps> = ({
     });
 
     const classes = useStyles();
+    const { t } = useTranslation();
     const { description, files, title } = submission;
 
     return (
@@ -101,9 +104,9 @@ const SubmissionRater: React.FC<SubmissionRaterProps> = ({
 
             <div className={classes.textFlex}>
                 <div>
-                    <b>Title:</b> {title}
+                    <b>{t('title')}:</b> {title}
                 </div>
-                <b>Description:</b>
+                <b>{t('description')}:</b>
                 {description}
             </div>
             <div>

diff --git a/src/components/Layout/Dropdown.tsx b/src/components/Layout/Dropdown.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 
 import { IconButton, Menu, MenuItem } from '@material-ui/core';
 import AccountCircle from '@material-ui/icons/AccountCircle';
@@ -20,6 +21,7 @@ const useStyles = makeStyles({
 const Dropdown: React.FC = () => {
     const user = React.useContext(userContext);
     const location = useLocation();
+    const { t } = useTranslation();
 
     const classes = useStyles();
     const [anchorEl, setAnchorEl] = React.useState<null | Element>(null);
@@ -39,7 +41,7 @@ const Dropdown: React.FC = () => {
 
     const publicMenu = [
         <Link to="/register" className={classes.menuItem} onClick={closeMenu} key="link-1">
-            <MenuItem>Register</MenuItem>
+            <MenuItem>{t('register')}</MenuItem>
         </Link>,
         <Link
             to={{
@@ -50,16 +52,16 @@ const Dropdown: React.FC = () => {
             onClick={closeMenu}
             key="link-2"
         >
-            <MenuItem>Login</MenuItem>
+            <MenuItem>{t('login')}</MenuItem>
         </Link>,
     ];
 
     const privateMenu = [
         <MenuItem key="item-1" onClick={closeMenu}>
-            Profile
+            {t('profile')}
         </MenuItem>,
         <MenuItem key="item-2" onClick={logOut}>
-            Logout
+            {t('logout')}
         </MenuItem>,
     ];