Merge pull request #19 from graasp/18/trans

18/trans
graasp · Dec 17, 2020 · aaad6fd · aaad6fd
2 parents 61a548a + 0cbaa1e
commit aaad6fd
Show file tree

Hide file tree

Showing 20 changed files with 3,099 additions and 2,589 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,6 @@ yarn-error.log*
 # environment files but not encrypted ones
 .env*
 !.env.*.encrypted
+
+# cache
+.eslintcache
diff --git a/package.json b/package.json
@@ -3,24 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "4.11.0",
-    "@material-ui/icons": "4.9.1",
-    "@material-ui/lab": "4.0.0-alpha.56",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
+    "@material-ui/core": "4.11.2",
+    "@material-ui/icons": "4.11.2",
+    "@material-ui/lab": "4.0.0-alpha.57",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.6.0",
     "connected-react-router": "6.8.0",
     "history": "5.0.0",
+    "i18next": "19.8.4",
     "immutable": "4.0.0-rc.12",
     "js-cookie": "2.2.1",
     "node-fetch": "2.6.1",
     "prop-types": "15.7.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-i18next": "11.8.4",
     "react-redux": "7.2.2",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
-    "react-scripts": "3.4.3",
+    "react-scripts": "4.0.1",
     "redux": "4.0.5",
     "redux-devtools-extension": "2.13.8",
     "redux-promise": "0.6.0",
@@ -56,15 +58,15 @@
     "@commitlint/cli": "11.0.0",
     "@commitlint/config-conventional": "11.0.0",
     "env-cmd": "10.1.0",
-    "eslint-config-airbnb": "18.2.0",
-    "eslint-config-prettier": "6.11.0",
-    "eslint-plugin-import": "2.22.0",
-    "eslint-plugin-jsx-a11y": "6.3.1",
-    "eslint-plugin-react": "7.20.6",
-    "husky": "4.3.0",
-    "prettier": "2.1.2",
-    "pretty-quick": "3.0.2",
+    "eslint-config-airbnb": "18.2.1",
+    "eslint-config-prettier": "7.0.0",
+    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-react": "7.21.5",
+    "husky": "4.3.6",
+    "prettier": "2.2.1",
+    "pretty-quick": "3.1.0",
     "standard-version": "9.0.0",
-    "typescript": "4.0.2"
+    "typescript": "4.1.3"
   }
 }
diff --git a/src/actions/item.js b/src/actions/item.js
@@ -14,9 +14,7 @@ import { getCachedItem } from '../config/cache';
 const buildParentsLine = (path) => {
   // get parents id without self
   const parentItems = getParentsIdsFromPath(path).slice(0, -1);
-  const parents = parentItems.map((id) => {
-    return Api.getItem(id);
-  });
+  const parents = parentItems.map((id) => Api.getItem(id));
   return Promise.all(parents);
 };
 

diff --git a/src/components/Root.js b/src/components/Root.js
@@ -1,8 +1,10 @@
 import React from 'react';
 import { Provider } from 'react-redux';
+import { I18nextProvider } from 'react-i18next';
 import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
 import App from './App';
 import configureStore from '../store/configure';
