bartronx7/aretherecookies-mobile
1
0
Fork 0
mirror of https://gitlab.com/wheres-the-tp/ui-mobile.git synced 2026-01-25 07:24:56 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions

google places modal integrated into create food item page

Browse source
This commit is contained in:
Bart Akeley 2017-06-18 20:58:43 -05:00
parent 928fbd5255
commit 48cdff5aec
10 changed files with 100 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
android/app/build.gradle
View file

@ -127,6 +127,7 @@ android {
}
dependencies {
compile project(':react-native-google-places')
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules

4
android/app/src/main/AndroidManifest.xml
View file

@ -5,6 +5,7 @@
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-sdk
android:minSdkVersion="16"
@ -27,6 +28,9 @@
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="AIzaSyBfMm1y6JayCbXrQmgAG1R3ka4ZOJno_5E"/>
</application>
</manifest>

4
android/app/src/main/java/com/aretherecookies/MainApplication.java
View file

@ -3,6 +3,7 @@ package com.aretherecookies;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.arttitude360.reactnative.rngoogleplaces.RNGooglePlacesPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
@ -22,7 +23,8 @@ public class MainApplication extends Application implements ReactApplication {
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
new MainReactPackage(),
new RNGooglePlacesPackage()
);
}
};

2
android/settings.gradle
View file

@ -1,3 +1,5 @@
rootProject.name = 'AreThereCookies'
include ':react-native-google-places'
project(':react-native-google-places').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-google-places/android')
include ':app'

56
ios/AreThereCookies.xcodeproj/project.pbxproj
View file

@ -5,7 +5,6 @@
};
objectVersion = 46;
objects = {
/* Begin PBXBuildFile section */
00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
@ -36,6 +35,7 @@
2DCD954D1E0B4F2C00145EB5 /* AreThereCookiesTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* AreThereCookiesTests.m */; };
5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
280E457CAD9348CA8B03DD47 /* libRNGooglePlaces.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ABA925E808304E17AEDC016B /* libRNGooglePlaces.a */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
@ -255,6 +255,8 @@
5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = "<group>"; };
78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
8A9E50571CB24ACDB143CECA /* RNGooglePlaces.xcodeproj */ = {isa = PBXFileReference; name = "RNGooglePlaces.xcodeproj"; path = "../node_modules/react-native-google-places/ios/RNGooglePlaces.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
ABA925E808304E17AEDC016B /* libRNGooglePlaces.a */ = {isa = PBXFileReference; name = "libRNGooglePlaces.a"; path = "libRNGooglePlaces.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
@ -281,6 +283,7 @@
832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,
00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */,
139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
280E457CAD9348CA8B03DD47 /* libRNGooglePlaces.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
@ -447,6 +450,7 @@
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,
139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
8A9E50571CB24ACDB143CECA /* RNGooglePlaces.xcodeproj */,
);
name = Libraries;
sourceTree = "<group>";
@ -564,7 +568,7 @@
83CBB9F71A601CBA00E9B192 /* Project object */ = {
isa = PBXProject;
attributes = {
LastUpgradeCheck = 0610;
LastUpgradeCheck = 610;
ORGANIZATIONNAME = Facebook;
TargetAttributes = {
00E356ED1AD99517003FC87E = {
@ -972,6 +976,14 @@
);
PRODUCT_NAME = "$(TARGET_NAME)";
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/AreThereCookies.app/AreThereCookies";
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-google-places/ios",
);
};
name = Debug;
};
@ -989,6 +1001,14 @@
);
PRODUCT_NAME = "$(TARGET_NAME)";
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/AreThereCookies.app/AreThereCookies";
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-google-places/ios",
);
};
name = Release;
};
@ -1007,6 +1027,10 @@
);
PRODUCT_NAME = AreThereCookies;
VERSIONING_SYSTEM = "apple-generic";
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-google-places/ios",
);
};
name = Debug;
};
@ -1024,6 +1048,10 @@
);
PRODUCT_NAME = AreThereCookies;
VERSIONING_SYSTEM = "apple-generic";
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-google-places/ios",
);
};
name = Release;
};
@ -1050,6 +1078,14 @@
SDKROOT = appletvos;
TARGETED_DEVICE_FAMILY = 3;
TVOS_DEPLOYMENT_TARGET = 9.2;
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-google-places/ios",
);
};
name = Debug;
};
@ -1076,6 +1112,14 @@
SDKROOT = appletvos;
TARGETED_DEVICE_FAMILY = 3;
TVOS_DEPLOYMENT_TARGET = 9.2;
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-google-places/ios",
);
};
name = Release;
};
@ -1097,6 +1141,10 @@
SDKROOT = appletvos;
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/AreThereCookies-tvOS.app/AreThereCookies-tvOS";
TVOS_DEPLOYMENT_TARGET = 10.1;
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
};
name = Debug;
};
@ -1118,6 +1166,10 @@
SDKROOT = appletvos;
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/AreThereCookies-tvOS.app/AreThereCookies-tvOS";
TVOS_DEPLOYMENT_TARGET = 10.1;
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
};
name = Release;
};

54
js/modals/PlaceModal.js
View file

