unknown quantity UI

.eslintrc

@@ -18,7 +18,8 @@
         "__DEV__": true
     },
     "rules": {
-        "react/display-name": 1
+				"react/display-name": 1,
+				"react/prop-types": 0
     },
     "settings": {
         "react": {

android/app/src/main/AndroidManifest.xml

@@ -20,6 +20,15 @@
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
+				</intent-filter>
+				<intent-filter>
+						<action android:name="android.intent.action.VIEW" />
+						<category android:name="android.intent.category.DEFAULT" />
+						<category android:name="android.intent.category.BROWSABLE" />
+						<data
+								android:host="wheresthetp.auth0.com"
+								android:pathPrefix="/android/${applicationId}/callback"
+								android:scheme="${applicationId}" />
         </intent-filter>
       </activity>
       <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

js/components/ProductTile.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { View } from 'react-native';
 import { pure } from 'recompose';
 import ProductRecord from '../records/ProductRecord';
-import typeof PlaceRecord from '../records/PlaceRecord';
 import theme from '../ui-theme';
 import { Link } from 'react-router-native';
 import { routeWithTitle } from '../helpers/RouteHelpers';

js/components/ProductsList.js

@@ -1,23 +1,12 @@
-// @flow
-import React, { Component } from 'react';
-import { View } from 'react-native';
+import React from 'react';
+import { View, FlatList } from 'react-native';
 import { type SetSeq } from 'immutable';
 import ProductRecord from '../records/ProductRecord';
 import { compose, pure } from 'recompose';
 import { pipe } from 'ramda';
 import { withFilter } from '../enhancers/filterEnhancers';
-import FilterRecord from '../records/FilterRecord';
 import { compareQuantity } from '../helpers/QuantityHelpers';
 
-// promote this somewhere?
-type homomorph<T> = T => T;
-
-type Props = {
-	filter: FilterRecord,
-	productsSeq: SetSeq<ProductRecord>,
-	children: (product: ProductRecord) => Component<*, *, *>,
-};
-
 const sortByDistance = (productsSeq: SetSeq<ProductRecord>): SetSeq<ProductRecord> => {
 	return productsSeq.sort((left, right) => left.distance - right.distance);
 };
@@ -33,7 +22,7 @@ const sortByQuantity = (productsSeq: SetSeq<ProductRecord>): SetSeq<ProductRecor
 	});
 };
 
