diff --git a/.eslintrc.js b/.eslintrc.js index 8259ceb..a7ea474 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -2,7 +2,8 @@ module.exports = { "extends": "rallycoding", "rules": { "max-len": 0, - "react/require-extension": "off" + "react/require-extension": "off", + "react/jsx-tag-spacing": ["error", { "beforeSelfClosing": "always" }] }, "globals": { "fetch": true diff --git a/App.js b/App.js index f183f49..311add0 100644 --- a/App.js +++ b/App.js @@ -2,13 +2,13 @@ import React from 'react'; import { View } from 'react-native'; import FlashMessage from 'react-native-flash-message'; -import AppNavigator from './src/config/router'; +import RootNavigator from './src/components/navigators/RootNavigator'; export default class App extends React.Component { render() { return ( - + ); diff --git a/ios/Tagfer.xcodeproj/xcshareddata/xcschemes/Tagfer.xcscheme b/ios/Tagfer.xcodeproj/xcshareddata/xcschemes/Tagfer.xcscheme index d4ecd09..8667f74 100644 --- a/ios/Tagfer.xcodeproj/xcshareddata/xcschemes/Tagfer.xcscheme +++ b/ios/Tagfer.xcodeproj/xcshareddata/xcschemes/Tagfer.xcscheme @@ -80,7 +80,7 @@ ( + +); + +const EventsIcon = ({ size, color }) => ( + +); +const ContactsIcon = ({ size, color }) => ( + +); + +const MessagesIcon = ({ size, color }) => ( + +); + +function tabIconSelector(routeName, tintColor) { + switch (routeName) { + case 'Events': + return ; + case 'Contacts': + return ; + case 'Connections': + return ; + case 'Messages': + return ; + case 'Profile': + return ; + default: + return null; + } +} + +export default function BottomTabNavigator({ Events, Contacts, Connections, Messages, Profile }) { + if (!Events || !Contacts || !Connections || !Messages || !Profile) { + console.log('Empty Navigator Supplied to BottomTabNavigator'); + } + + return createBottomTabNavigator({ + Events, + Contacts, + Connections, + Messages, + Profile + }, { + initialRouteName: 'Profile', + defaultNavigationOptions: ({ navigation }) => ({ + tabBarIcon: ({ tintColor }) => { + const { routeName } = navigation.state; + return tabIconSelector(routeName, tintColor); + }, + tabBarOptions: { + inactiveTintColor: '#8699A7', + activeTintColor: '#53ACF0', + style: { + height: 60 + } + } + }) + }); +} diff --git a/src/components/navigators/ContactsTabNavigator.js b/src/components/navigators/ContactsTabNavigator.js new file mode 100644 index 0000000..304eee5 --- /dev/null +++ b/src/components/navigators/ContactsTabNavigator.js @@ -0,0 +1,38 @@ +import { createMaterialTopTabNavigator } from 'react-navigation'; + +import SuggestedContactsScreen from '../../screens/contacts/SuggestedContactsScreen'; +import RequestsScreen from '../../screens/contacts/RequestsScreen'; +import AllContactsScreen from '../../screens/contacts/AllContactsScreen'; + +const contactsTabBarOptions = { + upperCaseLabel: false, + activeTintColor: 'white', + inactiveTintColor: '#53ACF0', + labelStyle: { + margin: 1, + fontSize: 13, + }, + tabStyle: { + borderColor: '#53ACF0', + borderWidth: 1, + padding: 5 + }, + indicatorStyle: { + backgroundColor: '#53ACF0', + bottom: 0, + height: 50, + }, + style: { + backgroundColor: 'transparent', + } +}; + +export default createMaterialTopTabNavigator( + { + Suggested: SuggestedContactsScreen, + Unconfirmed: RequestsScreen, + All: AllContactsScreen + }, + { + tabBarOptions: contactsTabBarOptions + }); diff --git a/src/components/navigators/RootNavigator.js b/src/components/navigators/RootNavigator.js new file mode 100644 index 0000000..b79e33a --- /dev/null +++ b/src/components/navigators/RootNavigator.js @@ -0,0 +1,18 @@ +import { createAppContainer, createSwitchNavigator } from 'react-navigation'; + +import TransitionScreen from '../../screens/auth/TransitionScreen'; +import AuthStack from './AuthNavigator'; +import AppStack from './AppNavigator'; + +const RootNavigator = createSwitchNavigator( + { + Loading: TransitionScreen, + App: AppStack, + Auth: AuthStack, + }, + { + initialRouteName: 'Loading', + } +); + +export default createAppContainer(RootNavigator); diff --git a/src/components/navigators/TopStackNavigator.js b/src/components/navigators/TopStackNavigator.js new file mode 100644 index 0000000..a59449c --- /dev/null +++ b/src/components/navigators/TopStackNavigator.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { View, TouchableOpacity } from 'react-native'; +import { createStackNavigator } from 'react-navigation'; + +import { Icon } from 'react-native-elements'; + +const headerLeft = ( + + + + + + + + + +); + +const headerRight = ( + + + + + + + + + +); + + +export default function TopStackNavigator(routes) { + return createStackNavigator( + routes, + { + defaultNavigationOptions: { + title: 'PUBLIC PROFILE', + headerRight, + headerLeft + } + }); +} diff --git a/src/realm/schemas/AuthSchema.js b/src/realm/schemas/AuthSchema.js index 3aa70a7..1f4b2c2 100644 --- a/src/realm/schemas/AuthSchema.js +++ b/src/realm/schemas/AuthSchema.js @@ -54,7 +54,7 @@ export const SessionSchema = { key: 'int', sessionId: 'string' } -} +}; export const SignupConfig = { path: 'Signup.realm', diff --git a/src/screens/auth/LoginScreen.js b/src/screens/auth/LoginScreen.js index df21973..b6c93c9 100644 --- a/src/screens/auth/LoginScreen.js +++ b/src/screens/auth/LoginScreen.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Image, KeyboardAvoidingView, Platform, Dimensions, View, Text, Keyboard, ScrollView, Alert } from 'react-native'; +import { Image, KeyboardAvoidingView, Platform, Dimensions, View, Text, Keyboard, ScrollView } from 'react-native'; import { Button, FormInput } from 'react-native-elements'; import { FormLabel, Spacer, TextButton } from '../../components/common'; @@ -32,7 +32,7 @@ export default class LoginScreen extends React.Component { Keyboard.dismiss(); this.setState({ loading: true }); const body = this.getLoginRequestBody(); - const resp = await fetchAuth(endpoints.login, body) + const resp = await fetchAuth(endpoints.login, body); this.setState({ loading: false }); if (resp.error) { @@ -40,7 +40,7 @@ export default class LoginScreen extends React.Component { showFlashErrorMessage(resp.error); } else { saveAuthState(resp.sessionId); - Alert.alert('Signup Success 🎉', "Check back in a couple of weeks for more features."); + this.props.navigation.navigate('App'); } } diff --git a/src/screens/auth/SignupScreen6.js b/src/screens/auth/SignupScreen6.js index db916ea..f522665 100644 --- a/src/screens/auth/SignupScreen6.js +++ b/src/screens/auth/SignupScreen6.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Alert, Dimensions, Text, View, FlatList, TouchableOpacity } from 'react-native'; +import { Dimensions, Text, View, FlatList, TouchableOpacity } from 'react-native'; import { Button } from 'react-native-elements'; import { strings } from '../../locales/i18n'; @@ -71,7 +71,7 @@ export default class SignupScreenSix extends React.Component { showFlashErrorMessage(resp.error); } else { saveAuthState(resp.sessionId); - Alert.alert('Signup Success 🎉', 'Check back next week for more features.'); + this.props.navigation.navigate('App'); } } diff --git a/src/screens/auth/TransitionScreen.js b/src/screens/auth/TransitionScreen.js new file mode 100644 index 0000000..ebdc196 --- /dev/null +++ b/src/screens/auth/TransitionScreen.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { ActivityIndicator, View } from 'react-native'; + +import { getAuthState } from '../../realm/actions/AuthActions'; + +export default class TransitionScreen extends React.Component { + constructor(props) { + super(props); + this.bootstrapAsync(); + } + + // Fetch the token from storage then navigate to our appropriate stack + async bootstrapAsync() { + const userToken = await getAuthState(); + this.props.navigation.navigate(userToken ? 'App' : 'Auth'); + } + + render() { + return ( + + + + ); + } +} diff --git a/src/screens/profile/ProfileSearchScreen.js b/src/screens/connections/ConnectScreen.js similarity index 93% rename from src/screens/profile/ProfileSearchScreen.js rename to src/screens/connections/ConnectScreen.js index 125ca66..616e4c3 100644 --- a/src/screens/profile/ProfileSearchScreen.js +++ b/src/screens/connections/ConnectScreen.js @@ -6,15 +6,11 @@ import colors from '../../config/colors.json'; export default class ProfileSearchScreen extends React.Component { - static navigationOptions = { - title: 'Make Connections via', - headerStyle: { borderBottomWidth: 0, backgroundColor: colors.offWhite }, - headerLeft: null - }; render() { return ( + Make Connections via + All Contacts + + ); + } +} + +const styles = { + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center' + } +}; diff --git a/src/screens/contacts/RequestsScreen.js b/src/screens/contacts/RequestsScreen.js new file mode 100644 index 0000000..a7a0156 --- /dev/null +++ b/src/screens/contacts/RequestsScreen.js @@ -0,0 +1,21 @@ +import React from 'react'; +import { Text, View } from 'react-native'; + +export default class UnconfirmedConnetcionsScreen extends React.Component { + + render() { + return ( + + Unconfirmed Connections + + ); + } +} + +const styles = { + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center' + } +}; diff --git a/src/screens/contacts/SuggestedContactsScreen.js b/src/screens/contacts/SuggestedContactsScreen.js new file mode 100644 index 0000000..5b73c48 --- /dev/null +++ b/src/screens/contacts/SuggestedContactsScreen.js @@ -0,0 +1,21 @@ +import React from 'react'; +import { Text, View } from 'react-native'; + +export default class SuggestedConnectionsScreen extends React.Component { + + render() { + return ( + + Suggested Connections + + ); + } +} + +const styles = { + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center' + } +}; diff --git a/src/screens/events/EventsScreen.js b/src/screens/events/EventsScreen.js new file mode 100644 index 0000000..34f948d --- /dev/null +++ b/src/screens/events/EventsScreen.js @@ -0,0 +1,21 @@ +import React from 'react'; +import { Text, View } from 'react-native'; + +export default class AllConnectionsScreen extends React.Component { + + render() { + return ( + + Events + + ); + } +} + +const styles = { + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center' + } +}; diff --git a/src/screens/messages/MessagesScreen.js b/src/screens/messages/MessagesScreen.js new file mode 100644 index 0000000..bc38749 --- /dev/null +++ b/src/screens/messages/MessagesScreen.js @@ -0,0 +1,21 @@ +import React from 'react'; +import { Text, View } from 'react-native'; + +export default class AllConnectionsScreen extends React.Component { + + render() { + return ( + + Messages + + ); + } +} + +const styles = { + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center' + } +}; diff --git a/src/screens/profile/ProfileScreen.js b/src/screens/profile/ProfileScreen.js new file mode 100644 index 0000000..a0de966 --- /dev/null +++ b/src/screens/profile/ProfileScreen.js @@ -0,0 +1,21 @@ +import React from 'react'; +import { Text, View } from 'react-native'; + +export default class AllConnectionsScreen extends React.Component { + + render() { + return ( + + Profile + + ); + } +} + +const styles = { + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center' + } +};