TMA-167: Create Navigation Bar (#25)

* Renamed Profile in Onboarding and added dummy main screens

* Comments for new screens created

* change navigation in verification to profileonboarding

* added icons and tab navigation

* added icons to navigation bar

* add clicked icons

* added 2x and 3x icon sizes

* rename for resizing to work

* remove upload clicked as informed by design

* changed initialRouteName back to Login

* created NavigationIcon component to hold all the nav icons

* added default case

* changed intialRouteName back to Login

* fixed icon names

* fixed icon names

* add navigation to home page after login

Co-authored-by: Megan Hong <meganhong31@g.ucla.edu>

1 files changed, 256 insertions, 0 deletions

diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/ProfileOnboarding.tsx
new file mode 100644
index 00000000..191d62b2
--- /dev/null
+++ b/src/screens/onboarding/ProfileOnboarding.tsx
@@ -0,0 +1,256 @@
+import React from 'react';
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import {
+  Text,
+  StatusBar,
+  StyleSheet,
+  Image,
+  TouchableOpacity,
+  Alert,
+  View,
+} from 'react-native';
+import {RootStackParamList} from '../../routes';
+import {Background} from '../../components';
+import ImagePicker from 'react-native-image-crop-picker';
+import {REGISTER_ENDPOINT} from '../../constants';
+
+type ProfileOnboardingScreenRouteProp = RouteProp<
+  RootStackParamList,
+  'ProfileOnboarding'
+>;
+type ProfileOnboardingScreenNavigationProp = StackNavigationProp<
+  RootStackParamList,
+  'ProfileOnboarding'
+>;
+interface ProfileOnboardingProps {
+  route: ProfileOnboardingScreenRouteProp;
+  navigation: ProfileOnboardingScreenNavigationProp;
+}
+
+/**
+ * Create profile screen for onboarding.
+ * @param navigation react-navigation navigation object
+ */
+
+const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({route}) => {
+  const {userId, username} = route.params;
+  const [largePic, setLargePic] = React.useState('');
+  const [smallPic, setSmallPic] = React.useState('');
+
+  /**
+   * Profile screen "Add Large Profile Pic Here" button
+   */
+  const LargeProfilePic = () => (
+    <TouchableOpacity
+      accessible={true}
+      accessibilityLabel="ADD LARGE PROFILE PIC HERE"
+      onPress={goToGalleryLargePic}
+      style={styles.largeProfile}>
+      {largePic ? (
+        <Image
+          source={{uri: largePic}}
+          style={[styles.largeProfile, styles.profilePic]}
+        />
+      ) : (
+        <Text style={styles.largeProfileText}>ADD LARGE PROFILE PIC HERE</Text>
+      )}
+    </TouchableOpacity>
+  );
+
+  /**
+   * Profile screen "Add Smaller Profile Pic Here" button
+   */
+  const SmallProfilePic = () => (
+    <TouchableOpacity
+      accessible={true}
+      accessibilityLabel="ADD SMALLER PIC"
+      onPress={goToGallerySmallPic}
+      style={styles.smallProfile}>
+      {smallPic ? (
+        <Image
+          source={{uri: smallPic}}
+          style={[styles.smallProfile, styles.profilePic]}
+        />
+      ) : (
+        <Text style={styles.smallProfileText}>ADD SMALLER PIC</Text>
+      )}
+    </TouchableOpacity>
+  );
+
+  /*
+   * Handles tap on add profile picture buttons by navigating to camera access
+   * and selecting a picture from gallery for large profile picture
+   */
+  const goToGalleryLargePic = () => {
+    ImagePicker.openPicker({
+      width: 580,
+      height: 580,
+      cropping: true,
+      cropperToolbarTitle: 'Large profile picture',
+      mediaType: 'photo',
+    })
+      .then((picture) => {
+        if ('path' in picture) {
+          setLargePic(picture.path);
+        }
+      })
+      .catch(() => {});
+  };
+
+  /*
+   * Handles tap on add profile picture buttons by navigating to camera access
+   * and selecting a picture from gallery for small profile picture
+   */
+  const goToGallerySmallPic = () => {
+    ImagePicker.openPicker({
+      width: 580,
+      height: 580,
+      cropping: true,
+      cropperToolbarTitle: 'Small profile picture',
+      mediaType: 'photo',
+      cropperCircleOverlay: true,
+    })
+      .then((picture) => {
+        if ('path' in picture) {
+          setSmallPic(picture.path);
+        }
+      })
+      .catch(() => {});
+  };
+
+  const handleSubmit = async () => {
+    const form = new FormData();
+    if (largePic) {
+      form.append('largeProfilePicture', {
+        uri: largePic,
+        name: 'large_profile_pic.jpg',
+        type: 'image/jpg',
+      });
+    }
+    if (smallPic) {
+      form.append('smallProfilePicture', {
+        uri: smallPic,
+        name: 'small_profile_pic.jpg',
+        type: 'image/jpg',
+      });
+    }
+    const endpoint = REGISTER_ENDPOINT + `${userId}/`;
+    try {
+      let response = await fetch(endpoint, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+        body: form,
+      });
+      let data = await response.json();
+      let statusCode = response.status;
+      if (statusCode === 200) {
+        Alert.alert(
+          'Profile successfully created! 🥳',
+          `Welcome to Tagg, ${username}!`,
+        );
+      } else if (statusCode === 400) {
+        Alert.alert('Profile update failed. 😔', `${data}`);
+      } else {
+        Alert.alert(
+          'Something went wrong! 😭',
+          "Would you believe me if I told you that I don't know what happened?",
+        );
+      }
+    } catch (error) {
+      Alert.alert(
+        'Profile creation failed 😓',
+        'Please double-check your network connection and retry.',
+      );
+      return {
+        name: 'Profile creation error',
+        description: error,
+      };
+    }
+  };
+
+  return (
+    <Background centered>
+      <StatusBar barStyle="light-content" />
+      <LargeProfilePic />
+      <SmallProfilePic />
+      <View style={styles.dummyField}>
+        <Text>DUMMY WEBSITE</Text>
+      </View>
+      <View style={styles.dummyField}>
+        <Text>DUMMY BIO</Text>
+      </View>
+      <TouchableOpacity onPress={handleSubmit} style={styles.submitBtn}>
+        <Text style={styles.submitBtnLabel}>Let's start!</Text>
+      </TouchableOpacity>
+    </Background>
+  );
+};
+
+const styles = StyleSheet.create({
+  largeProfile: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 15,
+    height: 230,
+    width: 230,
+    borderRadius: 23,
+    backgroundColor: '#fff',
+    marginRight: '6%',
+  },
+  largeProfileText: {
+    textAlign: 'center',
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#863FF9',
+  },
+  smallProfile: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+    height: 110,
+    width: 110,
+    borderRadius: 55,
+    backgroundColor: '#E1F0FF',
+    marginLeft: '45%',
+    bottom: '7%',
+  },
+  smallProfileText: {
+    textAlign: 'center',
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#806DF4',
+  },
+  profilePic: {
+    marginRight: 0,
+    marginLeft: 0,
+    bottom: 0,
+  },
+  dummyField: {
+    height: '10%',
+    width: '80%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderColor: '#fff',
+    borderWidth: 1,
+    borderRadius: 8,
+    marginBottom: '10%',
+  },
+  submitBtn: {
+    backgroundColor: '#8F01FF',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 150,
+    height: 40,
+    borderRadius: 5,
+  },
+  submitBtnLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#fff',
+  },
+});
+
+export default ProfileOnboarding;