From 5526785c1265d0f89cc37b2546cd7459677d80dc Mon Sep 17 00:00:00 2001 From: Devon Bhavsar Date: Thu, 21 Nov 2019 19:02:25 -0500 Subject: [PATCH 1/2] checkbox form for tags --- .DS_Store | Bin 0 -> 6148 bytes App.js | 3 + app/.DS_Store | Bin 0 -> 6148 bytes app/components/Checkbox.js | 18 +++++ app/screens/AddTags.js | 146 +++++++++++++++++++++++++++++++++++++ app/screens/RouteEditor.js | 10 ++- package.json | 23 +++--- 7 files changed, 187 insertions(+), 13 deletions(-) create mode 100644 .DS_Store create mode 100644 app/.DS_Store create mode 100644 app/components/Checkbox.js create mode 100644 app/screens/AddTags.js diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..1f8e06ed4097de5409d38a249b21017ca91e314d GIT binary patch literal 6148 zcmeHK%}T>S5Z-O8ZYyFBf<5lVTMwn+1N|Ie*Y+##*M~1FBD5_>l;E;L}jaT;|!z3iQRZMwcW`TT4!!N z^o)KUMWavM^)7-z(yQ(qM`7#+;b5YY1AhP^*Ox))M~NNHLVv2}akN8-vMBeewfVf= z*ssfWvz6B6ywhpaW$W-DP0M0;uX%LZzk7I`Kc&wvnqLm|E7>-f!z(DJynAO7j-v1u zM)K%9ijWu}28aP-V5Jx^$AH*esj8`1Vt^R<2?Mx4NN9+b!AzstI-tYrGx|%2D4^q8 z0#O>Y3}za^1HyGGpibrHiNSR`j7t+|8O${5bjH=nFppU|f4p$DI*dyd&bXzKdSZYW zSY)86%_^S%C-BQGedI5ukVOm-1OJQxUg|ns8;UY#>$mdotd-FE&`>ZgLj?r%g-ZY! ixR2D7Q~M?A5N8?8G~z5cuF?VNBA^JNju`j_20j2&sZYoN literal 0 HcmV?d00001 diff --git a/App.js b/App.js index 3635e17..a67f216 100644 --- a/App.js +++ b/App.js @@ -12,6 +12,7 @@ import ExploreScreen, { CitySearchScreen } from './app/screens/Explore.js'; import CollectionsScreen from './app/screens/Collections.js'; import ProfileScreen from './app/screens/Profile.js'; import MapScreen, { MapSearchScreen, NoteEditorScreen } from './app/screens/RouteEditor.js'; +import AddTagsScreen from './app/screens/AddTags.js'; import PlaceDetailScreen from './app/screens/PlaceDetail.js'; import RouteDetailScreen from './app/screens/RouteDetail.js'; import SignUpScreen from './app/screens/SignUp.js'; @@ -24,6 +25,7 @@ import routeReducer from './app/reducers/RouteReducer.js'; import { FIREBASE_CONFIG } from './app/config/settings.js'; import { ACCENT } from './app/config/styles.js'; +// import AddTagsScreen from './app/screens/AddTags.js'; firebase.initializeApp(FIREBASE_CONFIG); const store = createStore(routeReducer); @@ -77,6 +79,7 @@ const HomeStack = createStackNavigator({ }, CitySearch: mapNavigationStateParamsToProps(CitySearchScreen), Map: MapScreen, + AddTags: AddTagsScreen, MapSearch: mapNavigationStateParamsToProps(MapSearchScreen), PlaceDetail: mapNavigationStateParamsToProps(PlaceDetailScreen), NoteEditor: mapNavigationStateParamsToProps(NoteEditorScreen), diff --git a/app/.DS_Store b/app/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..668de1784e9ec5b3dbd2f44aafef8ea7c4d207c9 GIT binary patch literal 6148 zcmeHK%}N6?5T4jt(~8)GV2`!GEU>Ooj)J$MsV^q^9AZPkUkk?z(-Yh_5z)*t`6iQ0miZt*0|2Z!=u`oU0KicRvjuEE5E>_)kvZeZA~Ll`43VEi z*M3j>GqbJ3GGH0_Z4A)f&4C9IeqET}zt8@4FNoqw<%P{6$;d*twEb5Kgs4Rw!Mx`ujoAuEs&sW!~Tf3)Mw|B$)(Zi!=mEj?zWZB>t zp3s;|^2Y6lJsDo0pJH-w1`mEu9gAIz?T@H^Fg2zItEjX>gd2ml>mtJj8K9$)e;mV3_1o=jW~kBbSR<@Wv0Yn zIvoAN%ySH;8g)1@Q+zPqtUjO0n5NN0~y^d(*3{ldHp{fWP6qY z%fO#vfMr{5tBEO@yLBcxx@!gMDJlugOEszxY|M4647!R-s7i25kb&qJOf{kh#XbZS L4Ysii{3rvjxtW%L literal 0 HcmV?d00001 diff --git a/app/components/Checkbox.js b/app/components/Checkbox.js new file mode 100644 index 0000000..f5d437d --- /dev/null +++ b/app/components/Checkbox.js @@ -0,0 +1,18 @@ +import React from "react"; + +const Checkbox = ({ label, isSelected, onCheckboxChange }) => ( +
+ +
+); + +export default Checkbox; \ No newline at end of file diff --git a/app/screens/AddTags.js b/app/screens/AddTags.js new file mode 100644 index 0000000..ae681b8 --- /dev/null +++ b/app/screens/AddTags.js @@ -0,0 +1,146 @@ +import React, { Component } from 'react'; +import { + View, + TextInput, + StyleSheet, + FlatList, + Text, + TouchableOpacity, + Animated, + Dimensions, + Image, + TouchableWithoutFeedback, + Picker, + Platform, + PixelRatio +} from 'react-native'; +import Checkbox from '../components/Checkbox.js'; +// import { Checkbox } from 'react-native-elements'; +import CheckboxFormX from 'react-native-checkbox-form'; +import MapView, { Marker } from 'react-native-maps'; +import { Header } from 'react-navigation-stack'; +import * as firebase from 'firebase'; +import Icon from 'react-native-vector-icons/MaterialIcons'; +import { connect } from 'react-redux'; +import MapViewDirections from 'react-native-maps-directions'; +import resolveAssetSource from 'resolveAssetSource'; + +import Button from '../components/Buttons.js'; +import globalStyles, { GREY, DARKER_GREY, PRIMARY, ACCENT } from '../config/styles.js'; +import { + MAPS_API_KEY, + SERVER_ADDR, + INIT_LOCATION, + PLACE_ID, + TAGS, + PLACEHOLDER_IMG +} from '../config/settings.js'; + +// dimensions of the screen +const {width, height} = Dimensions.get('window'); + +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingVertical: 10, + paddingHorizontal: 15, + alignSelf: 'center', + justifyContent: 'flex-start', + flexDirection: 'row' + } +}); + +const tags = [ + { + label: 'Budget', + RNchecked: false + }, + { + label: 'Walkable', + RNchecked: false + }, + { + label: 'Historical', + RNchecked: false + }, + { + label: 'Art & Architecture', + RNchecked: false + }, + { + label: 'Local Approved', + RNchecked: false + }, + { + label: 'Iconic', + RNchecked: false + }, + { + label: 'Foodie', + RNchecked: false + } +]; + +class AddTagsScreen extends Component { + + state = { + checkboxes: tags.reduce( + (options, option) => ({ + ...options, + [option]: false + }), + {} + ) + }; + + handleCheckboxChange = changeEvent => { + const { name } = changeEvent.target; + + this.setState(prevState => ({ + checkboxes: { + ...prevState.checkboxes, + [name]: !prevState.checkboxes[name] + } + })); + }; + + handleFormSubmit = formSubmitEvent => { + formSubmitEvent.preventDefault(); + + Object.keys(this.state.checkboxes) + .filter(checkbox => this.state.checkboxes[checkbox]) + .forEach(checkbox => { + console.log(checkbox, "is selected."); + }); + }; + + createCheckbox = option => ( + + ); + + createCheckboxes = () => tags.map(this.createCheckbox); + + render() { + return ( + + + this.handleCheckboxChange} + /> + + + ); + } + } + + export default AddTagsScreen; \ No newline at end of file diff --git a/app/screens/RouteEditor.js b/app/screens/RouteEditor.js index 5c69713..2e0c2c8 100644 --- a/app/screens/RouteEditor.js +++ b/app/screens/RouteEditor.js @@ -734,6 +734,11 @@ class MapScreen extends Component { }, this.toggleDrawer); } + onPressAddTags = () => { + this.props.navigation.navigate('AddTags'); + console.log("Button pressed"); + } + onComplete = () => { firebase.auth().currentUser.getIdToken().then(token => fetch(`${SERVER_ADDR}/cities/routes`, { @@ -940,7 +945,7 @@ class MapScreen extends Component { onChangeText={text => this.setState({name: text})} value={this.state.name} /> - { @@ -953,7 +958,8 @@ class MapScreen extends Component { > {TAGS.map(tag => )} - + */} +