From f3134bbe9b8bc84a906ca1dac46959b360dd243f Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 16 Jun 2021 01:58:59 -0700 Subject: image cropper dump --- src/screens/profile/CaptionScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/screens') diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 9e1b4674..74f774b9 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -197,7 +197,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { Date: Thu, 17 Jun 2021 23:04:57 -0700 Subject: Revamp Moment Post View --- src/components/moments/MomentPost.tsx | 352 ++++++++++++++++++++++-- src/components/profile/MomentMoreInfoDrawer.tsx | 7 - src/screens/profile/IndividualMoment.tsx | 55 ++-- 3 files changed, 349 insertions(+), 65 deletions(-) (limited to 'src/screens') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 60cb16fa..8a3cfacb 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -1,12 +1,42 @@ -import React, {useEffect, useState} from 'react'; -import {StyleSheet} from 'react-native'; -import {useSelector} from 'react-redux'; -import {MomentPostContent, MomentPostHeader} from '.'; +import {useNavigation} from '@react-navigation/native'; +import React, {useContext, useEffect, useMemo, useRef, useState} from 'react'; +import { + Image, + KeyboardAvoidingView, + Platform, + StatusBar, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native'; +import Animated, {EasingNode} from 'react-native-reanimated'; +import {useDispatch, useSelector, useStore} from 'react-redux'; +import {headerBarOptions} from '../../routes'; +import {MomentContext} from '../../screens/profile/IndividualMoment'; import {deleteMomentTag, loadMomentTags} from '../../services'; +import {loadUserMoments} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; -import {MomentPostType, MomentTagType, ScreenType} from '../../types'; -import {normalize, SCREEN_HEIGHT} from '../../utils'; - +import { + MomentCommentPreviewType, + MomentPostType, + MomentTagType, + ScreenType, + UserType, +} from '../../types'; +import { + getLoggedInUserAsProfilePreview, + getTimePosted, + HeaderHeight, + navigateToProfile, + normalize, + SCREEN_HEIGHT, + SCREEN_WIDTH, +} from '../../utils'; +import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; +import {AddComment} from '../comments'; +import CommentsCount from '../comments/CommentsCount'; +import {MomentMoreInfoDrawer, TaggAvatar} from '../profile'; interface MomentPostProps { moment: MomentPostType; userXId: string | undefined; @@ -24,15 +54,13 @@ const MomentPost: React.FC = ({ (state: RootState) => state.user.user, ); - const { - user: {username}, - } = useSelector((state: RootState) => + const {user} = useSelector((state: RootState) => userXId ? state.userX[screenType][userXId] : state.user, ); const [tags, setTags] = useState([]); const [momentTagId, setMomentTagId] = useState(''); - const isOwnProfile = username === loggedInUsername; + const isOwnProfile = user.username === loggedInUsername; /* * Load tags on initial render to pass tags data to moment header and content @@ -71,18 +99,201 @@ const MomentPost: React.FC = ({ } }; - return ( - <> - (momentTags); + const state: RootState = useStore().getState(); + const navigation = useNavigation(); + const dispatch = useDispatch(); + const imageRef = useRef(null); + const [visible, setVisible] = useState(false); + const [fadeValue, setFadeValue] = useState>( + new Animated.Value(0), + ); + const [commentCount, setCommentCount] = useState( + moment.comments_count, + ); + const [commentPreview, setCommentPreview] = + useState(moment.comment_preview); + const {keyboardVisible, scrollTo} = useContext(MomentContext); + const [hideText, setHideText] = useState(false); + + const [isFullScreen, setIsFullScreen] = useState(false); + const [aspectRatio, setAspectRatio] = useState(1); + + const [drawerVisible, setDrawerVisible] = useState(false); + + useEffect( + () => + navigation.setOptions({ + ...headerBarOptions('white', ''), + headerTitle: () => ( + + + 18 + ? normalize(14) + : normalize(16), + }, + ]}> + {moment.moment_category} + + + + ), + }), + [moment.moment_id], + ); + + useEffect(() => { + Image.getSize( + moment.moment_url, + (w, h) => { + const isFS = Math.abs(w / h - 9 / 16) < 0.01; + setAspectRatio(w / h); + setIsFullScreen(isFS); + }, + (err) => console.log(err), + ); + }, []); + + useEffect(() => { + const fade = async () => { + Animated.timing(fadeValue, { + toValue: 1, + duration: 250, + easing: EasingNode.linear, + }).start(); + }; + fade(); + }, [fadeValue]); + + useEffect(() => { + if (!keyboardVisible && hideText) { + setHideText(false); + } + }, [keyboardVisible, hideText]); + + const tagsIcon = useMemo(() => { + tags.length > 0 && ( + + ); + }, [tags]); + + const MomentUserPreview = () => ( + + navigateToProfile(state, dispatch, navigation, screenType, user) + } + style={styles.header}> + + {user.username} + + ); + + const TagsIcon = () => { + return tags.length === 0 ? ( + + ) : ( + + ); + }; + + const [verticalOffset, setVerticalOffset] = useState(0); + return ( + <> + + + + + + { + dispatch(loadUserMoments(loggedInUserId)); + navigation.goBack(); + }} + screenType={screenType} + moment={moment} + tags={tags} + /> + + + + = ({ }}> + + {!hideText && ( + <> + {moment.caption !== '' && + renderTextWithMentions({ + value: moment.caption, + styles: styles.captionText, + partTypes: mentionPartTypes('white'), + onPress: (user: UserType) => + navigateToProfile( + state, + dispatch, + navigation, + screenType, + user, + ), + })} + + )} + + { + setCommentPreview({ + commenter: getLoggedInUserAsProfilePreview(state), + comment: message, + }); + setCommentCount(commentCount + 1); + }} + onFocus={() => { + setHideText(true); + setVerticalOffset(SCREEN_HEIGHT * 0.05); + }} + isKeyboardAvoiding={false} + theme={'dark'} + /> + + {getTimePosted(moment.date_created)} + + + + + + ); }; @@ -98,9 +354,63 @@ const MomentPost: React.FC = ({ const styles = StyleSheet.create({ postHeader: {}, postContent: { - minHeight: SCREEN_HEIGHT * 0.8, + // minHeight: SCREEN_HEIGHT * 0.8, paddingBottom: normalize(20), }, + image: { + width: SCREEN_WIDTH, + marginBottom: '3%', + zIndex: 0, + position: 'absolute', + }, + text: { + marginHorizontal: '5%', + color: 'white', + fontWeight: '500', + textAlign: 'right', + marginTop: 5, + }, + captionText: { + position: 'relative', + marginHorizontal: '5%', + color: '#ffffff', + fontWeight: '500', + fontSize: normalize(13), + lineHeight: normalize(15.51), + letterSpacing: normalize(0.6), + marginBottom: normalize(5), + width: SCREEN_WIDTH * 0.79, + }, + tapTag: { + position: 'absolute', + backgroundColor: 'red', + width: 100, + height: 100, + }, + tagIcon: { + width: normalize(30), + height: normalize(30), + bottom: normalize(20), + left: '5%', + }, + avatar: { + width: 48, + aspectRatio: 1, + borderRadius: 100, + marginLeft: '3%', + }, + headerText: { + fontSize: 15, + fontWeight: 'bold', + color: 'white', + paddingHorizontal: '3%', + flex: 1, + }, + header: { + alignItems: 'center', + flexDirection: 'row', + marginBottom: normalize(15), + }, }); export default MomentPost; diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx index a796ffd8..a8adcfda 100644 --- a/src/components/profile/MomentMoreInfoDrawer.tsx +++ b/src/components/profile/MomentMoreInfoDrawer.tsx @@ -169,7 +169,6 @@ const MomentMoreInfoDrawer: React.FC = (props) => { return ( <> { setIsOpen(true); }}> @@ -184,10 +183,4 @@ const MomentMoreInfoDrawer: React.FC = (props) => { ); }; -const styles = StyleSheet.create({ - icon: { - marginRight: '3%', - }, -}); - export default MomentMoreInfoDrawer; diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index f8113aba..4088895a 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -1,10 +1,9 @@ -import {BlurView} from '@react-native-community/blur'; import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {useEffect, useRef, useState} from 'react'; import {FlatList, Keyboard, StyleSheet} from 'react-native'; import {useSelector} from 'react-redux'; -import {IndividualMomentTitleBar, MomentPost} from '../../components'; +import {MomentPost, TabsGradient} from '../../components'; import {AVATAR_DIM} from '../../constants'; import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootreducer'; @@ -84,41 +83,23 @@ const IndividualMoment: React.FC = ({ keyboardVisible, scrollTo, }}> - - navigation.goBack()} - title={moment_category} - /> - ( - - )} - keyExtractor={(item, _) => item.moment_id} - showsVerticalScrollIndicator={false} - initialScrollIndex={initialIndex} - onScrollToIndexFailed={() => { - // TODO: code below does not work, index resets to 0 - // const wait = new Promise((resolve) => setTimeout(resolve, 500)); - // wait.then(() => { - // console.log('scrolling to ', initialIndex); - // scrollRef.current?.scrollToIndex({index: initialIndex}); - // }); - }} - /> - + ( + + )} + keyExtractor={(item, _) => item.moment_id} + showsVerticalScrollIndicator={false} + initialScrollIndex={initialIndex} + pagingEnabled + /> + ); }; -- cgit v1.2.3-70-g09d2 From d5915af9c1f13f7d7d62df0b215e94792ab0538a Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Sun, 20 Jun 2021 22:25:26 -0700 Subject: Contain image on tag friends screen --- src/screens/moments/TagFriendsScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/screens') diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index 570c3776..6956dc0d 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -86,7 +86,7 @@ const TagFriendsScreen: React.FC = ({route}) => { ref={imageRef} style={styles.image} source={{uri: imagePath}} - resizeMode={'cover'} + resizeMode={'contain'} /> {tags.length !== 0 && ( -- cgit v1.2.3-70-g09d2 From 17af6485eb251c979430a7953acac34316f03cb4 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Mon, 21 Jun 2021 13:51:42 -0700 Subject: Fix double click crash bug --- src/screens/profile/IndividualMoment.tsx | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) (limited to 'src/screens') diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index 4088895a..2ad22db4 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -88,32 +88,27 @@ const IndividualMoment: React.FC = ({ data={momentData} renderItem={({item, index}) => ( )} keyExtractor={(item, _) => item.moment_id} showsVerticalScrollIndicator={false} initialScrollIndex={initialIndex} + onScrollToIndexFailed={(info) => { + setTimeout(() => { + scrollRef.current?.scrollToIndex({ + index: info.index, + }); + }, 500); + }} pagingEnabled /> ); }; -const styles = StyleSheet.create({ - contentContainer: { - paddingTop: StatusBarHeight, - flex: 1, - }, - header: { - height: normalize(70), - }, - listContentContainer: { - paddingBottom: SCREEN_HEIGHT * 0.2, - }, -}); export default IndividualMoment; -- cgit v1.2.3-70-g09d2 From 706a6c77971a10d8d45d1b3e189eadc28f89841e Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 22 Jun 2021 08:44:12 -0700 Subject: Fix lint errors --- src/components/comments/CommentsCount.tsx | 39 +++++++++++++------------ src/components/comments/ZoomInCropper.tsx | 3 +- src/components/moments/MomentPost.tsx | 4 +-- src/components/profile/MomentMoreInfoDrawer.tsx | 1 - src/screens/main/NotificationsScreen.tsx | 5 ++-- src/screens/onboarding/BasicInfoOnboarding.tsx | 5 ++-- src/screens/profile/IndividualMoment.tsx | 16 +++------- 7 files changed, 34 insertions(+), 39 deletions(-) (limited to 'src/screens') diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx index cb30fe76..90514193 100644 --- a/src/components/comments/CommentsCount.tsx +++ b/src/components/comments/CommentsCount.tsx @@ -1,6 +1,6 @@ import {useNavigation} from '@react-navigation/core'; import React from 'react'; -import {Text} from 'react-native'; +import {StyleSheet, Text} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; import CommentsIcon from '../../assets/icons/moment-comment-icon.svg'; import {MomentPostType, ScreenType} from '../../types'; @@ -15,12 +15,7 @@ const CommentsCount: React.FC = ({moment, screenType}) => { const navigation = useNavigation(); return ( navigation.navigate('MomentCommentsScreen', { moment_id: moment.moment_id, @@ -28,20 +23,26 @@ const CommentsCount: React.FC = ({moment, screenType}) => { }) }> - - {moment.comments_count} - + {moment.comments_count} ); }; +const styles = StyleSheet.create({ + countContainer: { + minWidth: 50, + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + }, + count: { + fontWeight: '500', + fontSize: normalize(11), + lineHeight: normalize(13), + letterSpacing: normalize(0.05), + textAlign: 'center', + color: 'white', + marginTop: normalize(5), + }, +}); export default CommentsCount; diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx index f3fb5c05..25301e6a 100644 --- a/src/components/comments/ZoomInCropper.tsx +++ b/src/components/comments/ZoomInCropper.tsx @@ -130,7 +130,7 @@ export const ZoomInCropper: React.FC = ({ = ({ value: moment.caption, styles: styles.captionText, partTypes: mentionPartTypes('white'), - onPress: (user: UserType) => + onPress: (userLocal: UserType) => navigateToProfile( state, dispatch, navigation, screenType, - user, + userLocal, ), })} diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx index a8adcfda..dc4ebe32 100644 --- a/src/components/profile/MomentMoreInfoDrawer.tsx +++ b/src/components/profile/MomentMoreInfoDrawer.tsx @@ -3,7 +3,6 @@ import React, {useEffect, useState} from 'react'; import { Alert, GestureResponderEvent, - StyleSheet, TextStyle, TouchableOpacity, ViewProps, diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 03842b0a..84c15f66 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -36,8 +36,9 @@ const NotificationsScreen: React.FC = () => { ); const [refreshing, setRefreshing] = useState(false); // used for figuring out which ones are unread - const [lastViewed, setLastViewed] = - useState(undefined); + const [lastViewed, setLastViewed] = useState( + undefined, + ); const {notifications} = useSelector( (state: RootState) => state.notifications, ); diff --git a/src/screens/onboarding/BasicInfoOnboarding.tsx b/src/screens/onboarding/BasicInfoOnboarding.tsx index d5998ac1..4c8da021 100644 --- a/src/screens/onboarding/BasicInfoOnboarding.tsx +++ b/src/screens/onboarding/BasicInfoOnboarding.tsx @@ -71,8 +71,9 @@ const BasicInfoOnboarding: React.FC = ({route}) => { const [invalidWithError, setInvalidWithError] = useState( 'Please enter a valid ', ); - const [autoCapitalize, setAutoCap] = - useState<'none' | 'sentences' | 'words' | 'characters' | undefined>('none'); + const [autoCapitalize, setAutoCap] = useState< + 'none' | 'sentences' | 'words' | 'characters' | undefined + >('none'); const [fadeValue, setFadeValue] = useState>( new Animated.Value(0), ); diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index 2ad22db4..ca31ad5b 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -1,19 +1,14 @@ import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; import React, {useEffect, useRef, useState} from 'react'; -import {FlatList, Keyboard, StyleSheet} from 'react-native'; +import {FlatList, Keyboard} from 'react-native'; import {useSelector} from 'react-redux'; import {MomentPost, TabsGradient} from '../../components'; import {AVATAR_DIM} from '../../constants'; import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootreducer'; import {MomentPostType} from '../../types'; -import { - isIPhoneX, - normalize, - SCREEN_HEIGHT, - StatusBarHeight, -} from '../../utils'; +import {isIPhoneX} from '../../utils'; /** * Individual moment view opened when user clicks on a moment tile @@ -38,10 +33,7 @@ interface IndividualMomentProps { navigation: IndividualMomentNavigationProp; } -const IndividualMoment: React.FC = ({ - route, - navigation, -}) => { +const IndividualMoment: React.FC = ({route}) => { const { userXId, screenType, @@ -86,7 +78,7 @@ const IndividualMoment: React.FC = ({ ( + renderItem={({item}) => ( Date: Wed, 23 Jun 2021 07:02:44 -0700 Subject: Fix moment tags crash issue on tag friends screen --- src/screens/moments/TagFriendsScreen.tsx | 46 ++++++++++++++++++++++++++------ 1 file changed, 38 insertions(+), 8 deletions(-) (limited to 'src/screens') diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index 6956dc0d..15926b5a 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -34,6 +34,8 @@ const TagFriendsScreen: React.FC = ({route}) => { const navigation = useNavigation(); const imageRef = useRef(null); const [tags, setTags] = useState([]); + const [imageWidth, setImageWidth] = useState(0); + const [imageHeight, setImageHeight] = useState(0); /* * Update list of tagged users from route params @@ -52,6 +54,32 @@ const TagFriendsScreen: React.FC = ({route}) => { }); }; + /* + * Calculating image width and height with respect to it's enclosing view's dimensions + */ + useEffect(() => { + if (imageRef && imageRef.current) { + Image.getSize( + imagePath, + (w, h) => { + const imageAspectRatio = w / h; + + // aspectRatio: >= 1 [Landscape] [1:1] + if (imageAspectRatio >= 1) { + setImageWidth(SCREEN_WIDTH); + setImageHeight(SCREEN_WIDTH / imageAspectRatio); + } + // aspectRatio: < 1 [Portrait] + else if (imageAspectRatio < 1) { + setImageHeight(SCREEN_WIDTH); + setImageWidth(SCREEN_WIDTH * imageAspectRatio); + } + }, + (err) => console.log(err), + ); + } + }, []); + return ( @@ -84,9 +112,16 @@ const TagFriendsScreen: React.FC = ({route}) => { }> {tags.length !== 0 && ( @@ -131,12 +166,7 @@ const styles = StyleSheet.create({ header: { marginVertical: 20, }, - image: { - position: 'relative', - width: SCREEN_WIDTH, - aspectRatio: 1, - marginBottom: '3%', - }, + image: {zIndex: 0, justifyContent: 'center', alignSelf: 'center'}, text: { position: 'relative', backgroundColor: 'white', -- cgit v1.2.3-70-g09d2