i18n updates

- Components should receive translated strings
- Components may use t() for their internal texts

src/accessions/ui/BrowsePage.tsx

@@ -51,7 +51,7 @@ class BrowsePage extends BrowsePageTemplate<Accession> {
       <PageLayout sidebar={
         <AccessionFilters initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters } />
        }>
-        <ContentHeader title="accessions.public.p.browse.title" subTitle="accessions.public.p.browse.subTitle" />
+        <ContentHeader title={ t('accessions.public.p.browse.title') } subTitle={ t('accessions.public.p.browse.subTitle') } />
           <PaginationComponent
             pageObj={ paged }
             onChange={ this.onPaginationChange }

src/accessions/ui/DisplayPage.tsx

@@ -95,7 +95,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
     return (
       <PageLayout withFooter>
         <ScrollToTopOnMount />
-        <ContentHeader title="accessions.public.p.display.title" subtitle="accessions.public.p.display.subTitle" />
+        <ContentHeader title={ t('accessions.public.p.display.title') } subtitle={ t('accessions.public.p.display.subTitle') } />
 
         { stillLoading ? <Loading /> :
           <div>

src/accessions/ui/MapPage.tsx

@@ -83,7 +83,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
 
         return (
             <PageLayout withFooter>
-              <ContentHeader title="accessions.public.p.browse.title" subTitle="accessions.public.p.browse.subTitle" />
+              <ContentHeader title={ t('accessions.public.p.browse.title') } subTitle={ t('accessions.public.p.browse.subTitle') } />
                 <Tabs
                     tab={ currentTab }
                     actions={

src/accessions/ui/OverviewPage.tsx

@@ -129,7 +129,7 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
         }
         withFooter
       >
-        <ContentHeader title="accessions.public.p.browse.title" subTitle="accessions.public.p.browse.subTitle"/>
+        <ContentHeader title={ t('accessions.public.p.browse.title') } subTitle={ t('accessions.public.p.browse.subTitle') } />
         <Tabs
           tab={ currentTab }
           actions={

src/crop/ui/BrowsePage.tsx

@@ -36,13 +36,13 @@ class BrowsePage extends React.Component<IBrowsePageProps> {
 
     return (
       <PageLayout>
-        <ContentHeader title="crop.public.p.browse.title" subTitle="crop.public.p.browse.subTitle"/>
+        <ContentHeader title={ t('crop.public.p.browse.title') } subTitle={ t('crop.public.p.browse.subTitle') } />
         <Authorize role="ROLE_ADMINISTRATOR">
           <ContentHeaderWithButton buttons={ <ActionButton title={ t('crop.public.p.browse.createCrop') } action={ this.addNewCropHandle } style={ {margin: '4px', padding: '0'} }/> }/>
         </Authorize>
         <PageContents>
           <GridLayout>
-            { crops && crops.sort((a, b) => a.name.localeCompare(b.name)).map((crop) => <CropCard key={ crop.shortName } crop={ crop } compact t={ t }/>) }
+            { crops && crops.sort((a, b) => a.name.localeCompare(b.name)).map((crop) => <CropCard key={ crop.shortName } crop={ crop } compact />) }
           </GridLayout>
         </PageContents>
       </PageLayout>

src/crop/ui/DisplayPage.tsx

@@ -92,7 +92,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
 
     return (
       <PageLayout withFooter>
-        <ContentHeader title="crop.public.p.display.title"/>
+        <ContentHeader title={ t('crop.public.p.display.title') } />
         { !crop || crop.shortName !== shortName ? (<Loading/>) :
           <PageContents>
             { cropDetails.blurb && cropDetails.blurb.body &&

src/crop/ui/c/CropCard.tsx

 import * as React from 'react';
 import { Link } from 'react-router-dom';
+import { translate } from 'react-i18next';
 
 // Models
 import CropDetails from 'model/genesys/CropDetails';
@@ -115,4 +116,4 @@ const CropCard = ({crop, classes, compact = false, edit = false, t, ...other}: {
   );
 };
 
-export default withStyles(style)(CropCard);
+export default translate()(withStyles(style)(CropCard));

src/institutes/ui/DisplayPage.tsx

 import * as React from 'react';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import { translate } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 // Actions
-import {loadInstitute} from 'institutes/actions/public';
-import {applyFilters} from 'accessions/actions/public';
+import { loadInstitute } from 'institutes/actions/public';
+import { applyFilters } from 'accessions/actions/public';
 
 // Models
 import FaoInstituteDetails from 'model/genesys/FaoInstituteDetails';
 
 // UI
-import PageLayout, {MainSection, PageContents, PageSection} from 'ui/layout/PageLayout';
+import PageLayout, { MainSection, PageContents, PageSection } from 'ui/layout/PageLayout';
 import GridLayout from 'ui/layout/GridLayout';
 import PropertiesCard from 'ui/common/PropertiesCard.tsx';
 import ContentHeader from 'ui/common/heading/ContentHeader';
@@ -20,12 +20,12 @@ import LocationMap from 'ui/common/LocationMap';
 import Loading from 'ui/common/Loading';
 import Number from 'ui/common/Number';
 import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
-import {Properties, PropertiesItem} from 'ui/common/Properties';
+import { Properties, PropertiesItem } from 'ui/common/Properties';
 import PieChart from 'ui/common/pie-chart';
 import PrettyDate from 'ui/common/time/PrettyDate';
 import withWidth from '@material-ui/core/withWidth';
-import {Breakpoint} from '@material-ui/core/styles/createBreakpoints';
-import {CountryLink} from 'ui/genesys/Links';
+import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
+import { CountryLink } from 'ui/genesys/Links';
 import BarChart from 'ui/common/bar-chart';
 
 interface IDisplayPageProps extends React.ClassAttributes<any> {
@@ -123,7 +123,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
                 </MainSection>
 
                 { institute.blurb && institute.blurb.body &&
-                  <PageSection title="institutes.public.p.display.about">
+                  <PageSection title={ t('institutes.public.p.display.about') }>
                     <Properties>
                       <div style={ !isMobile ? {columnCount: 2} : {} } dangerouslySetInnerHTML={ {__html: institute.blurb.body} }/>
                     </Properties>
@@ -131,11 +131,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
                 }
 
                 { institute.details.latitude !== null && institute.details.longitude !== null &&
-                  <PageSection title="geo.common.location">
-                    <Properties>
-                      <PropertiesItem title={ t('geo.common.latitude') }>{ institute.details.latitude }</PropertiesItem>
-                      <PropertiesItem title={ t('geo.common.longitude') }>{ institute.details.longitude }</PropertiesItem>
-                    </Properties>
+                  <PageSection title={ t('geo.common.location') }>
                     <LocationMap
                       location={
                         {
@@ -145,6 +141,10 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
                         }
                       }
                     />
+                    <Properties>
+                      <PropertiesItem title={ t('geo.common.latitude') }>{ institute.details.latitude }</PropertiesItem>
+                      <PropertiesItem title={ t('geo.common.longitude') }>{ institute.details.longitude }</PropertiesItem>
+                    </Properties>
                   </PageSection>
                 }
 
@@ -217,11 +217,11 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
                 </GridLayout>
 
                 { institute.lastUpdates && institute.lastUpdates.length > 0 &&
-                <PageSection title="institutes.public.p.display.lastUpdates">
+                <PageSection title={ t('institutes.public.p.display.lastUpdates') }>
                   <Properties>
                     { institute.lastUpdates.map((lastUpdate) => (
                       <PropertiesItem key={ `${lastUpdate[0]}-${lastUpdate[1]}=${lastUpdate[2]}` }
-                        numeric title={ PrettyDate({value: new Date(lastUpdate[0], lastUpdate[1] - 1, lastUpdate[2])}) }>
+                        numeric title={ <PrettyDate value={ new Date(lastUpdate[0], lastUpdate[1] - 1, lastUpdate[2]) } /> }>
                           <a onClick={ () => this.applyLastModifyDateFilter(lastUpdate) }><Number value={ lastUpdate[3] } /></a>
                       </PropertiesItem>
                     )) }
@@ -230,7 +230,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
                 }
 
                 { institute.pdciStats && institute.pdciStats.histogram && institute.pdciStats.histogram.length > 0 &&
-                  <PageSection title="institutes.public.p.display.PDCI">
+                  <PageSection title={ t('institutes.public.p.display.PDCI') }>
                     <BarChart data={ institute.pdciStats.histogram.map((item, i) => ({key: i % 2 === 0 ? i / 2 : '', value: item })) }/>
                     <p className="mt-20">{ t('institutes.public.p.display.pdciScore', { count: institute.pdciStats.count, avg: institute.pdciStats.avg, min: institute.pdciStats.min, max: institute.pdciStats.max }) }</p>
                     <Link to="/content/passport-data-completeness-index">{ t('institutes.public.p.display.readPDCI') }</Link>

src/list/ui/BrowsePage.tsx

@@ -53,15 +53,15 @@ class MyListPage extends React.Component<IMyListPageProps> {
     return (
       <PageLayout>
         <ContentHeader
-          title="list.public.p.browse.title"
-          subTitle="list.public.p.browse.subTitle"
+          title={ t('list.public.p.browse.title') }
+          subTitle={ t('list.public.p.browse.subTitle') }
         />
         { accessions && accessions.length > 0
           ? (
             <div>
               <ContentHeaderWithButton
-                title={ `${accessions.length} ${t('accessions.common.modelName', {count: accessions.length})}` }
-                buttons={ <ActionButton title="list.public.p.browse.sendRequest" action={ this.sendRequestAction }/> }
+                title={ `${accessions.length} ${ t('accessions.common.modelName', {count: accessions.length})}` }
+                buttons={ <ActionButton title={ t('list.public.p.browse.sendRequest') } action={ this.sendRequestAction }/> }
               />
               { accessions.map((accession, index) => <div key={ index } className="pr-20 pb-10 pt-10 pl-20"><AccessionCard index={ index } accession={ accession }/></div>) }
             </div>

src/repository/ui/c/FileCard.tsx

@@ -98,8 +98,8 @@ const FileCard = ({file, classes, compact = false, edit = false, deleteFile, edi
           title={ <span><a href={ `/proxy/uploads/${file.uuid}` }><DownloadIcon /></a> <span>{ file.originalFilename }</span></span> }
           action={
             <div className={ classes.actions }>
-              <span><ActionButton action={ () => editFile(file.uuid) } title="common:action.edit"/></span>
-              <span><ActionButton action={ () => deleteFile(file.uuid) } title="common:action.delete"/></span>
+              <span><ActionButton action={ () => editFile(file.uuid) } title={ t('common:action.edit') } /></span>
+              <span><ActionButton action={ () => deleteFile(file.uuid) } title={ t('common:action.delete') } /></span>
               { file && file._permissions.manage && <Permissions clazz={ RepositoryFile.clazz } id={ file.id } /> }
             </div>
           }

src/requests/ui/admin/DisplayPage.tsx

@@ -54,9 +54,9 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
           title={ t('requests.admin.p.display.title', {email: request.email}) }
           buttons={
             <div>
-              <ActionButton title="requests.admin.p.display.sendValidationEmail" action={ () => sendValidationEmail(request.uuid) }/>
-              <ActionButton title="requests.admin.p.display.validateRequest" action={ () => validateRequest(request.uuid) }/>
-              <ActionButton title="requests.admin.p.display.recheckPID" action={ () => recheckPid(request.uuid) }/>
+              <ActionButton title={ t('requests.admin.p.display.sendValidationEmail') } action={ () => sendValidationEmail(request.uuid) }/>
+              <ActionButton title={ t('requests.admin.p.display.validateRequest') } action={ () => validateRequest(request.uuid) }/>
+              <ActionButton title={ t('requests.admin.p.display.recheckPID') } action={ () => recheckPid(request.uuid) }/>
               <BackButton defaultTarget="/admin/requests"/>
             </div>
           }

src/ui/common/Properties.tsx

@@ -66,7 +66,9 @@ class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertie
         return (
           <Grid item xs={ 12 } md={ small ? 3 : 12 } className={ classes.propertiesRow }>
             <Grid container  style={ small ? {height: '100%' } : {} } spacing={ 0 }>
-              <Grid item xs={ small && numeric ? 8 : 6 } md={ small ? 12 : (numeric ? 9 : 3) } className="font-bold p-halfrem" style={ { fontSize: '1rem', fontFamily: 'Roboto, sans-serif' } }>{ typeof title === 'string' ? t(title) : title }</Grid>
+              <Grid item xs={ small && numeric ? 8 : 6 } md={ small ? 12 : (numeric ? 9 : 3) } className="font-bold p-halfrem" style={ { fontSize: '1rem', fontFamily: 'Roboto, sans-serif' } }>
+                { title && typeof title === 'string' ? t(title) : title }
+              </Grid>
               <Grid item xs={ small && numeric ? 4 : 6 } md={ small ? 12 : (numeric ? 3 : 9) } className={ `${small ? classes.propertiesValueSmall : ''} ${numeric && !small ? classes.propertiesValueNumeric : ''} ${classes.propertiesValue}` }>
                   { children }
               </Grid>

src/ui/common/buttons/ActionButton.tsx

 import * as React from 'react';
-import { translate } from 'react-i18next';
 import Button from '@material-ui/core/Button';
 
 interface IActionButtonProps extends React.ClassAttributes<any> {
@@ -7,19 +6,18 @@ interface IActionButtonProps extends React.ClassAttributes<any> {
     title: string;
     action: any;
     style?: any;
-    t: any;
 }
 
 class ActionButton extends React.Component<IActionButtonProps, any> {
 
     public render() {
-        const { title, action, variant = 'raised', style, t } = this.props;
+        const { title, action, variant = 'raised', style } = this.props;
         return (
             <Button style={ style } variant={ variant } onClick={ action }>
-                { t(title) }
+                { title }
             </Button>
         );
     }
 }
 
-export default translate()(ActionButton);
+export default ActionButton;

src/ui/common/buttons/BackButton.tsx

@@ -40,7 +40,7 @@ class BackButton extends React.Component<IBackButtonProps, any> {
         const { defaultBackText, style, t } = this.props;
         return (
             <Button variant="raised" style={ style } onClick={ this.onGoBack }>
-                { t(defaultBackText) || t('common:action.back') }
+                { defaultBackText || t('common:action.back') }
             </Button>
         );
     }

src/ui/common/checkbox/index.tsx

 import * as React from 'react';
-import {translate} from 'react-i18next';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Checkbox from '@material-ui/core/Checkbox';
 
-const ReduxCheckbox = ({input: {value, onChange}, label = null, style = {height: '40px'}, t, ...rest}) => (
+const ReduxCheckbox = ({input: {value, onChange}, label = null, style = {height: '40px'}, ...rest}) => (
     <FormControlLabel
         style={ style }
         control={
@@ -12,9 +11,9 @@ const ReduxCheckbox = ({input: {value, onChange}, label = null, style = {height:
                 onChange={ onChange }
             />
         }
-        label={ t(label) }
+        label={ label }
         { ...rest }
     />
 );
 
-export default translate()(ReduxCheckbox);
+export default ReduxCheckbox;

src/ui/layout/PageLayout.tsx

 import * as React from 'react';
-import { translate } from 'react-i18next';
 
 import { withStyles } from '@material-ui/core/styles';
 import Card, {CardHeader, CardContent} from 'ui/common/Card';
@@ -84,22 +83,22 @@ const Layout = ({classes, children = null, sidebar = null, withFooter = false}:
 );
 
 const Contents = ({classes, children = null}) => children && <div className={ classes.pageContents }>{ children }</div>;
-const Section1 = ({classes, title, children = null, t}) => children && (
+const Section1 = ({classes, title, children = null}) => children && (
   <Card className={ classes.mainSection }>
-    <CardHeader classes={ { title: classes.mainSectionTitle } } title={ t(title) } />
+    <CardHeader classes={ { title: classes.mainSectionTitle } } title={ title } />
     <CardContent>{ children }</CardContent>
   </Card>
 );
 
-const Section2 = ({classes, title, children = null, t}) => children && (
+const Section2 = ({classes, title, children = null}) => children && (
   <Card className={ classes.section }>
-    <CardHeader classes={ { title: classes.sectionTitle } } title={ title && t(title) } />
+    <CardHeader classes={ { title: classes.sectionTitle } } title={ title } />
     <CardContent>{ children }</CardContent>
   </Card>
 );
 
 export const PageContents = withStyles(styles)(Contents);
-export const MainSection = translate()(withStyles(styles)(Section1));
-export const PageSection = translate()(withStyles(styles)(Section2));
+export const MainSection = withStyles(styles)(Section1);
+export const PageSection = withStyles(styles)(Section2);
 
 export default withStyles(styles)(Layout);