From 1279249ee9355f88913578f51e3b0bf7d99672f6 Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Wed, 5 Aug 2020 14:15:06 -0700
Subject: [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
---
 src/components/common/GradientBackground.tsx | 17 +++++-----
 src/components/common/index.ts               |  1 +
 src/components/common/post/Post.tsx          | 26 ++++++++++++++
 src/components/common/post/PostHeader.tsx    | 51 ++++++++++++++++++++++++++++
 src/components/common/post/index.ts          |  1 +
 5 files changed, 87 insertions(+), 9 deletions(-)
 create mode 100644 src/components/common/post/Post.tsx
 create mode 100644 src/components/common/post/PostHeader.tsx
 create mode 100644 src/components/common/post/index.ts

(limited to 'src/components/common')

diff --git a/src/components/common/GradientBackground.tsx b/src/components/common/GradientBackground.tsx
index f363bd61..c1247ca2 100644
--- a/src/components/common/GradientBackground.tsx
+++ b/src/components/common/GradientBackground.tsx
@@ -5,20 +5,19 @@ import {
   TouchableWithoutFeedback,
   Keyboard,
   ViewProps,
-  SafeAreaView,
 } from 'react-native';
 
 interface GradientBackgroundProps extends ViewProps {}
 const GradientBackground: React.FC<GradientBackgroundProps> = (props) => {
   return (
-    <LinearGradient
-      locations={[0.89, 1]}
-      colors={['transparent', 'rgba(0, 0, 0, 0.6)']}
-      style={styles.container}>
-      <TouchableWithoutFeedback accessible={false} onPress={Keyboard.dismiss}>
-        <SafeAreaView {...props}>{props.children}</SafeAreaView>
-      </TouchableWithoutFeedback>
-    </LinearGradient>
+    <TouchableWithoutFeedback accessible={false} onPress={Keyboard.dismiss}>
+      <LinearGradient
+        locations={[0.89, 1]}
+        colors={['transparent', 'rgba(0, 0, 0, 0.6)']}
+        style={styles.container}>
+        {props.children}
+      </LinearGradient>
+    </TouchableWithoutFeedback>
   );
 };
 
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index a1bcc558..826675ff 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -4,3 +4,4 @@ export {default as RadioCheckbox} from './RadioCheckbox';
 export {default as TaggInput} from './TaggInput';
 export {default as NavigationIcon} from './NavigationIcon';
 export {default as GradientBackground} from './GradientBackground';
+export {default as Post} from './post';
diff --git a/src/components/common/post/Post.tsx b/src/components/common/post/Post.tsx
new file mode 100644
index 00000000..d6c5a7d6
--- /dev/null
+++ b/src/components/common/post/Post.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+import {PostType} from '../../../types';
+import PostHeader from './PostHeader';
+import {SCREEN_WIDTH} from '../../../utils';
+
+interface PostProps {
+  post: PostType;
+}
+const Post: React.FC<PostProps> = ({post: {owner}}) => {
+  return (
+    <>
+      <PostHeader owner={owner} />
+      <View style={styles.image} />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  image: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_WIDTH,
+    backgroundColor: '#eee',
+  },
+});
+export default Post;
diff --git a/src/components/common/post/PostHeader.tsx b/src/components/common/post/PostHeader.tsx
new file mode 100644
index 00000000..8558d21d
--- /dev/null
+++ b/src/components/common/post/PostHeader.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import {UserType} from '../../../types';
+import {View, StyleSheet, Image, Text} from 'react-native';
+import {AuthContext} from '../../../routes/authentication';
+
+const AVATAR_DIM = 35;
+interface PostHeaderProps {
+  owner: UserType;
+}
+const PostHeader: React.FC<PostHeaderProps> = ({owner: {username}}) => {
+  const {avatar} = React.useContext(AuthContext);
+  return (
+    <View style={styles.container}>
+      <View style={styles.leftElem}>
+        <Image
+          style={styles.avatar}
+          source={
+            avatar
+              ? {uri: avatar}
+              : require('../../../assets/images/avatar-placeholder.png')
+          }
+        />
+        <Text style={styles.username}>{username}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 10,
+    backgroundColor: 'white',
+  },
+  leftElem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  avatar: {
+    width: AVATAR_DIM,
+    height: AVATAR_DIM,
+    borderRadius: AVATAR_DIM / 2,
+    marginRight: 10,
+  },
+  username: {
+    fontSize: 18,
+  },
+});
+
+export default PostHeader;
diff --git a/src/components/common/post/index.ts b/src/components/common/post/index.ts
new file mode 100644
index 00000000..033f8a8d
--- /dev/null
+++ b/src/components/common/post/index.ts
@@ -0,0 +1 @@
+export {default} from './Post';
-- 
cgit v1.2.3-70-g09d2