Lookups: Localized country names in list, details and cart

src/accession/AccessionDetailsPage.tsx

@@ -15,6 +15,7 @@ interface IAccessionDetailsPageState {
 
 interface IAccessionDetailsPage {
   match: any;
+  countryCodes: Record<string, string>;
 }
 
 class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithTranslation & WithConfig, IAccessionDetailsPageState> {
@@ -92,7 +93,7 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
 
   public render() {
     const { accession, cartItems } = this.state;
-    const { t, appConfig: { apiUrl, shoppingCart } } = this.props;
+    const { t, appConfig: { apiUrl, shoppingCart }, countryCodes } = this.props;
 
     let propertyIndex = 0;
 
@@ -126,7 +127,7 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
             <Property title={ t('accession.sampStat') } value={ t(`accession.sampleStatus.${details.sampStat}`) } index={ propertyIndex++ }/>
           }
           { details.countryOfOrigin &&
-            <Property title={ t('accession.countryOfOrigin') } value={ details.countryOfOrigin.name } index={ propertyIndex++ }/>
+            <Property title={ t('accession.countryOfOrigin') } value={ countryCodes && countryCodes[details.countryOfOrigin.code3] || details.countryOfOrigin.name } index={ propertyIndex++ }/>
           }
           { details.ancest &&
             <Property title="Ancestral information (pedigree)" value={ details.ancest } index={ propertyIndex++ }/>
@@ -226,6 +227,7 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
 
 const mapStateToProps = (state) => ({
   appConfig: state.appConfig.config,
+  countryCodes: state.decoding.countryCodes,
 });
 
 export default connect(mapStateToProps)(withTranslation()(AccessionDetailsPage));

src/accession/AccessionListPage.tsx

@@ -23,6 +23,7 @@ interface IAccessionListPageState {
 
 interface IAccessionListPageProps {
   location: any;
+  countryCodes: Record<string, string>;
 }
 
 class AccessionListPage extends React.Component<IAccessionListPageProps & WithTranslation & WithConfig, IAccessionListPageState> {
@@ -164,7 +165,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
 
   public render() {
     const { accessions, selected, isAllSelected } = this.state;
-    const { t, appConfig: { shoppingCart } } = this.props;
+    const { t, appConfig: { shoppingCart }, countryCodes } = this.props;
     const selectedUUIDs = new Set();
     selected.forEach((uuid) => selectedUUIDs.add(uuid));
 
@@ -229,7 +230,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
                     <td><Link to={ `/a/${a.uuid}` }>{ a.accessionNumber }</Link></td>
                     <td>{ a.accessionName }</td>
                     <td><span dangerouslySetInnerHTML={ { __html: a.taxonomy.taxonNameHtml } } /></td>
-                    <td>{ a.countryOfOrigin && a.countryOfOrigin.name }</td>
+                    <td>{ a.countryOfOrigin && (countryCodes && countryCodes[a.countryOfOrigin.code3] || a.countryOfOrigin.name) }</td>
                     <td>{ a.sampStat && t(`accession.sampleStatus.${a.sampStat}`) }</td>
                     { shoppingCart.enabled &&
                       <td>
@@ -249,6 +250,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
 
 const mapStateToProps = (state) => ({
   appConfig: state.appConfig.config,
+  countryCodes: state.decoding.countryCodes,
 });
 
 export default connect(mapStateToProps)(withTranslation()(AccessionListPage));

src/request/CartPage.tsx

 import React from 'react';
+import { connect } from 'react-redux';
 
 import { AccessionService } from '@genesys/client/service';
-import AccessionFilter from '@genesys/client/model/accession/AccessionFilter';
 import Accession from '@genesys/client/model/accession/Accession';
 import { withTranslation, WithTranslation } from 'react-i18next';
 import { LocalStorageCart } from 'utilities';
@@ -15,7 +15,7 @@ interface ICartPageState {
 }
 
 interface ICartPageProps extends WithTranslation, RouteComponentProps {
-  filter?: AccessionFilter;
+  countryCodes: Record<string, string>;
 }
 
 class CartPage extends React.Component<ICartPageProps, ICartPageState> {
@@ -107,7 +107,7 @@ class CartPage extends React.Component<ICartPageProps, ICartPageState> {
 
   public render() {
     const { accessions, selected, isEmpty, isAllSelected } = this.state;
-    const { t } = this.props;
+    const { t, countryCodes } = this.props;
     const selectedUUIDs = new Set();
     selected.forEach((uuid) => selectedUUIDs.add(uuid));
 
@@ -159,7 +159,7 @@ class CartPage extends React.Component<ICartPageProps, ICartPageState> {
                   </td>
                   <td><Link to={ `/a/${a.uuid}` }>{ a.accessionNumber }</Link></td>
                   <td>{ a.accessionName }</td>
-                  <td>{ a.countryOfOrigin && a.countryOfOrigin.name }</td>
+                  <td>{ a.countryOfOrigin && (countryCodes && countryCodes[a.countryOfOrigin.code3] || a.countryOfOrigin.name) }</td>
                 </tr>
               )) }
             </tbody>
@@ -171,4 +171,8 @@ class CartPage extends React.Component<ICartPageProps, ICartPageState> {
   };
 }
 
-export default withTranslation()(CartPage)
+const mapStateToProps = (state) => ({
+  countryCodes: state.decoding.countryCodes,
+});
+
+export default connect(mapStateToProps)(withTranslation()(CartPage));