@ -1,54 +0,0 @@
// @flow
import React, { Component } from 'react';
import { View } from 'react-native';
import Modal, { TextInputHeader } from '../components/Modal';
import typeof PlaceRecord from '../records/PlaceRecord';
class PlaceModal extends Component {
static displayName = 'PlaceModal';
props: {
isVisible: boolean,
onClose: () => void,
onUpdate: (place: PlaceRecord) => void,
};
state: {
place: ?PlaceRecord,
};
state = {
place: null,
};
save = () => {
const { place } = this.state;
const { onClose, onUpdate } = this.props;
if (!place) {
return;
}
onUpdate(place);
onClose();
};
setText = (place: PlaceRecord) => {
this.setState({ place });
};
render() {
const { isVisible, onClose } = this.props;
const { place } = this.state;
const text = (place || {}).name;
return (
<Modal isVisible={isVisible}>
<View style={{ alignItems: 'stretch' }}>
<TextInputHeader value={text} onChange={this.setText} onClose={onClose} />
</View>
</Modal>
);
}
}
export default PlaceModal;

27
js/pages/CreateFoodItem.js
View file

@ -4,9 +4,11 @@ import { View, Text, TouchableOpacity } from 'react-native';
import theme from '../ui-theme';
import { Divider } from 'react-native-material-ui';
import FoodItemRecord from '../records/FoodItemRecord';
import PlaceRecord from '../records/PlaceRecord';
import NameModal from '../modals/FoodItemNameModal';
import QuantityPicker from '../components/QuantityPicker';
import { compose, branch, withState, withHandlers, renderComponent, mapProps } from 'recompose';
import RNGooglePlaces from 'react-native-google-places';
const fieldStyle = {
paddingTop: 10,
@ -25,6 +27,12 @@ const Field = ({ onPress, text = '' }: { onPress?: Function, text: string }) =>
<Divider />
</TouchableOpacity>;
const openPlaceModal = (onChoosePlace: (place: Object) => void) => () => {
RNGooglePlaces.openAutocompleteModal({ type: 'establishment' }).then(onChoosePlace).catch(error => {
throw error;
});
};
type Props = {
foodItem: typeof FoodItemRecord,
modalsVisible: {
@ -35,12 +43,26 @@ type Props = {
toggleModal: Function,
setFoodItem: Function,
setModalsVisible: Function,
place: typeof PlaceRecord,
setPlace: Function,
};
const CreateFoodItem = ({ foodItem, toggleModal, setPropOfFoodItem }: Props) => {
const CreateFoodItem = ({ foodItem, toggleModal, setPropOfFoodItem, place, setPlace }: Props) => {
const updatePlace = ({ placeID: id, latitude, longitude, name, address }) => {
const newPlace = new PlaceRecord({
id,
name,
address,
latitude,
longitude,
});
setPlace(newPlace);
setPropOfFoodItem('placeId')(newPlace.id);
};
return (
<View style={{ ...theme.page.container, backgroundColor: 'white', padding: 10 }}>
<Field text={foodItem.name || 'Name'} onPress={toggleModal('name')} />
<Field text="Place" onPress={toggleModal('place')} />
<Field text={place.name || 'Place'} onPress={openPlaceModal(updatePlace)} />
<Field text={'Category'} />
<QuantityPicker
quantity={foodItem.quantity}
@ -64,6 +86,7 @@ const enhanceNameModal = compose(
export default compose(
withState('foodItem', 'setFoodItem', new FoodItemRecord()),
withState('place', 'setPlace', new PlaceRecord()),
withState('modalsVisible', 'setModalsVisible', { name: false, place: false }),
withHandlers({
setPropOfFoodItem: ({ foodItem, setFoodItem }: Props) => (prop: string) => (value: any) => {

10
js/records/PlaceRecord.js
View file

@ -1,20 +1,20 @@
// @flow
import { List, Record } from 'immutable';
import { Record } from 'immutable';
export type Place = {
id: ?number,
name: string,
address: string,
images: List<string>,
thumb: string,
latitude: ?number,
longitude: ?number,
};
const FoodRecordDefaults: Place = {
id: null,
name: '',
address: '',
images: List(),
thumb: '',
latitude: null,
longitude: null,
};
export default Record(FoodRecordDefaults, 'PlaceRecord');

1
package.json
View file

@ -15,6 +15,7 @@
"react": "~15.4.1",
"react-native": "~0.42.0",
"react-native-drawer": "^2.3.0",
"react-native-google-places": "^2.1.0",
"react-native-looped-carousel": "^0.1.5",
"react-native-material-ui": "^1.7.0",
"react-native-modal": "^2.2.0",

4
yarn.lock
View file

@ -3551,6 +3551,10 @@ react-native-drawer@^2.3.0:
dependencies:
tween-functions "^1.0.1"
react-native-google-places@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/react-native-google-places/-/react-native-google-places-2.1.0.tgz#93ceb61b1349fa19d320f32c77b0441985b42d5a"
react-native-looped-carousel@^0.1.5:
version "0.1.7"
resolved "https://registry.yarnpkg.com/react-native-looped-carousel/-/react-native-looped-carousel-0.1.7.tgz#9e81aec732039250568e367383d0bd70ba4173e9"