CountryName component

-used new component throughout project.

src/accession/AccessionDetailsPage.tsx

@@ -7,6 +7,7 @@ import AccessionDetails from '@genesys/client/model/accession/AccessionDetails';
 import { WithTranslation, withTranslation } from 'react-i18next';
 import { LocalStorageCart } from 'utilities';
 import { WithConfig } from 'config/config';
+import { CountryName } from 'ui/common/CountryName';
 import GrinSpecies from 'ui/common/GrinSpecies';
 import PdciTable from 'ui/common/PdciTable';
 import Loading from 'ui/common/Loading';
@@ -19,7 +20,6 @@ interface IAccessionDetailsPageState {
 
 interface IAccessionDetailsPage {
   match: any;
-  countryCodes: Record<string, string>;
 }
 
 class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithTranslation & WithConfig, IAccessionDetailsPageState> {
@@ -97,7 +97,7 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
 
   public render() {
     const { accession, cartItems } = this.state;
-    const { t, appConfig: { apiUrl, shoppingCart }, appConfig, countryCodes } = this.props;
+    const { t, appConfig: { apiUrl, shoppingCart }, appConfig } = this.props;
 
     let propertyIndex = 0;
 
@@ -154,7 +154,9 @@ 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={ countryCodes && countryCodes[details.countryOfOrigin.code3] || details.countryOfOrigin.name } index={ propertyIndex++ }/>
+            <Property title={ t('accession.countryOfOrigin') } value={
+              <CountryName code3={ details.countryOfOrigin.code3 } /> || details.countryOfOrigin.name
+            } index={ propertyIndex++ } />
           }
           { details.ancest &&
             <Property title="Ancestral information (pedigree)" value={ details.ancest } index={ propertyIndex++ }/>
@@ -318,7 +320,6 @@ 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

@@ -14,6 +14,7 @@ import { LocalStorageCart } from 'utilities';
 import { WithConfig } from 'config/config';
 import Loading from 'ui/common/Loading';
 import PageTitle from 'ui/common/PageTitle';
+import { CountryName } from 'ui/common/CountryName';
 
 interface IAccessionListPageState {
   filter: AccessionFilter;
@@ -25,7 +26,6 @@ interface IAccessionListPageState {
 
 interface IAccessionListPageProps {
   location: any;
-  countryCodes: Record<string, string>;
 }
 
 class AccessionListPage extends React.Component<IAccessionListPageProps & WithTranslation & WithConfig, IAccessionListPageState> {
@@ -167,7 +167,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
 
   public render() {
     const { accessions, selected, isAllSelected } = this.state;
-    const { t, appConfig: { shoppingCart }, countryCodes } = this.props;
+    const { t, appConfig: { shoppingCart } } = this.props;
     const selectedUUIDs = new Set();
     selected.forEach((uuid) => selectedUUIDs.add(uuid));
 
@@ -236,7 +236,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
                     <td><Link to={ `/a/${a.uuid}` }>{ a.accessionNumber }</Link></td>
                     <td>{ a.accessionName && <b>{ a.accessionName }</b> }</td>
                     <td><span dangerouslySetInnerHTML={ { __html: a.taxonomy.taxonNameHtml } } /></td>
-                    <td>{ a.countryOfOrigin && (countryCodes && countryCodes[a.countryOfOrigin.code3] || a.countryOfOrigin.name) }</td>
+                    <td>{ a.countryOfOrigin && (<CountryName code3={ a.countryOfOrigin.code3 } /> || a.countryOfOrigin.name) }</td>
                     <td>{ a.sampStat && t(`accession.sampleStatus.${a.sampStat}`) }</td>
                     { shoppingCart.enabled &&
                       <td>
@@ -256,7 +256,6 @@ 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/accession/AccessionOverviewSection.tsx

 import * as React from 'react';
 import { withTranslation, WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
 // model
 import AccessionOverview from '@genesys/client/model/accession/AccessionOverview';
 import PropertiesCard from 'ui/common/PropertiesCard';
-import { connect } from 'react-redux';
-
 
 interface IAccessionOverviewPageProps extends React.ClassAttributes<any> {
   overview: AccessionOverview;
@@ -106,7 +105,7 @@ class AccessionOverviewSection extends React.Component<IAccessionOverviewPagePro
         { overviewsTerms && overviewsTerms.get('countryOfOrigin.code3') &&
           <PropertiesCard
             propertiesList={ overviewsTerms.get('countryOfOrigin.code3') }
-            countyCodes={ countryCodes }
+            countryCodes={ countryCodes }
             title={ t('accession.overview.countryOfOrigin code3') }
             propertyItemProps={ { numeric: true } }
           />
@@ -182,7 +181,7 @@ class AccessionOverviewSection extends React.Component<IAccessionOverviewPagePro
         { overviewsTerms && overviewsTerms.get('institute.country.code3') &&
           <PropertiesCard
             propertiesList={ overviewsTerms.get('institute.country.code3') }
-            countyCodes={ countryCodes }
+            countryCodes={ countryCodes }
             title={ t('accession.overview.institute country code3') }
             propertyItemProps={ { numeric: true } }
           />
@@ -192,6 +191,7 @@ class AccessionOverviewSection extends React.Component<IAccessionOverviewPagePro
   }
 }
 
+
 const mapStateToProps = (state) => ({
   countryCodes: state.decoding.countryCodes,
 });

src/request/CartPage.tsx

 import React from 'react';
-import { connect } from 'react-redux';
 
 import { AccessionService } from '@genesys/client/service';
 import Accession from '@genesys/client/model/accession/Accession';
@@ -8,6 +7,7 @@ import { LocalStorageCart } from 'utilities';
 import { Link, RouteComponentProps } from 'react-router-dom';
 import Loading from 'ui/common/Loading';
 import PageTitle from 'ui/common/PageTitle';
+import { CountryName } from 'ui/common/CountryName';
 
 interface ICartPageState {
   accessions: Array<Accession & Record<string, any>>;
@@ -16,9 +16,7 @@ interface ICartPageState {
   isAllSelected: boolean;
 }
 
-interface ICartPageProps extends WithTranslation, RouteComponentProps {
-  countryCodes: Record<string, string>;
-}
+interface ICartPageProps extends WithTranslation, RouteComponentProps {}
 
 class CartPage extends React.Component<ICartPageProps, ICartPageState> {
   public constructor(props) {
@@ -109,7 +107,7 @@ class CartPage extends React.Component<ICartPageProps, ICartPageState> {
 
   public render() {
     const { accessions, selected, isEmpty, isAllSelected } = this.state;
-    const { t, countryCodes } = this.props;
+    const { t } = this.props;
     const selectedUUIDs = new Set();
     selected.forEach((uuid) => selectedUUIDs.add(uuid));
 
@@ -165,7 +163,7 @@ class CartPage extends React.Component<ICartPageProps, ICartPageState> {
                   <td><Link to={ `/a/${a.uuid}` }>{ a.accessionNumber }</Link></td>
                   <td>{ a.accessionName && <b>{ a.accessionName }</b> }</td>
                   <td><span dangerouslySetInnerHTML={ { __html: a.taxonomy.taxonNameHtml } } /></td>
-                  <td>{ a.countryOfOrigin && (countryCodes && countryCodes[a.countryOfOrigin.code3] || a.countryOfOrigin.name) }</td>
+                  <td>{ a.countryOfOrigin && (<CountryName code3={ a.countryOfOrigin.code3 } /> || a.countryOfOrigin.name) }</td>
                   <td>{ a.sampStat && t(`accession.sampleStatus.${a.sampStat}`) }</td>
                 </tr>
               )) }
@@ -178,8 +176,4 @@ class CartPage extends React.Component<ICartPageProps, ICartPageState> {
   };
 }
 
-const mapStateToProps = (state) => ({
-  countryCodes: state.decoding.countryCodes,
-});
-
-export default connect(mapStateToProps)(withTranslation()(CartPage));
+export default withTranslation()(CartPage);

src/ui/common/CountryName.tsx

+import React from 'react';
+import { connect } from 'react-redux';
+
+interface ICountryCode extends React.FunctionComponent {
+  code3: string;
+  countryCodes: Record<string, string>;
+}
+
+const countryCode = (props: ICountryCode) => {
+  return props.countryCodes && props.countryCodes[props.code3] || null;
+}
+
+const mapStateToProps = (state) => ({
+  countryCodes: state.decoding.countryCodes,
+});
+
+const CountryName = connect(mapStateToProps)(countryCode);
+
+export { CountryName };

src/ui/common/PropertiesCard.tsx

@@ -7,17 +7,19 @@ interface IProperty extends React.ClassAttributes<any>, WithTranslation {
   title: string;
   propertiesList: {term: string, count: any}[];
   translationGroup?: string;
-  countyCodes?: object;
+  countryCodes?: Record<string, string>;
   t: any;
   propertyItemProps?: any;
 }
 
 class PropertiesCard extends React.Component<IProperty, any> {
 
+
+
   private getTitle(property: { term: string, count: any }) {
-    const { translationGroup, countyCodes, t } = this.props;
-    if (countyCodes && countyCodes[property.term]) {
-      return countyCodes[property.term];
+    const { translationGroup, countryCodes, t } = this.props;
+    if (countryCodes && countryCodes[property.term]) {
+      return countryCodes[property.term];
     }
     if (translationGroup) {
       return t([