commit

components/Home.js

@@ -1,10 +1,15 @@
 import React from 'react';
-import { Text, View, ScrollView, Button, AsyncStorage, RefreshControl } from 'react-native';
+import { Text, View, ScrollView, Button, AsyncStorage, RefreshControl, StyleSheet } from 'react-native';
 import { List, ListItem } from 'react-native-elements';
 import { connect } from 'react-redux';
+import Icon from 'react-native-vector-icons/FontAwesome'
 import { getOrganizationsFromServer, getUserFromToken } from '../store';
 
 class Home extends React.Component {
+  static navigationOptions = {
+    tabBarIcon: () => <Icon size={22} name='map-pin' color="#02a4ff" />
+  }
+
   constructor() {
     super();
     this.state = { refreshing: false }
@@ -26,26 +31,30 @@ class Home extends React.Component {
   }
 
   render() {
-    const { organizations, user } = this.props;
+    const { myOrgs } = this.props;
     const { navigate } = this.props.navigation;
     return (
       <ScrollView
+        style={ styles.container }
         refreshControl={
           <RefreshControl
             refreshing={this.state.refreshing}
             onRefresh={() => this.onRefresh()}
           />
         }
       >
-        <List>
+        <List
+          containerStyle={ styles.list }
+        >
           {
-            organizations.map((organization, index) => (
+            myOrgs.map((organization) => (
               <ListItem
                 roundAvatar
                 avatar={{uri: 'https://thesocietypages.org/socimages/files/2009/05/vimeo.jpg'}}
+                containerStyle={ styles.listItem }
                 title={organization.name}
                 subtitle={organization.organization_type}
-                key={index}
+                key={ organization.id }
                 onPress={() => navigate('Details', { organization })}
               />
             ))
@@ -56,8 +65,15 @@ class Home extends React.Component {
   }
 }
 
-const mapState = ({ organizations, user }) => ({
-  organizations, user
+const mapState = ({ userOrganizations, organizations, user }) => ({
+  myOrgs: userOrganizations.reduce((array, userOrg) => {
+    const organization = organizations.find(org => userOrg.userId === user.id && userOrg.organizationId === org.id);
+    if(organization) {
+      array.push(organization);
+    }
+    return array;
+  }, []),
+  user
 });
 
 const mapDispatch = dispatch => ({
@@ -66,3 +82,18 @@ const mapDispatch = dispatch => ({
 });
 
 export default connect(mapState, mapDispatch)(Home);
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#02a4ff'
+  },
+  list: {
+    marginLeft: 10,
+    marginRight: 10,
+    backgroundColor: '#02a4ff'
+  },
+  listItem: {
+    backgroundColor: '#f9f9f9',
+    marginBottom: 5
+  }
+});

components/MainStack.js

@@ -1,58 +1,75 @@
 import React from 'react';
 import { AsyncStorage, View } from 'react-native';
 import { connect } from 'react-redux';
-import { createStackNavigator, createMaterialTopTabNavigator } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation';
+import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
 import { Asset, AppLoading } from 'expo';
 import { getOrganizationsFromServer, getUserFromToken, getUserOrganizationsFromServer, getUsersFromServer, getUserRequestsFromServer, getOrganizationRequestsFromServer, getFormsFromServer, getDescriptionsFromServer } from '../store';
-
+import Icon from 'react-native-vector-icons/FontAwesome'
 import Home from './Home.js';
 import OrganizationInfo from './OrganizationInfo';
 import UserRequests from './UserRequests';
 import ModalStack from './modals/ModalStack';
 import UserDescriptions from './UserDescriptions';
+import UserProfile from './UserProfile';
 import Chat from './Chat';
 import SearchMap from './SearchMap';
 
-const TabNavigator = createMaterialTopTabNavigator({
+const TabNavigator = createMaterialBottomTabNavigator({
   'My Orgs': {
-    screen: Home,
+    screen: Home
   },
-  Requests: {
+  "Req's": {
     screen: UserRequests,
   },
-  Map: {
+  Find: {
     screen: SearchMap,
   }
 }, {
-    headerMode: 'none',
-    tabBarOptions: {
-      activeTintColor: '#02A4FF',
-      inactiveTintColor: 'grey',
-      labelStyle: {
-        fontSize: 16,
-      },
-      style: {
-        backgroundColor: '#fff',
-      }
-    },
+  initialRouteName: 'My Orgs',
+  activeTintColor: '#02a4ff',
+  inactiveTintColor: '#005d91',
+  barStyle: {
+    backgroundColor: '#fff',
+    paddingBottom: 20,
+  }
 });
 
 const NavStack = createStackNavigator({
-  Home: TabNavigator,
+  Home: {
+    screen: TabNavigator,
+    navigationOptions: {
+      title: 'Pair Up!',
+      headerRight: (
+        <Icon
+          size={22}
+          name='map-pin'
+          color="#02a4ff"
+          style={{ marginRight: 20 }}
+        />
+      )
+    }
+  },
   Details: OrganizationInfo,
   Descriptions: UserDescriptions,
   Chat: Chat,
+  UserProfile: UserProfile
 }, {
   headerMode: 'screen',
-  initialRouteName: 'Home'
+  initialRouteName: 'Home',
+  navigationOptions: {
+    headerStyle: {
+      backgroundColor: '#fff',
+    }
+  }
 });
 
 const RootStack = createStackNavigator({
   Modals: ModalStack,
   Nav: NavStack
 }, {
   initialRouteName: 'Nav',
-  headerMode: 'none'
+  headerMode: 'none',
 });
 
 class MainStack extends React.Component {