Crops list with images

- API calls updated

src/crop/actions/public.ts

@@ -13,8 +13,8 @@ const receiveCropDetails = (cropDetails: CropDetails): IReducerAction => ({
     type: RECEIVE_CROP_DETAILS, payload: cropDetails,
 });
 
-export const loadCropDetails = (shortName: string, locale: string) => (dispatch) => {
-    CropService.getCropDetails(locale, shortName)
+export const loadCropDetails = (shortName: string) => (dispatch) => {
+    CropService.getCropDetails(shortName)
       .then((details) => dispatch(receiveCropDetails(details)));
 };
 

src/crop/ui/BrowsePage.tsx

@@ -3,7 +3,7 @@ import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 
 // Models
-import Crop from 'model/genesys/Crop';
+import CropDetails from 'model/genesys/CropDetails';
 
 // UI
 import PageLayout, { PageContents } from 'ui/layout/PageLayout';
@@ -12,7 +12,7 @@ import CropCard from 'crop/ui/c/CropCard';
 import GridLayout from 'ui/layout/GridLayout';
 
 interface IBrowsePageProps extends React.ClassAttributes<any> {
-  crops: Crop[];
+  crops: CropDetails[];
 }
 
 class BrowsePage extends React.Component<IBrowsePageProps> {

src/crop/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 withStyles from '@material-ui/core/styles/withStyles';
 
 // Actions
-import {loadCropDetails} from 'crop/actions/public';
+import { loadCropDetails } from 'crop/actions/public';
 
 // Models
 import Crop from 'model/genesys/Crop';
@@ -19,6 +19,7 @@ import ContentHeader from 'ui/common/heading/ContentHeader';
 import Section from 'ui/common/layout/Section';
 import Loading from 'ui/common/Loading';
 import PropertiesCard from 'ui/common/PropertiesCard';
+import Number from 'ui/common/Number';
 
 /*tslint:disable*/
 const styles = (theme) => ({
@@ -48,7 +49,7 @@ const styles = (theme) => ({
 /*tslint:enable*/
 
 interface IDisplayPageProps extends React.ClassAttributes<any> {
-  loadCropDetails: (shortName: string, lang: string) => void;
+  loadCropDetails: (shortName: string) => void;
   cropDetails: CropDetails;
   crops: Crop[];
   shortName: string;
@@ -60,21 +61,20 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
 
   protected static needs = [
     ({ params: { shortName } }) => {
-      return shortName ? loadCropDetails(shortName, 'en') : null;
+      return shortName ? loadCropDetails(shortName) : null;
     },
   ];
 
   public componentWillMount() {
-    const { loadCropDetails, shortName, i18n } = this.props;
-    const lang = i18n ? i18n.language : 'en';
+    const { loadCropDetails, shortName } = this.props;
     if (shortName) {
-      loadCropDetails(shortName, lang);
+      loadCropDetails(shortName);
     }
   }
 
   public render() {
     const { cropDetails, shortName, classes } = this.props;
-    const crop = cropDetails ? cropDetails.crop : null;
+    const crop = cropDetails;
 
     return (
       <PageLayout withFooter>
@@ -90,7 +90,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
 
               <PageSection title="General information">
                 <Properties>
-                  <PropertiesItem title="Accessions in genesys" keepEmpty>{ cropDetails.accessionCount || 0 }</PropertiesItem>
+                  <PropertiesItem title="Accessions in genesys" keepEmpty><Number value={ cropDetails.accessionCount || 0 } /></PropertiesItem>
                 </Properties>
               </PageSection>
 

src/crop/ui/c/CropCard.tsx

@@ -2,16 +2,17 @@ import * as React from 'react';
 import {Link} from 'react-router-dom';
 
 // Models
-import Crop from 'model/genesys/Crop';
+import CropDetails from 'model/genesys/CropDetails';
 
 // UI
-import Card, {CardHeader, CardContent, CardActions} from 'ui/common/Card';
+import Card, {CardHeader, CardContent, CardMedia, CardActions} from 'ui/common/Card';
 import {Properties, PropertiesItem} from 'ui/common/Properties';
 import PrettyDate from 'ui/common/time/PrettyDate';
 import Grid from '@material-ui/core/Grid';
 import withStyles from '@material-ui/core/styles/withStyles';
 import Button from '@material-ui/core/Button';
 import Authorize from 'ui/common/authorized/Authorize';
+import Number from 'ui/common/Number';
 
 const style = (theme) => ({
   root: {
@@ -20,23 +21,27 @@ const style = (theme) => ({
     justifyContent: 'space-between',
     display: 'flex',
   },
+  media: {
+    height: 150,
+  },
 });
 
-const CropCard = ({crop, classes, compact = false, edit = false, ...other}: { crop: Crop, classes?: any, compact?: boolean, edit?: boolean }) => {
+const CropCard = ({crop, classes, compact = false, edit = false, ...other}: { crop: CropDetails, classes?: any, compact?: boolean, edit?: boolean }) => {
   if (!crop) {
     return null;
   }
 
   return compact ? (
-    <Grid item xs={ 12 } sm={ 6 } md={ 4 }>
+    <Grid item xs={ 12 } sm={ 6 } md={ 4 } lg={ 3 } xl={ 2 } >
       <Card className={ classes.root }>
+        { crop.covers && crop.covers.length > 0 && <CardMedia className={ classes.media } title={ crop.name } image={ `/proxy/uploads/d${crop.covers[0].storagePath}` } /> }
         <CardHeader title={
           <Link to={ `/c/${crop.shortName}${edit ? '/edit' : '' }` }>
             { crop.name }
           </Link>
         }/>
         <CardContent>
-          { crop.shortName }
+          <Number value={ crop.accessionCount } />
         </CardContent>
       </Card>
     </Grid>

src/model/genesys/CropDetails.ts

@@ -5,14 +5,12 @@ import RepositoryImage from 'model/repository/RepositoryImage';
 /*
 * Defined in Swagger as '#/definitions/CropDetails'
 */
-class CropDetails {
+class CropDetails extends Crop {
   public accessionCount: number;
   public blurb: Article;
   public covers: RepositoryImage[];
-  public crop: Crop;
   public overview: any;
 
-
 }
 
 export default CropDetails;

src/service/CropService.ts

@@ -8,7 +8,7 @@ const URL_LIST_CROPS = UrlTemplate.parse(`/api/v1/crops`);
 const URL_SAVE_CROP = `/api/v1/crops/save`;
 const URL_DELETE_CROP = UrlTemplate.parse(`/api/v1/crops/{shortName}`);
 const URL_GET_CROP = UrlTemplate.parse(`/api/v1/crops/{shortName}`);
-const URL_GET_CROP_DETAILS = UrlTemplate.parse(`/api/v1/crops/{shortName}/details/{lang}`);
+const URL_GET_CROP_DETAILS = UrlTemplate.parse(`/api/v1/crops/{shortName}/details`);
 
 export class CropService {
 
@@ -88,14 +88,13 @@ export class CropService {
     }
 
     /**
-     * getCropDetails at /api/v1/crops/{shortName}/details/{lang}
+     * getCropDetails at /api/v1/crops/{shortName}/details
      *
-     * @param lang lang
      * @param shortName shortName
      */
-    public static getCropDetails(lang: string, shortName: string): Promise<CropDetails> {
+    public static getCropDetails(shortName: string): Promise<CropDetails> {
 
-         const apiUrl = URL_GET_CROP_DETAILS.expand({lang, shortName});
+         const apiUrl = URL_GET_CROP_DETAILS.expand({shortName});
          // console.log(`Fetching from ${apiUrl}`);
          const content = { /* No content in request body */ };