Groups

app/AddDeleteGroupMembers.js

@@ -0,0 +1,117 @@
+import React, { Component } from 'react';
+import { ListView, View, Text, StyleSheet, TouchableOpacity, Button } from 'react-native';
+import AuthAxios from './AuthAxios.js';
+
+export default class GroupMap extends Component {
+  constructor(props) {
+    super(props);
+    this.state =  {
+      nonMembers: new ListView.DataSource({
+        rowHasChanged: (row1, row2) => row1 !== row2
+      }),
+      membersToAdd: [],
+      membersToDelete: []
+    };
+  }
+
+  componentWillMount() {
+    AuthAxios({
+      url: `api/nonGroupUsers?name=${this.props.name}`,
+    })
+    .then(({data}) => {
+      this.setState({
+        nonMembers: this.state.nonMembers.cloneWithRows(data),
+      })
+    })
+    .catch(err => {
+      console.log('there was an error in fetching non members', err);
+    });
+  }
+
+  static navigationOptions = ({navigation}) => ({
+    title: 'Add/Delete Friends'
+  });
+
+  render() {
+    return (
+      <View>
+        <ListView
+          dataSource={this.props.members}
+          renderRow={rowData => this.renderMembersToBeChanged(rowData)}
+          style={styles.listView}
+        />
+        <ListView
+          dataSource={this.state.nonMembers}
+          renderRow={rowData => this.renderNonMembers(rowData)}
+          style={styles.listView}
+        />
+      </View>
+    )
+  }
+
+  renderMembersToBeChanged(data) {
+    return (
+      <View style={styles.container}>
+        <Button
+          onPress={() => this.props.toDelete(data)}
+          title='Delete'
+          style={styles.button}
+        />
+        <View style={styles.nameContainer}>
+          <Text style={styles.name}>{`${data.first} ${data.last}`}</Text>
+        </View>
+      </View>
+    )
+  }
+
+  renderNonMembers(data) {
+    return (
+      <View style={styles.container}>
+        <Button
+          onPress={() => this.props.toAdd(data)}
+          title='Add'
+          style={styles.button}
+        />
+        <View style={styles.nameContainer}>
+          <Text style={styles.name}>{`${data.first} ${data.last}`}</Text>
+        </View>
+      </View>
+    )
+  }
+};
+
+let styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  nameContainer: {
+    // justifyContent: 'right',
+    flex: 1,
+    marginBottom: 8,
+  },
+  name: {
+    fontSize: 23,
+    // marginBottom: 8,
+    textAlign: 'center',
+  },
+  year: {
+    textAlign: 'right',
+  },
+  button: {
+    width: 100,
+    height: 81,
+  },
+  listView: {
+    paddingTop: 10,
+    backgroundColor: '#F5FCFF',
+  },
+  separator: {
+    flex: 1,
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: '#8E8E8E',
+  },
+});

app/AddFence.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { View, Text, StyleSheet, Button, Picker, ListView } from 'react-native';
 import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
-import {endpoint} from './endpoint.js';
 import AuthAxios from './AuthAxios.js';
 
 

app/AddFriendItem.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import {endpoint} from './endpoint.js';
 import { View, Text, StyleSheet, Button } from 'react-native';
 import AuthAxios from './AuthAxios.js';
 

app/AddFriendList.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import {endpoint} from './endpoint.js';
 import Contacts from 'react-native-contacts';
 import AddFriendItem from './AddFriendItem.js';
 import { View, Text, StyleSheet, Button, ListView } from 'react-native';
@@ -18,7 +17,6 @@ export default class AddFriendList extends Component {
   };
 
   componentWillMount(){
-    console.log("will mount in addfriend")
     this.checkPermissionAndGet();
   };
 
