Commit dc44824c authored by Matija Obreza's avatar Matija Obreza
Browse files

Merge branch '21-country-name-component' into 'master'

CountryName component

Closes #21

See merge request !17
parents dedcbef3 6ca5d0e5
...@@ -7,6 +7,7 @@ import AccessionDetails from '@genesys/client/model/accession/AccessionDetails'; ...@@ -7,6 +7,7 @@ import AccessionDetails from '@genesys/client/model/accession/AccessionDetails';
import { WithTranslation, withTranslation } from 'react-i18next'; import { WithTranslation, withTranslation } from 'react-i18next';
import { LocalStorageCart } from 'utilities'; import { LocalStorageCart } from 'utilities';
import { WithConfig } from 'config/config'; import { WithConfig } from 'config/config';
import { CountryName } from 'ui/common/CountryName';
import GrinSpecies from 'ui/common/GrinSpecies'; import GrinSpecies from 'ui/common/GrinSpecies';
import PdciTable from 'ui/common/PdciTable'; import PdciTable from 'ui/common/PdciTable';
import Loading from 'ui/common/Loading'; import Loading from 'ui/common/Loading';
...@@ -19,7 +20,6 @@ interface IAccessionDetailsPageState { ...@@ -19,7 +20,6 @@ interface IAccessionDetailsPageState {
interface IAccessionDetailsPage { interface IAccessionDetailsPage {
match: any; match: any;
countryCodes: Record<string, string>;
} }
class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithTranslation & WithConfig, IAccessionDetailsPageState> { class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithTranslation & WithConfig, IAccessionDetailsPageState> {
...@@ -97,7 +97,7 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT ...@@ -97,7 +97,7 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
public render() { public render() {
const { accession, cartItems } = this.state; 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; let propertyIndex = 0;
...@@ -154,7 +154,9 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT ...@@ -154,7 +154,9 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
<Property title={ t('accession.sampStat') } value={ t(`accession.sampleStatus.${details.sampStat}`) } index={ propertyIndex++ }/> <Property title={ t('accession.sampStat') } value={ t(`accession.sampleStatus.${details.sampStat}`) } index={ propertyIndex++ }/>
} }
{ details.countryOfOrigin && { 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 && { details.ancest &&
<Property title="Ancestral information (pedigree)" value={ details.ancest } index={ propertyIndex++ }/> <Property title="Ancestral information (pedigree)" value={ details.ancest } index={ propertyIndex++ }/>
...@@ -318,7 +320,6 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT ...@@ -318,7 +320,6 @@ class AccessionDetailsPage extends React.Component<IAccessionDetailsPage & WithT
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
appConfig: state.appConfig.config, appConfig: state.appConfig.config,
countryCodes: state.decoding.countryCodes,
}); });
export default connect(mapStateToProps)(withTranslation()(AccessionDetailsPage)); export default connect(mapStateToProps)(withTranslation()(AccessionDetailsPage));
...@@ -14,6 +14,7 @@ import { LocalStorageCart } from 'utilities'; ...@@ -14,6 +14,7 @@ import { LocalStorageCart } from 'utilities';
import { WithConfig } from 'config/config'; import { WithConfig } from 'config/config';
import Loading from 'ui/common/Loading'; import Loading from 'ui/common/Loading';
import PageTitle from 'ui/common/PageTitle'; import PageTitle from 'ui/common/PageTitle';
import { CountryName } from 'ui/common/CountryName';
interface IAccessionListPageState { interface IAccessionListPageState {
filter: AccessionFilter; filter: AccessionFilter;
...@@ -25,7 +26,6 @@ interface IAccessionListPageState { ...@@ -25,7 +26,6 @@ interface IAccessionListPageState {
interface IAccessionListPageProps { interface IAccessionListPageProps {
location: any; location: any;
countryCodes: Record<string, string>;
} }
class AccessionListPage extends React.Component<IAccessionListPageProps & WithTranslation & WithConfig, IAccessionListPageState> { class AccessionListPage extends React.Component<IAccessionListPageProps & WithTranslation & WithConfig, IAccessionListPageState> {
...@@ -167,7 +167,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr ...@@ -167,7 +167,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
public render() { public render() {
const { accessions, selected, isAllSelected } = this.state; const { accessions, selected, isAllSelected } = this.state;
const { t, appConfig: { shoppingCart }, countryCodes } = this.props; const { t, appConfig: { shoppingCart } } = this.props;
const selectedUUIDs = new Set(); const selectedUUIDs = new Set();
selected.forEach((uuid) => selectedUUIDs.add(uuid)); selected.forEach((uuid) => selectedUUIDs.add(uuid));
...@@ -236,7 +236,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr ...@@ -236,7 +236,7 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
<td><Link to={ `/a/${a.uuid}` }>{ a.accessionNumber }</Link></td> <td><Link to={ `/a/${a.uuid}` }>{ a.accessionNumber }</Link></td>
<td>{ a.accessionName && <b>{ a.accessionName }</b> }</td> <td>{ a.accessionName && <b>{ a.accessionName }</b> }</td>
<td><span dangerouslySetInnerHTML={ { __html: a.taxonomy.taxonNameHtml } } /></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> <td>{ a.sampStat && t(`accession.sampleStatus.${a.sampStat}`) }</td>
{ shoppingCart.enabled && { shoppingCart.enabled &&
<td> <td>
...@@ -256,7 +256,6 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr ...@@ -256,7 +256,6 @@ class AccessionListPage extends React.Component<IAccessionListPageProps & WithTr
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
appConfig: state.appConfig.config, appConfig: state.appConfig.config,
countryCodes: state.decoding.countryCodes,
}); });
export default connect(mapStateToProps)(withTranslation()(AccessionListPage)); export default connect(mapStateToProps)(withTranslation()(AccessionListPage));
import * as React from 'react'; import * as React from 'react';
import { withTranslation, WithTranslation } from 'react-i18next'; import { withTranslation, WithTranslation } from 'react-i18next';
import { connect } from 'react-redux';
// model // model
import AccessionOverview from '@genesys/client/model/accession/AccessionOverview'; import AccessionOverview from '@genesys/client/model/accession/AccessionOverview';
import PropertiesCard from 'ui/common/PropertiesCard'; import PropertiesCard from 'ui/common/PropertiesCard';
import { connect } from 'react-redux';
interface IAccessionOverviewPageProps extends React.ClassAttributes<any> { interface IAccessionOverviewPageProps extends React.ClassAttributes<any> {
overview: AccessionOverview; overview: AccessionOverview;
...@@ -106,7 +105,7 @@ class AccessionOverviewSection extends React.Component<IAccessionOverviewPagePro ...@@ -106,7 +105,7 @@ class AccessionOverviewSection extends React.Component<IAccessionOverviewPagePro
{ overviewsTerms && overviewsTerms.get('countryOfOrigin.code3') && { overviewsTerms && overviewsTerms.get('countryOfOrigin.code3') &&
<PropertiesCard <PropertiesCard
propertiesList={ overviewsTerms.get('countryOfOrigin.code3') } propertiesList={ overviewsTerms.get('countryOfOrigin.code3') }
countyCodes={ countryCodes } countryCodes={ countryCodes }
title={ t('accession.overview.countryOfOrigin code3') } title={ t('accession.overview.countryOfOrigin code3') }
propertyItemProps={ { numeric: true } } propertyItemProps={ { numeric: true } }
/> />
...@@ -182,7 +181,7 @@ class AccessionOverviewSection extends React.Component<IAccessionOverviewPagePro ...@@ -182,7 +181,7 @@ class AccessionOverviewSection extends React.Component<IAccessionOverviewPagePro
{ overviewsTerms && overviewsTerms.get('institute.country.code3') && { overviewsTerms && overviewsTerms.get('institute.country.code3') &&
<PropertiesCard <PropertiesCard
propertiesList={ overviewsTerms.get('institute.country.code3') } propertiesList={ overviewsTerms.get('institute.country.code3') }
countyCodes={ countryCodes } countryCodes={ countryCodes }
title={ t('accession.overview.institute country code3') } title={ t('accession.overview.institute country code3') }
propertyItemProps={ { numeric: true } } propertyItemProps={ { numeric: true } }
/> />
...@@ -192,6 +191,7 @@ class AccessionOverviewSection extends React.Component<IAccessionOverviewPagePro ...@@ -192,6 +191,7 @@ class AccessionOverviewSection extends React.Component<IAccessionOverviewPagePro
} }
} }
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
countryCodes: state.decoding.countryCodes, countryCodes: state.decoding.countryCodes,
}); });
......
import React from 'react'; import React from 'react';
import { connect } from 'react-redux';
import { AccessionService } from '@genesys/client/service'; import { AccessionService } from '@genesys/client/service';
import Accession from '@genesys/client/model/accession/Accession'; import Accession from '@genesys/client/model/accession/Accession';
...@@ -8,6 +7,7 @@ import { LocalStorageCart } from 'utilities'; ...@@ -8,6 +7,7 @@ import { LocalStorageCart } from 'utilities';
import { Link, RouteComponentProps } from 'react-router-dom'; import { Link, RouteComponentProps } from 'react-router-dom';
import Loading from 'ui/common/Loading'; import Loading from 'ui/common/Loading';
import PageTitle from 'ui/common/PageTitle'; import PageTitle from 'ui/common/PageTitle';
import { CountryName } from 'ui/common/CountryName';
interface ICartPageState { interface ICartPageState {
accessions: Array<Accession & Record<string, any>>; accessions: Array<Accession & Record<string, any>>;
...@@ -16,9 +16,7 @@ interface ICartPageState { ...@@ -16,9 +16,7 @@ interface ICartPageState {
isAllSelected: boolean; isAllSelected: boolean;
} }
interface ICartPageProps extends WithTranslation, RouteComponentProps { interface ICartPageProps extends WithTranslation, RouteComponentProps {}
countryCodes: Record<string, string>;
}
class CartPage extends React.Component<ICartPageProps, ICartPageState> { class CartPage extends React.Component<ICartPageProps, ICartPageState> {
public constructor(props) { public constructor(props) {
...@@ -109,7 +107,7 @@ class CartPage extends React.Component<ICartPageProps, ICartPageState> { ...@@ -109,7 +107,7 @@ class CartPage extends React.Component<ICartPageProps, ICartPageState> {
public render() { public render() {
const { accessions, selected, isEmpty, isAllSelected } = this.state; const { accessions, selected, isEmpty, isAllSelected } = this.state;
const { t, countryCodes } = this.props; const { t } = this.props;
const selectedUUIDs = new Set(); const selectedUUIDs = new Set();
selected.forEach((uuid) => selectedUUIDs.add(uuid)); selected.forEach((uuid) => selectedUUIDs.add(uuid));
...@@ -165,7 +163,7 @@ class CartPage extends React.Component<ICartPageProps, ICartPageState> { ...@@ -165,7 +163,7 @@ class CartPage extends React.Component<ICartPageProps, ICartPageState> {
<td><Link to={ `/a/${a.uuid}` }>{ a.accessionNumber }</Link></td> <td><Link to={ `/a/${a.uuid}` }>{ a.accessionNumber }</Link></td>
<td>{ a.accessionName && <b>{ a.accessionName }</b> }</td> <td>{ a.accessionName && <b>{ a.accessionName }</b> }</td>
<td><span dangerouslySetInnerHTML={ { __html: a.taxonomy.taxonNameHtml } } /></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> <td>{ a.sampStat && t(`accession.sampleStatus.${a.sampStat}`) }</td>
</tr> </tr>
)) } )) }
...@@ -178,8 +176,4 @@ class CartPage extends React.Component<ICartPageProps, ICartPageState> { ...@@ -178,8 +176,4 @@ class CartPage extends React.Component<ICartPageProps, ICartPageState> {
}; };
} }
const mapStateToProps = (state) => ({ export default withTranslation()(CartPage);
countryCodes: state.decoding.countryCodes,
});
export default connect(mapStateToProps)(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 { ...@@ -7,17 +7,19 @@ interface IProperty extends React.ClassAttributes<any>, WithTranslation {
title: string; title: string;
propertiesList: {term: string, count: any}[]; propertiesList: {term: string, count: any}[];
translationGroup?: string; translationGroup?: string;
countyCodes?: object; countryCodes?: Record<string, string>;
t: any; t: any;
propertyItemProps?: any; propertyItemProps?: any;
} }
class PropertiesCard extends React.Component<IProperty, any> { class PropertiesCard extends React.Component<IProperty, any> {
private getTitle(property: { term: string, count: any }) { private getTitle(property: { term: string, count: any }) {
const { translationGroup, countyCodes, t } = this.props; const { translationGroup, countryCodes, t } = this.props;
if (countyCodes && countyCodes[property.term]) { if (countryCodes && countryCodes[property.term]) {
return countyCodes[property.term]; return countryCodes[property.term];
} }
if (translationGroup) { if (translationGroup) {
return t([ 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