From 0f332655d2b64700623f25912d2610517fb954b6 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 7 Oct 2020 20:17:13 -0400 Subject: [TMA-186] Instagram Taggs - Frontend (#45) * Renamed Moments(Bar) to Taggs(Bar) * created initial navigation and empty social media taggs screen * made more progress for the header styling * Finished social media taggs screen, organized code structure * linted stuff D: * moved bar height utility function to utils * moved color constants to constants * moved avatar title * updated comments for social media taggs * NOW the file is there --- src/components/common/AvatarTitle.tsx | 46 ++++++++++++++++++++ src/components/common/index.ts | 3 +- src/components/common/post/Post.tsx | 8 ++-- src/components/common/post/index.ts | 2 +- src/components/index.ts | 1 + src/components/profile/Content.tsx | 4 +- src/components/profile/Feed.tsx | 3 +- src/components/profile/Moment.tsx | 35 --------------- src/components/profile/MomentsBar.tsx | 75 -------------------------------- src/components/profile/index.ts | 1 - src/components/taggs/SocialMediaInfo.tsx | 55 +++++++++++++++++++++++ src/components/taggs/Tagg.tsx | 47 ++++++++++++++++++++ src/components/taggs/TaggPost.tsx | 39 +++++++++++++++++ src/components/taggs/TaggPostFooter.tsx | 65 +++++++++++++++++++++++++++ src/components/taggs/TaggsBar.tsx | 75 ++++++++++++++++++++++++++++++++ src/components/taggs/TaggsFeed.tsx | 29 ++++++++++++ src/components/taggs/index.ts | 4 ++ 17 files changed, 371 insertions(+), 121 deletions(-) create mode 100644 src/components/common/AvatarTitle.tsx delete mode 100644 src/components/profile/Moment.tsx delete mode 100644 src/components/profile/MomentsBar.tsx create mode 100644 src/components/taggs/SocialMediaInfo.tsx create mode 100644 src/components/taggs/Tagg.tsx create mode 100644 src/components/taggs/TaggPost.tsx create mode 100644 src/components/taggs/TaggPostFooter.tsx create mode 100644 src/components/taggs/TaggsBar.tsx create mode 100644 src/components/taggs/TaggsFeed.tsx create mode 100644 src/components/taggs/index.ts (limited to 'src/components') diff --git a/src/components/common/AvatarTitle.tsx b/src/components/common/AvatarTitle.tsx new file mode 100644 index 00000000..b6d95bd8 --- /dev/null +++ b/src/components/common/AvatarTitle.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import {Image, StyleSheet} from 'react-native'; +import LinearGradient from 'react-native-linear-gradient'; +import { AVATAR_DIM, AVATAR_GRADIENT_DIM, TAGGS_GRADIENT } from '../../constants'; +import {AuthContext} from '../../routes/authentication'; + +/** + * An image component that returns the of the icon for a specific social media platform. + */ +const AvatarTitle: React.FC = () => { + const {avatar} = React.useContext(AuthContext); + return ( + + + + ); +}; + +const styles = StyleSheet.create({ + gradient: { + width: AVATAR_GRADIENT_DIM, + height: AVATAR_GRADIENT_DIM, + borderRadius: AVATAR_GRADIENT_DIM / 2, + justifyContent: 'center', + alignItems: 'center', + }, + avatar: { + width: AVATAR_DIM, + height: AVATAR_DIM, + borderRadius: AVATAR_DIM / 2, + }, +}); + +export default AvatarTitle; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index c9c4f27a..4a226c8f 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -1,9 +1,10 @@ +export {default as AvatarTitle} from './AvatarTitle'; export {default as CenteredView} from './CenteredView'; export {default as OverlayView} from './OverlayView'; export {default as RadioCheckbox} from './RadioCheckbox'; export {default as NavigationIcon} from './NavigationIcon'; export {default as GradientBackground} from './GradientBackground'; -export {default as Post} from './post'; export {default as SocialIcon} from './SocialIcon'; export {default as TabsGradient} from './TabsGradient'; export {default as RecentSearches} from '../search/RecentSearches'; +export * from './post'; diff --git a/src/components/common/post/Post.tsx b/src/components/common/post/Post.tsx index e5f68917..9fa167f2 100644 --- a/src/components/common/post/Post.tsx +++ b/src/components/common/post/Post.tsx @@ -7,14 +7,12 @@ import {SCREEN_WIDTH} from '../../../utils'; interface PostProps { post: PostType; } -const Post: React.FC = ({post: {owner, instagram, social}}) => { +const Post: React.FC = ({post: {owner, social, data}}) => { return ( <> - + - {instagram && ( - - )} + {data && } ); diff --git a/src/components/common/post/index.ts b/src/components/common/post/index.ts index 033f8a8d..358a59d5 100644 --- a/src/components/common/post/index.ts +++ b/src/components/common/post/index.ts @@ -1 +1 @@ -export {default} from './Post'; +export {default as Post} from './Post'; diff --git a/src/components/index.ts b/src/components/index.ts index 77ba0f67..1b726051 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -2,3 +2,4 @@ export * from './common'; export * from './onboarding'; export * from './profile'; export * from './search'; +export * from './taggs'; diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx index 49cc2c35..206fd9e4 100644 --- a/src/components/profile/Content.tsx +++ b/src/components/profile/Content.tsx @@ -6,7 +6,7 @@ import {UserType} from '../../types'; import ProfileCutout from './ProfileCutout'; import ProfileHeader from './ProfileHeader'; import ProfileBody from './ProfileBody'; -import MomentsBar from './MomentsBar'; +import TaggsBar from '../taggs/TaggsBar'; import Feed from './Feed'; interface ContentProps { @@ -30,7 +30,7 @@ const Content: React.FC = ({y, user}) => { - + ); diff --git a/src/components/profile/Feed.tsx b/src/components/profile/Feed.tsx index a10d8d6d..3353d25b 100644 --- a/src/components/profile/Feed.tsx +++ b/src/components/profile/Feed.tsx @@ -12,8 +12,9 @@ const Feed: React.FC = ({user}) => { for (let i = 0; i < 10; i++) { const testPost: PostType = { owner: user, - instagram: instaPosts[i], social: 'Instagram', + socialHandle: 'igHandle', + data: instaPosts[i], }; posts.push(testPost); } diff --git a/src/components/profile/Moment.tsx b/src/components/profile/Moment.tsx deleted file mode 100644 index eaf43fea..00000000 --- a/src/components/profile/Moment.tsx +++ /dev/null @@ -1,35 +0,0 @@ -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 deleted file mode 100644 index dcc88d89..00000000 --- a/src/components/profile/MomentsBar.tsx +++ /dev/null @@ -1,75 +0,0 @@ -// @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/index.ts b/src/components/profile/index.ts index 2052ee5b..e0ca5742 100644 --- a/src/components/profile/index.ts +++ b/src/components/profile/index.ts @@ -1,7 +1,6 @@ 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/components/taggs/SocialMediaInfo.tsx b/src/components/taggs/SocialMediaInfo.tsx new file mode 100644 index 00000000..0e93660d --- /dev/null +++ b/src/components/taggs/SocialMediaInfo.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import {StyleSheet, Text, View} from 'react-native'; +import {SocialIcon} from '..'; + +interface SocialMediaInfoProps { + fullname: string; + type: string; + handle: string; +} + +const SocialMediaInfo: React.FC = ({ + fullname, + type, + handle, +}) => { + return ( + + @{handle} + + + + {fullname} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + alignItems: 'center', + paddingBottom: 40, + }, + handle: { + color: 'white', + fontSize: 12, + }, + name: { + color: 'white', + fontWeight: 'bold', + fontSize: 20, + paddingLeft: 5, + }, + icon: { + width: 20, + height: 20, + }, + row: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + padding: 10, + }, +}); + +export default SocialMediaInfo; diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx new file mode 100644 index 00000000..9a5ec1e2 --- /dev/null +++ b/src/components/taggs/Tagg.tsx @@ -0,0 +1,47 @@ +import {useNavigation} from '@react-navigation/native'; +import React from 'react'; +import {StyleSheet, TouchableOpacity, View, ViewProps} from 'react-native'; +import LinearGradient from 'react-native-linear-gradient'; +import { TAGGS_GRADIENT } from '../../constants'; + +interface TaggProps extends ViewProps {} + +const Tagg: React.FC = ({style}) => { + const navigation = useNavigation(); + + return ( + + navigation.navigate('SocialMediaTaggs', { + socialMediaType: 'Instagram', + }) + }> + + + + + ); +}; + +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 Tagg; diff --git a/src/components/taggs/TaggPost.tsx b/src/components/taggs/TaggPost.tsx new file mode 100644 index 00000000..73f15268 --- /dev/null +++ b/src/components/taggs/TaggPost.tsx @@ -0,0 +1,39 @@ +import moment from 'moment'; +import React from 'react'; +import {Image, StyleSheet, View} from 'react-native'; +import {PostType} from '../../types'; +import {SCREEN_WIDTH} from '../../utils'; +import TaggPostFooter from './TaggPostFooter'; + +interface TaggPostProps { + post: PostType; +} +const TaggPost: React.FC = ({post: {socialHandle, data}}) => { + const parsedDate = moment(data?.timestamp || ''); + const date = parsedDate.isValid() ? parsedDate.format('MMM d') : ''; + + return ( + <> + + {data && } + + + + ); +}; + +const styles = StyleSheet.create({ + image: { + width: SCREEN_WIDTH, + height: SCREEN_WIDTH, + backgroundColor: '#eee', + }, +}); + +export default TaggPost; diff --git a/src/components/taggs/TaggPostFooter.tsx b/src/components/taggs/TaggPostFooter.tsx new file mode 100644 index 00000000..024670a8 --- /dev/null +++ b/src/components/taggs/TaggPostFooter.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import {StyleSheet, View} from 'react-native'; +import {Text} from 'react-native-animatable'; + +interface TaggPostFooterProps { + likes: number; + handle: string; + caption: string; + date: string; +} +const TaggPostFooter: React.FC = ({ + likes, + handle, + caption, + date, +}) => { + return ( + + + {likes} likes + + + {handle} + {caption} + + + {date} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flexDirection: 'column', + padding: 10, + paddingBottom: '10%', + }, + captionContainer: { + paddingVertical: 10, + }, + likeText: { + fontSize: 14, + fontWeight: 'bold', + color: 'white', + }, + handleText: { + fontSize: 14, + fontWeight: 'bold', + color: '#8FA9C2', + }, + captionText: { + fontSize: 14, + fontWeight: 'bold', + color: 'white', + flexWrap: 'wrap', + }, + dateText: { + fontSize: 14, + fontWeight: 'bold', + color: '#8FA9C2', + }, +}); + +export default TaggPostFooter; diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx new file mode 100644 index 00000000..1022c4fc --- /dev/null +++ b/src/components/taggs/TaggsBar.tsx @@ -0,0 +1,75 @@ +// @refresh react +import React from 'react'; +import {StyleSheet} from 'react-native'; +import Animated from 'react-native-reanimated'; +import Tagg from './Tagg'; +import {PROFILE_CUTOUT_BOTTOM_Y} from '../../constants'; +import {StatusBarHeight} from '../../utils'; + +const {View, ScrollView, interpolate, Extrapolate} = Animated; +interface TaggsBarProps { + y: Animated.Value; + profileBodyHeight: number; +} +const TaggsBar: React.FC = ({y, profileBodyHeight}) => { + const taggs: Array = []; + for (let i = 0; i < 10; i++) { + taggs.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 ( + + + {taggs} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + backgroundColor: 'white', + shadowColor: '#000', + shadowRadius: 10, + shadowOffset: {width: 0, height: 2}, + zIndex: 1, + }, + contentContainer: { + alignItems: 'center', + paddingHorizontal: 15, + }, + tagg: { + marginHorizontal: 14, + }, +}); + +export default TaggsBar; diff --git a/src/components/taggs/TaggsFeed.tsx b/src/components/taggs/TaggsFeed.tsx new file mode 100644 index 00000000..3f27e248 --- /dev/null +++ b/src/components/taggs/TaggsFeed.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import {InstagramPostType, UserType} from '../../types'; +import {TaggPost} from './'; + +interface TaggsFeedProps { + user: UserType; + socialHandle: string; + posts: Array; +} + +const TaggsFeed: React.FC = ({user, socialHandle, posts}) => { + return ( + <> + {posts?.map((post, index) => ( + + ))} + + ); +}; + +export default TaggsFeed; diff --git a/src/components/taggs/index.ts b/src/components/taggs/index.ts new file mode 100644 index 00000000..1cb0c412 --- /dev/null +++ b/src/components/taggs/index.ts @@ -0,0 +1,4 @@ +export {default as TaggsBar} from './TaggsBar'; +export {default as SocialMediaInfo} from './SocialMediaInfo'; +export {default as TaggsFeed} from './TaggsFeed'; +export {default as TaggPost} from './TaggPost'; -- cgit v1.2.3-70-g09d2