- implementing immutable.js

app/components/Auction/AuctionPriceAndBidCount.js

@@ -17,8 +17,15 @@ const AuctionPriceAndBidCount = ({ bidCount, currentPrice }) => {
 };
 
 AuctionPriceAndBidCount.propTypes = {
+  itemId: PropTypes.string.isRequired,
   bidCount: PropTypes.number.isRequired,
   currentPrice: PropTypes.number.isRequired,
 };
 
+const styles = StyleSheet.create({
+  currentPriceAndBidCount: {
+    color: '#000',
+  },
+});
+
 export default AuctionPriceAndBidCount;

app/components/Auction/BidStatus.js

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 
 import {
     StyleSheet,
-    View,
+    Text,
 } from 'react-native';
 
-const BidStatus = ({ bidCount, currentPrice, isBidding, isWinning }) => {
+const BidStatus = ({ isBidding, isWinning }) => {
   if (!isBidding) {
     return null;
   }
@@ -17,16 +17,16 @@ const BidStatus = ({ bidCount, currentPrice, isBidding, isWinning }) => {
 
   return (
     <Text style={statusBarStyle} numberOfLines={1}>
-      {`${currentPrice} (${bidCount} bids)`}
+      {isWinning && `Oh no! You have been outbid!`}
+      {!isWinning && isBidding && `You have the winning bid! (for now...)`}
     </Text>
   );
 };
 
 BidStatus.propTypes = {
-  bidCount: PropTypes.number.isRequired,
-  currentPrice: PropTypes.number.isRequired,
   isBidding: PropTypes.bool.isRequired,
   isWinning: PropTypes.bool.isRequired,
+  itemId: PropTypes.string.isRequired,
 };
 
 const styles = StyleSheet.create({

app/components/Auction/FilterBar.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+    StyleSheet,
+    Text,
+    View,
+} from 'react-native';
+
+const FilterBar = ({ changeFilterer, changeViewMode, filterMode, viewMode }) => (
+    <View style={styles.filterBar}>
+      <Text style={styles.filter}>Filter</Text>
+      <Text style={styles.view}>View</Text>
+    </View>
+);
+
+FilterBar.propTypes = {
+  changeFilterer: PropTypes.func.isRequired,
+  changeViewMode: PropTypes.func.isRequired,
+  filterMode: PropTypes.string,
+  viewMode: PropTypes.string,
+};
+
+FilterBar.defaultProps = {
+  filterMode: null,
+  viewMode: null,
+};
+
+const styles = StyleSheet.create({
+  filterBar: {
+    backgroundColor: '#0F0',
+    flexDirection: 'row',
+  },
+  filter: {
+    flex: 2,
+  },
+  view: {
+    flex: 2,
+  },
+});
+
+export default FilterBar;

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,
   },