feat: add fr and en translations

package.json

@@ -11,12 +11,14 @@
     "@testing-library/user-event": "^7.1.2",
     "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-i18next": "11.8.4",
     "react-redux": "7.2.2",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",

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);

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);

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);

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>

src/components/main/ItemMenu.js

@@ -3,11 +3,13 @@ import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import IconButton from '@material-ui/core/IconButton';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
+import { useTranslation } from 'react-i18next';
 import MoveItemModal from './MoveItemModal';
 
 const ItemMenu = () => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [isMoveModalOpen, setIsMoveModalOpen] = useState(false);
+  const { t } = useTranslation();
 
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -40,8 +42,7 @@ const ItemMenu = () => {
         open={Boolean(anchorEl)}
         onClose={handleClose}
       >
-        <MenuItem onClick={handleMove}>Move</MenuItem>
-        <MenuItem onClick={handleClose}>Some action...</MenuItem>
+        <MenuItem onClick={handleMove}>{t('Move')}</MenuItem>
       </Menu>
       <MoveItemModal onClose={onModalClose} open={isMoveModalOpen} />
     </>

src/components/main/ItemsGrid.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router';
+import { withTranslation } from 'react-i18next';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import Item from './Item';
@@ -11,14 +12,15 @@ class ItemsGrid extends Component {
     match: PropTypes.shape({
       params: PropTypes.shape({ itemId: PropTypes.string }).isRequired,
     }).isRequired,
+    t: PropTypes.func.isRequired,
   };
 
   renderItems = () => {
-    const { items } = this.props;
+    const { items, t } = this.props;
     if (!items?.length) {
       return (
         <Typography variant="h3" align="center" display="block">
-          No Item Here
+          {t('No Item Here')}
         </Typography>
       );
     }
@@ -38,5 +40,5 @@ class ItemsGrid extends Component {
     );
   }
 }
-
-export default withRouter(ItemsGrid);
+const TranslatedComponent = withTranslation()(ItemsGrid);
+export default withRouter(TranslatedComponent);

src/components/main/ItemsHeader.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
+import { useTranslation } from 'react-i18next';
 import Tooltip from '@material-ui/core/Tooltip';
 import Info from '@material-ui/icons/Info';
 import Navigation from '../layout/Navigation';
@@ -14,11 +15,12 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const ItemsHeader = () => {
+  const { t } = useTranslation();
   const classes = useStyles();
   return (
     <div className={classes.root}>
       <Navigation />
-      <Tooltip title="These are your items" placement="left">
+      <Tooltip title={t('These are your items')} placement="left">
         <Info color="primary" fontSize="small" />
       </Tooltip>
     </div>