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/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 ++ 7 files changed, 314 insertions(+) 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/taggs') 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