- implementing immutable.js

app/components/Item/List.js

@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
 import {
     StyleSheet,
     TouchableOpacity,
@@ -7,6 +9,8 @@ import {
     View
 } from 'react-native';
 
+import GallerySwiper from 'react-native-gallery-swiper';
+
 import AuctionPriceAndBidCount from '../../containers/Auction/AuctionPriceAndBidCount.js';
 import BidStatus from '../../containers/Auction/BidStatus.js';
 
@@ -25,21 +29,34 @@ export default class ItemRow extends Component {
           url: PropTypes.string,
         }),
       ),
-      start: PropTytpes.string.isRequired,
-      startPrice: PropTypes.number,
+      start: PropTypes.string.isRequired,
+      startingPrice: PropTypes.number.isRequired,
       subtitle: PropTypes.string,
       title: PropTypes.string.isRequired,
       type: PropTypes.string.isRequired,
     };
   }
 
+  static get defaultProps() {
+    return {
+      description: null,
+      donor: null,
+      images: null,
+      subtitle: null,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+  }
+
   _getBidTime = () => {
     const { end, start } = this.props;
     return getAuctionTime({ end, start });
   }
 
   _viewItemDetail = () => {
-    const { id } = this.props.details;
+    const { _id: id } = this.props.details;
     this.props.navigation.navigate('Item', { id });
   }
 
@@ -48,9 +65,10 @@ export default class ItemRow extends Component {
       description,
       donor,
       end,
+      id,
       images,
       start,
-      startPrice,
+      startingPrice,
       subtitle,
       title,
       type,
@@ -59,13 +77,18 @@ export default class ItemRow extends Component {
     return(
       <TouchableOpacity onPress={this._viewItemDetail}>
         <View style={styles.rowContainer}>
-          <Image
-            source={{uri: images[0].url}}
-            style={styles.image}
-            resizeMode="contain"
-          />
+          {images !== null && images.length > 0 && (
+            <GallerySwiper
+              enableScale={false}
+              images={images}
+              initialNumToRender={2}
+              resizeMode="cover"
+              sensitiveScroll={false}
+              style={{height: 280}}
+            />
+          )}
           <View style={styles.rowText}>
-            {type === ITEM_TYPES.AUCTION && <BidStatus id={item.id} />}
+            {type === ITEM_TYPES.AUCTION && <BidStatus itemId={id} />}
             <Text style={styles.title} numberOfLines={2} ellipsizeMode={'tail'}>
               {title}
             </Text>
@@ -78,10 +101,10 @@ export default class ItemRow extends Component {
               </Text>
             )}
             {type === ITEM_TYPES.AUCTION ? (
-              <AuctionPriceAndBidCount id={item.id} />
+              <AuctionPriceAndBidCount itemId={id} />
             ) : (
               <Text style={styles.price} numberOfLines={1} ellipsizeMode={'tail'}>
-                {formatPrice(startPrice)}
+                {formatPrice(startingPrice)}
               </Text>
             )}
             <Text style={styles.timeline} numberOfLines={1}>
@@ -126,14 +149,17 @@ const styles = StyleSheet.create({
   rowContainer: {
     backgroundColor: '#FFF',
     borderRadius: 4,
-    flexDirection: 'row',
-    height: 100,
+    flex: 1,
+    flexDirection: 'column',
     marginRight: 10,
     marginLeft: 10,
     marginTop: 10,
     padding: 10,
     shadowColor: '#CCC',
-    shadowOffset:{  width: 1,  height: 1,  },
+    shadowOffset: {
+      width: 1,
+      height: 1
+    },
     shadowOpacity: 1.0,
     shadowRadius: 1,
   },