From a13dcb5110245bb554d79e779c4942e6f5aaf18a Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Apr 2021 10:46:17 -0400 Subject: refactored avatar --- src/components/comments/AddComment.tsx | 11 ++------ src/components/common/Avatar.tsx | 18 ++++++++++++++ src/components/common/AvatarTitle.tsx | 14 +++-------- src/components/common/index.ts | 1 + src/components/messages/ChannelPreview.tsx | 9 +++---- src/components/messages/ChatHeader.tsx | 11 +++----- src/components/messages/ChatInput.tsx | 12 +++------ src/components/messages/MessageAvatar.tsx | 15 +++++------ src/components/moments/MomentPostHeader.tsx | 4 +-- src/components/notifications/Notification.tsx | 10 ++------ src/components/profile/Avatar.tsx | 36 --------------------------- src/components/profile/ProfileHeader.tsx | 4 +-- src/components/profile/ProfilePreview.tsx | 12 +++------ src/components/profile/TaggAvatar.tsx | 35 ++++++++++++++++++++++++++ src/components/profile/index.ts | 1 + src/components/search/ExploreSectionUser.tsx | 12 +++------ src/components/taggs/TwitterTaggPost.tsx | 20 +++------------ src/screens/profile/SocialMediaTaggs.tsx | 2 +- src/utils/users.ts | 5 ---- 19 files changed, 93 insertions(+), 139 deletions(-) create mode 100644 src/components/common/Avatar.tsx delete mode 100644 src/components/profile/Avatar.tsx create mode 100644 src/components/profile/TaggAvatar.tsx (limited to 'src') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index 3b195a2b..2a8c773e 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -1,6 +1,5 @@ import React, {useEffect, useRef} from 'react'; import { - Image, Keyboard, KeyboardAvoidingView, Platform, @@ -15,6 +14,7 @@ import {postComment} from '../../services'; import {updateReplyPosted} from '../../store/actions'; import {RootState} from '../../store/rootreducer'; import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import {Avatar} from '../common'; /** * This file provides the add comment view for a user. @@ -101,14 +101,7 @@ const AddComment: React.FC = ({ keyboardVisible ? styles.whiteBackround : {}, ]}> - + ; + uri: string | undefined; +}; +const Avatar: FC = ({style, uri}) => { + return ( + + ); +}; + +export default Avatar; diff --git a/src/components/common/AvatarTitle.tsx b/src/components/common/AvatarTitle.tsx index 81351327..a2a7c0aa 100644 --- a/src/components/common/AvatarTitle.tsx +++ b/src/components/common/AvatarTitle.tsx @@ -1,10 +1,11 @@ import React from 'react'; -import {Image, StyleSheet, View} from 'react-native'; +import {StyleSheet, View} from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; import {TAGGS_GRADIENT} from '../../constants'; +import Avatar from './Avatar'; type AvatarTitleProps = { - avatar: string | null; + avatar: string | undefined; }; const AvatarTitle: React.FC = ({avatar}) => { return ( @@ -16,14 +17,7 @@ const AvatarTitle: React.FC = ({avatar}) => { angleCenter={{x: 0.5, y: 0.5}} style={styles.gradient} /> - + ); }; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 5a601f1d..802cf505 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -23,3 +23,4 @@ export {default as FriendsButton} from './FriendsButton'; export {default as TaggSquareButton} from './TaggSquareButton'; export {default as GradientBorderButton} from './GradientBorderButton'; export {default as BasicButton} from './BasicButton'; +export {default as Avatar} from './Avatar'; diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx index 3d31d42a..878e5a6b 100644 --- a/src/components/messages/ChannelPreview.tsx +++ b/src/components/messages/ChannelPreview.tsx @@ -22,6 +22,7 @@ import { } from '../../types'; import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import {getMember, isOnline} from '../../utils/messages'; +import {Avatar} from '../common'; const ChannelPreview: React.FC< ChannelPreviewMessengerProps< @@ -87,13 +88,9 @@ const ChannelPreview: React.FC< navigation.navigate('Chat'); }}> - {online && } diff --git a/src/components/messages/ChatHeader.tsx b/src/components/messages/ChatHeader.tsx index 7ddaa7e6..37dab0fd 100644 --- a/src/components/messages/ChatHeader.tsx +++ b/src/components/messages/ChatHeader.tsx @@ -1,6 +1,6 @@ import {useNavigation} from '@react-navigation/native'; import React, {useContext} from 'react'; -import {Image, StyleSheet, View} from 'react-native'; +import {StyleSheet, View} from 'react-native'; import {Text} from 'react-native-animatable'; import {TouchableOpacity} from 'react-native-gesture-handler'; import {useDispatch, useStore} from 'react-redux'; @@ -15,6 +15,7 @@ import { userXInStore, } from '../../utils'; import {formatLastSeenText, getMember, isOnline} from '../../utils/messages'; +import {Avatar} from '../common'; type ChatHeaderProps = { screenType: ScreenType; @@ -50,13 +51,9 @@ const ChatHeader: React.FC = (props) => { - {online && } diff --git a/src/components/messages/ChatInput.tsx b/src/components/messages/ChatInput.tsx index a6e5c458..5585d246 100644 --- a/src/components/messages/ChatInput.tsx +++ b/src/components/messages/ChatInput.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {Image, StyleSheet, View} from 'react-native'; +import {StyleSheet, View} from 'react-native'; import {useStore} from 'react-redux'; import { AutoCompleteInput, @@ -17,6 +17,7 @@ import { LocalUserType, } from '../../types'; import {normalize} from '../../utils'; +import {Avatar} from '../common'; import {ChatInputSubmit} from '../messages'; const ChatInput: React.FC< @@ -65,14 +66,7 @@ const ChatInput: React.FC< return ( - + {/* TODO: Not working, toggled off for now */} diff --git a/src/components/messages/MessageAvatar.tsx b/src/components/messages/MessageAvatar.tsx index d275eae5..bcd4e7a8 100644 --- a/src/components/messages/MessageAvatar.tsx +++ b/src/components/messages/MessageAvatar.tsx @@ -1,9 +1,10 @@ import React, {useContext} from 'react'; -import {Image, StyleSheet, View} from 'react-native'; -import {getMember, normalize} from '../../utils'; -import {useMessageContext} from 'stream-chat-react-native-core'; +import {StyleSheet, View} from 'react-native'; import {useStore} from 'react-redux'; +import {useMessageContext} from 'stream-chat-react-native-core'; import {ChatContext} from '../../App'; +import {getMember, normalize} from '../../utils'; +import {Avatar} from '../common'; const MessageAvatar: React.FC = () => { const {channel} = useContext(ChatContext); @@ -14,13 +15,9 @@ const MessageAvatar: React.FC = () => { return ( {message.lastGroupMessage === true && ( - )} diff --git a/src/components/moments/MomentPostHeader.tsx b/src/components/moments/MomentPostHeader.tsx index 8cf509ab..20d9150a 100644 --- a/src/components/moments/MomentPostHeader.tsx +++ b/src/components/moments/MomentPostHeader.tsx @@ -10,7 +10,7 @@ import {MomentMoreInfoDrawer} from '../profile'; import {loadUserMoments} from '../../store/actions'; import {useDispatch, useSelector, useStore} from 'react-redux'; import {ScreenType} from '../../types'; -import Avatar from '../profile/Avatar'; +import TaggAvatar from '../profile/TaggAvatar'; import {useNavigation} from '@react-navigation/native'; import {RootState} from '../../store/rootReducer'; import {fetchUserX, userXInStore} from '../../utils'; @@ -54,7 +54,7 @@ const MomentPostHeader: React.FC = ({ return ( - = (props) => { - + {notification_type === 'SYSTEM_MSG' ? ( // Only verbage diff --git a/src/components/profile/Avatar.tsx b/src/components/profile/Avatar.tsx deleted file mode 100644 index e57a56a3..00000000 --- a/src/components/profile/Avatar.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import {Image, StyleSheet} from 'react-native'; -import {useSelector} from 'react-redux'; -import {RootState} from '../../store/rootreducer'; -import {ScreenType} from '../../types'; - -const PROFILE_DIM = 100; - -interface AvatarProps { - style?: object; - userXId: string | undefined; - screenType: ScreenType; -} -const Avatar: React.FC = ({style, screenType, userXId}) => { - const {avatar} = useSelector((state: RootState) => - userXId ? state.userX[screenType][userXId] : state.user, - ); - - 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/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx index 35ec0ea9..db56b216 100644 --- a/src/components/profile/ProfileHeader.tsx +++ b/src/components/profile/ProfileHeader.tsx @@ -8,7 +8,7 @@ import {RootState} from '../../store/rootreducer'; import {ScreenType} from '../../types'; import {hasSeenBadgeTutorial, normalize} from '../../utils'; import BadgeDetailView from '../common/BadgeDetailView'; -import Avatar from './Avatar'; +import TaggAvatar from './TaggAvatar'; import BadgeTutorial from './BadgeTutorial'; import FriendsCount from './FriendsCount'; import ProfileMoreInfoDrawer from './ProfileMoreInfoDrawer'; @@ -107,7 +107,7 @@ const ProfileHeader: React.FC = ({ /> )} - = ({ }) => { const navigation = useNavigation(); const {user: loggedInUser} = useSelector((state: RootState) => state.user); - const [avatar, setAvatar] = useState(null); + const [avatar, setAvatar] = useState(); const dispatch = useDispatch(); useEffect(() => { @@ -187,14 +188,7 @@ const ProfilePreview: React.FC = ({ - + {(previewType === 'Search' || previewType === 'Recent') && ( <> diff --git a/src/components/profile/TaggAvatar.tsx b/src/components/profile/TaggAvatar.tsx new file mode 100644 index 00000000..ea0bdb65 --- /dev/null +++ b/src/components/profile/TaggAvatar.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import {StyleSheet} from 'react-native'; +import {useSelector} from 'react-redux'; +import {RootState} from '../../store/rootreducer'; +import {ScreenType} from '../../types'; +import {Avatar} from '../common'; + +const PROFILE_DIM = 100; + +interface TaggAvatarProps { + style?: object; + userXId: string | undefined; + screenType: ScreenType; +} +const TaggAvatar: React.FC = ({ + style, + screenType, + userXId, +}) => { + const {avatar} = useSelector((state: RootState) => + userXId ? state.userX[screenType][userXId] : state.user, + ); + + return ; +}; + +const styles = StyleSheet.create({ + image: { + height: PROFILE_DIM, + width: PROFILE_DIM, + borderRadius: PROFILE_DIM / 2, + }, +}); + +export default TaggAvatar; diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts index 260f4217..c544c3f2 100644 --- a/src/components/profile/index.ts +++ b/src/components/profile/index.ts @@ -8,3 +8,4 @@ export {default as Friends} from './Friends'; export {default as ProfileMoreInfoDrawer} from './ProfileMoreInfoDrawer'; export {default as MomentMoreInfoDrawer} from './MomentMoreInfoDrawer'; export {default as UniversityIcon} from './UniversityIcon'; +export {default as TaggAvatar} from './TaggAvatar'; diff --git a/src/components/search/ExploreSectionUser.tsx b/src/components/search/ExploreSectionUser.tsx index d8c92be2..c1355e17 100644 --- a/src/components/search/ExploreSectionUser.tsx +++ b/src/components/search/ExploreSectionUser.tsx @@ -15,6 +15,7 @@ import {loadImageFromURL} from '../../services'; import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType, ScreenType} from '../../types'; import {fetchUserX, normalize, userXInStore} from '../../utils'; +import {Avatar} from '../common'; /** * Search Screen for user recommendations and a search @@ -30,7 +31,7 @@ const ExploreSectionUser: React.FC = ({ externalStyles, }) => { const {id, username, first_name, last_name} = user; - const [avatar, setAvatar] = useState(null); + const [avatar, setAvatar] = useState(); const navigation = useNavigation(); const {user: loggedInUser} = useSelector((state: RootState) => state.user); const state: RootState = useStore().getState(); @@ -71,14 +72,7 @@ const ExploreSectionUser: React.FC = ({ angle={90} angleCenter={{x: 0.5, y: 0.5}} style={styles.gradient}> - + {first_name} {last_name} diff --git a/src/components/taggs/TwitterTaggPost.tsx b/src/components/taggs/TwitterTaggPost.tsx index 0a6f53d8..a64fea20 100644 --- a/src/components/taggs/TwitterTaggPost.tsx +++ b/src/components/taggs/TwitterTaggPost.tsx @@ -11,7 +11,7 @@ import { } from '../../constants'; import {TwitterPostType} from '../../types'; import {handleOpenSocialUrlOnBrowser, SCREEN_WIDTH} from '../../utils'; -import {DateLabel, PostCarousel} from '../common'; +import {Avatar, DateLabel, PostCarousel} from '../common'; interface TwitterTaggPostProps { ownerHandle: string; @@ -31,14 +31,7 @@ const TwitterTaggPost: React.FC = ({ )} {/* Post header (avatar and handle) */} - + handleOpenSocialUrlOnBrowser(post.handle, 'Twitter')}> @@ -84,14 +77,7 @@ const TwitterTaggPost: React.FC = ({ {post.in_reply_to.text !== 'This tweet is unavailable' && ( <> - + diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx index 9186f187..52d20683 100644 --- a/src/screens/profile/SocialMediaTaggs.tsx +++ b/src/screens/profile/SocialMediaTaggs.tsx @@ -59,7 +59,7 @@ const SocialMediaTaggs: React.FC = ({ useEffect(() => { navigation.setOptions({ headerTitle: () => { - return ; + return ; }, }); }, [avatar, navigation]); diff --git a/src/utils/users.ts b/src/utils/users.ts index 7148eb79..abadaf6e 100644 --- a/src/utils/users.ts +++ b/src/utils/users.ts @@ -168,11 +168,6 @@ export const checkIfUserIsBlocked = async ( return await isUserBlocked(userId, loggedInUser.userId, token); }; -export const defaultUserProfile = () => { - const defaultImage = require('../assets/images/avatar-placeholder.png'); - return defaultImage; -}; - /** * Used to determine whether the logged-in user is able to view userX's private * information or not. -- cgit v1.2.3-70-g09d2 From a9b20af3889812b3d44ed1dedb75e4442eb35e8b Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Apr 2021 10:47:35 -0400 Subject: missed a couple --- src/components/search/SearchResultCell.tsx | 8 ++------ src/screens/chat/ChatResultsCell.tsx | 10 +++------- 2 files changed, 5 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/components/search/SearchResultCell.tsx b/src/components/search/SearchResultCell.tsx index 5a6ea110..16e62a53 100644 --- a/src/components/search/SearchResultCell.tsx +++ b/src/components/search/SearchResultCell.tsx @@ -22,10 +22,10 @@ import { } from '../../utils'; import { checkIfUserIsBlocked, - defaultUserProfile, fetchUserX, userXInStore, } from '../../utils/users'; +import {Avatar} from '../common'; interface SearchResults { profileData: ProfilePreviewType; @@ -129,11 +129,7 @@ const SearchResultsCell: React.FC = ({ - + {`@${username}`} diff --git a/src/screens/chat/ChatResultsCell.tsx b/src/screens/chat/ChatResultsCell.tsx index e1eb97dd..14062810 100644 --- a/src/screens/chat/ChatResultsCell.tsx +++ b/src/screens/chat/ChatResultsCell.tsx @@ -1,13 +1,13 @@ import {useNavigation} from '@react-navigation/native'; import React, {useContext, useEffect, useState} from 'react'; -import {Alert, Image, StyleSheet, Text, View} from 'react-native'; +import {Alert, StyleSheet, Text, View} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; import {ChatContext} from '../../App'; +import {Avatar} from '../../components'; import {ERROR_FAILED_TO_CREATE_CHANNEL} from '../../constants/strings'; import {loadImageFromURL} from '../../services'; import {ProfilePreviewType, UserType} from '../../types'; import {createChannel, normalize, SCREEN_WIDTH} from '../../utils'; -import {defaultUserProfile} from '../../utils/users'; interface ChatResults { profileData: ProfilePreviewType; @@ -58,11 +58,7 @@ const ChatResultsCell: React.FC = ({ - + {`@${username}`} -- cgit v1.2.3-70-g09d2 From 98bf284d278fe4b64d1de937d7047c746a6070dd Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Apr 2021 10:52:04 -0400 Subject: removed profile pic requirement --- src/screens/onboarding/OnboardingStepThree.tsx | 4 ---- 1 file changed, 4 deletions(-) (limited to 'src') diff --git a/src/screens/onboarding/OnboardingStepThree.tsx b/src/screens/onboarding/OnboardingStepThree.tsx index 638f0889..3f88e77d 100644 --- a/src/screens/onboarding/OnboardingStepThree.tsx +++ b/src/screens/onboarding/OnboardingStepThree.tsx @@ -160,10 +160,6 @@ const OnboardingStepThree: React.FC = ({ }; const handleSubmit = async () => { - if (!form.smallPic) { - Alert.alert(ERROR_UPLOAD_SMALL_PROFILE_PIC); - return; - } if (form.classYear === -1) { Alert.alert(ERROR_SELECT_CLASS_YEAR); return; -- cgit v1.2.3-70-g09d2 From 64dedc2bc0c65fae604ba771ae4c17d1927ff1c2 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Apr 2021 11:06:41 -0400 Subject: linted --- src/components/profile/ProfilePreview.tsx | 1 - src/components/search/ExploreSectionUser.tsx | 4 ++-- src/components/taggs/TwitterTaggPost.tsx | 5 ++++- src/screens/onboarding/OnboardingStepThree.tsx | 1 - 4 files changed, 6 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx index 242a17e3..66d68d8f 100644 --- a/src/components/profile/ProfilePreview.tsx +++ b/src/components/profile/ProfilePreview.tsx @@ -2,7 +2,6 @@ import {useNavigation} from '@react-navigation/native'; import React, {useEffect, useState} from 'react'; import { Alert, - Image, StyleSheet, Text, TouchableOpacity, diff --git a/src/components/search/ExploreSectionUser.tsx b/src/components/search/ExploreSectionUser.tsx index c1355e17..c949acd4 100644 --- a/src/components/search/ExploreSectionUser.tsx +++ b/src/components/search/ExploreSectionUser.tsx @@ -1,13 +1,13 @@ import {useNavigation} from '@react-navigation/native'; import React, {useEffect, useState} from 'react'; -import {TextStyle, ViewStyle} from 'react-native'; import { - Image, StyleProp, StyleSheet, Text, + TextStyle, TouchableOpacity, ViewProps, + ViewStyle, } from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; import {useDispatch, useSelector, useStore} from 'react-redux'; diff --git a/src/components/taggs/TwitterTaggPost.tsx b/src/components/taggs/TwitterTaggPost.tsx index a64fea20..db07ba66 100644 --- a/src/components/taggs/TwitterTaggPost.tsx +++ b/src/components/taggs/TwitterTaggPost.tsx @@ -77,7 +77,10 @@ const TwitterTaggPost: React.FC = ({ {post.in_reply_to.text !== 'This tweet is unavailable' && ( <> - + diff --git a/src/screens/onboarding/OnboardingStepThree.tsx b/src/screens/onboarding/OnboardingStepThree.tsx index 3f88e77d..34173b39 100644 --- a/src/screens/onboarding/OnboardingStepThree.tsx +++ b/src/screens/onboarding/OnboardingStepThree.tsx @@ -27,7 +27,6 @@ import { ERROR_SELECT_CLASS_YEAR, ERROR_SELECT_GENDER, ERROR_SELECT_UNIVERSITY, - ERROR_UPLOAD_SMALL_PROFILE_PIC, } from '../../constants/strings'; import {OnboardingStackParams} from '../../routes/onboarding'; import {patchEditProfile} from '../../services'; -- cgit v1.2.3-70-g09d2