diff options
Diffstat (limited to 'src/components/profile')
| -rw-r--r-- | src/components/profile/Avatar.tsx | 9 | ||||
| -rw-r--r-- | src/components/profile/Content.tsx | 24 | ||||
| -rw-r--r-- | src/components/profile/Cover.tsx | 9 | ||||
| -rw-r--r-- | src/components/profile/ProfileBody.tsx | 9 | ||||
| -rw-r--r-- | src/components/profile/ProfileHeader.tsx | 14 |
5 files changed, 43 insertions, 22 deletions
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}> |