@@ -29,7 +27,6 @@ export default class AddFriendList extends Component {
   checkPermissionAndGet() {
     Contacts.checkPermission( (err, permission) => {
       // Contacts.PERMISSION_AUTHORIZED || Contacts.PERMISSION_UNDEFINED || Contacts.PERMISSION_DENIED
-      console.log(permission)
       if(permission === 'undefined'){
         Contacts.requestPermission( (err, permission) => {
           // ...
@@ -55,7 +52,6 @@ export default class AddFriendList extends Component {
               data: {friends: friends}
             })
             .then(({data}) => {
-              console.log(friends);
               let friends = data
               friends.sort((a, b) => {
                 if (a.hasApp && b.hasApp) {

app/AllFriendsList.js

@@ -1,6 +1,5 @@
 import FriendMap from './FriendMap.js';
 import React, { Component } from 'react';
-import { endpoint } from './endpoint.js';
 import Contacts from 'react-native-contacts';
 import { View, Text, StyleSheet, Button, ListView } from 'react-native';
 import AuthAxios from './AuthAxios.js';
@@ -64,22 +63,18 @@ export default class AllFriendsList extends Component {
 
   renderContacts(friend) {
     const { navigate } = this.props.navigation;
-    // let title = '';
-    // if(friend.showSetting === 'pending') { title = 'Pending'; };
-    // if(friend.showSetting === 'label') { title = 'Home'; }
-    // if(friend.showSetting === 'GPS') { title = 'Office'}
     return (
       <View style={styles.container}>
         <Button
-          style={styles.thumbnail}
+          style={styles.button}
           onPress={() => navigate('FriendMap', {
             data: friend
             })
           }
           title={friend.currentLabel ? friend.currentLabel : 'Pending'}
         />
-        <View style={styles.rightContainer}>
-          <Text style={styles.title}>{`${friend.first} ${friend.last}`}</Text>
+        <View style={styles.nameContainer}>
+          <Text style={styles.name}>{`${friend.first} ${friend.last}`}</Text>
         </View>
       </View>
     )
@@ -94,19 +89,19 @@ let styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },
-  rightContainer: {
+  nameContainer: {
     // justifyContent: 'right',
     flex: 1,
   },
-  title: {
+  name: {
     fontSize: 20,
     marginBottom: 8,
     textAlign: 'center',
   },
   year: {
     textAlign: 'right',
   },
-  thumbnail: {
+  button: {
     width: 53,
     height: 81,
   },

app/CreateGroup.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import CheckBox from 'react-native-checkbox';
-import { endpoint } from './endpoint.js';
 import { View, Text, StyleSheet, TextInput, ListView, Picker, Button } from 'react-native';
 import AuthAxios from './AuthAxios.js';
 
@@ -20,13 +19,11 @@ export default class CreateGroup extends Component {
   }
 
   componentWillMount() {
-
     AuthAxios({
       url: `/api/friends?groups=true`
     })
     .then(({data}) => {
       let friends = data;
-      console.log(friends);
       this.setState({
         friends: this.state.friends.cloneWithRows(friends),
       })
@@ -43,46 +40,23 @@ export default class CreateGroup extends Component {
       users: this.state.users,
       privacy: this.state.privacy,
     };
-
-
     AuthAxios({
       url: `/api/groups`,
       method: `post`,
       data:{groupSettings: groupSettings}
     })
     .then(({data}) => {
-      console.log('Your group was created')
     })
     .catch((error) => {
       alert('There was a problem creating your group')
     })
-
-/*    fetch(`${endpoint}/api/groups`, {
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({groupSettings: groupSettings})
-    })
-      .then(function(response) {
-        return response.json();
-      })
-      .then((friends) => {
-        console.log(friends);
-      })
-      .catch((error) => {
-        console.log('There was an error in fetching your data: ', error);
-        return error;
-      });*/
     const { navigate } = this.props.navigation;
     navigate('GroupsList');
   }
 
   handleUserChange(userObj) {
     let userArr = this.state.users;
     let index = userArr.indexOf(userObj);
-    console.log(userArr, index, userObj);
     if(index === -1) {
       userArr.push(userObj);
     } else {
@@ -92,13 +66,8 @@ export default class CreateGroup extends Component {
     this.setState({
       users: userArr
     })
-    console.log(this.state);
   }
 
-  // static navigationOptions = {
-  //   title: ({state}) => (state.params.title)
-  // };
-
   static navigationOptions = ({ navigation }) => {
     title: navigation.state.params.title
   }

app/FriendMap.js

@@ -1,26 +1,63 @@
 import React, { Component } from 'react';
-import { View, Text, StyleSheet, Image } from 'react-native';
 /*import { MapView } from 'react-native-maps';*/
+import { View, Text, StyleSheet, Image, Switch } from 'react-native';
+import AuthAxios from './AuthAxios.js';
 
 export default class FriendMap extends Component {
   constructor(props) {
     super(props);
-    this.state =  {};
-    console.log(this.props.navigation.state.params);
+
+    let {showFriendSetting} = this.props.navigation.state.params.data;
+    let showLabel = (showFriendSetting === 'label' ? true : false); 
+
+    this.state =  {
+      showLabel: showLabel
+    };
+    this.switchChange = this.switchChange.bind(this);
+  }
+
+  switchChange() {
+    this.setState({
+      showLabel: !this.state.showLabel
+    })
+    let {id} = this.props.navigation.state.params.data;
+    let privacy = (this.state.showLabel ? 'GPS' : 'Label');
+    AuthAxios({
+      url: `/api/friends/${id}`,
+      method: 'put',
+      data: {privacy: privacy}
+    })
+    .then(({data}) => {
+    })
+    .catch(err => {
+      console.log(err);
+    }) 
   }
 
   static navigationOptions = ({navigation}) => ({
     title: navigation.state.params.data.first
   });
 
-  render() {
+  whichPageToRender () {
     const { data } = this.props.navigation.state.params;
-    console.log(data);
     if(data.showSetting === 'GPS') { return this.renderGPS(data); }
     if(data.showSetting === 'label') { return this.renderLabel(data); }
     if(data.showSetting === 'pending') { return this.renderPending(data); }
   }
 
+  render() {
+    return (
+      <View>
+      <Switch
+          onValueChange={this.switchChange}
+          value={this.state.showLabel}
+        />
+        <Text>{this.state.showLabel ? 'Show Only Label' : 'Show GPS'}</Text>
+        {this.whichPageToRender()}
+      </View>
+    )
+  }
+
   renderPending(data) {
     return (
       <View style={{marginTop: 10}}>