[TMA-122] User Profile Screen UI (#27)

* Fix yarn lint issues

* Add react-native-svg to project

* Create UserType & PostType

* Create temporary Post component

* Fix import cycle warning, update AuthContext

* Update onboarding screen imports

* Update config files

* Add rn-fetch-blob package

* Update types

* Add profile fetching to AuthContext

* Update post component

* Import placeholder images from designs

* Add profile UI components

* Create screen offset constants

* Add new api endpoints

* Create screen layout utils

* Create Profile screen UI

* Remove some unused styling

* Restructure ProfileScreen and fix animations

* Add gradient back to screen

* Update Moment circle styling

6 files changed, 28 insertions, 24 deletions

diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index 7b76e97c..5c569ec3 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -13,13 +13,14 @@ import {
   Platform,
 } from 'react-native';
 
-import {RootStackParamList, AuthContext} from '../../routes';
+import {OnboardingStackParams} from '../../routes/onboarding';
+import {AuthContext} from '../../routes/authentication';
 import {Background, TaggInput, SubmitButton} from '../../components';
 import {usernameRegex, LOGIN_ENDPOINT} from '../../constants';
 
-type VerificationScreenRouteProp = RouteProp<RootStackParamList, 'Login'>;
+type VerificationScreenRouteProp = RouteProp<OnboardingStackParams, 'Login'>;
 type VerificationScreenNavigationProp = StackNavigationProp<
-  RootStackParamList,
+  OnboardingStackParams,
   'Login'
 >;
 interface LoginProps {
@@ -98,9 +99,9 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
   };
 
   /**
-   * Handler for the Let's Start button or the Go button on the keyboard.
-    Makes a POST request to the Django login API and presents Alerts based on the status codes that the backend returns.
-   */
+           * Handler for the Let's Start button or the Go button on the keyboard.
+            Makes a POST request to the Django login API and presents Alerts based on the status codes that the backend returns.
+           */
   const handleLogin = async () => {
     if (!form.attemptedSubmit) {
       setForm({
@@ -110,17 +111,19 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
     }
     try {
       if (form.isValidUser && form.isValidPassword) {
+        const {username, password} = form;
         let response = await fetch(LOGIN_ENDPOINT, {
           method: 'POST',
           body: JSON.stringify({
-            username: form.username,
-            password: form.password,
+            username,
+            password,
           }),
         });
 
         let statusCode = response.status;
+        let data = await response.json();
         if (statusCode === 200) {
-          login();
+          login(data.UserID, username);
         } else if (statusCode === 401) {
           Alert.alert(
             'Login failed 😔',
diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/ProfileOnboarding.tsx
index 6ce1ff80..9405ca52 100644
--- a/src/screens/onboarding/ProfileOnboarding.tsx
+++ b/src/screens/onboarding/ProfileOnboarding.tsx
@@ -10,17 +10,18 @@ import {
   Alert,
   View,
 } from 'react-native';
-import {RootStackParamList, AuthContext} from '../../routes';
+import {OnboardingStackParams} from '../../routes/onboarding';
+import {AuthContext} from '../../routes/authentication';
 import {Background} from '../../components';
 import ImagePicker from 'react-native-image-crop-picker';
 import {REGISTER_ENDPOINT} from '../../constants';
 
 type ProfileOnboardingScreenRouteProp = RouteProp<
-  RootStackParamList,
+  OnboardingStackParams,
   'ProfileOnboarding'
 >;
 type ProfileOnboardingScreenNavigationProp = StackNavigationProp<
-  RootStackParamList,
+  OnboardingStackParams,
   'ProfileOnboarding'
 >;
 interface ProfileOnboardingProps {
@@ -150,10 +151,10 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({route}) => {
         },
         body: form,
       });
-      let data = await response.json();
       let statusCode = response.status;
+      let data = await response.json();
       if (statusCode === 200) {
-        login();
+        login(userId, username);
       } else if (statusCode === 400) {
         Alert.alert('Profile update failed. 😔', `${data}`);
       } else {
diff --git a/src/screens/onboarding/RegistrationOne.tsx b/src/screens/onboarding/RegistrationOne.tsx
index 3b9ddb3e..720fcaed 100644
--- a/src/screens/onboarding/RegistrationOne.tsx
+++ b/src/screens/onboarding/RegistrationOne.tsx
@@ -12,7 +12,7 @@ import {
   KeyboardAvoidingView,
 } from 'react-native';
 
-import {RootStackParamList} from '../../routes';
+import {OnboardingStackParams} from '../../routes';
 import {
   ArrowButton,
   RegistrationWizard,
@@ -22,11 +22,11 @@ import {
 import {nameRegex, emailRegex} from '../../constants';
 
 type RegistrationScreenOneRouteProp = RouteProp<
-  RootStackParamList,
+  OnboardingStackParams,
   'RegistrationOne'
 >;
 type RegistrationScreenOneNavigationProp = StackNavigationProp<
-  RootStackParamList,
+  OnboardingStackParams,
   'RegistrationOne'
 >;
 interface RegistrationOneProps {
diff --git a/src/screens/onboarding/RegistrationTwo.tsx b/src/screens/onboarding/RegistrationTwo.tsx
index 09e217f6..b67c2403 100644
--- a/src/screens/onboarding/RegistrationTwo.tsx
+++ b/src/screens/onboarding/RegistrationTwo.tsx
@@ -14,7 +14,7 @@ import {
 } from 'react-native';
 import {usePromiseTracker, trackPromise} from 'react-promise-tracker';
 
-import {RootStackParamList} from '../../routes';
+import {OnboardingStackParams} from '../../routes';
 import {
   ArrowButton,
   RegistrationWizard,
@@ -30,11 +30,11 @@ import {
 } from '../../constants';
 
 type RegistrationScreenTwoRouteProp = RouteProp<
-  RootStackParamList,
+  OnboardingStackParams,
   'RegistrationTwo'
 >;
 type RegistrationScreenTwoNavigationProp = StackNavigationProp<
-  RootStackParamList,
+  OnboardingStackParams,
   'RegistrationTwo'
 >;
 interface RegistrationTwoProps {
diff --git a/src/screens/onboarding/Verification.tsx b/src/screens/onboarding/Verification.tsx
index 197bc0ca..0676bb3a 100644
--- a/src/screens/onboarding/Verification.tsx
+++ b/src/screens/onboarding/Verification.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {RootStackParamList} from '../../routes';
+import {OnboardingStackParams} from '../../routes';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import {Background, RegistrationWizard, SubmitButton} from '../../components';
@@ -23,11 +23,11 @@ import {
 import {usePromiseTracker, trackPromise} from 'react-promise-tracker';
 
 type VerificationScreenRouteProp = RouteProp<
-  RootStackParamList,
+  OnboardingStackParams,
   'Verification'
 >;
 type VerificationScreenNavigationProp = StackNavigationProp<
-  RootStackParamList,
+  OnboardingStackParams,
   'Verification'
 >;
 interface VerificationProps {
diff --git a/src/screens/onboarding/index.ts b/src/screens/onboarding/index.ts
index 9b2f4cb0..7a9816e7 100644
--- a/src/screens/onboarding/index.ts
+++ b/src/screens/onboarding/index.ts
@@ -1,5 +1,5 @@
 export {default as Login} from './Login';
+export {default as ProfileOnboarding} from './ProfileOnboarding';
 export {default as RegistrationOne} from './RegistrationOne';
 export {default as RegistrationTwo} from './RegistrationTwo';
 export {default as Verification} from './Verification';
-export {default as ProfileOnboarding} from './ProfileOnboarding';