diff options
Diffstat (limited to 'src/components/common')
-rw-r--r-- | src/components/common/AvatarTitle.tsx | 5 | ||||
-rw-r--r-- | src/components/common/TaggLoadingIndicator.tsx | 27 | ||||
-rw-r--r-- | src/components/common/index.ts | 2 | ||||
-rw-r--r-- | src/components/common/post/Post.tsx | 28 | ||||
-rw-r--r-- | src/components/common/post/PostHeader.tsx | 78 | ||||
-rw-r--r-- | src/components/common/post/index.ts | 1 |
6 files changed, 29 insertions, 112 deletions
diff --git a/src/components/common/AvatarTitle.tsx b/src/components/common/AvatarTitle.tsx index 65ae7486..a38f46fa 100644 --- a/src/components/common/AvatarTitle.tsx +++ b/src/components/common/AvatarTitle.tsx @@ -2,12 +2,9 @@ import React from 'react'; import {Image, StyleSheet, View} from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; import {TAGGS_GRADIENT} from '../../constants'; -import {AuthContext, ProfileContext} from '../../routes/'; -import {loadAvatar} from '../../services'; -import AsyncStorage from '@react-native-community/async-storage'; type AvatarTitleProps = { - avatar: string; + avatar: string | null; }; const AvatarTitle: React.FC<AvatarTitleProps> = ({avatar}) => { return ( diff --git a/src/components/common/TaggLoadingIndicator.tsx b/src/components/common/TaggLoadingIndicator.tsx new file mode 100644 index 00000000..cfb99e80 --- /dev/null +++ b/src/components/common/TaggLoadingIndicator.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import {ActivityIndicator, StyleSheet, View} from 'react-native'; + +type TaggLoadingIndicatorProps = { + color: string; +}; +const TaggLoadingIndicator: React.FC<TaggLoadingIndicatorProps> = ({color}) => { + return ( + <View style={[styles.container, styles.horizontal]}> + <ActivityIndicator size="large" color={color} /> + </View> + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + }, + horizontal: { + flexDirection: 'row', + justifyContent: 'space-around', + padding: 10, + }, +}); + +export default TaggLoadingIndicator; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 0feeaab8..f6521497 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -15,4 +15,4 @@ export {default as ComingSoon} from './ComingSoon'; export {default as PostCarousel} from './PostCarousel'; export {default as TaggDatePicker} from './TaggDatePicker'; export {default as BottomDrawer} from './BottomDrawer'; -export * from './post'; +export {default as TaggLoadingTndicator} from './TaggLoadingIndicator'; diff --git a/src/components/common/post/Post.tsx b/src/components/common/post/Post.tsx deleted file mode 100644 index 9fa167f2..00000000 --- a/src/components/common/post/Post.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import {StyleSheet, View, Image} from 'react-native'; -import {PostType} from '../../../types'; -import PostHeader from './PostHeader'; -import {SCREEN_WIDTH} from '../../../utils'; - -interface PostProps { - post: PostType; -} -const Post: React.FC<PostProps> = ({post: {owner, social, data}}) => { - return ( - <> - <PostHeader post={data} owner={owner} social={social} /> - <View style={styles.image}> - {data && <Image style={styles.image} source={{uri: data.media_url}} />} - </View> - </> - ); -}; - -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 deleted file mode 100644 index 0e9c708b..00000000 --- a/src/components/common/post/PostHeader.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; -import {UserType, InstagramPostType} from '../../../types'; -import {View, StyleSheet, Image, Text} from 'react-native'; -import {AuthContext} from '../../../routes/authentication'; -import SocialIcon from '../SocialIcon'; -import moment from 'moment'; - -const AVATAR_DIM = 35; -interface PostHeaderProps { - owner: UserType; - post: InstagramPostType | undefined; - social: string; -} -const PostHeader: React.FC<PostHeaderProps> = ({ - owner: {username}, - post, - social, -}) => { - const {avatar} = React.useContext(AuthContext); - - return ( - <View style={styles.container}> - <View style={styles.topRow}> - <Image - style={styles.avatar} - source={ - avatar - ? {uri: avatar} - : require('../../../assets/images/avatar-placeholder.png') - } - /> - <Text style={styles.username}>{username}</Text> - {post && <SocialIcon style={styles.icon} social={social} />} - </View> - {post && ( - <Text style={styles.timestamp}> - {moment(post.timestamp).format('LL')} at{' '} - {moment(post.timestamp).format('LT')} - </Text> - )} - </View> - ); -}; - -const styles = StyleSheet.create({ - container: { - flexDirection: 'column', - justifyContent: 'space-between', - padding: 10, - backgroundColor: 'white', - }, - topRow: { - flexDirection: 'row', - alignItems: 'center', - }, - avatar: { - width: AVATAR_DIM, - height: AVATAR_DIM, - borderRadius: AVATAR_DIM / 2, - marginRight: 10, - }, - icon: { - width: AVATAR_DIM, - height: AVATAR_DIM, - borderRadius: AVATAR_DIM / 2, - marginLeft: '55%', - }, - username: { - fontSize: 18, - }, - timestamp: { - color: '#6A757D', - fontSize: 11, - marginLeft: AVATAR_DIM + 10, - }, -}); - -export default PostHeader; diff --git a/src/components/common/post/index.ts b/src/components/common/post/index.ts deleted file mode 100644 index 358a59d5..00000000 --- a/src/components/common/post/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {default as Post} from './Post'; |