From ab7fa09af967e0a8cf2ca53dfb24f8bc8a6886f7 Mon Sep 17 00:00:00 2001
From: Ashm Walia <40498934+ashmgarv@users.noreply.github.com>
Date: Sun, 18 Oct 2020 16:37:32 -0700
Subject: [TMA 279] Ability to search and view someone's profile (#58)

* Batch one : major changes

* WIP checkpoint

* The one before the final touch

* Probable final touch

* ran yarn lint D:

* linter broke something

* fixed a small bug

* Addressed a small nitpick

* Well abstracted now

Co-authored-by: Ivan Chen <ivan@thetaggid.com>
---
 src/components/profile/Avatar.tsx        |  9 ++++++---
 src/components/profile/Content.tsx       | 24 +++++++++++++++---------
 src/components/profile/Cover.tsx         |  9 ++++++---
 src/components/profile/ProfileBody.tsx   |  9 ++++++---
 src/components/profile/ProfileHeader.tsx | 14 ++++++++++----
 5 files changed, 43 insertions(+), 22 deletions(-)

(limited to 'src/components/profile')

diff --git a/src/components/profile/Avatar.tsx b/src/components/profile/Avatar.tsx
index a0f7596c..aca3bf4d 100644
--- a/src/components/profile/Avatar.tsx
+++ b/src/components/profile/Avatar.tsx
@@ -1,13 +1,16 @@
 import React from 'react';
 import {Image, StyleSheet} from 'react-native';
-import {AuthContext} from '../../routes/authentication';
+import {AuthContext, ProfileContext} from '../../routes/';
 
 const PROFILE_DIM = 100;
 interface AvatarProps {
   style: object;
+  isProfileView: boolean;
 }
-const Avatar: React.FC<AvatarProps> = ({style}) => {
-  const {avatar} = React.useContext(AuthContext);
+const Avatar: React.FC<AvatarProps> = ({style, isProfileView}) => {
+  const {avatar} = isProfileView
+    ? React.useContext(ProfileContext)
+    : React.useContext(AuthContext);
   return (
     <Image
       style={[styles.image, style]}
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index a3b9e74a..8d368747 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,5 +1,6 @@
 import React, {useState} from 'react';
 import {LayoutChangeEvent, StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-animatable';
 import Animated from 'react-native-reanimated';
 import {defaultMoments} from '../../constants';
 import {SCREEN_HEIGHT} from '../../utils';
@@ -11,8 +12,9 @@ import ProfileHeader from './ProfileHeader';
 
 interface ContentProps {
   y: Animated.Value<number>;
+  isProfileView: boolean;
 }
-const Content: React.FC<ContentProps> = ({y}) => {
+const Content: React.FC<ContentProps> = ({y, isProfileView}) => {
   const [profileBodyHeight, setProfileBodyHeight] = useState(0);
   const onLayout = (e: LayoutChangeEvent) => {
     const {height} = e.nativeEvent.layout;
@@ -26,15 +28,19 @@ const Content: React.FC<ContentProps> = ({y}) => {
       scrollEventThrottle={1}
       stickyHeaderIndices={[2, 4]}>
       <ProfileCutout>
-        <ProfileHeader />
+        <ProfileHeader {...{isProfileView}} />
       </ProfileCutout>
-      <ProfileBody {...{onLayout}} />
-      <TaggsBar {...{y, profileBodyHeight}} />
-      <View style={styles.momentsContainer}>
-        {defaultMoments.map((title, index) => (
-          <Moment key={index} title={title} images={[]} />
-        ))}
-      </View>
+      <ProfileBody {...{onLayout, isProfileView}} />
+      <TaggsBar {...{y, profileBodyHeight, isProfileView}} />
+      {!isProfileView ? (
+        <View style={styles.momentsContainer}>
+          {defaultMoments.map((title, index) => (
+            <Moment key={index} title={title} images={[]} />
+          ))}
+        </View>
+      ) : (
+        <React.Fragment />
+      )}
     </Animated.ScrollView>
   );
 };
diff --git a/src/components/profile/Cover.tsx b/src/components/profile/Cover.tsx
index 01199f06..37ecb9bd 100644
--- a/src/components/profile/Cover.tsx
+++ b/src/components/profile/Cover.tsx
@@ -2,14 +2,17 @@ import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import Animated from 'react-native-reanimated';
 import {IMAGE_WIDTH, COVER_HEIGHT} from '../../constants';
-import {AuthContext} from '../../routes/authentication';
+import {AuthContext, ProfileContext} from '../../routes/';
 
 const {interpolate, Extrapolate} = Animated;
 interface CoverProps {
   y: Animated.Value<number>;
+  isProfileView: boolean;
 }
-const Cover: React.FC<CoverProps> = ({y}) => {
-  const {cover} = React.useContext(AuthContext);
+const Cover: React.FC<CoverProps> = ({y, isProfileView}) => {
+  const {cover} = isProfileView
+    ? React.useContext(ProfileContext)
+    : React.useContext(AuthContext);
   const scale: Animated.Node<number> = interpolate(y, {
     inputRange: [-COVER_HEIGHT, 0],
     outputRange: [1.5, 1.25],
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index e8d8de62..53b86708 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -1,15 +1,18 @@
 import React from 'react';
 import {StyleSheet, View, Text, LayoutChangeEvent} from 'react-native';
-import {AuthContext} from '../../routes/authentication';
+import {AuthContext, ProfileContext} from '../../routes/';
 
 interface ProfileBodyProps {
   onLayout: (event: LayoutChangeEvent) => void;
+  isProfileView: boolean;
 }
-const ProfileBody: React.FC<ProfileBodyProps> = ({onLayout}) => {
+const ProfileBody: React.FC<ProfileBodyProps> = ({onLayout, isProfileView}) => {
   const {
     profile,
     user: {username},
-  } = React.useContext(AuthContext);
+  } = isProfileView
+    ? React.useContext(ProfileContext)
+    : React.useContext(AuthContext);
   const {biography, website} = profile;
   return (
     <View onLayout={onLayout} style={styles.container}>
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index ec382357..62c103fd 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -4,16 +4,22 @@ import Avatar from './Avatar';
 import FollowCount from './FollowCount';
 import {View, Text, StyleSheet} from 'react-native';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import {AuthContext} from '../../routes/authentication';
+import {AuthContext, ProfileContext} from '../../routes/';
 
-const ProfileHeader: React.FC = () => {
+type ProfileHeaderProps = {
+  isProfileView: boolean;
+};
+
+const ProfileHeader: React.FC<ProfileHeaderProps> = ({isProfileView}) => {
   const {
     profile: {name},
-  } = React.useContext(AuthContext);
+  } = isProfileView
+    ? React.useContext(ProfileContext)
+    : React.useContext(AuthContext);
   return (
     <View style={styles.container}>
       <View style={styles.row}>
-        <Avatar style={styles.avatar} />
+        <Avatar style={styles.avatar} isProfileView={isProfileView} />
         <View style={styles.header}>
           <Text style={styles.name}>{name}</Text>
           <View style={styles.row}>
-- 
cgit v1.2.3-70-g09d2