-const getSortBy = (filter: FilterRecord): homomorph<*> => {
+const getSortBy = filter => {
 	switch (filter.orderby) {
 		case 'quantity':
 			return sortByQuantity;
@@ -47,7 +36,7 @@ const getSortBy = (filter: FilterRecord): homomorph<*> => {
 const intoArray = (productsSeq: SetSeq<ProductRecord>): Array<ProductRecord> =>
 	productsSeq ? productsSeq.toArray() : [];
 
-const ProductList = (props: Props) => {
+const ProductList = props => {
 	const { filter, productsSeq, children } = props;
 
 	if (!productsSeq) {
@@ -59,7 +48,15 @@ const ProductList = (props: Props) => {
 		intoArray
 	)(productsSeq);
 
-	return <View style={{ flexShrink: 2 }}>{items.map(children)}</View>;
+	return (
+		<View style={{ flexShrink: 2 }}>
+			<FlatList
+				data={items}
+				renderItem={({ item }) => children(item)}
+				keyExtractor={item => item.id}
+			/>
+		</View>
+	);
 };
 
 export default compose(

js/components/QuantityTile.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { View, Text, Button } from 'react-native';
+import RouterButton from 'react-router-native-button';
+import { SubText } from './ItemTile';
+import { getQuantityLabelText } from '../helpers/QuantityHelpers';
+import { loginWithBackto } from '../helpers/RouteHelpers';
+import moment from 'moment';
+import theme from '../ui-theme';
+
+const QuantityPanel = ({ style, isAuthed, product, onUpdatePress }) => (
+	<View
+		style={{
+			...style,
+			flexBasis: 50,
+			flexGrow: 1,
+			flexDirection: 'column',
+			justifyContent: 'space-between',
+		}}>
+		{product.quantity ? (
+			<>
+				<Text style={{ fontSize: 42, color: 'black' }}>
+					{getQuantityLabelText(product.quantity)}
+				</Text>
+				<SubText>
+					Last updated at {moment(product.lastupdated).format('h:mm A on MMM D, YYYY')}
+				</SubText>
+			</>
+		) : (
+			<Text style={{ fontSize: 24, color: 'black', flex: 1, flexWrap: 'wrap' }}>
+				Be the first to update the amount of this product.
+			</Text>
+		)}
+		{isAuthed && (
+			<Button title="Update amount" onPress={onUpdatePress} color={theme.palette.primaryColor} />
+		)}
+		{!isAuthed && (
+			<RouterButton
+				title="Update Amount"
+				to={loginWithBackto(`/product/${product.id}?loginAction=open-quantity-modal`)}
+				color={theme.actionButton.speedDialActionIcon.backgroundColor}
+				style={{ fontSize: 20, fontWeight: 500 }}
+			/>
+		)}
+	</View>
+);
+
+export default QuantityPanel;

js/constants/AppConstants.js

@@ -11,4 +11,4 @@ export const BASE_URL = '192.168.1.247:3000';
 
 export const GoogleAPIKey = 'AIzaSyBfMm1y6JayCbXrQmgAG1R3ka4ZOJno_5E';
 
-export const auth0ClientId = 'y3jfovcuWnEhdisNaA666rxsf4hyZrUa';
+export const auth0ClientId = '4p1BPIX4L6iwTv5gl3ZpHpU4Ye5YatQ3';

js/pages/LoginPage.js

@@ -9,7 +9,7 @@ import { Divider, Icon } from 'react-native-material-ui';
 import { getBackTo } from '../helpers/RouteHelpers';
 import ResetPasswordButton from '../components/ResetPasswordButton';
 
-const auth0ErrToStr = (message) => {
+const auth0ErrToStr = message => {
 	if (typeof message === 'string') {
 		return message;
 	}
@@ -24,9 +24,9 @@ type Props = {
 	error: string,
 	setError: (err: string) => void,
 	email: string,
-	setEmail: (string) => void,
+	setEmail: string => void,
 	password: string,
-	setPassword: (string) => void,
+	setPassword: string => void,
 	router: {
 		route: {
 			location: {
@@ -43,7 +43,7 @@ type Props = {
 	deauthUser: () => void,
 	createUser: () => void,
 	isNewUser: boolean,
-	setIsNewUser: (boolean) => void,
+	setIsNewUser: boolean => void,
 	resetPassword: () => void,
 };
 
@@ -83,7 +83,9 @@ const LoginPageComponent = ({
 					</Text>
 				)}
 
-				<Text style={{ fontSize: 36, fontWeight: '700', marginTop: 32, marginBottom: 16 }}>Sign In</Text>
+				<Text style={{ fontSize: 36, fontWeight: '700', marginTop: 32, marginBottom: 16 }}>
+					Sign In
+				</Text>
 
 				<View style={{ flexDirection: 'row', padding: 16, paddingBottom: 0 }}>
 					<View style={{ flex: 1, flexDirection: 'column' }}>
@@ -160,7 +162,7 @@ export default compose(
 	withState('password', 'setPassword', ''),
 	withState('isNewUser', 'setIsNewUser', false),
 	withHandlers({
-		checkAuth: (props) => async () => {
+		checkAuth: props => async () => {
 			const isLoggedIn = await AuthManager.checkIsAuthed();
 			if (isLoggedIn) {
 				const backTo = getBackTo(props);
@@ -175,6 +177,8 @@ export default compose(
 				await AuthManager.authenticate({ email, password });
 				checkAuth();
 			} catch (err) {
+				console.log(err);
+				debugger;
 				setError('You have entered an invalid email or password. Please try again.');
 			}
 		},

js/pages/ProductDetail.js

@@ -1,6 +1,5 @@
-// @flow
 import React from 'react';
-import { Button, Image, Text, View } from 'react-native';
+import { Image, View } from 'react-native';
 import theme from '../ui-theme';
 import { StrongText, SubText } from '../components/ItemTile';
 import typeof ProductRecord from '../records/ProductRecord';
@@ -21,10 +20,7 @@ import Carousel from 'react-native-looped-carousel';
 import CountBadge from '../components/CountBadge';
 import { routeWithTitle, loginWithBackto } from '../helpers/RouteHelpers';
 import { Link } from 'react-router-native';
-import moment from 'moment';
 import { withUpdateQuantity } from '../enhancers/quantityEnhancers';
-import { getQuantityLabelText } from '../helpers/QuantityHelpers';
-import RouterButton from 'react-router-native-button';
 import QuantityModal from '../modals/QuantityModal';
 import { identity, pathOr } from 'ramda';
 import Spinner from 'react-native-loading-spinner-overlay';
@@ -35,6 +31,7 @@ import { withAuthed } from '../enhancers/authEnhancers';
 import { withFaves } from '../enhancers/favesEnhancer';
 import debounce from '../helpers/debounce';
 import { withCurrentPath, withReplaceRoute } from '../enhancers/routeEnhancers';
+import QuantityTile from '../components/QuantityTile';
 
 const { productDetails: style } = theme;
 
@@ -144,35 +141,12 @@ export const ProductDetail = (props: Props) => {
 					</View>
 				</Link>
 			</View>
-			<View
-				style={{
-					flexBasis: 100,
-					flexGrow: 1,
-					...contentTileStyle,
-					flexDirection: 'column',
-					justifyContent: 'space-between',
-				}}>
-				<Text style={{ fontSize: 42, color: 'black' }}>
-					{getQuantityLabelText(product.quantity)}
-				</Text>
-				<SubText>
-					Last updated at {moment(product.lastupdated).format('h:mm A on MMM D, YYYY')}
-				</SubText>
-				{isAuthed && (
-					<Button
-						title="Update quantity"
-						onPress={toggleQuantityModal}
-						color={theme.palette.primaryColor}
-					/>
-				)}
-				{!isAuthed && (
-					<RouterButton
-						title="Log in to update quantity"
-						to={loginWithBackto(`/product/${product.id}?loginAction=open-quantity-modal`)}
-						color={theme.actionButton.speedDialActionIcon.backgroundColor}
-					/>
-				)}
-			</View>
+			<QuantityTile
+				product={product}
+				isAuthed={isAuthed}
+				onUpdatePress={toggleQuantityModal}
+				style={contentTileStyle}
+			/>
 			<View style={{ flex: 1, ...contentTileStyle }}>
 				{isAuthed && isFave ? (
 					<IconButton

js/pages/ProductList.js

@@ -28,7 +28,7 @@ const ProductList = props => {
 					style={{ flex: 1 }}
 					refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onPulldown} />}>
 					<ProductsList productsSeq={productsSeq}>
-						{product => <ProductTile key={product.id} product={product} />}
+						{product => <ProductTile product={product} />}
 					</ProductsList>
 				</ScrollView>
 			)}

js/ui-theme.js

@@ -86,7 +86,7 @@ export default {
 			fontSize: 25,
 			color: COLOR.black,
 		},
-		pressHighlightColor: COLOR.pink500,
+		pressHighlightColor: primaryColor,
 	},
 	countBadge: {
 		backgroundColor: '#00506C',