Merge branch 'master' into tma641-animation-tutorial

5 files changed, 126 insertions, 35 deletions

diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index 2db039c1..450c5039 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -13,7 +13,7 @@ import {
   TouchableOpacity,
 } from 'react-native';
 import SplashScreen from 'react-native-splash-screen';
-import {useDispatch} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
 import {Background, TaggInput, TaggSquareButton} from '../../components';
 import {LOGIN_ENDPOINT, usernameRegex} from '../../constants';
 import {
@@ -25,8 +25,10 @@ import {
 } from '../../constants/strings';
 import {OnboardingStackParams} from '../../routes/onboarding';
 import {fcmService} from '../../services';
+import {RootState} from '../../store/rootReducer';
 import {BackgroundGradientType, UserType} from '../../types';
 import {normalize, userLogin} from '../../utils';
+import UpdateRequired from './UpdateRequired';
 
 type VerificationScreenRouteProp = RouteProp<OnboardingStackParams, 'Login'>;
 type VerificationScreenNavigationProp = StackNavigationProp<
@@ -45,11 +47,6 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
   // ref for focusing on input fields
   const inputRef = useRef();
 
-  const NO_USER: UserType = {
-    userId: '',
-    username: '',
-  };
-
   // login form state
   const [form, setForm] = React.useState({
     username: '',
@@ -59,7 +56,7 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
     attemptedSubmit: false,
     token: '',
   });
-  const [user, setUser] = useState<UserType>(NO_USER);
+  const {newVersionAvailable} = useSelector((state: RootState) => state.user);
 
   /**
    * Redux Store stuff
@@ -167,7 +164,6 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
             userLogin(dispatch, {userId: data.UserID, username});
             fcmService.sendFcmTokenToServer();
           } catch (err) {
-            setUser(NO_USER);
             console.log(data);
             Alert.alert(ERROR_INVALID_LOGIN);
           }
@@ -216,6 +212,8 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
       style={styles.container}
       gradientType={BackgroundGradientType.Light}>
       <StatusBar barStyle="light-content" />
+      {/* <Modal visible={newVersionAvailable} /> */}
+      <UpdateRequired visible={newVersionAvailable} />
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         style={styles.keyboardAvoidingView}>
@@ -259,14 +257,16 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
         <TaggSquareButton
           onPress={handleLogin}
           title={'Login'}
-          mode={'normal'}
-          color={'white'}
+          buttonStyle={'normal'}
+          buttonColor={'white'}
+          labelColor={'blue'}
         />
         <TaggSquareButton
           onPress={startRegistrationProcess}
           title={'Sign up'}
-          mode={'normal'}
-          color={'purple'}
+          buttonStyle={'normal'}
+          buttonColor={'purple'}
+          labelColor={'blue'}
         />
       </KeyboardAvoidingView>
     </Background>
diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/ProfileOnboarding.tsx
index 26ad93a7..c173c8e3 100644
--- a/src/screens/onboarding/ProfileOnboarding.tsx
+++ b/src/screens/onboarding/ProfileOnboarding.tsx
@@ -1,38 +1,34 @@
-import React from 'react';
+import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp} from '@react-navigation/native';
-import moment from 'moment';
 import {StackNavigationProp} from '@react-navigation/stack';
+import moment from 'moment';
+import React, {useMemo} from 'react';
 import {
-  Text,
+  Alert,
+  Image,
   StatusBar,
   StyleSheet,
-  Image,
+  Text,
   TouchableOpacity,
-  Alert,
   View,
 } from 'react-native';
+import ImagePicker from 'react-native-image-crop-picker';
+import Animated from 'react-native-reanimated';
 import {
   Background,
+  BirthDatePicker,
   TaggBigInput,
-  TaggInput,
   TaggDropDown,
-  BirthDatePicker,
+  TaggInput,
 } from '../../components';
-import {OnboardingStackParams} from '../../routes/onboarding';
-import ImagePicker from 'react-native-image-crop-picker';
 import {
-  EDIT_PROFILE_ENDPOINT,
-  websiteRegex,
   bioRegex,
-  genderRegex,
   CLASS_YEAR_LIST,
+  EDIT_PROFILE_ENDPOINT,
+  genderRegex,
   TAGG_PURPLE,
+  websiteRegex,
 } from '../../constants';
