Commit 6ca5d0e5 authored by Maksym Tishchenko's avatar Maksym Tishchenko
Browse files

CountryName component

-used new component throughout project.
parent dedcbef3
......@@ -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));
......@@ -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));
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,
});
......
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);
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 };
......@@ -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([
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment