Merge branch 'develop' into kw-feature-backbutton

client/ios/Podfile.lock

@@ -262,7 +262,7 @@ DEPENDENCIES:
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
-  https://github.com/cocoapods/specs.git:
+  trunk:
     - boost-for-react-native
 
 EXTERNAL SOURCES:
@@ -359,4 +359,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: bc5504db07d1d3f06f9f466f10a44435981b361f
 
-COCOAPODS: 1.7.2
+COCOAPODS: 1.8.4

client/js/components/AccountLoginForm/AccountLoginForm.js

@@ -17,6 +17,7 @@ import gql from 'graphql-tag';
 import {withNavigation} from 'react-navigation';
 import {createViewer} from '../../config/models';
 import InactiveButton from '../../assets/buttons/Inactivespacebutton.png';
+import activeButton from '../../assets/buttons/activespacebutton.png';
 import {APOLLO_AUTH_ADDRESS} from '../../config/constant';
 
 const LOGIN_MUTATION = gql`
@@ -127,7 +128,7 @@ class AccountLoginForm extends Component {
                       onPress={handleSubmit}
                       style={styles.button}>
                       <ImageBackground
-                        source={InactiveButton}
+                        source={activeButton}
                         style={styles.buttonImage}>
                         <Text style={styles.text}>Sign in</Text>
                       </ImageBackground>

client/js/components/AccountLoginForm/styles.js

@@ -48,6 +48,7 @@ const styles = StyleSheet.create({
     fontSize: 20,
     fontWeight: 'bold',
     textAlign: 'center',
+    color: 'white',
   },
   buttonHolder: {
     flex: 1,
@@ -67,6 +68,7 @@ const styles = StyleSheet.create({
   IconImage: {
     width: 20,
     height: 20,
+    resizeMode: 'contain',
   },
 
   errorText: {

client/js/components/AccountSignupForm/AccountSignupForm.js

@@ -19,6 +19,7 @@ import gql from 'graphql-tag';
 import {withNavigation} from 'react-navigation';
 import {createViewer} from '../../config/models';
 import InactiveButton from '../../assets/buttons/Inactivespacebutton.png';
+import activeButton from '../../assets/buttons/activespacebutton.png';
 import {APOLLO_AUTH_ADDRESS} from '../../config/constant';
 
 const SIGNUP_MUTATION = gql`
@@ -207,7 +208,7 @@ class AccountSignupForm extends Component {
                       onPress={handleSubmit}
                       style={styles.button}>
                       <ImageBackground
-                        source={InactiveButton}
+                        source={activeButton}
                         style={styles.buttonImage}>
                         <Text style={styles.text}>Sign Up</Text>
                       </ImageBackground>

client/js/components/ListEvent/ListEvent.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import {View, TouchableOpacity, Image, Text} from 'react-native';
+//import AddToCalendar from '../CalendarButton';
+import styles from './styles';
+import moment from 'moment';
+import {withNavigation} from 'react-navigation';
+const ListEvent = ({event, navigation}) => {
+  const startDay = moment(event.startDate).format('MMM Do, YYYY');
+  const endDay = moment(event.endDate).format('MMM Do, YYYY');
+  const startTime = moment(event.startDate).format('h:mma');
+  const endTime = moment(event.endDate).format('h:mma');
+
+  return (
+    <TouchableOpacity
+      style={styles.container}
+      onPress={() => navigation.navigate('Event', {event: event})}>
+      <Image style={styles.image} source={{uri: event.image}} />
+      <View style={styles.textContainer}>
+        <Text style={styles.title}>{event.title}</Text>
+        <Text style={styles.text}>{event.location}</Text>
+        <View style={styles.borderBottom}></View>
+        {startDay === endDay ? (
+          <>
+            <Text style={styles.text}>
+              {startTime} to {endTime}
+            </Text>
+            <Text style={styles.text}>{startDay}</Text>
+          </>
+        ) : (
+          <Text style={styles.text}>
+            {startTime}, {startDay} to {endTime} {endDay}
+          </Text>
+        )}
+        {/* <AddToCalendar event={event} /> */}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default withNavigation(ListEvent);

client/js/components/ListEvent/index.js

@@ -0,0 +1,2 @@
+import ListEvent from './ListEvent';
+export default ListEvent;

client/js/components/ListEvent/styles.js

@@ -0,0 +1,46 @@
+import {StyleSheet} from 'react-native';
+import {THEME} from '../../config';
+const {
+  colors: {black},
+  formatting: {baseSpacing, containerWidth},
+  typography: {headerFont, subHeaderText, smallText},
+} = THEME;
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    width: containerWidth,
+    paddingVertical: baseSpacing,
+  },
+  textContainer: {
+    flexShrink: 1,
+  },
+  image: {
+    width: '45%',
+    height: 'auto',
+    marginRight: '10%',
+  },
+  borderBottom: {
+    borderWidth: 1,
+    borderColor: black,
+    width: '100%',
+  },
+  title: {
+    fontFamily: headerFont,
+    fontSize: subHeaderText,
+    width: '100%',
+    flexShrink: 1,
+  },
+  location: {
+    fontFamily: headerFont,
+    fontSize: smallText,
+  },
+  text: {
+    fontFamily: headerFont,
+    paddingVertical: baseSpacing / 4,
+  },
+});
+
+export default styles;

