- Initial commit

app/components/Auction/AuctionPriceAndBidCount.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { formatPrice } from '../../library/helpers.js';
+
+import {
+    StyleSheet,
+    Text,
+} from 'react-native';
+
+const AuctionPriceAndBidCount = ({ bidCount, currentPrice }) => {
+  return (
+    <Text style={styles.currentPriceAndBidCount} numberOfLines={1}>
+      {`${formatPrice(currentPrice)} (${bidCount} bids)`}
+    </Text>
+  );
+};
+
+AuctionPriceAndBidCount.propTypes = {
+  bidCount: PropTypes.number.isRequired,
+  currentPrice: PropTypes.number.isRequired,
+};
+
+export default AuctionPriceAndBidCount;

app/components/Auction/BidStatus.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+    StyleSheet,
+    View,
+} from 'react-native';
+
+const BidStatus = ({ bidCount, currentPrice, isBidding, isWinning }) => {
+  if (!isBidding) {
+    return null;
+  }
+
+  const statusBarStyle = isWinning
+    ? [ styles.bidStatus, styes.isWinning ]
+    : [ styles.bidStatus, styles.isOutbid ];
+
+  return (
+    <Text style={statusBarStyle} numberOfLines={1}>
+      {`${currentPrice} (${bidCount} bids)`}
+    </Text>
+  );
+};
+
+BidStatus.propTypes = {
+  bidCount: PropTypes.number.isRequired,
+  currentPrice: PropTypes.number.isRequired,
+  isBidding: PropTypes.bool.isRequired,
+  isWinning: PropTypes.bool.isRequired,
+};
+
+const styles = StyleSheet.create({
+  bidStatus: {
+    color: '#fff',
+  },
+  isWinning: {
+    backgroundColor: '#F00',
+  },
+  isOutbid: {
+    backgroundColor: '#0F0',
+  },
+});
+
+export default BidStatus;

app/components/Item/List.js

@@ -0,0 +1,164 @@
+import React, { Component } from 'react';
+import {
+    StyleSheet,
+    TouchableOpacity,
+    Text,
+    Image,
+    View
+} from 'react-native';
+
+import AuctionPriceAndBidCount from '../../containers/Auction/AuctionPriceAndBidCount.js';
+import BidStatus from '../../containers/Auction/BidStatus.js';
+
+import { ITEM_TYPES } from '../../constants/constants.js';
+import { formatPrice, getAuctionTime } from '../../library/helpers.js';
+
+export default class ItemRow extends Component {
+  static get propTypes() {
+    return {
+      description: PropTypes.string,
+      donor: PropTypes.string,
+      end: PropTypes.string.isRequired,
+      id: PropTypes.string.isRequired,
+      images: PropTypes.arrayOf(
+        PropTypes.shape({
+          url: PropTypes.string,
+        }),
+      ),
+      start: PropTytpes.string.isRequired,
+      startPrice: PropTypes.number,
+      subtitle: PropTypes.string,
+      title: PropTypes.string.isRequired,
+      type: PropTypes.string.isRequired,
+    };
+  }
+
+  _getBidTime = () => {
+    const { end, start } = this.props;
+    return getAuctionTime({ end, start });
+  }
+
+  _viewItemDetail = () => {
+    const { id } = this.props.details;
+    this.props.navigation.navigate('Item', { id });
+  }
+
+  render() {
+    const {
+      description,
+      donor,
+      end,
+      images,
+      start,
+      startPrice,
+      subtitle,
+      title,
+      type,
+    } = this.props;
+
+    return(
+      <TouchableOpacity onPress={this._viewItemDetail}>
+        <View style={styles.rowContainer}>
+          <Image
+            source={{uri: images[0].url}}
+            style={styles.image}
+            resizeMode="contain"
+          />
+          <View style={styles.rowText}>
+            {type === ITEM_TYPES.AUCTION && <BidStatus id={item.id} />}
+            <Text style={styles.title} numberOfLines={2} ellipsizeMode={'tail'}>
+              {title}
+            </Text>
+            <Text style={styles.subtitle} numberOfLines={1} ellipsizeMode={'tail'}>
+              {subtitle}
+            </Text>
+            {donor && (
+              <Text style={styles.donor} numberOfLines={1} ellipsizeMode={'tail'}>
+                {donor}
+              </Text>
+            )}
+            {type === ITEM_TYPES.AUCTION ? (
+              <AuctionPriceAndBidCount id={item.id} />
+            ) : (
+              <Text style={styles.price} numberOfLines={1} ellipsizeMode={'tail'}>
+                {formatPrice(startPrice)}
+              </Text>
+            )}
+            <Text style={styles.timeline} numberOfLines={1}>
+              {this._getBidTime()}
+            </Text>
+            <Text style={styles.description} numberOfLines={3} ellipsizeMode={'tail'}>
+              {description}
+            </Text>
+          </View>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  description: {
+    color: '#777',
+    fontSize: 14,
+    marginTop: 5,
+    paddingLeft: 10,
+    paddingRight: 10,
+  },
+  donor: {
+    color: '#777',
+    fontSize: 14,
+    marginTop: 5,
+    paddingLeft: 10,
+  },
+  image: {
+    flex: 1,
+    height: undefined,
+    width: undefined,
+  },
+  price: {
+    color: '#777',
+    fontSize: 16,
+    fontWeight: 'bold',
+    paddingLeft: 10,
+    paddingTop: 5,
+  },
+  rowContainer: {
+    backgroundColor: '#FFF',
+    borderRadius: 4,
+    flexDirection: 'row',
+    height: 100,
+    marginRight: 10,
+    marginLeft: 10,
+    marginTop: 10,
+    padding: 10,
+    shadowColor: '#CCC',
+    shadowOffset:{  width: 1,  height: 1,  },
+    shadowOpacity: 1.0,
+    shadowRadius: 1,
+  },
+  rowText: {
+    flex: 4,
+    flexDirection: 'column',
+  },
+  subtitle: {
+    color: '#777',
+    fontSize: 14,
+    marginTop: 5,
+    paddingLeft: 10,
+  },
+  timeline: {
+    color: '#777',
+    fontSize: 14,
+    marginTop: 5,
+    paddingLeft: 10,
+    paddingRight: 10,
+  },
+  title: {
+    color: '#777',
+    fontSize: 16,
+    fontWeight: 'bold',
+    paddingLeft: 10,
+    paddingTop: 5,
+  },
+});