-import AsyncStorage from '@react-native-community/async-storage';
-import {BackgroundGradientType} from '../../types';
-import {PickerSelectProps} from 'react-native-picker-select';
-import Animated from 'react-native-reanimated';
-import {SCREEN_WIDTH} from '../../utils';
 import {
   ERROR_DOUBLE_CHECK_CONNECTION,
   ERROR_PROFILE_CREATION_SHORT,
@@ -41,6 +37,9 @@ import {
   ERROR_UPLOAD_LARGE_PROFILE_PIC,
   ERROR_UPLOAD_SMALL_PROFILE_PIC,
 } from '../../constants/strings';
+import {OnboardingStackParams} from '../../routes/onboarding';
+import {BackgroundGradientType} from '../../types';
+import {SCREEN_WIDTH} from '../../utils';
 
 type ProfileOnboardingScreenRouteProp = RouteProp<
   OnboardingStackParams,
@@ -383,6 +382,15 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
     }
   };
 
+  const profilePics = useMemo(() => {
+    return (
+      <View style={styles.profile}>
+        <LargeProfilePic />
+        <SmallProfilePic />
+      </View>
+    );
+  }, [form.largePic, form.smallPic]);
+
   return (
     <Animated.ScrollView bounces={false}>
       <Background
@@ -390,10 +398,7 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
         gradientType={BackgroundGradientType.Light}
         style={styles.container}>
         <StatusBar barStyle="light-content" />
-        <View style={styles.profile}>
-          <LargeProfilePic />
-          <SmallProfilePic />
-        </View>
+        {profilePics}
         <View style={styles.contentContainer}>
           <TaggInput
             accessibilityHint="Enter a website."
diff --git a/src/screens/onboarding/UpdateRequired.tsx b/src/screens/onboarding/UpdateRequired.tsx
new file mode 100644
index 00000000..adf7ba71
--- /dev/null
+++ b/src/screens/onboarding/UpdateRequired.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import {Image, Linking, Modal, StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-animatable';
+import {CenteredView, TaggSquareButton} from '../../components';
+import {normalize, SCREEN_WIDTH} from '../../utils';
+
+interface UpdateRequiredProps {
+  visible: boolean;
+}
+
+const UpdateRequired: React.FC<UpdateRequiredProps> = ({visible}) => {
+  return (
+    <Modal animationType={'slide'} transparent={true} visible={visible}>
+      <CenteredView>
+        <View style={styles.contentContainer}>
+          <Image
+            style={styles.logo}
+            source={require('../../assets/images/logo-purple.png')}
+          />
+          <Text style={styles.header}>Update Required</Text>
+          <Text style={styles.body}>
+            You have to update your app to continue using Tagg, please download
+            the latest version from the app store
+          </Text>
+          <TaggSquareButton
+            title={'Update'}
+            onPress={() => {
+              Linking.openURL(
+                'https://apps.apple.com/us/app/tagg-discover-your-community/id1537853613',
+              );
+            }}
+            buttonStyle={'normal'}
+            buttonColor={'purple'}
+            labelColor={'white'}
+            labelStyle={styles.button}
+          />
+        </View>
+      </CenteredView>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    marginTop: '20%',
+    width: SCREEN_WIDTH * 0.9,
+    backgroundColor: 'white',
+    borderRadius: 5,
+    padding: '10%',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  logo: {
+    width: normalize(60),
+    height: normalize(60),
+    marginBottom: '10%',
+  },
+  header: {
+    fontSize: normalize(17),
+    fontWeight: '700',
+    lineHeight: 20,
+    marginBottom: '5%',
+  },
+  body: {
+    fontSize: normalize(13),
+    color: 'grey',
+    lineHeight: 20,
+    textAlign: 'center',
+    width: SCREEN_WIDTH * 0.8,
+    marginBottom: '10%',
+  },
+  button: {
+    fontWeight: '700',
+  },
+});
+
+export default UpdateRequired;
diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx
index bfb1a127..ae31f933 100644
--- a/src/screens/onboarding/WelcomeScreen.tsx
+++ b/src/screens/onboarding/WelcomeScreen.tsx
@@ -39,8 +39,9 @@ const WelcomeScreen: React.FC<WelcomeScreenProps> = ({navigation}) => {
       <TaggSquareButton
         onPress={handleNext}
         title={'Next'}
-        mode={'large'}
-        color={'purple'}
+        buttonStyle={'large'}
+        buttonColor={'purple'}
+        labelColor={'white'}
         style={styles.nextButton}
       />
     </Background>
diff --git a/src/screens/onboarding/index.ts b/src/screens/onboarding/index.ts
index 14d0e405..596683e5 100644
--- a/src/screens/onboarding/index.ts
+++ b/src/screens/onboarding/index.ts
@@ -14,3 +14,4 @@ export {default as CategorySelection} from './CategorySelection';
 export {default as AddWaitlistUserScreen} from './AddWaitlistUserScreen';
 export {default as WaitlistSuccessScreen} from './WaitlistSuccessScreen';
 export {default as CreateCustomCategory} from './CreateCustomCategory';
+export {default as UpdateRequired} from './UpdateRequired';