client/js/components/MainSigninButton/styles.js

@@ -38,7 +38,7 @@ const styles = StyleSheet.create({
   buttonNoBackground: {
     alignItems: 'center',
     justifyContent: 'center',
-    marginTop: 25,
+    marginTop: 2,
     borderRadius: 40,
     borderWidth: 1,
     height: 45,

client/js/components/MainSubscribeButton/MainSubscribeButton.js

@@ -24,9 +24,7 @@ const CAMPAIGN_SUBSCRIBE = gql`
   }
 `;
 
-
 const MainSubscribeButton = ({CampaignId, navigation, userId}) => {
-
   return (
     <Mutation mutation={CAMPAIGN_SUBSCRIBE} client={client}>
       {updateUser => {

client/js/config/constant.js

@@ -1 +1,3 @@
 export const APOLLO_AUTH_ADDRESS = 'http://157.245.224.214:8000/';
+export const APOLLO_SERVER_ADDRESS =
+  'https://us1.prisma.sh/public-flintwanderer-148/server/dev';

client/js/config/models.js

@@ -1,4 +1,5 @@
 import AsyncStorage from '@react-native-community/async-storage';
+import Onboarding from '../screens/Onboarding/Onboarding';
 
 export const queryViewer = async () => {
   try {
@@ -35,3 +36,22 @@ export const deleteViewer = async () => {
     return new Error(error);
   }
 };
+
+export const queryOnBoarding = async () => {
+  try {
+    let value = await AsyncStorage.getItem('onBoardingComplete');
+    return JSON.parse(value);
+  } catch (error) {
+    console.log(error);
+    return new error(error);
+  }
+};
+
+export const onBoardingSet = async foo => {
+  try {
+    await AsyncStorage.setItem('onBoardingComplete', JSON.stringify(foo));
+    return foo;
+  } catch (error) {
+    return new Error(error);
+  }
+};

client/js/navigation/RootStackNavigator.js

@@ -1,13 +1,19 @@
 import {createAppContainer, createSwitchNavigator} from 'react-navigation';
 import DrawerNavigation from './DrawerNavigation';
 import ConfirmationModal from '../screens/Confirmation';
+import CampaignModal from '../screens/CampaignModal';
 import {createStackNavigator} from 'react-navigation-stack';
 import LoginScreen from '../screens/Login';
 import SignupScreen from '../screens/Signup';
 import AuthLoadingScreen from '../screens/AuthLoadingScreen';
+import Onboarding from '../screens/Onboarding';
 
 const AuthStack = createStackNavigator(
   {
+    Onboarding: {
+      screen: Onboarding,
+    },
+
     Login: {
       screen: LoginScreen,
     },
@@ -24,6 +30,7 @@ const AppStack = createStackNavigator(
   {
     Layout: DrawerNavigation,
     Confirmation: ConfirmationModal,
+    CampaignModal: CampaignModal,
   },
   {
     headerMode: 'none',

client/js/navigation/config.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {
   View,
   TouchableOpacity,
@@ -7,8 +7,12 @@ import {
   ImageBackground,
 } from 'react-native';
 import {Header} from 'react-navigation-stack';
+
 import styles from './styles';
 
+import {queryViewer} from '../config/models';
+
+
 const AppHeader = props => (
   <View
     style={{
@@ -59,13 +63,30 @@ const BackButton = ({navigation}) => (
 );
 
 const ProfileButton = ({navigation}) => {
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    const getUesr = async () => {
+      const user = await queryViewer();
+      setUser(await user);
+    };
+    getUesr();
+  });
+
   return (
     <TouchableOpacity onPress={() => navigation.navigate('EditProfile')}>
 
-      <Image
-        style={{height: 30, width: 30, resizeMode: 'contain', marginRight: 20}}
-        source={require('../assets/headingelement/Signedin.png')}
-      />
+
+
+      <ImageBackground
+        style={{height: 25, width: 25, resizeMode: 'contain', marginRight: 20}}
+        source={require('../assets/headingelement/Signedin.png')}>
+        {user && (
+          <Text style={{color: 'white', textAlign: 'center', padding: 2}}>
+            {user.name.substring(0, 2)}
+          </Text>
+        )}
+      </ImageBackground>
 
     </TouchableOpacity>
   );

client/js/screens/AuthLoadingScreen/AuthLoadingScreenContainer.js

@@ -8,6 +8,8 @@ import {
 } from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
 import Loader from '../../components/Loader';
+import Onboarding from '../Onboarding/Onboarding';
+import {queryOnBoarding} from '../../config/models';
 
 export default class AuthLoadingScreenContainer extends React.Component {
   constructor() {
@@ -17,8 +19,12 @@ export default class AuthLoadingScreenContainer extends React.Component {
 
   _bootstrapAsync = async () => {
     const userToken = await AsyncStorage.getItem('user');
-
-    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
+    let onBoarding = await queryOnBoarding();
+    if (onBoarding === !null) {
+      this.props.navigation.navigate(userToken ? 'App' : 'Login');
+    } else {
+      this.props.navigation.navigate('Onboarding');
+    }
   };
 
   render() {

client/js/screens/Campaign/Campaign.js

@@ -8,15 +8,13 @@ import {
   ScrollView,
 } from 'react-native';
 import {withNavigation} from 'react-navigation';
-
 import styles from './styles';
 import MainSubscribeButton from '../../components/MainSubscribeButton';
 import MainUnsubscribeButton from '../../components/MainUnsubscribeButton';
 import MrMoneyImage from '../../assets/artwork/mrmoney.png';
+import ListEvent from '../../components/ListEvent';
 
 const Campaign = ({navigation, user}) => {
-  console.log('asdfawf', user);
-
   const isSubscribed = navigation.state.params.campaign.subscribers.find(
     subscriber => subscriber.id === user.id,
   );
@@ -51,12 +49,19 @@ const Campaign = ({navigation, user}) => {
           </View>
         </View>
       </View>
+      {/* End of Campaign Info */}
+
       {/* Start of Campaign Info */}
       <View style={styles.campaignDescription}>
         <Text style={styles.campaignDescriptionText} numberOfLines={5}>
           {navigation.state.params.campaign.description}
         </Text>
-        <TouchableOpacity>
+        <TouchableOpacity
+          onPress={() => {
+            navigation.navigate('CampaignModal', {
+              campaignData: navigation.state.params,
+            });
+          }}>
           <Text style={styles.campaignRedText}>More</Text>
         </TouchableOpacity>
       </View>
@@ -83,28 +88,7 @@ const Campaign = ({navigation, user}) => {
           <FlatList
             style={styles.eventSingle}
             data={navigation.state.params.campaign.events}
-            renderItem={({item}) => (
-              <TouchableOpacity
-                onPress={() => navigation.navigate('Event', {event: item})}>
-                <View style={styles.eventContainer}>
-                  <View style={styles.eventImageBox}>
-                    <Image
-                      style={styles.eventImage}
-                      source={{uri: item.image}}
-                    />
-                  </View>
-
-                  <View style={styles.eventInfoBox}>
-                    <Text style={styles.eventInfoBoxTitle} numberOfLines={1}>
-                      {item.title}
-                    </Text>
-                    <Text style={styles.eventInfoBoxLocation} numberOfLines={2}>
-                      {item.location}
-                    </Text>
-                  </View>
-                </View>
-              </TouchableOpacity>
-            )}
+            renderItem={({item}) => <ListEvent event={item} />}
             keyExtractor={(item, index) => 'index' + index.toString()}
           />
         ) : (