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/App.tsx | 6 +- src/assets/images/avatar-placeholder.png | Bin 0 -> 2982 bytes src/assets/images/avatar-placeholder@2x.png | Bin 0 -> 6245 bytes src/assets/images/avatar-placeholder@3x.png | Bin 0 -> 7604 bytes src/assets/images/cover-placeholder.png | Bin 0 -> 10081 bytes src/assets/images/cover-placeholder@2x.png | Bin 0 -> 24052 bytes src/assets/images/cover-placeholder@3x.png | Bin 0 -> 41741 bytes 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 + src/components/index.ts | 1 + src/components/profile/Avatar.tsx | 31 +++++++ src/components/profile/Content.tsx | 58 +++++++++++++ src/components/profile/Cover.tsx | 41 +++++++++ src/components/profile/Feed.tsx | 25 ++++++ src/components/profile/FollowCount.tsx | 42 +++++++++ src/components/profile/Moment.tsx | 35 ++++++++ src/components/profile/MomentsBar.tsx | 75 ++++++++++++++++ src/components/profile/ProfileBody.tsx | 46 ++++++++++ src/components/profile/ProfileCutout.tsx | 23 +++++ src/components/profile/ProfileHeader.tsx | 62 ++++++++++++++ src/components/profile/index.ts | 7 ++ src/constants/api.ts | 17 ++-- src/constants/constants.ts | 10 +++ src/constants/index.ts | 1 + src/routes/NavigationBar.tsx | 75 ---------------- src/routes/OnboardingStack.tsx | 57 ------------- src/routes/Routes.tsx | 44 ++-------- src/routes/authentication/AuthProvider.tsx | 122 +++++++++++++++++++++++++++ src/routes/authentication/index.ts | 2 + src/routes/index.ts | 10 +-- src/routes/onboarding/Onboarding.tsx | 43 ++++++++++ src/routes/onboarding/OnboardingStack.tsx | 13 +++ src/routes/onboarding/index.ts | 2 + src/routes/tabs/NavigationBar.tsx | 73 ++++++++++++++++ src/routes/tabs/index.ts | 1 + src/screens/index.ts | 3 + src/screens/main/Profile.tsx | 24 ------ src/screens/main/index.ts | 1 - src/screens/onboarding/Login.tsx | 21 +++-- src/screens/onboarding/ProfileOnboarding.tsx | 11 +-- src/screens/onboarding/RegistrationOne.tsx | 6 +- src/screens/onboarding/RegistrationTwo.tsx | 6 +- src/screens/onboarding/Verification.tsx | 6 +- src/screens/onboarding/index.ts | 2 +- src/screens/profile/ProfileScreen.tsx | 26 ++++++ src/screens/profile/index.ts | 1 + src/types/index.ts | 1 + src/types/types.ts | 14 +++ src/utils/index.ts | 2 + src/utils/screenDimensions.ts | 6 ++ src/utils/statusBarHeight.ts | 19 +++++ 54 files changed, 925 insertions(+), 242 deletions(-) create mode 100644 src/assets/images/avatar-placeholder.png create mode 100644 src/assets/images/avatar-placeholder@2x.png create mode 100644 src/assets/images/avatar-placeholder@3x.png create mode 100644 src/assets/images/cover-placeholder.png create mode 100644 src/assets/images/cover-placeholder@2x.png create mode 100644 src/assets/images/cover-placeholder@3x.png 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 create mode 100644 src/components/profile/Avatar.tsx create mode 100644 src/components/profile/Content.tsx create mode 100644 src/components/profile/Cover.tsx create mode 100644 src/components/profile/Feed.tsx create mode 100644 src/components/profile/FollowCount.tsx create mode 100644 src/components/profile/Moment.tsx create mode 100644 src/components/profile/MomentsBar.tsx create mode 100644 src/components/profile/ProfileBody.tsx create mode 100644 src/components/profile/ProfileCutout.tsx create mode 100644 src/components/profile/ProfileHeader.tsx create mode 100644 src/components/profile/index.ts create mode 100644 src/constants/constants.ts delete mode 100644 src/routes/NavigationBar.tsx delete mode 100644 src/routes/OnboardingStack.tsx create mode 100644 src/routes/authentication/AuthProvider.tsx create mode 100644 src/routes/authentication/index.ts create mode 100644 src/routes/onboarding/Onboarding.tsx create mode 100644 src/routes/onboarding/OnboardingStack.tsx create mode 100644 src/routes/onboarding/index.ts create mode 100644 src/routes/tabs/NavigationBar.tsx create mode 100644 src/routes/tabs/index.ts create mode 100644 src/screens/index.ts delete mode 100644 src/screens/main/Profile.tsx create mode 100644 src/screens/profile/ProfileScreen.tsx create mode 100644 src/screens/profile/index.ts create mode 100644 src/types/index.ts create mode 100644 src/types/types.ts create mode 100644 src/utils/index.ts create mode 100644 src/utils/screenDimensions.ts create mode 100644 src/utils/statusBarHeight.ts (limited to 'src') diff --git a/src/App.tsx b/src/App.tsx index 5abf1ff4..2e6865fd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,14 +1,14 @@ import React from 'react'; import {NavigationContainer} from '@react-navigation/native'; -import {Routes, AuthContextProvider} from './routes'; +import Routes, {AuthProvider} from './routes'; const App = () => { return ( - + - + ); }; diff --git a/src/assets/images/avatar-placeholder.png b/src/assets/images/avatar-placeholder.png new file mode 100644 index 00000000..313f384e Binary files /dev/null and b/src/assets/images/avatar-placeholder.png differ diff --git a/src/assets/images/avatar-placeholder@2x.png b/src/assets/images/avatar-placeholder@2x.png new file mode 100644 index 00000000..d038441e Binary files /dev/null and b/src/assets/images/avatar-placeholder@2x.png differ diff --git a/src/assets/images/avatar-placeholder@3x.png b/src/assets/images/avatar-placeholder@3x.png new file mode 100644 index 00000000..814472ec Binary files /dev/null and b/src/assets/images/avatar-placeholder@3x.png differ diff --git a/src/assets/images/cover-placeholder.png b/src/assets/images/cover-placeholder.png new file mode 100644 index 00000000..e27eb9bd Binary files /dev/null and b/src/assets/images/cover-placeholder.png differ diff --git a/src/assets/images/cover-placeholder@2x.png b/src/assets/images/cover-placeholder@2x.png new file mode 100644 index 00000000..4aafe9d4 Binary files /dev/null and b/src/assets/images/cover-placeholder@2x.png differ diff --git a/src/assets/images/cover-placeholder@3x.png b/src/assets/images/cover-placeholder@3x.png new file mode 100644 index 00000000..991f5d63 Binary files /dev/null and b/src/assets/images/cover-placeholder@3x.png differ 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 = (props) => { return ( - - - {props.children} - - + + + {props.children} + + ); }; 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 = ({post: {owner}}) => { + return ( + <> + + + + ); +}; + +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 = ({owner: {username}}) => { + const {avatar} = React.useContext(AuthContext); + return ( + + + + {username} + + + ); +}; + +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'; diff --git a/src/components/index.ts b/src/components/index.ts index 724b14ac..48b7df05 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,2 +1,3 @@ export * from './common'; export * from './onboarding'; +export * from './profile'; diff --git a/src/components/profile/Avatar.tsx b/src/components/profile/Avatar.tsx new file mode 100644 index 00000000..a0f7596c --- /dev/null +++ b/src/components/profile/Avatar.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import {Image, StyleSheet} from 'react-native'; +import {AuthContext} from '../../routes/authentication'; + +const PROFILE_DIM = 100; +interface AvatarProps { + style: object; +} +const Avatar: React.FC = ({style}) => { + const {avatar} = React.useContext(AuthContext); + return ( + + ); +}; + +const styles = StyleSheet.create({ + image: { + height: PROFILE_DIM, + width: PROFILE_DIM, + borderRadius: PROFILE_DIM / 2, + }, +}); + +export default Avatar; diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx new file mode 100644 index 00000000..82b5fdc0 --- /dev/null +++ b/src/components/profile/Content.tsx @@ -0,0 +1,58 @@ +import React, {useState} from 'react'; +import {StyleSheet, LayoutChangeEvent} from 'react-native'; +import Animated from 'react-native-reanimated'; +const {ScrollView} = Animated; + +import {UserType} from '../../types'; +import ProfileCutout from './ProfileCutout'; +import ProfileHeader from './ProfileHeader'; +import ProfileBody from './ProfileBody'; +import MomentsBar from './MomentsBar'; +import Feed from './Feed'; +import LinearGradient from 'react-native-linear-gradient'; +import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; + +interface ContentProps { + y: Animated.Value; + user: UserType; +} +const Content: React.FC = ({y, user}) => { + const [profileBodyHeight, setProfileBodyHeight] = useState(0); + const onLayout = (e: LayoutChangeEvent) => { + const {height} = e.nativeEvent.layout; + setProfileBodyHeight(height); + }; + return ( + y.setValue(e.nativeEvent.contentOffset.y)} + showsVerticalScrollIndicator={false} + scrollEventThrottle={1} + stickyHeaderIndices={[2, 4]}> + + + + + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + gradient: { + height: SCREEN_HEIGHT, + width: SCREEN_WIDTH, + position: 'absolute', + }, +}); + +export default Content; diff --git a/src/components/profile/Cover.tsx b/src/components/profile/Cover.tsx new file mode 100644 index 00000000..01199f06 --- /dev/null +++ b/src/components/profile/Cover.tsx @@ -0,0 +1,41 @@ +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'; + +const {interpolate, Extrapolate} = Animated; +interface CoverProps { + y: Animated.Value; +} +const Cover: React.FC = ({y}) => { + const {cover} = React.useContext(AuthContext); + const scale: Animated.Node = interpolate(y, { + inputRange: [-COVER_HEIGHT, 0], + outputRange: [1.5, 1.25], + extrapolateRight: Extrapolate.CLAMP, + }); + return ( + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + position: 'absolute', + }, + image: { + width: IMAGE_WIDTH, + height: COVER_HEIGHT, + }, +}); +export default Cover; diff --git a/src/components/profile/Feed.tsx b/src/components/profile/Feed.tsx new file mode 100644 index 00000000..6780f8c5 --- /dev/null +++ b/src/components/profile/Feed.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import {PostType, UserType} from '../../types'; +import {Post} from '../common'; + +interface FeedProps { + user: UserType; +} +const Feed: React.FC = ({user}) => { + const posts: Array = []; + const dummyPost: PostType = { + owner: user, + }; + for (let i = 0; i < 20; i++) { + posts.push(dummyPost); + } + return ( + <> + {posts.map((post, index) => ( + + ))} + + ); +}; + +export default Feed; diff --git a/src/components/profile/FollowCount.tsx b/src/components/profile/FollowCount.tsx new file mode 100644 index 00000000..72817e7a --- /dev/null +++ b/src/components/profile/FollowCount.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import {View, Text, StyleSheet, ViewProps} from 'react-native'; + +interface FollowCountProps extends ViewProps { + mode: 'followers' | 'following'; + count: number; +} + +const FollowCount: React.FC = ({style, mode, count}) => { + const displayed: string = + count < 5e3 + ? `${count}` + : count < 1e5 + ? `${(count / 1e3).toFixed(1)}k` + : count < 1e6 + ? `${(count / 1e3).toFixed(0)}k` + : `${count / 1e6}m`; + return ( + + {displayed} + + {mode === 'followers' ? 'Followers' : 'Following'} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + alignItems: 'center', + }, + count: { + fontWeight: '700', + fontSize: 18, + }, + label: { + fontWeight: '400', + fontSize: 16, + }, +}); + +export default FollowCount; diff --git a/src/components/profile/Moment.tsx b/src/components/profile/Moment.tsx new file mode 100644 index 00000000..eaf43fea --- /dev/null +++ b/src/components/profile/Moment.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import {View, StyleSheet, ViewProps} from 'react-native'; +import LinearGradient from 'react-native-linear-gradient'; + +interface MomentProps extends ViewProps {} +const Moment: React.FC = ({style}) => { + return ( + + + + ); +}; + +const styles = StyleSheet.create({ + gradient: { + width: 80, + height: 80, + borderRadius: 40, + justifyContent: 'center', + alignItems: 'center', + }, + image: { + width: 72, + height: 72, + borderRadius: 37.5, + backgroundColor: 'pink', + }, +}); + +export default Moment; diff --git a/src/components/profile/MomentsBar.tsx b/src/components/profile/MomentsBar.tsx new file mode 100644 index 00000000..dcc88d89 --- /dev/null +++ b/src/components/profile/MomentsBar.tsx @@ -0,0 +1,75 @@ +// @refresh react +import React from 'react'; +import {StyleSheet} from 'react-native'; +import Animated from 'react-native-reanimated'; +import Moment from './Moment'; +import {PROFILE_CUTOUT_BOTTOM_Y} from '../../constants'; +import {StatusBarHeight} from '../../utils'; + +const {View, ScrollView, interpolate, Extrapolate} = Animated; +interface MomentsBarProps { + y: Animated.Value; + profileBodyHeight: number; +} +const MomentsBar: React.FC = ({y, profileBodyHeight}) => { + const moments: Array = []; + for (let i = 0; i < 10; i++) { + moments.push(); + } + const shadowOpacity: Animated.Node = interpolate(y, { + inputRange: [ + PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight, + PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight + 20, + ], + outputRange: [0, 0.2], + extrapolate: Extrapolate.CLAMP, + }); + const paddingTop: Animated.Node = interpolate(y, { + inputRange: [ + 0, + PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30, + PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight, + ], + outputRange: [20, 20, StatusBarHeight], + extrapolate: Extrapolate.CLAMP, + }); + const paddingBottom: Animated.Node = interpolate(y, { + inputRange: [ + 0, + PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30, + PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight, + ], + outputRange: [30, 30, 15], + extrapolate: Extrapolate.CLAMP, + }); + return ( + + + {moments} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + backgroundColor: 'white', + shadowColor: '#000', + shadowRadius: 10, + shadowOffset: {width: 0, height: 2}, + zIndex: 1, + }, + contentContainer: { + alignItems: 'center', + paddingHorizontal: 15, + }, + moment: { + marginHorizontal: 14, + }, +}); + +export default MomentsBar; diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx new file mode 100644 index 00000000..e8d8de62 --- /dev/null +++ b/src/components/profile/ProfileBody.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import {StyleSheet, View, Text, LayoutChangeEvent} from 'react-native'; +import {AuthContext} from '../../routes/authentication'; + +interface ProfileBodyProps { + onLayout: (event: LayoutChangeEvent) => void; +} +const ProfileBody: React.FC = ({onLayout}) => { + const { + profile, + user: {username}, + } = React.useContext(AuthContext); + const {biography, website} = profile; + return ( + + {`@${username}`} + {`${biography}`} + {`${website}`} + + ); +}; + +const styles = StyleSheet.create({ + container: { + paddingVertical: 5, + paddingHorizontal: 20, + backgroundColor: 'white', + }, + username: { + fontWeight: '600', + fontSize: 16, + marginBottom: 5, + }, + biography: { + fontSize: 16, + lineHeight: 22, + marginBottom: 5, + }, + website: { + fontSize: 16, + color: '#4E699C', + marginBottom: 5, + }, +}); + +export default ProfileBody; diff --git a/src/components/profile/ProfileCutout.tsx b/src/components/profile/ProfileCutout.tsx new file mode 100644 index 00000000..c5deb06d --- /dev/null +++ b/src/components/profile/ProfileCutout.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import Svg, {Polygon} from 'react-native-svg'; +import { + PROFILE_CUTOUT_CORNER_Y, + PROFILE_CUTOUT_CORNER_X, + PROFILE_CUTOUT_TOP_Y, + PROFILE_CUTOUT_BOTTOM_Y, +} from '../../constants'; +import {SCREEN_WIDTH} from '../../utils'; + +const ProfileCutout: React.FC = ({children}) => { + return ( + + + {children} + + ); +}; + +export default ProfileCutout; diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx new file mode 100644 index 00000000..ec382357 --- /dev/null +++ b/src/components/profile/ProfileHeader.tsx @@ -0,0 +1,62 @@ +import React from 'react'; + +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'; + +const ProfileHeader: React.FC = () => { + const { + profile: {name}, + } = React.useContext(AuthContext); + return ( + + + + + {name} + + + + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + top: SCREEN_HEIGHT / 2.4, + paddingHorizontal: SCREEN_WIDTH / 20, + marginBottom: SCREEN_HEIGHT / 10, + }, + row: { + flexDirection: 'row', + }, + header: { + justifyContent: 'center', + alignItems: 'center', + marginTop: SCREEN_HEIGHT / 40, + marginLeft: SCREEN_WIDTH / 10, + marginBottom: SCREEN_HEIGHT / 50, + }, + avatar: { + bottom: SCREEN_HEIGHT / 80, + }, + name: { + fontSize: 20, + fontWeight: '700', + marginBottom: SCREEN_HEIGHT / 80, + }, + follows: { + marginHorizontal: SCREEN_HEIGHT / 50, + }, +}); + +export default ProfileHeader; diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts new file mode 100644 index 00000000..2052ee5b --- /dev/null +++ b/src/components/profile/index.ts @@ -0,0 +1,7 @@ +export {default as Cover} from './Cover'; +export {default as Content} from './Content'; +export {default as ProfileCutout} from './ProfileCutout'; +export {default as MomentsBar} from './MomentsBar'; +export {default as ProfileBody} from './ProfileBody'; +export {default as ProfileHeader} from './ProfileHeader'; +export {default as Feed} from './Feed'; diff --git a/src/constants/api.ts b/src/constants/api.ts index 657adf03..fd654c53 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -1,7 +1,10 @@ -export const API_ENDPOINT: string = 'http://127.0.0.1:8000/api/'; -export const LOGIN_ENDPOINT: string = 'http://127.0.0.1:8000/api/login/'; -export const LOGOUT_ENDPOINT: string = 'http://127.0.0.1:8000/api/logout/'; -export const REGISTER_ENDPOINT: string = 'http://127.0.0.1:8000/api/register/'; -export const SEND_OTP_ENDPOINT: string = 'http://127.0.0.1:8000/api/send-otp/'; -export const VERIFY_OTP_ENDPOINT: string = - 'http://127.0.0.1:8000/api/verify-otp/'; +const BASE_URL: string = 'http://127.0.0.1:8000/'; +const API_URL: string = BASE_URL + 'api/'; +export const LOGIN_ENDPOINT: string = API_URL + 'login/'; +export const LOGOUT_ENDPOINT: string = API_URL + 'logout/'; +export const REGISTER_ENDPOINT: string = API_URL + 'register/'; +export const SEND_OTP_ENDPOINT: string = API_URL + 'send-otp/'; +export const VERIFY_OTP_ENDPOINT: string = API_URL + 'verify-otp/'; +export const PROFILE_INFO_ENDPOINT: string = API_URL + 'user-profile-info/'; +export const COVER_PHOTO_ENDPOINT: string = API_URL + 'large-profile-pic/'; +export const AVATAR_PHOTO_ENDPOINT: string = API_URL + 'small-profile-pic/'; diff --git a/src/constants/constants.ts b/src/constants/constants.ts new file mode 100644 index 00000000..f79c2c5b --- /dev/null +++ b/src/constants/constants.ts @@ -0,0 +1,10 @@ +import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../utils'; + +export const PROFILE_CUTOUT_TOP_Y = SCREEN_HEIGHT / 2.3; +export const PROFILE_CUTOUT_BOTTOM_Y = SCREEN_HEIGHT / 1.8; +export const PROFILE_CUTOUT_CORNER_X = SCREEN_WIDTH / 2.9; +export const PROFILE_CUTOUT_CORNER_Y = SCREEN_HEIGHT / 1.95; + +export const IMAGE_WIDTH = SCREEN_WIDTH; +export const IMAGE_HEIGHT = SCREEN_WIDTH; +export const COVER_HEIGHT = SCREEN_WIDTH * (7 / 5); diff --git a/src/constants/index.ts b/src/constants/index.ts index deb89e57..7fb47dc6 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -1,3 +1,4 @@ export * from './api'; +export * from './constants'; export * from './regex'; export * from './termsConditions'; diff --git a/src/routes/NavigationBar.tsx b/src/routes/NavigationBar.tsx deleted file mode 100644 index 84c18e00..00000000 --- a/src/routes/NavigationBar.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import React from 'react'; -import {ViewProps} from 'react-native'; -import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; -import {Fragment} from 'react'; -import {NavigationIcon} from '../components'; -import {Home, Notifications, Profile, Search, Upload} from '../screens/main'; - -interface NavigationBarProps extends ViewProps { - centered?: boolean; -} - -const Tab = createBottomTabNavigator(); - -const NavigationBar: React.FC = () => { - return ( - - ({ - tabBarIcon: ({focused}) => { - if (route.name === 'Home') { - return focused ? ( - - ) : ( - - ); - } else if (route.name === 'Search') { - return focused ? ( - - ) : ( - - ); - } else if (route.name === 'Upload') { - return focused ? ( - - ) : ( - - ); - } else if (route.name === 'Notifications') { - return focused ? ( - - ) : ( - - ); - } else if (route.name === 'Profile') { - return focused ? ( - - ) : ( - - ); - } - }, - })} - initialRouteName="Home" - tabBarOptions={{ - showLabel: false, - style: { - backgroundColor: 'transparent', - position: 'absolute', - borderTopWidth: 0, - left: 0, - right: 0, - bottom: 0, - }, - }}> - - - - - - - - ); -}; - -export default NavigationBar; diff --git a/src/routes/OnboardingStack.tsx b/src/routes/OnboardingStack.tsx deleted file mode 100644 index 5e91fe9f..00000000 --- a/src/routes/OnboardingStack.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; -import {createStackNavigator} from '@react-navigation/stack'; -import { - Login, - RegistrationOne, - RegistrationTwo, - Verification, - ProfileOnboarding, -} from '../screens/onboarding'; - -export type RootStackParamList = { - Login: undefined; - RegistrationOne: undefined; - RegistrationTwo: - | {firstName: string; lastName: string; email: string} - | undefined; - Verification: {username: string; email: string; userId: string}; - ProfileOnboarding: {username: string; userId: string}; -}; - -const RootStack = createStackNavigator(); - -interface OnboardingStackProps {} - -const OnboardingStack: React.FC = ({}) => { - return ( - - - - - - - - ); -}; - -export default OnboardingStack; diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx index 43a51b90..92cd3dd2 100644 --- a/src/routes/Routes.tsx +++ b/src/routes/Routes.tsx @@ -1,42 +1,14 @@ import React from 'react'; -import {OnboardingStack, NavigationBar} from './'; -interface RoutesProps {} -interface AuthProviderProps {} +import {AuthContext} from './authentication'; +import NavigationBar from './tabs'; +import Onboarding from './onboarding'; -export const AuthContext = React.createContext<{ - user: boolean; - login: () => void; - logout: () => void; -}>({ - user: false, - login: () => {}, - logout: () => {}, -}); - -export const AuthContextProvider: React.FC = ({ - children, -}) => { - const [loggedIn, setLoggedIn] = React.useState(false); // renders onboarding stack - return ( - { - setLoggedIn(true); - }, - logout: () => { - setLoggedIn(false); - }, - }}> - {children} - - ); -}; - -const Routes: React.FC = ({}) => { - const {user} = React.useContext(AuthContext); - return user ? : ; +const Routes: React.FC = () => { + const { + user: {userId}, + } = React.useContext(AuthContext); + return userId ? : ; }; export default Routes; 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({ + 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(NO_USER); + const [profile, setProfile] = useState(NO_PROFILE); + const [avatar, setAvatar] = useState(null); + const [cover, setCover] = useState(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 ( + { + setUser({...user, userId: id, username}); + }, + logout: () => { + setUser(NO_USER); + }, + }}> + {children} + + ); +}; + +export default AuthProvider; diff --git a/src/routes/authentication/index.ts b/src/routes/authentication/index.ts new file mode 100644 index 00000000..9968ae93 --- /dev/null +++ b/src/routes/authentication/index.ts @@ -0,0 +1,2 @@ +export * from './AuthProvider'; +export {default} from './AuthProvider'; diff --git a/src/routes/index.ts b/src/routes/index.ts index 054a25c3..69697b20 100644 --- a/src/routes/index.ts +++ b/src/routes/index.ts @@ -1,6 +1,4 @@ -export {default as OnboardingStack} from './OnboardingStack'; -export * from './OnboardingStack'; -export {default as NavigationBar} from './NavigationBar'; -export * from './NavigationBar'; -export {default as Routes} from './Routes'; -export * from './Routes'; +export {default as AuthProvider} from './authentication'; +export * from './authentication'; +export * from './onboarding'; +export {default} from './Routes'; diff --git a/src/routes/onboarding/Onboarding.tsx b/src/routes/onboarding/Onboarding.tsx new file mode 100644 index 00000000..d2bfbfd6 --- /dev/null +++ b/src/routes/onboarding/Onboarding.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import {OnboardingStack} from './OnboardingStack'; +import { + Login, + RegistrationOne, + RegistrationTwo, + Verification, + ProfileOnboarding, +} from '../../screens'; + +const Onboarding: React.FC = () => { + return ( + + + + + + + + ); +}; + +export default Onboarding; diff --git a/src/routes/onboarding/OnboardingStack.tsx b/src/routes/onboarding/OnboardingStack.tsx new file mode 100644 index 00000000..f9722d46 --- /dev/null +++ b/src/routes/onboarding/OnboardingStack.tsx @@ -0,0 +1,13 @@ +import {createStackNavigator} from '@react-navigation/stack'; + +export type OnboardingStackParams = { + Login: undefined; + RegistrationOne: undefined; + RegistrationTwo: + | {firstName: string; lastName: string; email: string} + | undefined; + Verification: {username: string; email: string; userId: string}; + ProfileOnboarding: {username: string; userId: string}; +}; + +export const OnboardingStack = createStackNavigator(); diff --git a/src/routes/onboarding/index.ts b/src/routes/onboarding/index.ts new file mode 100644 index 00000000..66b0f3f4 --- /dev/null +++ b/src/routes/onboarding/index.ts @@ -0,0 +1,2 @@ +export * from './OnboardingStack'; +export {default} from './Onboarding'; diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx new file mode 100644 index 00000000..aca968c2 --- /dev/null +++ b/src/routes/tabs/NavigationBar.tsx @@ -0,0 +1,73 @@ +import React from 'react'; +import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; +import {NavigationIcon} from '../../components'; +import { + ProfileScreen, + Home, + Notifications, + Search, + Upload, +} from '../../screens'; + +const Tabs = createBottomTabNavigator(); + +const NavigationBar: React.FC = () => { + return ( + ({ + tabBarIcon: ({focused}) => { + if (route.name === 'Home') { + return focused ? ( + + ) : ( + + ); + } else if (route.name === 'Search') { + return focused ? ( + + ) : ( + + ); + } else if (route.name === 'Upload') { + return focused ? ( + + ) : ( + + ); + } else if (route.name === 'Notifications') { + return focused ? ( + + ) : ( + + ); + } else if (route.name === 'Profile') { + return focused ? ( + + ) : ( + + ); + } + }, + })} + initialRouteName="Profile" + tabBarOptions={{ + showLabel: false, + style: { + backgroundColor: 'transparent', + position: 'absolute', + borderTopWidth: 0, + left: 0, + right: 0, + bottom: 0, + }, + }}> + + + + + + + ); +}; + +export default NavigationBar; diff --git a/src/routes/tabs/index.ts b/src/routes/tabs/index.ts new file mode 100644 index 00000000..8ea77e8f --- /dev/null +++ b/src/routes/tabs/index.ts @@ -0,0 +1 @@ +export {default} from './NavigationBar'; diff --git a/src/screens/index.ts b/src/screens/index.ts new file mode 100644 index 00000000..5dd3007a --- /dev/null +++ b/src/screens/index.ts @@ -0,0 +1,3 @@ +export * from './main'; +export * from './onboarding'; +export * from './profile'; diff --git a/src/screens/main/Profile.tsx b/src/screens/main/Profile.tsx deleted file mode 100644 index 3a6536e4..00000000 --- a/src/screens/main/Profile.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import {Text} from 'react-native-animatable'; -import {StyleSheet} from 'react-native'; -import {GradientBackground} from '../../components'; - -/** - * Profile Screen for a user's logged in profile - * including posts, messaging, and settings - */ - -const Profile: React.FC = () => { - return ( - - Profile Screen 🤩 - - ); -}; -const styles = StyleSheet.create({ - text: { - justifyContent: 'center', - backgroundColor: 'transparent', - }, -}); -export default Profile; diff --git a/src/screens/main/index.ts b/src/screens/main/index.ts index 9bd00c57..fb1bf49b 100644 --- a/src/screens/main/index.ts +++ b/src/screens/main/index.ts @@ -1,5 +1,4 @@ export {default as Home} from './Home'; export {default as Notifications} from './Notifications'; -export {default as Profile} from './Profile'; export {default as Search} from './Search'; export {default as Upload} from './Upload'; 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; +type VerificationScreenRouteProp = RouteProp; type VerificationScreenNavigationProp = StackNavigationProp< - RootStackParamList, + OnboardingStackParams, 'Login' >; interface LoginProps { @@ -98,9 +99,9 @@ const Login: React.FC = ({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 = ({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 = ({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'; diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx new file mode 100644 index 00000000..3d1ef2a8 --- /dev/null +++ b/src/screens/profile/ProfileScreen.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import {Cover, Content} from '../../components'; +import Animated from 'react-native-reanimated'; +import {AuthContext} from '../../routes/authentication'; +import {StatusBar} from 'react-native'; + +// destructure Value object from Animated +const {Value} = Animated; + +/** + * Profile Screen for a user's logged in profile + * including posts, messaging, and settings + */ +const ProfileScreen: React.FC = () => { + const {user} = React.useContext(AuthContext); + const y = new Value(0); + return ( + <> + + + + + ); +}; + +export default ProfileScreen; diff --git a/src/screens/profile/index.ts b/src/screens/profile/index.ts new file mode 100644 index 00000000..0ade259d --- /dev/null +++ b/src/screens/profile/index.ts @@ -0,0 +1 @@ +export {default as ProfileScreen} from './ProfileScreen'; diff --git a/src/types/index.ts b/src/types/index.ts new file mode 100644 index 00000000..fcb073fe --- /dev/null +++ b/src/types/index.ts @@ -0,0 +1 @@ +export * from './types'; diff --git a/src/types/types.ts b/src/types/types.ts new file mode 100644 index 00000000..1a023932 --- /dev/null +++ b/src/types/types.ts @@ -0,0 +1,14 @@ +export interface UserType { + userId: string; + username: string; +} + +export interface ProfileType { + name: string; + biography: string; + website: string; +} + +export interface PostType { + owner: UserType; +} diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 00000000..5bc168e3 --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1,2 @@ +export * from './screenDimensions'; +export * from './statusBarHeight'; diff --git a/src/utils/screenDimensions.ts b/src/utils/screenDimensions.ts new file mode 100644 index 00000000..56277ddc --- /dev/null +++ b/src/utils/screenDimensions.ts @@ -0,0 +1,6 @@ +import {Dimensions} from 'react-native'; + +const {width, height} = Dimensions.get('window'); + +export const SCREEN_WIDTH = width; +export const SCREEN_HEIGHT = height; diff --git a/src/utils/statusBarHeight.ts b/src/utils/statusBarHeight.ts new file mode 100644 index 00000000..4c68f9ee --- /dev/null +++ b/src/utils/statusBarHeight.ts @@ -0,0 +1,19 @@ +import {Platform, StatusBar} from 'react-native'; +import {SCREEN_WIDTH, SCREEN_HEIGHT} from './screenDimensions'; + +const X_WIDTH = 375; +const X_HEIGHT = 812; +const XSMAX_WIDTH = 414; +const XSMAX_HEIGHT = 896; + +const isIPhoneX = () => + Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS + ? (SCREEN_WIDTH === X_WIDTH && SCREEN_HEIGHT === X_HEIGHT) || + (SCREEN_WIDTH === XSMAX_WIDTH && SCREEN_HEIGHT === XSMAX_HEIGHT) + : false; + +export const StatusBarHeight = Platform.select({ + ios: isIPhoneX() ? 44 : 20, + android: StatusBar.currentHeight, + default: 0, +}); -- cgit v1.2.3-70-g09d2