Devon

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),

app/components/Checkbox.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+const Checkbox = ({ label, isSelected, onCheckboxChange }) => (
+  <div className="form-check">
+    <label>
+      <input
+        type="checkbox"
+        name={label}
+        checked={isSelected}
+        onChange={onCheckboxChange}
+        className="form-check-input"
+      />
+      {label}
+    </label>
+  </div>
+);
+
+export default Checkbox;

app/screens/AddTags.js

@@ -0,0 +1,159 @@
+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 CheckboxForm 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
+        }),
+        {}
+      ),
+      selected: []
+    };
+
+    handleCheckboxChange = changeEvent => {
+      const { name } = changeEvent.target;
+
+      this.setState(prevState => ({
+        checkboxes: {
+          ...prevState.checkboxes,
+          [name]: !prevState.checkboxes[name]
+        }
+      }));
+      console.log(this.state.checkboxes);
+    };
+
+    handleFormSubmit = formSubmitEvent => {
+      formSubmitEvent.preventDefault();
+
+      Object.keys(this.state.checkboxes)
+        .filter(checkbox => this.state.checkboxes[checkbox])
+        .forEach(checkbox => {
+          console.log(checkbox, "is selected.");
+          this.setState({
+            selected: [...this.state.selected, checkbox]
+          });
+        });
+    };
+
+    createCheckbox = option => (
+      <Checkbox
+        title={option}
+        checked={this.state.checked}
+      />
+    );
+
+    createCheckboxes = () => tags.map(this.createCheckbox);
+
+    render() {
+        return (
+          <View style={styles.container}>
+              <View style={{ marginVertical: 10 }} >
+                  <CheckboxForm
+                      style={{ width: width }}
+                      dataSource={tags}
+                      itemShowKey="label"
+                      itemCheckedKey="RNchecked"
+                      iconSize={30}
+                      formHorizontal={false}
+                      labelHorizontal={true}
+                      onChecked={(item) => this.handleCheckboxChange}
+                  />
+                  <Button 
+                        title={'Save'}
+                        onPress={ () => {
+                            this.handleFormSubmit;
+                            // this.props.update(this.state.selected);
+                            this.props.navigation.goBack();
+                        }} 
+                  />
+              </View>
+         </View>
+        );
+      }
+  }
+
+  export default AddTagsScreen;

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}
                 />
-                <Picker
+                {/* <Picker
                   style={{height: 50, width: 150, alignSelf: 'flex-start', marginLeft: '5%', marginBottom: 10, borderWidth: 1}}
                   selectedValue='Add Tags'
                   onValueChange={value => {
@@ -953,7 +958,8 @@ class MapScreen extends Component {
                 >
                   <Picker.Item label='Add Tags' value={'Add Tags'} />
                   {TAGS.map(tag => <Picker.Item label={tag} value={tag} key={tag}/>)}
-                </Picker>
+                </Picker> */}
+                <Button title={'Add Tags'} onPress={this.onPressAddTags} />
                 <View style={{flexDirection: 'row', alignSelf: 'flex-start', marginLeft: '5%', flexWrap: 'wrap'}}>
                   {this.state.tags.map(tag => <Tag title={tag} onClear={() => this.clearTag(tag)} key={tag} />)}
                 </View>

package.json

@@ -9,35 +9,36 @@
   },
   "dependencies": {
     "atom-ide-ui": "^0.7.2",
-    "expo": "^35.0.0",
+    "expo": "^35.0.1",
     "expo-blur": "^7.0.0",
     "expo-facebook": "^7.0.0",
-    "firebase": "^7.1.0",
+    "firebase": "^7.4.0",
     "json-loader": "^0.5.7",
     "react": "16.8.3",
     "react-dom": "16.8.3",
     "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
-    "react-native-elements": "^1.2.5",
-    "react-native-gesture-handler": "^1.3.0",
+    "react-native-checkbox-form": "^1.1.5",
+    "react-native-elements": "^1.2.7",
+    "react-native-gesture-handler": "^1.5.0",
     "react-native-maps": "^0.25.0",
     "react-native-maps-directions": "^1.7.3",
     "react-native-paper": "^2.16.0",
-    "react-native-reanimated": "^1.2.0",
+    "react-native-reanimated": "^1.4.0",
     "react-native-screens": "^1.0.0-alpha.23",
     "react-native-vector-icons": "^6.6.0",
     "react-native-web": "^0.11.7",
     "react-navigation": "^4.0.10",
-    "react-navigation-material-bottom-tabs": "^2.1.2",
-    "react-navigation-stack": "^1.9.1",
-    "react-redux": "^7.1.1",
+    "react-navigation-material-bottom-tabs": "^2.1.5",
+    "react-navigation-stack": "^1.10.3",
+    "react-redux": "^7.1.3",
     "redux": "^4.0.4"
   },
   "devDependencies": {
-    "babel-preset-expo": "^7.0.0",
-    "eslint": "^6.5.1",
+    "babel-preset-expo": "^7.1.0",
+    "eslint": "^6.6.0",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-react": "^7.14.3",
-    "eslint-plugin-react-native": "^3.7.0"
+    "eslint-plugin-react-native": "^3.8.1"
   },
   "private": true
 }