+import i18nConfig from '../config/i18n';
 
 const theme = createMuiTheme({
   palette: {
@@ -14,14 +16,14 @@ const theme = createMuiTheme({
 
 const { store } = configureStore();
 
-const Root = () => {
-  return (
+const Root = () => (
+  <I18nextProvider i18n={i18nConfig}>
     <Provider store={store}>
       <MuiThemeProvider theme={theme}>
         <App />
       </MuiThemeProvider>
     </Provider>
-  );
-};
+  </I18nextProvider>
+);
 
 export default Root;
diff --git a/src/components/SignIn.js b/src/components/SignIn.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
 import { withRouter } from 'react-router';
 import { withStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
@@ -42,6 +43,7 @@ class SignIn extends Component {
       push: PropTypes.func.isRequired,
       replace: PropTypes.func.isRequired,
     }).isRequired,
+    t: PropTypes.func.isRequired,
   };
 
   state = {
@@ -78,64 +80,67 @@ class SignIn extends Component {
   };
 
   renderMessage = () => {
-    const { isSuccess } = this.state;
+    const { isSuccess, t } = this.state;
     if (isSuccess) {
-      return <Alert severity="success">Success!</Alert>;
+      return <Alert severity="success">{t('Success')}</Alert>;
     }
     // is not triggered for null (initial case)
     if (isSuccess === false) {
-      return <Alert severity="error">An error occured.</Alert>;
+      return <Alert severity="error">{t('An error occured.')}</Alert>;
     }
     return null;
   };
 
   renderSignOutButton = () => {
+    const { t } = this.props;
     return (
       <>
-        <Typography variant="subtitle1">You are already signed in.</Typography>
+        <Typography variant="subtitle1">
+          {t('You are already signed in.')}
+        </Typography>
         <Button variant="text" color="primary" onClick={this.signOut}>
-          Click here to sign out
+          {t('Click here to sign out')}
         </Button>
       </>
     );
   };
 
   renderSignInForm = () => {
     const { email } = this.state;
-    const { classes } = this.props;
+    const { classes, t } = this.props;
     return (
       <>
         <FormControl>
           <TextField
             className={classes.input}
             required
-            label="email"
+            label={t('Email')}
             variant="outlined"
             value={email}
             onChange={this.handleOnChange}
           />
           <Button variant="contained" color="primary" onClick={this.signIn}>
-            Sign In
+            {t('Sign In')}
           </Button>
         </FormControl>
 
         <Divider variant="middle" className={classes.divider} />
         <Button variant="text" color="primary" onClick={this.handleOnRegister}>
-          Not registered? Click here to register
+          {t('Not registered? Click here to register')}
         </Button>
       </>
     );
   };
 
   render() {
-    const { classes } = this.props;
+    const { classes, t } = this.props;
     const { isAuthenticated } = this.state;
 
     return (
       <div className={classes.fullScreen}>
         {this.renderMessage()}
         <Typography variant="h2" component="h2">
-          Sign In
+          {t('Sign In')}
         </Typography>
         {!isAuthenticated && this.renderSignInForm()}
         {isAuthenticated && this.renderSignOutButton()}
@@ -145,5 +150,5 @@ class SignIn extends Component {
 }
 
 const StyledComponent = withStyles(styles, { withTheme: true })(SignIn);
-
-export default withRouter(StyledComponent);
+const TranslatedComponent = withTranslation()(StyledComponent);
+export default withRouter(TranslatedComponent);
diff --git a/src/components/SignUp.js b/src/components/SignUp.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { withTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router';
 import { withStyles } from '@material-ui/core/styles';
@@ -42,6 +43,7 @@ class SignUp extends Component {
       push: PropTypes.func.isRequired,
       replace: PropTypes.func.isRequired,
     }).isRequired,
+    t: PropTypes.func.isRequired,
   };
 
   state = {
@@ -79,22 +81,23 @@ class SignUp extends Component {
 
   renderMessage = () => {
     const { isSuccess } = this.state;
+    const { t } = this.props;
     if (isSuccess) {
       return (
         <Alert severity="success">
-          An email was sent with the register link!
+          {t('An email was sent with the register link!')}
         </Alert>
       );
     }
     // is not triggered for null (initial case)
     if (isSuccess === false) {
-      return <Alert severity="error">An error occured.</Alert>;
+      return <Alert severity="error">{t('An error occured.')}</Alert>;
     }
     return null;
   };
 
   renderForm = () => {
-    const { classes } = this.props;
+    const { classes, t } = this.props;
     const { email, name } = this.state;
 
     return (
@@ -103,7 +106,7 @@ class SignUp extends Component {
           <TextField
             className={classes.input}
             required
-            label="Name"
+            label={t('Name')}
             variant="outlined"
             value={name}
             onChange={this.handleNameOnChange}
@@ -113,46 +116,49 @@ class SignUp extends Component {
           <TextField
             className={classes.input}
             required
-            label="email"
+            label={t('Email')}
             variant="outlined"
             value={email}
             onChange={this.handleEmailOnChange}
           />
         </Grid>
         <Grid item xs={12}>
           <Button variant="contained" color="primary" onClick={this.register}>
-            Sign Up
+            {t('Sign Up')}
           </Button>
         </Grid>
         <Divider variant="middle" className={classes.divider} />
         <Button variant="text" color="primary" onClick={this.handleOnSignIn}>
-          Already have an account? Click here to sign in
+          {t('Already have an account? Click here to sign in')}
         </Button>
       </>
     );
   };
 
   renderIsAuthenticatedMessage = () => {
+    const { t } = this.props;
     return (
       <Grid item xs={12}>
-        <Typography variant="subtitle1">You are already signed in.</Typography>
+        <Typography variant="subtitle1">
+          {t('You are already signed in.')}
+        </Typography>
       </Grid>
     );
   };
 
   render() {
-    const { classes } = this.props;
+    const { classes, t } = this.props;
     const { isRequestSent, isAuthenticated } = this.state;
 
     if (isRequestSent) {
-      return <div>You will receive a email with your cookie!</div>;
+      return <div>{t('You will receive a email with your cookie!')}</div>;
     }
 
     return (
       <div className={classes.fullScreen}>
         {this.renderMessage()}
         <Typography variant="h2" component="h2">
-          Sign Up
+          {t('Sign Up')}
         </Typography>
         <Grid container className={classes.form}>
           {isAuthenticated && this.renderIsAuthenticatedMessage()}
@@ -164,5 +170,5 @@ class SignUp extends Component {
 }
 
 const StyledComponent = withStyles(styles, { withTheme: true })(SignUp);
-
-export default withRouter(StyledComponent);
+const TranslatedComponent = withTranslation()(StyledComponent);
+export default withRouter(TranslatedComponent);
diff --git a/src/components/layout/Navigation.js b/src/components/layout/Navigation.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { List, Map } from 'immutable';
 import { withRouter } from 'react-router';
+import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
@@ -19,6 +20,7 @@ class Navigation extends Component {
     items: PropTypes.instanceOf(List).isRequired,
     dispatchClearItem: PropTypes.func.isRequired,
     dispatchGetItem: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired,
   };
 
   clearItem = () => {
@@ -27,7 +29,7 @@ class Navigation extends Component {
   };
 
   render() {
-    const { item, dispatchGetItem, items } = this.props;
+    const { item, dispatchGetItem, items, t } = this.props;
     const itemName = item.get('name');
     const itemId = item.get('id');
 
@@ -43,7 +45,7 @@ class Navigation extends Component {
     return (
       <Breadcrumbs aria-label="breadcrumb">
         <Link color="inherit" href="/" to={HOME_PATH} onClick={this.clearItem}>
-          Owned Items
+          {t('Owned Items')}
         </Link>
         {navEls?.map(({ name, id }) => (
           <Link key={id} to={buildItemPath(id)}>
@@ -75,4 +77,5 @@ const ConnectedComponent = connect(
   mapDispatchToProps,
 )(Navigation);
 
-export default withRouter(ConnectedComponent);
+const TranslatedComponent = withTranslation()(ConnectedComponent);
+export default withRouter(TranslatedComponent);
diff --git a/src/components/main/CustomCardHeader.js b/src/components/main/CustomCardHeader.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { makeStyles } from '@material-ui/core/styles';
 import Avatar from '@material-ui/core/Avatar';
 import Typography from '@material-ui/core/Typography';
@@ -37,6 +38,7 @@ const useStyles = makeStyles((theme) => ({
 
 const CustomCardHeader = ({ id, creator, title, type }) => {
   const classes = useStyles();
+  const { t } = useTranslation();
   return (
     <div className={classes.root}>
       <div className={classes.header}>
@@ -46,7 +48,10 @@ const CustomCardHeader = ({ id, creator, title, type }) => {
             <Typography className={classes.title}>{title}</Typography>
           </Link>
           <Typography className={classes.subtitle}>
-            {`A ${type.toLowerCase()} by ${creator.name}`}
+            {t('Type by author', {
+              type,
+              author: creator.name || t('Unknown'),
+            })}
           </Typography>
         </div>
       </div>