[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

1 files changed, 122 insertions, 0 deletions

diff --git a/src/routes/authentication/AuthProvider.tsx b/src/routes/authentication/AuthProvider.tsx
new file mode 100644
index 00000000..bd5706f3
--- /dev/null
+++ b/src/routes/authentication/AuthProvider.tsx
@@ -0,0 +1,122 @@
+import React, {useEffect} from 'react';
+import {createContext, useState} from 'react';
+import RNFetchBlob from 'rn-fetch-blob';
+import {UserType, ProfileType} from '../../types';
+import {
+  PROFILE_INFO_ENDPOINT,
+  AVATAR_PHOTO_ENDPOINT,
+  COVER_PHOTO_ENDPOINT,
+} from '../../constants';
+
+interface AuthContextProps {
+  user: UserType;
+  profile: ProfileType;
+  login: (userId: string, username: string) => void;
+  logout: () => void;
+  avatar: string | null;
+  cover: string | null;
+}
+const NO_USER: UserType = {
+  userId: '',
+  username: '',
+};
+const NO_PROFILE: ProfileType = {
+  biography: '',
+  website: '',
+  name: '',
+};
+export const AuthContext = createContext<AuthContextProps>({
+  user: NO_USER,
+  profile: NO_PROFILE,
+  login: () => {},
+  logout: () => {},
+  avatar: null,
+  cover: null,
+});
+
+/**
+ * Authentication provider for the application.
+ */
+const AuthProvider: React.FC = ({children}) => {
+  const [user, setUser] = useState<UserType>(NO_USER);
+  const [profile, setProfile] = useState<ProfileType>(NO_PROFILE);
+  const [avatar, setAvatar] = useState<string | null>(null);
+  const [cover, setCover] = useState<string | null>(null);
+
+  const {userId} = user;
+  useEffect(() => {
+    if (!userId) {
+      return;
+    }
+    const loadProfileInfo = async () => {
+      try {
+        const response = await fetch(PROFILE_INFO_ENDPOINT + `${userId}/`, {
+          method: 'GET',
+        });
+        const status = response.status;
+        if (status === 200) {
+          const info = await response.json();
+          let {name, biography, website} = info;
+          setProfile({name, biography, website});
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    const loadAvatar = async () => {
+      try {
+        const response = await RNFetchBlob.config({
+          fileCache: true,
+          appendExt: 'jpg',
+        }).fetch('GET', AVATAR_PHOTO_ENDPOINT + `${userId}/`);
+        const status = response.info().status;
+        if (status === 200) {
+          setAvatar(response.path());
+        } else {
+          setAvatar('');
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    const loadCover = async () => {
+      try {
+        let response = await RNFetchBlob.config({
+          fileCache: true,
+          appendExt: 'jpg',
+        }).fetch('GET', COVER_PHOTO_ENDPOINT + `${userId}/`);
+        const status = response.info().status;
+        if (status === 200) {
+          setCover(response.path());
+        } else {
+          setCover('');
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    loadProfileInfo();
+    loadAvatar();
+    loadCover();
+  }, [userId]);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        profile,
+        avatar,
+        cover,
+        login: (id, username) => {
+          setUser({...user, userId: id, username});
+        },
+        logout: () => {
+          setUser(NO_USER);
+        },
+      }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export default AuthProvider;