From d25f7c028303ad68f3ef0ba85d2a43fb445ab928 Mon Sep 17 00:00:00 2001
From: Bart Akeley <bart.akeley@gmail.com>
Date: Fri, 14 Apr 2017 21:47:54 -0500
Subject: [PATCH] update quantity modal

---
 js/components/IconButton.js | 21 ++++++++++----------
 js/components/Modal.js      | 21 ++++++++++++++++++++
 js/pages/FoodItemDetail.js  | 39 +++++++++++++++++++++++++++++++++----
 package.json                |  1 +
 yarn.lock                   | 10 ++++++++++
 5 files changed, 77 insertions(+), 15 deletions(-)
 create mode 100644 js/components/Modal.js

diff --git a/js/components/IconButton.js b/js/components/IconButton.js
index bd3d78e..0f5cbaa 100644
--- a/js/components/IconButton.js
+++ b/js/components/IconButton.js
@@ -1,17 +1,16 @@
 // @flow
 import React from 'react';
-import { Text, View } from 'react-native';
+import { Text, View, TouchableOpacity } from 'react-native';
 import { pure } from 'recompose';
-import { Link } from 'react-router-native';
 import { Icon } from 'react-native-material-ui';
 
-export default pure(({ glyph, text, route }: { glyph: string, text: string, route: string }) => (
-    <View style={{ flex: 3 }}>
-        <Link to={route}>
-            <View style={{ alignItems: 'center' }}>
-                <Icon name={glyph} size={50} color="grey" />
-                <Text>{text}</Text>
-            </View>
-        </Link>
-    </View>
+type Props = { glyph: string, text: string, route: string, onPress: Function, underlayColor?: string };
+
+export default pure(({ glyph, text, ...others }: Props) => (
+    <TouchableOpacity {...others}>
+        <View style={{ alignItems: 'center' }}>
+            <Icon name={glyph} size={50} color="grey" />
+            <Text>{text}</Text>
+        </View>
+    </TouchableOpacity>
 ));
diff --git a/js/components/Modal.js b/js/components/Modal.js
new file mode 100644
index 0000000..9f30e1e
--- /dev/null
+++ b/js/components/Modal.js
@@ -0,0 +1,21 @@
+// flow
+import React from 'react';
+import { View } from 'react-native';
+import Modal from 'react-native-modal';
+import { pure } from 'recompose';
+
+export default pure(({ children, isVisible }) => (
+    <Modal isVisible={isVisible}>
+        <View
+            style={{
+                backgroundColor: 'white',
+                padding: 22,
+                justifyContent: 'center',
+                alignItems: 'center',
+                borderRadius: 4,
+            }}
+        >
+            {children}
+        </View>
+    </Modal>
+));
diff --git a/js/pages/FoodItemDetail.js b/js/pages/FoodItemDetail.js
index ee7b39b..b4e0096 100644
--- a/js/pages/FoodItemDetail.js
+++ b/js/pages/FoodItemDetail.js
@@ -1,6 +1,6 @@
 // @flow
 import React, { Component } from 'react';
-import { Text, View } from 'react-native';
+import { Picker, Text, View } from 'react-native';
 import theme from '../ui-theme';
 import { NameAndPlace } from '../components/ItemTile';
 // import { type FoodItem } from '../records/FoodItemRecord';
@@ -9,6 +9,7 @@ import ImageThumb from '../components/ImageThumb';
 import ImageBackdrop from '../components/ImageBackdrop';
 import IconButton from '../components/IconButton';
 import { type Quantity, getQuantityText } from '../helpers/QuantityHelpers';
+import Modal from '../components/Modal';
 
 const QuantityText = pure(({ quantity }: { quantity: Quantity }) => (
     <View style={{ flex: 1, alignItems: 'center', paddingTop: 20 }}>
@@ -27,6 +28,24 @@ export class FoodItemDetail extends Component {
         },
     };
 
+    state: {
+        quantityModalOpen: boolean,
+    };
+
+    state = { quantityModalOpen: false };
+
+    addToFaves = () => {};
+
+    updateAmount = () => this.toggleQuantityModal();
+
+    addPhoto = () => {};
+
+    toggleQuantityModal = () => {
+        this.setState(({ quantityModalOpen }) => {
+            return { quantityModalOpen: !quantityModalOpen };
+        });
+    };
+
     // todo: need to get the item from the stream by this id
     render() {
         return (
@@ -44,11 +63,23 @@ export class FoodItemDetail extends Component {
                     <NameAndPlace name="Whole Foods Market" place="525 N. Lamar Blvd. Austin" />
                     <QuantityText quantity="many" />
                     <View style={{ flexDirection: 'row', paddingBottom: 20 }}>
-                        <IconButton glyph="stars" text="Add to Faves" route="/list/food" />
-                        <IconButton glyph="mode-edit" text="Update Amount" route="/list/food" />
-                        <IconButton glyph="insert-photo" text="Add Photo" route="/list/food" />
+                        <IconButton style={{ flex: 3 }} glyph="stars" text="Add to Faves" onPress={this.addToFaves} />
+                        <IconButton
+                            style={{ flex: 3 }}
+                            glyph="mode-edit"
+                            text="Update Amount"
+                            onPress={this.updateAmount}
+                        />
+                        <IconButton style={{ flex: 3 }} glyph="insert-photo" text="Add Photo" onPress={this.addPhoto} />
                     </View>
                 </View>
+                <Modal isVisible={this.state.quantityModalOpen}>
+                    <Picker selectedValue="many" onValueChange={this.toggleQuantityModal} style={{ width: 250 }}>
+                        <Picker.Item label="None Left" value="none" />
+                        <Picker.Item label="Few Left" value="few" />
+                        <Picker.Item label="Many Left" value="many" />
+                    </Picker>
+                </Modal>
             </View>
         );
     }
diff --git a/package.json b/package.json
index afecd24..1be3860 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "react-native": "^0.40.0",
     "react-native-drawer": "^2.3.0",
     "react-native-material-ui": "^1.7.0",
+    "react-native-modal": "^2.2.0",
     "react-native-scrollable-tab-view": "^0.7.4",
     "react-native-vector-icons": "^4.0.0",
     "react-router-native": "^4.0.0",
diff --git a/yarn.lock b/yarn.lock
index 82b033a..2f745d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3589,6 +3589,10 @@ react-deep-force-update@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.0.1.tgz#f911b5be1d2a6fe387507dd6e9a767aa2924b4c7"
 
+react-native-animatable@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.1.1.tgz#00ddc72985f62f62a11a505abb1a06e77a92cd8a"
+
 react-native-drawer@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/react-native-drawer/-/react-native-drawer-2.3.0.tgz#a0369ec80ff0b61c9f152dbdea91fe76c843113a"
@@ -3608,6 +3612,12 @@ react-native-material-ui@^1.7.0:
     react-native-material-design-styles "^0.2.6"
     react-native-vector-icons "3.0.0"
 
+react-native-modal@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-native-modal/-/react-native-modal-2.2.0.tgz#ee50d06624490ee0e5951d5e3a1d7f0050b43984"
+  dependencies:
+    react-native-animatable "^1.1.1"
+
 react-native-scrollable-tab-view@^0.7.4:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/react-native-scrollable-tab-view/-/react-native-scrollable-tab-view-0.7.4.tgz#623a047cbfab35a27b8689095af524e9aac74b62"