From f9832afb2e2b2b806dac77dde575d3f467b0e5da Mon Sep 17 00:00:00 2001
From: Bart Akeley <bart.akeley@gmail.com>
Date: Sun, 19 Nov 2017 12:22:09 -0600
Subject: [PATCH] show quantity and last updated in food item list

the backend is now returning quantity data merged into the food item record, so this is an easy UI update to surface it from the REST response
---
 js/apis/FoodItemsApi.js         |  1 +
 js/components/FilterModal.js    |  1 +
 js/components/FoodItemTile.js   | 50 +++++++++++++++------------------
 js/components/ItemTile.js       | 43 +++++++++++++++++-----------
 js/components/QuantityPicker.js |  4 +--
 js/helpers/QuantityHelpers.js   | 20 +++++++++----
 js/records/FoodItemRecord.js    |  2 ++
 package.json                    |  1 +
 yarn.lock                       |  4 +++
 9 files changed, 75 insertions(+), 51 deletions(-)

diff --git a/js/apis/FoodItemsApi.js b/js/apis/FoodItemsApi.js
index 1d0f616..386ef37 100644
--- a/js/apis/FoodItemsApi.js
+++ b/js/apis/FoodItemsApi.js
@@ -19,6 +19,7 @@ export type RawFoodItem = {
 	latitude: number,
 	longitude: number,
 	distance: number,
+	lastupdated: number,
 };
 
 export type FoodItemsForLocation = {
diff --git a/js/components/FilterModal.js b/js/components/FilterModal.js
index 9c888c5..fe6e4c4 100644
--- a/js/components/FilterModal.js
+++ b/js/components/FilterModal.js
@@ -53,6 +53,7 @@ const FilterModal = (props: Props) => {
 									value={isChecked ? 0 : 1}
 									checked={isChecked}
 									onCheck={toggleCategory(category, isChecked)}
+									label=""
 								/>
 							</View>
 						</View>
diff --git a/js/components/FoodItemTile.js b/js/components/FoodItemTile.js
index 3ea16c1..00422e3 100644
--- a/js/components/FoodItemTile.js
+++ b/js/components/FoodItemTile.js
@@ -7,37 +7,33 @@ import typeof PlaceRecord from '../records/PlaceRecord';
 import theme from '../ui-theme';
 import { Link } from 'react-router-native';
 import { routeWithTitle } from '../helpers/RouteHelpers';
-import { TileBox, StrongText, SubText, Thumbnail } from './ItemTile';
+import { TileBox, StrongText, SubText, Thumbnail, QuantityLine } from './ItemTile';
 import { withPlace } from '../enhancers/placeEnhancers';
 
 const PlaceNameAndDistance = withPlace(({ place = {}, distance = 999.9 }: { place: PlaceRecord, distance: number }) => {
 	return <SubText>{`${place.name || 'Loading...'} - ${parseFloat(distance).toFixed(1)} mi`}</SubText>;
 });
 
-export default pure(
-	({ foodItem }: { foodItem: FoodItemRecord }) => {
-		if (!foodItem) {
-			return <View />;
-		}
-
-		return (
-			<Link
-				to={routeWithTitle(`/foodItem/${foodItem.id || ''}`, foodItem.name)}
-				underlayColor={theme.itemTile.pressHighlightColor}
-			>
-				<View>
-					<TileBox>
-						<Thumbnail thumb={foodItem.thumbImage} />
-						<View style={{ paddingTop: 15 }}>
-							<StrongText>{foodItem.name || ''}</StrongText>
-							<PlaceNameAndDistance
-								placeId={foodItem.placeId}
-								distance={foodItem.distance}
-							/>
-						</View>
-					</TileBox>
-				</View>
-			</Link>
-		);
+export default pure(({ foodItem }: { foodItem: FoodItemRecord }) => {
+	if (!foodItem) {
+		return <View />;
 	}
-);
+
+	return (
+		<Link
+			to={routeWithTitle(`/foodItem/${foodItem.id || ''}`, foodItem.name)}
+			underlayColor={theme.itemTile.pressHighlightColor}
+		>
+			<View>
+				<TileBox>
+					<Thumbnail thumb={foodItem.thumbImage} />
+					<View>
+						<StrongText>{foodItem.name || ''}</StrongText>
+						<PlaceNameAndDistance placeId={foodItem.placeId} distance={foodItem.distance} />
+						<QuantityLine quantity={foodItem.quantity} lastupdated={foodItem.lastupdated} />
+					</View>
+				</TileBox>
+			</View>
+		</Link>
+	);
+});
diff --git a/js/components/ItemTile.js b/js/components/ItemTile.js
index c31530c..7f1be29 100644
--- a/js/components/ItemTile.js
+++ b/js/components/ItemTile.js
@@ -2,8 +2,15 @@
 import React from 'react';
 import { Text, View, Image } from 'react-native';
 import theme from '../ui-theme';
+import { getQuantityLabelText } from '../helpers/QuantityHelpers';
+import moment from 'moment';
+import type { Quantity } from '../constants/QuantityConstants';
 
-export const Thumbnail = ({ thumb }: { thumb: ?string }) =>
+const getRelativeDateText = (lastupdated: ?number) => {
+	return lastupdated ? ` - ${moment(lastupdated).fromNow()}` : '';
+};
+
+export const Thumbnail = ({ thumb }: { thumb: ?string }) => (
 	<View
 		style={{
 			height: theme.itemTile.thumbnailSize,
@@ -13,7 +20,7 @@ export const Thumbnail = ({ thumb }: { thumb: ?string }) =>
 			margin: 10,
 		}}
 	>
-		{!!thumb &&
+		{!!thumb && (
 			<Image
 				style={{
 					height: theme.itemTile.thumbnailSize,
@@ -21,26 +28,28 @@ export const Thumbnail = ({ thumb }: { thumb: ?string }) =>
 					borderRadius: Math.round(theme.itemTile.thumbnailSize / 2),
 				}}
 				source={{ uri: thumb }}
-			/>}
-	</View>;
+			/>
+		)}
+	</View>
+);
 
 export const StrongText = ({ children, style = {} }: { children?: string, style?: Object }) => {
-	return (
-		<Text style={{ ...theme.itemTile.itemNameStyle, ...style }}>
-			{children}
-		</Text>
-	);
+	return <Text style={{ ...theme.itemTile.itemNameStyle, ...style }}>{children}</Text>;
 };
 
 export const SubText = ({ children, style = {} }: { children?: string, style?: Object }) => {
-	return (
-		<Text style={{ ...theme.itemTile.itemPlaceStyle, ...style }}>
-			{children}
-		</Text>
-	);
+	return <Text style={{ ...theme.itemTile.itemPlaceStyle, ...style }}>{children}</Text>;
 };
 
-export const TileBox = ({ children, style = {} }: { children?: any, style?: Object }) =>
-	<View style={{ height: 70, flexDirection: 'row', backgroundColor: 'white', ...style }}>
+export const TileBox = ({ children, style = {} }: { children?: any, style?: Object }) => (
+	<View style={{ height: 70, flexDirection: 'row', backgroundColor: 'white', alignItems: 'center', ...style }}>
 		{children}
-	</View>;
+	</View>
+);
+
+export const QuantityLine = ({ quantity, lastupdated }: { quantity: Quantity, lastupdated: ?number }) => (
+	<SubText>
+		{getQuantityLabelText(quantity)}
+		{getRelativeDateText(lastupdated)}
+	</SubText>
+);
diff --git a/js/components/QuantityPicker.js b/js/components/QuantityPicker.js
index 89b3eab..7d03690 100644
--- a/js/components/QuantityPicker.js
+++ b/js/components/QuantityPicker.js
@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { getQuantityText } from '../helpers/QuantityHelpers';
+import { getQuantityDropdownText } from '../helpers/QuantityHelpers';
 import { Picker, View } from 'react-native';
 import theme from '../ui-theme';
 import { pure } from 'recompose';
@@ -16,7 +16,7 @@ const getItemColor = (selected, current) => (selected === current ? selectedColo
 const renderQuantityItem = (selectedQuantity: Quantity) => (quantity: Quantity) => (
 	<Picker.Item
 		key={quantity}
-		label={getQuantityText(quantity)}
+		label={getQuantityDropdownText(quantity)}
 		value={quantity}
 		color={getItemColor(selectedQuantity, quantity)}
 	/>
diff --git a/js/helpers/QuantityHelpers.js b/js/helpers/QuantityHelpers.js
index 6180331..264c52a 100644
--- a/js/helpers/QuantityHelpers.js
+++ b/js/helpers/QuantityHelpers.js
@@ -1,15 +1,25 @@
 // @flow
 import { type Quantity } from '../constants/QuantityConstants';
 
-export const getQuantityText = (quantity: Quantity) => {
+const quantityLabels: { [Quantity]: string } = {
+	none: 'None left',
+	few: 'A few left',
+	lots: 'A lot left',
+	many: 'Plenty left',
+};
+
+export const getQuantityLabelText = (quantity: Quantity) => quantityLabels[quantity] || quantityLabels['many'];
+
+export const getQuantityDropdownText = (quantity: Quantity) => {
+	const label = quantityLabels[quantity];
 	switch (quantity) {
 		case 'none':
-			return 'None left - 0';
+			return `${label} - 0`;
 		case 'few':
-			return 'A few left - 6 or fewer';
+			return `${label} - 6 or fewer`;
 		case 'lots':
-			return 'A lot Left - 10 or fewer';
+			return `${label} - 10 or fewer`;
 		default:
-			return 'Plenty left - more than 10';
+			return `${label} - more than 10`;
 	}
 };
diff --git a/js/records/FoodItemRecord.js b/js/records/FoodItemRecord.js
index e985602..5462ca5 100644
--- a/js/records/FoodItemRecord.js
+++ b/js/records/FoodItemRecord.js
@@ -16,6 +16,7 @@ export type FoodItem = {
 	images: List<string>,
 	thumbImage: ?string,
 	titleImage: ?string,
+	lastupdated: number,
 };
 
 const FoodRecordDefaults: FoodItem = {
@@ -30,6 +31,7 @@ const FoodRecordDefaults: FoodItem = {
 	images: new List(),
 	thumbImage: '',
 	titleImage: '',
+	lastupdated: 0,
 };
 
 const FoodItemRecord = Record(FoodRecordDefaults, 'FoodItemRecord');
diff --git a/package.json b/package.json
index a5ae086..c6b2ccb 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
 	"dependencies": {
 		"babel-preset-es2015": "^6.24.0",
 		"immutable": "^3.8.1",
+		"moment": "^2.19.2",
 		"ramda": "^0.24.1",
 		"react": "~15.4.1",
 		"react-native": "~0.42.0",
diff --git a/yarn.lock b/yarn.lock
index 1bb7dc9..81c85ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3208,6 +3208,10 @@ moment@2.x.x:
   version "2.18.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
 
+moment@^2.19.2:
+  version "2.19.2"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.19.2.tgz#8a7f774c95a64550b4c7ebd496683908f9419dbe"
+
 morgan@~1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.6.1.tgz#5fd818398c6819cba28a7cd6664f292fe1c0bbf2"