From f52f6eaa57250a3eb5cf50dab393c5ec29f4d688 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 7 Jun 2021 15:57:32 -0400 Subject: Resolve warning --- src/components/moments/MomentPostContent.tsx | 4 ++-- src/components/suggestedPeople/legacy/BadgesDropdown.tsx | 6 +++--- src/screens/onboarding/BasicInfoOnboarding.tsx | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index 4a1f3894..23eeae42 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -2,7 +2,7 @@ import {useNavigation} from '@react-navigation/native'; import React, {useEffect, useRef, useState} from 'react'; import {Image, StyleSheet, Text, View, ViewProps} from 'react-native'; import {TouchableWithoutFeedback} from 'react-native-gesture-handler'; -import Animated, {Easing} from 'react-native-reanimated'; +import Animated, {EasingNode} from 'react-native-reanimated'; import {useDispatch, useStore} from 'react-redux'; import {getCommentsCount} from '../../services'; import {RootState} from '../../store/rootReducer'; @@ -66,7 +66,7 @@ const MomentPostContent: React.FC = ({ Animated.timing(fadeValue, { toValue: 1, duration: 250, - easing: Easing.linear, + easing: EasingNode.linear, }).start(); }; fade(); diff --git a/src/components/suggestedPeople/legacy/BadgesDropdown.tsx b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx index 2c177e69..307205b8 100644 --- a/src/components/suggestedPeople/legacy/BadgesDropdown.tsx +++ b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx @@ -1,7 +1,7 @@ import React, {useEffect, useState} from 'react'; import {StyleSheet} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; -import Animated, {Easing} from 'react-native-reanimated'; +import Animated, {EasingNode} from 'react-native-reanimated'; import {BadgeIcon, UniversityIcon} from '../..'; import {UniversityBadgeDisplayType, UniversityType} from '../../../types'; import {normalize} from '../../../utils'; @@ -41,7 +41,7 @@ const BadgesDropdown: React.FC = ({ Animated.timing(top[i], { toValue: i * 40 + 50, duration: 150, - easing: Easing.linear, + easing: EasingNode.linear, }).start(); } } @@ -54,7 +54,7 @@ const BadgesDropdown: React.FC = ({ Animated.timing(top[i], { toValue: 0, duration: 150, - easing: Easing.linear, + easing: EasingNode.linear, }).start(); } } diff --git a/src/screens/onboarding/BasicInfoOnboarding.tsx b/src/screens/onboarding/BasicInfoOnboarding.tsx index e5e6f59b..d5998ac1 100644 --- a/src/screens/onboarding/BasicInfoOnboarding.tsx +++ b/src/screens/onboarding/BasicInfoOnboarding.tsx @@ -13,7 +13,7 @@ import { TouchableOpacity, } from 'react-native'; import {normalize} from 'react-native-elements'; -import Animated, {Easing, useValue} from 'react-native-reanimated'; +import Animated, {EasingNode, useValue} from 'react-native-reanimated'; import { ArrowButton, Background, @@ -99,7 +99,7 @@ const BasicInfoOnboarding: React.FC = ({route}) => { Animated.timing(fadeButtonValue, { toValue: target, duration: 100, - easing: Easing.linear, + easing: EasingNode.linear, }).start(); }; @@ -108,7 +108,7 @@ const BasicInfoOnboarding: React.FC = ({route}) => { Animated.timing(fadeValue, { toValue: 1, duration: 1000, - easing: Easing.linear, + easing: EasingNode.linear, }).start(); }; fade(); -- cgit v1.2.3-70-g09d2 From d71a4d178715d34570d949e0cd0c1c58186715fc Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 7 Jun 2021 16:07:56 -0400 Subject: Adjust header height --- .../moments/IndividualMomentTitleBar.tsx | 1 - src/screens/profile/IndividualMoment.tsx | 26 ++++++++-------------- 2 files changed, 9 insertions(+), 18 deletions(-) (limited to 'src') diff --git a/src/components/moments/IndividualMomentTitleBar.tsx b/src/components/moments/IndividualMomentTitleBar.tsx index 79453ade..2bebafa7 100644 --- a/src/components/moments/IndividualMomentTitleBar.tsx +++ b/src/components/moments/IndividualMomentTitleBar.tsx @@ -30,7 +30,6 @@ const styles = StyleSheet.create({ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', - height: '5%', }, headerContainer: { width: '80%', diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index 4ad4515d..f8015720 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -8,7 +8,12 @@ import {IndividualMomentTitleBar, MomentPost} from '../../components'; import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootreducer'; import {MomentType} from '../../types'; -import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; +import { + normalize, + SCREEN_HEIGHT, + SCREEN_WIDTH, + StatusBarHeight, +} from '../../utils'; /** * Individual moment view opened when user clicks on a moment tile @@ -23,8 +28,6 @@ interface IndividualMomentProps { navigation: IndividualMomentNavigationProp; } -const ITEM_HEIGHT = SCREEN_HEIGHT * 0.9; - const IndividualMoment: React.FC = ({ route, navigation, @@ -50,7 +53,7 @@ const IndividualMoment: React.FC = ({ navigation.pop()} - {...{title: moment_category}} + title={moment_category} /> = ({ renderItem={({item}: {item: MomentType}) => ( )} - keyExtractor={(item, index) => index.toString()} + keyExtractor={(_, index) => index.toString()} showsVerticalScrollIndicator={false} - snapToAlignment={'start'} - snapToInterval={ITEM_HEIGHT} - decelerationRate={'fast'} initialScrollIndex={initialIndex} - getItemLayout={(data, index) => ({ - length: ITEM_HEIGHT, - offset: ITEM_HEIGHT * index, - index, - })} - pagingEnabled /> @@ -87,11 +81,9 @@ const styles = StyleSheet.create({ flex: 9, }, header: { - flex: 1, + height: normalize(70), }, postContainer: { - height: ITEM_HEIGHT, - width: SCREEN_WIDTH, flex: 1, }, postHeader: { -- cgit v1.2.3-70-g09d2 From 960b1516bc06c1fa16ba47a4aab62c94c3b10beb Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 7 Jun 2021 16:11:09 -0400 Subject: Cleanup code --- src/screens/profile/IndividualMoment.tsx | 42 +++++++++----------------------- 1 file changed, 11 insertions(+), 31 deletions(-) (limited to 'src') diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index f8015720..95428c39 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -2,18 +2,13 @@ import {BlurView} from '@react-native-community/blur'; import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; import React from 'react'; -import {FlatList, StyleSheet, View} from 'react-native'; +import {FlatList, StyleSheet} from 'react-native'; import {useSelector} from 'react-redux'; import {IndividualMomentTitleBar, MomentPost} from '../../components'; import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootreducer'; import {MomentType} from '../../types'; -import { - normalize, - SCREEN_HEIGHT, - SCREEN_WIDTH, - StatusBarHeight, -} from '../../utils'; +import {normalize, StatusBarHeight} from '../../utils'; /** * Individual moment view opened when user clicks on a moment tile @@ -55,41 +50,26 @@ const IndividualMoment: React.FC = ({ close={() => navigation.pop()} title={moment_category} /> - - ( - - )} - keyExtractor={(_, index) => index.toString()} - showsVerticalScrollIndicator={false} - initialScrollIndex={initialIndex} - /> - + ( + + )} + keyExtractor={(_, index) => index.toString()} + showsVerticalScrollIndicator={false} + initialScrollIndex={initialIndex} + /> ); }; const styles = StyleSheet.create({ contentContainer: { - width: SCREEN_WIDTH, - height: SCREEN_HEIGHT, paddingTop: StatusBarHeight, flex: 1, - paddingBottom: 0, - }, - content: { - flex: 9, }, header: { height: normalize(70), }, - postContainer: { - flex: 1, - }, - postHeader: { - flex: 1, - }, - postContent: {flex: 9}, }); export default IndividualMoment; -- cgit v1.2.3-70-g09d2 From 040ff3d591ea3874dab85325dc437494fb47e287 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 7 Jun 2021 16:18:25 -0400 Subject: Cleanup styles --- src/components/moments/MomentPost.tsx | 29 +++++++--------------------- src/components/moments/MomentPostContent.tsx | 9 +++++++-- 2 files changed, 14 insertions(+), 24 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 7149a5b4..926ae931 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -71,7 +71,7 @@ const MomentPost: React.FC = ({item, userXId, screenType}) => { }; return ( - + <> = ({item, userXId, screenType}) => { screenType={screenType} momentTags={tags} /> - + ); }; const styles = StyleSheet.create({ - contentContainer: { - width: SCREEN_WIDTH, - height: SCREEN_HEIGHT, - paddingTop: StatusBarHeight, - flex: 1, - paddingBottom: 0, - }, - content: { - flex: 9, - }, - header: { - flex: 1, - }, - postContainer: { - height: ITEM_HEIGHT, - width: SCREEN_WIDTH, - flex: 1, - }, postHeader: { - flex: 1, + // borderWidth: 1, + }, + postContent: { + // borderWidth: 1, + marginBottom: 10, }, - postContent: {flex: 9}, }); export default MomentPost; diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index 23eeae42..2f0f36f7 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -88,13 +88,18 @@ const MomentPostContent: React.FC = ({ {tags.length > 0 && ( )} {visible && ( - + null} + imageRef={imageRef} + /> )} -- cgit v1.2.3-70-g09d2 From 47cde91048371301a17e072b8ec02861be563860 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 7 Jun 2021 16:21:54 -0400 Subject: Cleanup styles --- src/components/moments/MomentPost.tsx | 7 ++----- src/components/moments/MomentPostContent.tsx | 5 +---- 2 files changed, 3 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 926ae931..b97b8034 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -95,12 +95,9 @@ const MomentPost: React.FC = ({item, userXId, screenType}) => { }; const styles = StyleSheet.create({ - postHeader: { - // borderWidth: 1, - }, + postHeader: {}, postContent: { - // borderWidth: 1, - marginBottom: 10, + minHeight: SCREEN_HEIGHT * 0.8, }, }); diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index 2f0f36f7..de31ad55 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -122,9 +122,7 @@ const MomentPostContent: React.FC = ({ }; const styles = StyleSheet.create({ - container: { - height: SCREEN_HEIGHT, - }, + container: {}, image: { width: SCREEN_WIDTH, aspectRatio: 1, @@ -148,7 +146,6 @@ const styles = StyleSheet.create({ }, captionText: { position: 'relative', - paddingBottom: '34%', paddingTop: '1%', marginLeft: '5%', marginRight: '5%', -- cgit v1.2.3-70-g09d2 From 96a80c53fcc0b5815b56f0ed0b48d152a6c6e2a4 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 8 Jun 2021 11:33:13 -0400 Subject: Cleanup linter warnings --- src/components/moments/MomentPost.tsx | 6 ++---- src/components/moments/MomentPostContent.tsx | 1 - src/routes/main/MainStackScreen.tsx | 1 - 3 files changed, 2 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index b97b8034..1f363052 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -1,11 +1,11 @@ import React, {useEffect, useState} from 'react'; -import {StyleSheet, View} from 'react-native'; +import {StyleSheet} from 'react-native'; import {useSelector} from 'react-redux'; import {MomentPostContent, MomentPostHeader} from '.'; import {deleteMomentTag, loadMomentTags} from '../../services'; import {RootState} from '../../store/rootReducer'; import {MomentTagType, MomentType, ScreenType} from '../../types'; -import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; +import {SCREEN_HEIGHT} from '../../utils'; interface MomentPostProps { item: MomentType; @@ -13,8 +13,6 @@ interface MomentPostProps { screenType: ScreenType; } -const ITEM_HEIGHT = SCREEN_HEIGHT * 0.9; - const MomentPost: React.FC = ({item, userXId, screenType}) => { const {userId: loggedInUserId, username: loggedInUsername} = useSelector( (state: RootState) => state.user.user, diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index de31ad55..dcad9aca 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -11,7 +11,6 @@ import { getTimePosted, navigateToProfile, normalize, - SCREEN_HEIGHT, SCREEN_WIDTH, } from '../../utils'; import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index f6a012d6..3be2ff28 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -245,7 +245,6 @@ const MainStackScreen: React.FC = ({route}) => { Date: Tue, 8 Jun 2021 14:20:57 -0400 Subject: Create MomentPostType --- src/components/moments/MomentPost.tsx | 22 +++++++++++++--------- src/screens/profile/IndividualMoment.tsx | 6 +++--- src/services/MomentService.ts | 21 ++++++--------------- src/store/initialStates.ts | 11 +++++++---- src/types/types.ts | 10 +++++++++- 5 files changed, 38 insertions(+), 32 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 1f363052..4f8bb63f 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -4,16 +4,20 @@ import {useSelector} from 'react-redux'; import {MomentPostContent, MomentPostHeader} from '.'; import {deleteMomentTag, loadMomentTags} from '../../services'; import {RootState} from '../../store/rootReducer'; -import {MomentTagType, MomentType, ScreenType} from '../../types'; +import {MomentPostType, MomentTagType, ScreenType} from '../../types'; import {SCREEN_HEIGHT} from '../../utils'; interface MomentPostProps { - item: MomentType; + moment: MomentPostType; userXId: string | undefined; screenType: ScreenType; } -const MomentPost: React.FC = ({item, userXId, screenType}) => { +const MomentPost: React.FC = ({ + moment, + userXId, + screenType, +}) => { const {userId: loggedInUserId, username: loggedInUsername} = useSelector( (state: RootState) => state.user.user, ); @@ -29,7 +33,7 @@ const MomentPost: React.FC = ({item, userXId, screenType}) => { const isOwnProfile = username === loggedInUsername; const loadTags = async () => { - const response = await loadMomentTags(item.moment_id); + const response = await loadMomentTags(moment.moment_id); setTags(response ? response : []); }; @@ -74,17 +78,17 @@ const MomentPost: React.FC = ({item, userXId, screenType}) => { userXId={userXId} screenType={screenType} username={isOwnProfile ? loggedInUsername : username} - momentId={item.moment_id} + momentId={moment.moment_id} style={styles.postHeader} momentTagId={momentTagId} removeTag={removeTag} /> diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index 95428c39..ba6a731c 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -7,7 +7,7 @@ import {useSelector} from 'react-redux'; import {IndividualMomentTitleBar, MomentPost} from '../../components'; import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootreducer'; -import {MomentType} from '../../types'; +import {MomentPostType, MomentType} from '../../types'; import {normalize, StatusBarHeight} from '../../utils'; /** @@ -52,8 +52,8 @@ const IndividualMoment: React.FC = ({ /> ( - + renderItem={({item}: {item: MomentPostType}) => ( + )} keyExtractor={(_, index) => index.toString()} showsVerticalScrollIndicator={false} diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts index af602dc7..e227bc9e 100644 --- a/src/services/MomentService.ts +++ b/src/services/MomentService.ts @@ -6,7 +6,7 @@ import { MOMENT_TAGS_ENDPOINT, MOMENT_THUMBNAIL_ENDPOINT, } from '../constants'; -import {MomentTagType, MomentType} from '../types'; +import {MomentPostType, MomentTagType, MomentType} from '../types'; import {checkImageUploadStatus} from '../utils'; export const postMoment = async ( @@ -54,11 +54,7 @@ export const postMoment = async ( return undefined; }; -export const loadMoments: ( - userId: string, - token: string, -) => Promise = async (userId, token) => { - let moments: MomentType[] = []; +export const loadMoments = async (userId: string, token: string) => { try { const response = await fetch(MOMENTS_ENDPOINT + '?user_id=' + userId, { method: 'GET', @@ -66,19 +62,14 @@ export const loadMoments: ( Authorization: 'Token ' + token, }, }); - const status = response.status; - if (status === 200) { - const data = await response.json(); - moments = data; - } else { - console.log('Could not load moments!'); - return []; + if (response.status === 200) { + const typedData: MomentPostType[] = await response.json(); + return typedData; } } catch (err) { console.log(err); - return []; } - return moments; + return []; }; export const deleteMoment = async (momentId: string) => { diff --git a/src/store/initialStates.ts b/src/store/initialStates.ts index e2902a2d..92a1e456 100644 --- a/src/store/initialStates.ts +++ b/src/store/initialStates.ts @@ -1,14 +1,17 @@ -import {CommentThreadType, UniversityType} from './../types/types'; import { - MomentType, NotificationType, - ProfilePreviewType, ProfileInfoType, + ProfilePreviewType, ScreenType, SocialAccountType, UserType, UserXType, } from '../types'; +import { + CommentThreadType, + MomentPostType, + UniversityType, +} from './../types/types'; export const NO_PROFILE: ProfileInfoType = { biography: '', @@ -29,7 +32,7 @@ export const NO_PROFILE: ProfileInfoType = { is_private: true, }; -export const EMPTY_MOMENTS_LIST = []; +export const EMPTY_MOMENTS_LIST = []; export const EMPTY_NOTIFICATIONS_LIST = []; diff --git a/src/types/types.ts b/src/types/types.ts index e54c2201..1e50eba8 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -119,6 +119,14 @@ export interface MomentType { thumbnail_url: string; } +export interface MomentPostType extends MomentType { + comments_count: number; + comment_preview: { + user: ProfilePreviewType; + comment: string; + }; +} + export interface MomentTagType { id: string; user: ProfilePreviewType; @@ -172,7 +180,7 @@ export enum ScreenType { */ export interface UserXType { friends: ProfilePreviewType[]; - moments: MomentType[]; + moments: MomentPostType[]; socialAccounts: Record; momentCategories: string[]; user: UserType; -- cgit v1.2.3-70-g09d2 From be1df6bb00e89c92da9a33d0375cfecb441d3a23 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 8 Jun 2021 14:53:28 -0400 Subject: Cleanup code, Add comment count --- src/components/moments/MomentPost.tsx | 5 +---- src/components/moments/MomentPostContent.tsx | 31 ++++++++-------------------- src/components/moments/MomentPostHeader.tsx | 3 ++- 3 files changed, 12 insertions(+), 27 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 4f8bb63f..ffdbed81 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -85,10 +85,7 @@ const MomentPost: React.FC = ({ /> diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index dcad9aca..c59a9c39 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -4,9 +4,8 @@ import {Image, StyleSheet, Text, View, ViewProps} from 'react-native'; import {TouchableWithoutFeedback} from 'react-native-gesture-handler'; import Animated, {EasingNode} from 'react-native-reanimated'; import {useDispatch, useStore} from 'react-redux'; -import {getCommentsCount} from '../../services'; import {RootState} from '../../store/rootReducer'; -import {MomentTagType, ScreenType, UserType} from '../../types'; +import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types'; import { getTimePosted, navigateToProfile, @@ -19,18 +18,12 @@ import {MomentTags} from '../common'; interface MomentPostContentProps extends ViewProps { screenType: ScreenType; - momentId: string; - caption: string; - pathHash: string; - dateTime: string; + moment: MomentPostType; momentTags: MomentTagType[]; } const MomentPostContent: React.FC = ({ screenType, - momentId, - caption, - pathHash, - dateTime, + moment, style, momentTags, }) => { @@ -38,7 +31,6 @@ const MomentPostContent: React.FC = ({ const navigation = useNavigation(); const dispatch = useDispatch(); const [elapsedTime, setElapsedTime] = useState(''); - const [comments_count, setCommentsCount] = useState(''); const [tags, setTags] = useState(momentTags); const imageRef = useRef(null); const [visible, setVisible] = useState(false); @@ -52,13 +44,8 @@ const MomentPostContent: React.FC = ({ }, [momentTags]); useEffect(() => { - const fetchCommentsCount = async () => { - const count = await getCommentsCount(momentId, false); - setCommentsCount(count); - }; - setElapsedTime(getTimePosted(dateTime)); - fetchCommentsCount(); - }, [dateTime, momentId]); + setElapsedTime(getTimePosted(moment.date_created)); + }, [moment.date_created]); useEffect(() => { const fade = async () => { @@ -81,7 +68,7 @@ const MomentPostContent: React.FC = ({ {tags.length > 0 && ( @@ -103,14 +90,14 @@ const MomentPostContent: React.FC = ({ )} {elapsedTime} {renderTextWithMentions({ - value: caption, + value: moment.caption, styles: styles.captionText, partTypes: mentionPartTypes('white'), onPress: (user: UserType) => diff --git a/src/components/moments/MomentPostHeader.tsx b/src/components/moments/MomentPostHeader.tsx index dc6a3cd9..64581e06 100644 --- a/src/components/moments/MomentPostHeader.tsx +++ b/src/components/moments/MomentPostHeader.tsx @@ -62,6 +62,7 @@ const MomentPostHeader: React.FC = ({ style={styles.avatar} userXId={userXId} screenType={screenType} + editable={false} /> {username} @@ -74,7 +75,7 @@ const MomentPostHeader: React.FC = ({ removeTag={removeTag} dismissScreenAndUpdate={() => { dispatch(loadUserMoments(loggedInUserId)); - navigation.pop(); + navigation.goBack(); }} /> -- cgit v1.2.3-70-g09d2 From 7de499af625b28074e86854b997e66257ffab8c8 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 8 Jun 2021 16:18:30 -0400 Subject: Adjust styling --- src/components/comments/AddComment.tsx | 34 ++++++++++++++++++++-------- src/components/moments/MomentPostContent.tsx | 30 ++++++++++++++++-------- src/screens/profile/IndividualMoment.tsx | 4 ++-- src/services/MomentService.ts | 2 +- src/types/types.ts | 2 +- 5 files changed, 48 insertions(+), 24 deletions(-) (limited to 'src') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index b229d010..24ff830a 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -24,10 +24,15 @@ import {MentionInputControlled} from './MentionInputControlled'; export interface AddCommentProps { momentId: string; placeholderText: string; + theme?: 'dark' | 'white'; } -const AddComment: React.FC = ({momentId, placeholderText}) => { - const {setShouldUpdateAllComments, commentTapped} = +const AddComment: React.FC = ({ + momentId, + placeholderText, + theme = 'white', +}) => { + const {setShouldUpdateAllComments = () => null, commentTapped} = useContext(CommentContext); const [inReplyToMention, setInReplyToMention] = useState(''); const [comment, setComment] = useState(''); @@ -106,13 +111,14 @@ const AddComment: React.FC = ({momentId, placeholderText}) => { keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}> { @@ -124,11 +130,15 @@ const AddComment: React.FC = ({momentId, placeholderText}) => { inputRef={ref} partTypes={mentionPartTypes('blue')} /> - - - - - + {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && ( + + + + + + )} @@ -136,7 +146,11 @@ const AddComment: React.FC = ({momentId, placeholderText}) => { }; const styles = StyleSheet.create({ - container: { + containerDark: { + alignItems: 'center', + width: SCREEN_WIDTH, + }, + containerWhite: { backgroundColor: '#f7f7f7', alignItems: 'center', width: SCREEN_WIDTH, diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index c59a9c39..e76a8ceb 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -4,6 +4,7 @@ import {Image, StyleSheet, Text, View, ViewProps} from 'react-native'; import {TouchableWithoutFeedback} from 'react-native-gesture-handler'; import Animated, {EasingNode} from 'react-native-reanimated'; import {useDispatch, useStore} from 'react-redux'; +import {ADD_COMMENT_TEXT} from '../../constants/strings'; import {RootState} from '../../store/rootReducer'; import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types'; import { @@ -13,7 +14,7 @@ import { SCREEN_WIDTH, } from '../../utils'; import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; -import {CommentsCount} from '../comments'; +import {AddComment, CommentsCount} from '../comments'; import {MomentTags} from '../common'; interface MomentPostContentProps extends ViewProps { @@ -38,7 +39,6 @@ const MomentPostContent: React.FC = ({ const [fadeValue, setFadeValue] = useState>( new Animated.Value(0), ); - useEffect(() => { setTags(momentTags); }, [momentTags]); @@ -96,19 +96,27 @@ const MomentPostContent: React.FC = ({ /> {elapsedTime} - {renderTextWithMentions({ - value: moment.caption, - styles: styles.captionText, - partTypes: mentionPartTypes('white'), - onPress: (user: UserType) => - navigateToProfile(state, dispatch, navigation, screenType, user), - })} + {moment.caption !== '' && + renderTextWithMentions({ + value: moment.caption, + styles: styles.captionText, + partTypes: mentionPartTypes('white'), + onPress: (user: UserType) => + navigateToProfile(state, dispatch, navigation, screenType, user), + })} + ); }; const styles = StyleSheet.create({ - container: {}, + container: { + borderWidth: 1, + }, image: { width: SCREEN_WIDTH, aspectRatio: 1, @@ -117,6 +125,7 @@ const styles = StyleSheet.create({ footerContainer: { flexDirection: 'row', justifyContent: 'space-between', + borderWidth: 1, marginLeft: '7%', marginRight: '5%', marginBottom: '2%', @@ -140,6 +149,7 @@ const styles = StyleSheet.create({ fontSize: normalize(13), lineHeight: normalize(15.51), letterSpacing: normalize(0.6), + borderWidth: 1, }, tapTag: { position: 'absolute', diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index ba6a731c..5ac8aeab 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -7,7 +7,7 @@ import {useSelector} from 'react-redux'; import {IndividualMomentTitleBar, MomentPost} from '../../components'; import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootreducer'; -import {MomentPostType, MomentType} from '../../types'; +import {MomentPostType} from '../../types'; import {normalize, StatusBarHeight} from '../../utils'; /** @@ -47,7 +47,7 @@ const IndividualMoment: React.FC = ({ style={styles.contentContainer}> navigation.pop()} + close={() => navigation.goBack()} title={moment_category} /> Date: Tue, 8 Jun 2021 16:52:05 -0400 Subject: Move things around, Add logic to disable button --- src/components/comments/AddComment.tsx | 10 +++++++++- src/components/moments/MomentPostContent.tsx | 16 ++++++++-------- 2 files changed, 17 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index 24ff830a..12fd7e4d 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -133,7 +133,12 @@ const AddComment: React.FC = ({ {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && ( @@ -190,6 +195,9 @@ const styles = StyleSheet.create({ marginVertical: '2%', alignSelf: 'flex-end', }, + greyButton: { + backgroundColor: 'grey', + }, whiteBackround: { backgroundColor: '#fff', }, diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index e76a8ceb..582cba25 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -88,14 +88,6 @@ const MomentPostContent: React.FC = ({ /> )} - - - {elapsedTime} - {moment.caption !== '' && renderTextWithMentions({ value: moment.caption, @@ -104,6 +96,14 @@ const MomentPostContent: React.FC = ({ onPress: (user: UserType) => navigateToProfile(state, dispatch, navigation, screenType, user), })} + + + {elapsedTime} + Date: Tue, 8 Jun 2021 17:17:11 -0400 Subject: Remove CommentCount, Add new comments component --- src/components/comments/CommentsCount.tsx | 58 ------------------------- src/components/comments/index.ts | 1 - src/components/moments/MomentPostContent.tsx | 63 +++++++++++++++------------- src/screens/profile/IndividualMoment.tsx | 2 +- 4 files changed, 36 insertions(+), 88 deletions(-) delete mode 100644 src/components/comments/CommentsCount.tsx (limited to 'src') diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx deleted file mode 100644 index f4f8197d..00000000 --- a/src/components/comments/CommentsCount.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import {useNavigation} from '@react-navigation/native'; -import * as React from 'react'; -import {StyleSheet, TouchableOpacity} from 'react-native'; -import {Text} from 'react-native-animatable'; -import CommentIcon from '../../assets/icons/moment-comment-icon.svg'; -import {ScreenType} from '../../types'; - -/** - * Provides a view for the comment icon and the comment count. - * When the user clicks on this view, a new screen opens to display all the comments. - */ - -type CommentsCountProps = { - commentsCount: string; - momentId: string; - screenType: ScreenType; -}; - -const CommentsCount: React.FC = ({ - commentsCount, - momentId, - screenType, -}) => { - const navigation = useNavigation(); - const navigateToCommentsScreen = async () => { - navigation.push('MomentCommentsScreen', { - moment_id: momentId, - screenType, - }); - }; - return ( - <> - - - - {commentsCount !== '0' ? commentsCount : ''} - - - - ); -}; - -const styles = StyleSheet.create({ - image: { - position: 'relative', - width: 21, - height: 21, - }, - count: { - position: 'relative', - fontWeight: 'bold', - color: 'white', - paddingTop: '3%', - textAlign: 'center', - }, -}); - -export default CommentsCount; diff --git a/src/components/comments/index.ts b/src/components/comments/index.ts index 6293f799..ebd93844 100644 --- a/src/components/comments/index.ts +++ b/src/components/comments/index.ts @@ -1,3 +1,2 @@ -export {default as CommentsCount} from '../comments/CommentsCount'; export {default as CommentTile} from './CommentTile'; export {default as AddComment} from './AddComment'; diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index 582cba25..34503bf4 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -1,10 +1,12 @@ import {useNavigation} from '@react-navigation/native'; import React, {useEffect, useRef, useState} from 'react'; import {Image, StyleSheet, Text, View, ViewProps} from 'react-native'; -import {TouchableWithoutFeedback} from 'react-native-gesture-handler'; +import { + TouchableOpacity, + TouchableWithoutFeedback, +} from 'react-native-gesture-handler'; import Animated, {EasingNode} from 'react-native-reanimated'; import {useDispatch, useStore} from 'react-redux'; -import {ADD_COMMENT_TEXT} from '../../constants/strings'; import {RootState} from '../../store/rootReducer'; import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types'; import { @@ -14,7 +16,7 @@ import { SCREEN_WIDTH, } from '../../utils'; import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; -import {AddComment, CommentsCount} from '../comments'; +import {AddComment} from '../comments'; import {MomentTags} from '../common'; interface MomentPostContentProps extends ViewProps { @@ -31,22 +33,21 @@ const MomentPostContent: React.FC = ({ const state: RootState = useStore().getState(); const navigation = useNavigation(); const dispatch = useDispatch(); - const [elapsedTime, setElapsedTime] = useState(''); const [tags, setTags] = useState(momentTags); const imageRef = useRef(null); const [visible, setVisible] = useState(false); - const [fadeValue, setFadeValue] = useState>( new Animated.Value(0), ); + const commentCountText = + moment.comments_count === 0 + ? 'No Comments' + : moment.comments_count + ' comments'; + useEffect(() => { setTags(momentTags); }, [momentTags]); - useEffect(() => { - setElapsedTime(getTimePosted(moment.date_created)); - }, [moment.date_created]); - useEffect(() => { const fade = async () => { Animated.timing(fadeValue, { @@ -96,19 +97,22 @@ const MomentPostContent: React.FC = ({ onPress: (user: UserType) => navigateToProfile(state, dispatch, navigation, screenType, user), })} - - - {elapsedTime} - + + navigation.push('MomentCommentsScreen', { + moment_id: moment.moment_id, + screenType, + }) + }> + {commentCountText} + + {getTimePosted(moment.date_created)} ); }; @@ -122,22 +126,24 @@ const styles = StyleSheet.create({ aspectRatio: 1, marginBottom: '3%', }, - footerContainer: { + commentsPreviewContainer: { flexDirection: 'row', justifyContent: 'space-between', - borderWidth: 1, - marginLeft: '7%', - marginRight: '5%', + marginHorizontal: '5%', marginBottom: '2%', + borderWidth: 1, + }, + commentCount: { + fontWeight: '700', + color: 'white', + fontSize: normalize(12), }, text: { - position: 'relative', - paddingBottom: '1%', - paddingTop: '1%', - marginLeft: '7%', - marginRight: '2%', - color: '#ffffff', - fontWeight: 'bold', + marginHorizontal: '5%', + color: 'white', + fontWeight: '500', + textAlign: 'right', + marginTop: 5, }, captionText: { position: 'relative', @@ -150,6 +156,7 @@ const styles = StyleSheet.create({ lineHeight: normalize(15.51), letterSpacing: normalize(0.6), borderWidth: 1, + marginBottom: normalize(18), }, tapTag: { position: 'absolute', diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index 5ac8aeab..447ba2a9 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -55,7 +55,7 @@ const IndividualMoment: React.FC = ({ renderItem={({item}: {item: MomentPostType}) => ( )} - keyExtractor={(_, index) => index.toString()} + keyExtractor={(item, _) => item.moment_id} showsVerticalScrollIndicator={false} initialScrollIndex={initialIndex} /> -- cgit v1.2.3-70-g09d2 From c6832a84caf1f23c2115a3b8061e120f9fab623d Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 8 Jun 2021 17:40:10 -0400 Subject: Update date format --- src/utils/moments.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/utils/moments.ts b/src/utils/moments.ts index 90d69519..9e8cc332 100644 --- a/src/utils/moments.ts +++ b/src/utils/moments.ts @@ -19,21 +19,21 @@ export const getTimePosted = (date_time: string) => { // 1 minute to less than 1 hour else if (difference >= 60 && difference < 60 * 60) { difference = now.diff(datePosted, 'minutes'); - time = difference + (difference === 1 ? ' minute' : ' minutes'); + time = difference + 'm ago'; } // 1 hour to less than 1 day else if (difference >= 60 * 60 && difference < 24 * 60 * 60) { difference = now.diff(datePosted, 'hours'); - time = difference + (difference === 1 ? ' hour' : ' hours'); + time = difference + 'h ago'; } // Any number of days else if (difference >= 24 * 60 * 60 && difference < 24 * 60 * 60 * 3) { difference = now.diff(datePosted, 'days'); - time = difference + (difference === 1 ? ' day' : ' days'); + time = difference + 'd ago'; } // More than 3 days else if (difference >= 24 * 60 * 60 * 3) { - time = datePosted.format('MMMM D, YYYY'); + time = datePosted.format('M-D-YYYY'); } return time; }; -- cgit v1.2.3-70-g09d2 From 18770a692d03fb68267b51ef05cd4b58917b0e62 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 8 Jun 2021 17:43:04 -0400 Subject: Create MomentCommentPrevew component --- src/components/moments/MomentCommentPreview.tsx | 52 +++++++++++++++++++++++++ src/components/moments/MomentPost.tsx | 3 +- src/components/moments/MomentPostContent.tsx | 33 ++-------------- 3 files changed, 57 insertions(+), 31 deletions(-) create mode 100644 src/components/moments/MomentCommentPreview.tsx (limited to 'src') diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx new file mode 100644 index 00000000..45bbbfad --- /dev/null +++ b/src/components/moments/MomentCommentPreview.tsx @@ -0,0 +1,52 @@ +import {useNavigation} from '@react-navigation/native'; +import React from 'react'; +import {StyleSheet, Text} from 'react-native'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import {MomentPostType, ScreenType} from '../../types'; +import {normalize} from '../../utils'; + +interface MomentCommentPreviewProps { + moment: MomentPostType; + screenType: ScreenType; +} + +const MomentCommentPreview: React.FC = ({ + moment, + screenType, +}) => { + const navigation = useNavigation(); + const commentCountText = + moment.comments_count === 0 + ? 'No Comments' + : moment.comments_count + ' comments'; + + return ( + + navigation.push('MomentCommentsScreen', { + moment_id: moment.moment_id, + screenType, + }) + }> + {commentCountText} + TODO: Add comment preview here + + ); +}; + +const styles = StyleSheet.create({ + commentsPreviewContainer: { + flexDirection: 'column', + marginHorizontal: '5%', + marginBottom: '2%', + borderWidth: 1, + }, + commentCount: { + fontWeight: '700', + color: 'white', + fontSize: normalize(12), + }, +}); + +export default MomentCommentPreview; diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index ffdbed81..02dbffa3 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -5,7 +5,7 @@ import {MomentPostContent, MomentPostHeader} from '.'; import {deleteMomentTag, loadMomentTags} from '../../services'; import {RootState} from '../../store/rootReducer'; import {MomentPostType, MomentTagType, ScreenType} from '../../types'; -import {SCREEN_HEIGHT} from '../../utils'; +import {normalize, SCREEN_HEIGHT} from '../../utils'; interface MomentPostProps { moment: MomentPostType; @@ -97,6 +97,7 @@ const styles = StyleSheet.create({ postHeader: {}, postContent: { minHeight: SCREEN_HEIGHT * 0.8, + paddingBottom: normalize(20), }, }); diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index 34503bf4..01863660 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -1,10 +1,7 @@ import {useNavigation} from '@react-navigation/native'; import React, {useEffect, useRef, useState} from 'react'; import {Image, StyleSheet, Text, View, ViewProps} from 'react-native'; -import { - TouchableOpacity, - TouchableWithoutFeedback, -} from 'react-native-gesture-handler'; +import {TouchableWithoutFeedback} from 'react-native-gesture-handler'; import Animated, {EasingNode} from 'react-native-reanimated'; import {useDispatch, useStore} from 'react-redux'; import {RootState} from '../../store/rootReducer'; @@ -18,6 +15,7 @@ import { import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; import {AddComment} from '../comments'; import {MomentTags} from '../common'; +import MomentCommentPreview from './MomentCommentPreview'; interface MomentPostContentProps extends ViewProps { screenType: ScreenType; @@ -39,10 +37,6 @@ const MomentPostContent: React.FC = ({ const [fadeValue, setFadeValue] = useState>( new Animated.Value(0), ); - const commentCountText = - moment.comments_count === 0 - ? 'No Comments' - : moment.comments_count + ' comments'; useEffect(() => { setTags(momentTags); @@ -97,16 +91,7 @@ const MomentPostContent: React.FC = ({ onPress: (user: UserType) => navigateToProfile(state, dispatch, navigation, screenType, user), })} - - navigation.push('MomentCommentsScreen', { - moment_id: moment.moment_id, - screenType, - }) - }> - {commentCountText} - + Date: Tue, 8 Jun 2021 18:19:19 -0400 Subject: Added comment preview, WIP on mention part types --- src/components/moments/MomentCommentPreview.tsx | 66 ++++++++++++++++++++++--- src/components/moments/MomentPostContent.tsx | 6 +-- src/utils/comments.tsx | 41 ++++++++++----- 3 files changed, 88 insertions(+), 25 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx index 45bbbfad..03f30dda 100644 --- a/src/components/moments/MomentCommentPreview.tsx +++ b/src/components/moments/MomentCommentPreview.tsx @@ -1,9 +1,11 @@ import {useNavigation} from '@react-navigation/native'; import React from 'react'; -import {StyleSheet, Text} from 'react-native'; +import {Image, StyleSheet, Text, View} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; -import {MomentPostType, ScreenType} from '../../types'; -import {normalize} from '../../utils'; +import {useDispatch, useStore} from 'react-redux'; +import {MomentPostType, ScreenType, UserType} from '../../types'; +import {navigateToProfile, normalize} from '../../utils'; +import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; interface MomentCommentPreviewProps { moment: MomentPostType; @@ -15,11 +17,18 @@ const MomentCommentPreview: React.FC = ({ screenType, }) => { const navigation = useNavigation(); + const state = useStore().getState(); const commentCountText = moment.comments_count === 0 ? 'No Comments' : moment.comments_count + ' comments'; + /** + * TODO: + * - figure out why mention PartTypes have type warnings + * - fix padding for all types (double check on iPhone 8) + */ + return ( = ({ screenType, }) }> - {commentCountText} - TODO: Add comment preview here + {commentCountText} + {moment.comment_preview !== null && ( + + + + + {moment.comment_preview.commenter.username} + + {renderTextWithMentions({ + value: moment.comment_preview.comment, + styles: styles.normalFont, + partTypes: mentionPartTypes('commentPreview'), + onPress: (user: UserType) => + navigateToProfile( + state, + useDispatch, + navigation, + screenType, + user, + ), + })} + + + )} ); }; const styles = StyleSheet.create({ commentsPreviewContainer: { + height: normalize(50), flexDirection: 'column', + justifyContent: 'space-around', marginHorizontal: '5%', marginBottom: '2%', - borderWidth: 1, }, - commentCount: { + whiteBold: { fontWeight: '700', color: 'white', - fontSize: normalize(12), + fontSize: normalize(13), + }, + previewContainer: { + flexDirection: 'row', + width: '95%', + }, + avatar: { + height: normalize(16), + width: normalize(16), + borderRadius: 99, + }, + normalFont: { + // top: -5, + fontWeight: 'normal', }, }); diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index 01863660..5fd683a4 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -120,16 +120,14 @@ const styles = StyleSheet.create({ }, captionText: { position: 'relative', - paddingTop: '1%', - marginLeft: '5%', - marginRight: '5%', + marginHorizontal: '5%', color: '#ffffff', fontWeight: '500', fontSize: normalize(13), lineHeight: normalize(15.51), letterSpacing: normalize(0.6), - borderWidth: 1, marginBottom: normalize(18), + borderWidth: 1, }, tapTag: { position: 'absolute', diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx index 5c17cefe..e700da88 100644 --- a/src/utils/comments.tsx +++ b/src/utils/comments.tsx @@ -79,26 +79,41 @@ export const renderTextWithMentions: React.FC = ({ ); }; -export const mentionPartTypes: (style: 'blue' | 'white') => PartType[] = ( - style, +const textStyle: (theme: 'blue' | 'white' | 'commentPreview') => PartType = ( + theme, ) => { + switch (theme) { + case 'blue': + return { + color: TAGG_LIGHT_BLUE, + top: normalize(3), + }; + case 'commentPreview': + return { + color: 'white', + fontWeight: '800', + top: normalize(3), + }; + case 'white': + default: + return { + color: 'white', + fontWeight: '800', + top: normalize(7.5), + }; + } +}; + +export const mentionPartTypes: ( + theme: 'blue' | 'white' | 'commentPreview', +) => PartType[] = (theme) => { return [ { trigger: '@', renderSuggestions: (props) => , allowedSpacesCount: 0, isInsertSpaceAfterMention: true, - textStyle: - style === 'blue' - ? { - color: TAGG_LIGHT_BLUE, - top: normalize(3), - } - : { - color: 'white', - fontWeight: '800', - top: normalize(7.5), - }, + textStyle: textStyle(theme), }, ]; }; -- cgit v1.2.3-70-g09d2 From 54d5a79e3359a826c1fafd8322ee835b79438fd9 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 10 Jun 2021 16:33:53 -0400 Subject: Fix type warning --- src/components/moments/MomentCommentPreview.tsx | 6 ---- src/components/moments/MomentPostContent.tsx | 2 +- src/utils/comments.tsx | 38 ++++++++++++------------- 3 files changed, 20 insertions(+), 26 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx index 03f30dda..94fcb008 100644 --- a/src/components/moments/MomentCommentPreview.tsx +++ b/src/components/moments/MomentCommentPreview.tsx @@ -23,12 +23,6 @@ const MomentCommentPreview: React.FC = ({ ? 'No Comments' : moment.comments_count + ' comments'; - /** - * TODO: - * - figure out why mention PartTypes have type warnings - * - fix padding for all types (double check on iPhone 8) - */ - return ( = ({ renderTextWithMentions({ value: moment.caption, styles: styles.captionText, - partTypes: mentionPartTypes('white'), + partTypes: mentionPartTypes('momentCaption'), onPress: (user: UserType) => navigateToProfile(state, dispatch, navigation, screenType, user), })} diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx index e700da88..161ede0b 100644 --- a/src/utils/comments.tsx +++ b/src/utils/comments.tsx @@ -79,9 +79,23 @@ export const renderTextWithMentions: React.FC = ({ ); }; -const textStyle: (theme: 'blue' | 'white' | 'commentPreview') => PartType = ( - theme, -) => { +export const mentionPartTypes: ( + theme: 'blue' | 'momentCaption' | 'commentPreview', +) => PartType[] = (theme) => { + return [ + { + trigger: '@', + renderSuggestions: (props) => , + allowedSpacesCount: 0, + isInsertSpaceAfterMention: true, + textStyle: _textStyle(theme), + }, + ]; +}; + +const _textStyle: ( + theme: 'blue' | 'momentCaption' | 'commentPreview', +) => StyleProp = (theme) => { switch (theme) { case 'blue': return { @@ -94,26 +108,12 @@ const textStyle: (theme: 'blue' | 'white' | 'commentPreview') => PartType = ( fontWeight: '800', top: normalize(3), }; - case 'white': + case 'momentCaption': default: return { color: 'white', fontWeight: '800', - top: normalize(7.5), + top: normalize(4.5), }; } }; - -export const mentionPartTypes: ( - theme: 'blue' | 'white' | 'commentPreview', -) => PartType[] = (theme) => { - return [ - { - trigger: '@', - renderSuggestions: (props) => , - allowedSpacesCount: 0, - isInsertSpaceAfterMention: true, - textStyle: textStyle(theme), - }, - ]; -}; -- cgit v1.2.3-70-g09d2 From d4c65c0ba3de95adf3069500491b124df453660f Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 10 Jun 2021 16:45:24 -0400 Subject: Fix drawer background shadow --- src/components/common/BottomDrawer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/common/BottomDrawer.tsx b/src/components/common/BottomDrawer.tsx index 16e98690..b79b8820 100644 --- a/src/components/common/BottomDrawer.tsx +++ b/src/components/common/BottomDrawer.tsx @@ -23,7 +23,7 @@ const BottomDrawer: React.FC = (props) => { const {isOpen, setIsOpen, showHeader, initialSnapPosition} = props; const drawerRef = useRef(null); const [modalVisible, setModalVisible] = useState(isOpen); - const bgAlpha = useValue(isOpen ? 1 : 0); + const bgAlpha = useValue(isOpen ? 0 : 1); useEffect(() => { if (isOpen) { -- cgit v1.2.3-70-g09d2 From 770dcf385fa99fbb93c4ae89a51b09fd96d23bf9 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 10 Jun 2021 17:23:47 -0400 Subject: Add util function, Add logic for updating comment preview --- src/components/comments/AddComment.tsx | 6 +++++- src/components/moments/MomentCommentPreview.tsx | 25 +++++++++++++------------ src/components/moments/MomentPostContent.tsx | 24 ++++++++++++++++++++++-- src/types/types.ts | 10 ++++++---- src/utils/users.ts | 18 ++++++++++++++++++ 5 files changed, 64 insertions(+), 19 deletions(-) (limited to 'src') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index 12fd7e4d..18b9c24e 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -24,12 +24,14 @@ import {MentionInputControlled} from './MentionInputControlled'; export interface AddCommentProps { momentId: string; placeholderText: string; + callback?: (message: string) => void; theme?: 'dark' | 'white'; } const AddComment: React.FC = ({ momentId, placeholderText, + callback = (msg) => null, theme = 'white', }) => { const {setShouldUpdateAllComments = () => null, commentTapped} = @@ -55,13 +57,15 @@ const AddComment: React.FC = ({ if (trimmed === '') { return; } + const message = inReplyToMention + trimmed; const postedComment = await postComment( - inReplyToMention + trimmed, + message, objectId, isReplyingToComment || isReplyingToReply, ); if (postedComment) { + callback(message); setComment(''); setInReplyToMention(''); diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx index 94fcb008..092f8936 100644 --- a/src/components/moments/MomentCommentPreview.tsx +++ b/src/components/moments/MomentCommentPreview.tsx @@ -3,50 +3,52 @@ import React from 'react'; import {Image, StyleSheet, Text, View} from 'react-native'; import {TouchableOpacity} from 'react-native-gesture-handler'; import {useDispatch, useStore} from 'react-redux'; -import {MomentPostType, ScreenType, UserType} from '../../types'; +import {MomentCommentPreviewType, ScreenType, UserType} from '../../types'; import {navigateToProfile, normalize} from '../../utils'; import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; interface MomentCommentPreviewProps { - moment: MomentPostType; + momentId: string; + commentsCount: number; + commentPreview: MomentCommentPreviewType | null; screenType: ScreenType; } const MomentCommentPreview: React.FC = ({ - moment, + momentId, + commentsCount, + commentPreview, screenType, }) => { const navigation = useNavigation(); const state = useStore().getState(); const commentCountText = - moment.comments_count === 0 - ? 'No Comments' - : moment.comments_count + ' comments'; + commentsCount === 0 ? 'No Comments' : commentsCount + ' comments'; return ( navigation.push('MomentCommentsScreen', { - moment_id: moment.moment_id, + moment_id: momentId, screenType, }) }> {commentCountText} - {moment.comment_preview !== null && ( + {commentPreview !== null && ( - {moment.comment_preview.commenter.username} + {commentPreview.commenter.username} {renderTextWithMentions({ - value: moment.comment_preview.comment, + value: commentPreview.comment, styles: styles.normalFont, partTypes: mentionPartTypes('commentPreview'), onPress: (user: UserType) => @@ -88,7 +90,6 @@ const styles = StyleSheet.create({ borderRadius: 99, }, normalFont: { - // top: -5, fontWeight: 'normal', }, }); diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index 378931d1..5192fdf0 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -5,12 +5,19 @@ import {TouchableWithoutFeedback} from 'react-native-gesture-handler'; import Animated, {EasingNode} from 'react-native-reanimated'; import {useDispatch, useStore} from 'react-redux'; import {RootState} from '../../store/rootReducer'; -import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types'; +import { + MomentCommentPreviewType, + MomentPostType, + MomentTagType, + ScreenType, + UserType, +} from '../../types'; import { getTimePosted, navigateToProfile, normalize, SCREEN_WIDTH, + getLoggedInUserAsProfilePreview, } from '../../utils'; import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; import {AddComment} from '../comments'; @@ -37,6 +44,8 @@ const MomentPostContent: React.FC = ({ const [fadeValue, setFadeValue] = useState>( new Animated.Value(0), ); + const [commentPreview, setCommentPreview] = + useState(moment.comment_preview); useEffect(() => { setTags(momentTags); @@ -91,10 +100,21 @@ const MomentPostContent: React.FC = ({ onPress: (user: UserType) => navigateToProfile(state, dispatch, navigation, screenType, user), })} - + + setCommentPreview({ + commenter: getLoggedInUserAsProfilePreview(state), + comment: message, + }) + } theme={'dark'} /> {getTimePosted(moment.date_created)} diff --git a/src/types/types.ts b/src/types/types.ts index 1bdade5c..3ac7ec2f 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -121,10 +121,12 @@ export interface MomentType { export interface MomentPostType extends MomentType { comments_count: number; - comment_preview: { - commenter: ProfilePreviewType; - comment: string; - }; + comment_preview: MomentCommentPreviewType; +} + +export interface MomentCommentPreviewType { + commenter: ProfilePreviewType; + comment: string; } export interface MomentTagType { diff --git a/src/utils/users.ts b/src/utils/users.ts index 64ad10e9..c1c3b8bc 100644 --- a/src/utils/users.ts +++ b/src/utils/users.ts @@ -306,3 +306,21 @@ export const patchProfile = async ( return false; }); }; + +/** + * Returns the logged-in user's info in ProfilePreviewType from redux store. + * @param state the current state of the redux store + * @returns logged-in user in ProfilePreviewType + */ +export const getLoggedInUserAsProfilePreview: ( + state: RootState, +) => ProfilePreviewType = (state) => { + const nameSplit = state.user.profile.name.split(' '); + return { + id: state.user.user.userId, + username: state.user.user.username, + first_name: nameSplit[0], + last_name: nameSplit[1], + thumbnail_url: state.user.avatar ?? '', // in full res + }; +}; -- cgit v1.2.3-70-g09d2 From 2f9ecfb9bc89c7c6e7ac09952b97d3f3813075bc Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 10 Jun 2021 19:20:19 -0400 Subject: Add logic for keyboard focus --- src/App.tsx | 19 ++-- src/components/comments/AddComment.tsx | 5 +- .../moments/IndividualMomentTitleBar.tsx | 11 ++- src/components/moments/MomentPost.tsx | 3 + src/components/moments/MomentPostContent.tsx | 52 +++++++---- src/screens/profile/IndividualMoment.tsx | 102 +++++++++++++++------ src/screens/profile/MomentCommentsScreen.tsx | 5 +- 7 files changed, 135 insertions(+), 62 deletions(-) (limited to 'src') diff --git a/src/App.tsx b/src/App.tsx index 92e7abee..64f40bae 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -27,16 +27,15 @@ export const ChatContext = React.createContext({} as ChatContextType); const App = () => { const routeNameRef = useRef(); const [channel, setChannel] = useState(); - const chatClient = - StreamChat.getInstance< - LocalAttachmentType, - LocalChannelType, - LocalCommandType, - LocalEventType, - LocalMessageType, - LocalResponseType, - LocalUserType - >(STREAM_CHAT_API); + const chatClient = StreamChat.getInstance< + LocalAttachmentType, + LocalChannelType, + LocalCommandType, + LocalEventType, + LocalMessageType, + LocalResponseType, + LocalUserType + >(STREAM_CHAT_API); return ( void; + onFocus?: () => void; theme?: 'dark' | 'white'; } const AddComment: React.FC = ({ momentId, placeholderText, - callback = (msg) => null, + callback = (_) => null, + onFocus = () => null, theme = 'white', }) => { const {setShouldUpdateAllComments = () => null, commentTapped} = @@ -125,6 +127,7 @@ const AddComment: React.FC = ({ placeholderTextColor={theme === 'dark' ? '#828282' : undefined} placeholder={placeholderText} value={inReplyToMention + comment} + onFocus={onFocus} onChange={(newText: string) => { // skipping the `inReplyToMention` text setComment( diff --git a/src/components/moments/IndividualMomentTitleBar.tsx b/src/components/moments/IndividualMomentTitleBar.tsx index 2bebafa7..4ae9471f 100644 --- a/src/components/moments/IndividualMomentTitleBar.tsx +++ b/src/components/moments/IndividualMomentTitleBar.tsx @@ -1,8 +1,13 @@ import React from 'react'; -import {TouchableOpacity} from 'react-native'; -import {Text, View, StyleSheet, ViewProps} from 'react-native'; -import {normalize} from '../../utils'; +import { + StyleSheet, + Text, + TouchableOpacity, + View, + ViewProps, +} from 'react-native'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; +import {normalize} from '../../utils'; interface IndividualMomentTitleBarProps extends ViewProps { title: string; diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 02dbffa3..7a588325 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -11,12 +11,14 @@ interface MomentPostProps { moment: MomentPostType; userXId: string | undefined; screenType: ScreenType; + index: number; } const MomentPost: React.FC = ({ moment, userXId, screenType, + index, }) => { const {userId: loggedInUserId, username: loggedInUsername} = useSelector( (state: RootState) => state.user.user, @@ -88,6 +90,7 @@ const MomentPost: React.FC = ({ moment={moment} screenType={screenType} momentTags={tags} + index={index} /> ); diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index 5192fdf0..eb89fd03 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -1,9 +1,10 @@ import {useNavigation} from '@react-navigation/native'; -import React, {useEffect, useRef, useState} from 'react'; +import React, {useContext, useEffect, useRef, useState} from 'react'; import {Image, StyleSheet, Text, View, ViewProps} from 'react-native'; import {TouchableWithoutFeedback} from 'react-native-gesture-handler'; import Animated, {EasingNode} from 'react-native-reanimated'; import {useDispatch, useStore} from 'react-redux'; +import {MomentContext} from '../../screens/profile/IndividualMoment'; import {RootState} from '../../store/rootReducer'; import { MomentCommentPreviewType, @@ -13,11 +14,11 @@ import { UserType, } from '../../types'; import { + getLoggedInUserAsProfilePreview, getTimePosted, navigateToProfile, normalize, SCREEN_WIDTH, - getLoggedInUserAsProfilePreview, } from '../../utils'; import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; import {AddComment} from '../comments'; @@ -28,12 +29,14 @@ interface MomentPostContentProps extends ViewProps { screenType: ScreenType; moment: MomentPostType; momentTags: MomentTagType[]; + index: number; } const MomentPostContent: React.FC = ({ screenType, moment, style, momentTags, + index, }) => { const state: RootState = useStore().getState(); const navigation = useNavigation(); @@ -46,6 +49,7 @@ const MomentPostContent: React.FC = ({ ); const [commentPreview, setCommentPreview] = useState(moment.comment_preview); + const {keyboardVisible, setScrollToTargetIndex} = useContext(MomentContext); useEffect(() => { setTags(momentTags); @@ -92,20 +96,30 @@ const MomentPostContent: React.FC = ({ /> )} - {moment.caption !== '' && - renderTextWithMentions({ - value: moment.caption, - styles: styles.captionText, - partTypes: mentionPartTypes('momentCaption'), - onPress: (user: UserType) => - navigateToProfile(state, dispatch, navigation, screenType, user), - })} - + {!keyboardVisible && ( + <> + {moment.caption !== '' && + renderTextWithMentions({ + value: moment.caption, + styles: styles.captionText, + partTypes: mentionPartTypes('momentCaption'), + onPress: (user: UserType) => + navigateToProfile( + state, + dispatch, + navigation, + screenType, + user, + ), + })} + + + )} = ({ comment: message, }) } + onFocus={() => setScrollToTargetIndex(index)} theme={'dark'} /> {getTimePosted(moment.date_created)} @@ -123,9 +138,7 @@ const MomentPostContent: React.FC = ({ }; const styles = StyleSheet.create({ - container: { - borderWidth: 1, - }, + container: {}, image: { width: SCREEN_WIDTH, aspectRatio: 1, @@ -147,7 +160,6 @@ const styles = StyleSheet.create({ lineHeight: normalize(15.51), letterSpacing: normalize(0.6), marginBottom: normalize(18), - borderWidth: 1, }, tapTag: { position: 'absolute', diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index 447ba2a9..a91f1913 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -1,10 +1,11 @@ import {BlurView} from '@react-native-community/blur'; import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; -import React from 'react'; -import {FlatList, StyleSheet} from 'react-native'; +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 {AVATAR_DIM} from '../../constants'; import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootreducer'; import {MomentPostType} from '../../types'; @@ -13,11 +14,21 @@ import {normalize, StatusBarHeight} from '../../utils'; /** * Individual moment view opened when user clicks on a moment tile */ + +type MomentContextType = { + keyboardVisible: boolean; + setScrollToTargetIndex: (index: number) => void; +}; + +export const MomentContext = React.createContext({} as MomentContextType); + type IndividualMomentRouteProp = RouteProp; + type IndividualMomentNavigationProp = StackNavigationProp< MainStackParams, 'IndividualMoment' >; + interface IndividualMomentProps { route: IndividualMomentRouteProp; navigation: IndividualMomentNavigationProp; @@ -27,39 +38,78 @@ const IndividualMoment: React.FC = ({ route, navigation, }) => { - const {moment_category, moment_id} = route.params.moment; - const {userXId, screenType} = route.params; - + const { + userXId, + screenType, + moment: {moment_category, moment_id}, + } = route.params; const {moments} = useSelector((state: RootState) => userXId ? state.userX[screenType][userXId] : state.moments, ); - + const scrollRef = useRef>(null); const momentData = moments.filter( (m) => m.moment_category === moment_category, ); const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id); + const [scrollToTargetIndex, setScrollToTargetIndex] = + useState(initialIndex); + const [keyboardVisible, setKeyboardVisible] = React.useState(false); + + useEffect(() => { + const showKeyboard = () => setKeyboardVisible(true); + Keyboard.addListener('keyboardWillShow', showKeyboard); + return () => Keyboard.removeListener('keyboardWillShow', showKeyboard); + }, []); + + useEffect(() => { + const hideKeyboard = () => setKeyboardVisible(false); + Keyboard.addListener('keyboardWillHide', hideKeyboard); + return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard); + }, []); + + useEffect(() => { + if (keyboardVisible) { + scrollRef.current?.scrollToIndex({ + index: scrollToTargetIndex, + // viewOffset: -(AVATAR_DIM + normalize(120)), + viewOffset: -(AVATAR_DIM + normalize(90)), + }); + } + }, [scrollToTargetIndex, keyboardVisible]); return ( - - navigation.goBack()} - title={moment_category} - /> - ( - - )} - keyExtractor={(item, _) => item.moment_id} - showsVerticalScrollIndicator={false} - initialScrollIndex={initialIndex} - /> - + + + navigation.goBack()} + title={moment_category} + /> + ( + + )} + keyExtractor={(item, _) => item.moment_id} + showsVerticalScrollIndicator={false} + initialScrollIndex={initialIndex} + /> + + ); }; const styles = StyleSheet.create({ diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx index 402e5f44..7dfe8ae9 100644 --- a/src/screens/profile/MomentCommentsScreen.tsx +++ b/src/screens/profile/MomentCommentsScreen.tsx @@ -48,8 +48,9 @@ const MomentCommentsScreen: React.FC = ({route}) => { React.useState(true); //Keeps track of the current comments object in focus so that the application knows which comment to post a reply to - const [commentTapped, setCommentTapped] = - useState(); + const [commentTapped, setCommentTapped] = useState< + CommentType | CommentThreadType | undefined + >(); useEffect(() => { navigation.setOptions({ -- cgit v1.2.3-70-g09d2 From 6ad0a54704523d7cb69b6789323ba26c4d53f63e Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 11 Jun 2021 14:51:43 -0400 Subject: Cleanup code --- src/components/moments/MomentPost.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 7a588325..3b2721a0 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -34,16 +34,13 @@ const MomentPost: React.FC = ({ const isOwnProfile = username === loggedInUsername; - const loadTags = async () => { - const response = await loadMomentTags(moment.moment_id); - setTags(response ? response : []); - }; - /* * Load tags on initial render to pass tags data to moment header and content */ useEffect(() => { - loadTags(); + loadMomentTags(moment.moment_id).then((response) => { + setTags(response ? response : []); + }); }, []); /* -- cgit v1.2.3-70-g09d2 From eb672872d85f203085c96005758314d5dba359f2 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 11 Jun 2021 15:30:56 -0400 Subject: Simplify scroll logic, Cleanup code --- src/components/moments/MomentPostContent.tsx | 7 +++--- src/screens/profile/IndividualMoment.tsx | 33 +++++++++++++++------------- 2 files changed, 22 insertions(+), 18 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index eb89fd03..da04211f 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -49,7 +49,8 @@ const MomentPostContent: React.FC = ({ ); const [commentPreview, setCommentPreview] = useState(moment.comment_preview); - const {keyboardVisible, setScrollToTargetIndex} = useContext(MomentContext); + const {keyboardVisible, currentScrollToIndex, scrollTo} = + useContext(MomentContext); useEffect(() => { setTags(momentTags); @@ -96,7 +97,7 @@ const MomentPostContent: React.FC = ({ /> )} - {!keyboardVisible && ( + {(!keyboardVisible || currentScrollToIndex !== index) && ( <> {moment.caption !== '' && renderTextWithMentions({ @@ -129,7 +130,7 @@ const MomentPostContent: React.FC = ({ comment: message, }) } - onFocus={() => setScrollToTargetIndex(index)} + onFocus={() => scrollTo(index)} theme={'dark'} /> {getTimePosted(moment.date_created)} diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index a91f1913..ddf4c478 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -17,7 +17,8 @@ import {normalize, StatusBarHeight} from '../../utils'; type MomentContextType = { keyboardVisible: boolean; - setScrollToTargetIndex: (index: number) => void; + currentScrollToIndex: number; + scrollTo: (index: number) => void; }; export const MomentContext = React.createContext({} as MomentContextType); @@ -51,37 +52,39 @@ const IndividualMoment: React.FC = ({ (m) => m.moment_category === moment_category, ); const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id); - const [scrollToTargetIndex, setScrollToTargetIndex] = + const [currentScrollToIndex, setCurrentScrollToIndex] = useState(initialIndex); - const [keyboardVisible, setKeyboardVisible] = React.useState(false); + const [keyboardVisible, setKeyboardVisible] = useState(false); useEffect(() => { const showKeyboard = () => setKeyboardVisible(true); - Keyboard.addListener('keyboardWillShow', showKeyboard); - return () => Keyboard.removeListener('keyboardWillShow', showKeyboard); - }, []); - - useEffect(() => { const hideKeyboard = () => setKeyboardVisible(false); + Keyboard.addListener('keyboardWillShow', showKeyboard); Keyboard.addListener('keyboardWillHide', hideKeyboard); - return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard); + return () => { + Keyboard.removeListener('keyboardWillShow', showKeyboard); + Keyboard.removeListener('keyboardWillHide', hideKeyboard); + }; }, []); - useEffect(() => { - if (keyboardVisible) { + const scrollTo = (index: number) => { + setCurrentScrollToIndex(index); + setTimeout(() => { + console.log('scrolling to', index); scrollRef.current?.scrollToIndex({ - index: scrollToTargetIndex, + index: index, // viewOffset: -(AVATAR_DIM + normalize(120)), viewOffset: -(AVATAR_DIM + normalize(90)), }); - } - }, [scrollToTargetIndex, keyboardVisible]); + }, 100); + }; return ( Date: Fri, 11 Jun 2021 15:41:50 -0400 Subject: Cleanup scrolling logic, Fix scrollTo logic --- src/components/comments/AddComment.tsx | 85 +++++++++++++++------------- src/components/moments/MomentPostContent.tsx | 18 ++++-- src/screens/profile/IndividualMoment.tsx | 17 ++---- 3 files changed, 64 insertions(+), 56 deletions(-) (limited to 'src') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index 9d9824db..9667046c 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -26,6 +26,7 @@ export interface AddCommentProps { placeholderText: string; callback?: (message: string) => void; onFocus?: () => void; + isKeyboardAvoiding?: boolean; theme?: 'dark' | 'white'; } @@ -34,6 +35,7 @@ const AddComment: React.FC = ({ placeholderText, callback = (_) => null, onFocus = () => null, + isKeyboardAvoiding = true, theme = 'white', }) => { const {setShouldUpdateAllComments = () => null, commentTapped} = @@ -111,49 +113,54 @@ const AddComment: React.FC = ({ } }, [isReplyingToComment, isReplyingToReply, commentTapped]); - return ( + const mainContent = () => ( + + + + { + // skipping the `inReplyToMention` text + setComment( + newText.substring(inReplyToMention.length, newText.length), + ); + }} + inputRef={ref} + partTypes={mentionPartTypes('blue')} + /> + {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && ( + + + + + + )} + + + ); + return isKeyboardAvoiding ? ( - - - - { - // skipping the `inReplyToMention` text - setComment( - newText.substring(inReplyToMention.length, newText.length), - ); - }} - inputRef={ref} - partTypes={mentionPartTypes('blue')} - /> - {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && ( - - - - - - )} - - + {mainContent()} + ) : ( + mainContent() ); }; diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index da04211f..89f2a281 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -49,8 +49,8 @@ const MomentPostContent: React.FC = ({ ); const [commentPreview, setCommentPreview] = useState(moment.comment_preview); - const {keyboardVisible, currentScrollToIndex, scrollTo} = - useContext(MomentContext); + const {keyboardVisible, scrollTo} = useContext(MomentContext); + const [hideText, setHideText] = useState(false); useEffect(() => { setTags(momentTags); @@ -67,6 +67,12 @@ const MomentPostContent: React.FC = ({ fade(); }, [fadeValue]); + useEffect(() => { + if (!keyboardVisible && hideText) { + setHideText(false); + } + }, [keyboardVisible, hideText]); + return ( = ({ /> )} - {(!keyboardVisible || currentScrollToIndex !== index) && ( + {!hideText && ( <> {moment.caption !== '' && renderTextWithMentions({ @@ -130,7 +136,11 @@ const MomentPostContent: React.FC = ({ comment: message, }) } - onFocus={() => scrollTo(index)} + onFocus={() => { + setHideText(true); + scrollTo(index); + }} + isKeyboardAvoiding={false} theme={'dark'} /> {getTimePosted(moment.date_created)} diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index ddf4c478..b14b31fa 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -17,7 +17,6 @@ import {normalize, StatusBarHeight} from '../../utils'; type MomentContextType = { keyboardVisible: boolean; - currentScrollToIndex: number; scrollTo: (index: number) => void; }; @@ -52,8 +51,6 @@ const IndividualMoment: React.FC = ({ (m) => m.moment_category === moment_category, ); const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id); - const [currentScrollToIndex, setCurrentScrollToIndex] = - useState(initialIndex); const [keyboardVisible, setKeyboardVisible] = useState(false); useEffect(() => { @@ -68,22 +65,16 @@ const IndividualMoment: React.FC = ({ }, []); const scrollTo = (index: number) => { - setCurrentScrollToIndex(index); - setTimeout(() => { - console.log('scrolling to', index); - scrollRef.current?.scrollToIndex({ - index: index, - // viewOffset: -(AVATAR_DIM + normalize(120)), - viewOffset: -(AVATAR_DIM + normalize(90)), - }); - }, 100); + scrollRef.current?.scrollToIndex({ + index: index, + viewOffset: -(AVATAR_DIM + normalize(90)), + }); }; return ( Date: Fri, 11 Jun 2021 15:44:42 -0400 Subject: Update comment count --- src/components/moments/MomentPostContent.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index 89f2a281..f1ab5db4 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -47,6 +47,9 @@ const MomentPostContent: React.FC = ({ 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); @@ -121,7 +124,7 @@ const MomentPostContent: React.FC = ({ })} @@ -130,12 +133,13 @@ const MomentPostContent: React.FC = ({ + callback={(message) => { setCommentPreview({ commenter: getLoggedInUserAsProfilePreview(state), comment: message, - }) - } + }); + setCommentCount(commentCount + 1); + }} onFocus={() => { setHideText(true); scrollTo(index); -- cgit v1.2.3-70-g09d2 From 47b087816844473be858adf766b2f538ecf6d0aa Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 11 Jun 2021 16:35:31 -0400 Subject: Fix viewoffset --- src/screens/profile/IndividualMoment.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index b14b31fa..80438bcd 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -9,7 +9,7 @@ import {AVATAR_DIM} from '../../constants'; import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootreducer'; import {MomentPostType} from '../../types'; -import {normalize, StatusBarHeight} from '../../utils'; +import {isIPhoneX, normalize, StatusBarHeight} from '../../utils'; /** * Individual moment view opened when user clicks on a moment tile @@ -65,9 +65,11 @@ const IndividualMoment: React.FC = ({ }, []); const scrollTo = (index: number) => { + // TODO: make this dynamic + const offset = isIPhoneX() ? -(AVATAR_DIM + 100) : -(AVATAR_DIM + 160); scrollRef.current?.scrollToIndex({ index: index, - viewOffset: -(AVATAR_DIM + normalize(90)), + viewOffset: offset, }); }; -- cgit v1.2.3-70-g09d2 From 22a58b2ad08297b6d5dd3dd241ae23a756ae7552 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 11 Jun 2021 17:44:24 -0400 Subject: Adjust mention text padding --- src/components/moments/MomentCommentPreview.tsx | 2 +- src/components/moments/MomentPostContent.tsx | 2 +- src/utils/comments.tsx | 22 ++++++++-------------- 3 files changed, 10 insertions(+), 16 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx index 092f8936..e53ed258 100644 --- a/src/components/moments/MomentCommentPreview.tsx +++ b/src/components/moments/MomentCommentPreview.tsx @@ -50,7 +50,7 @@ const MomentCommentPreview: React.FC = ({ {renderTextWithMentions({ value: commentPreview.comment, styles: styles.normalFont, - partTypes: mentionPartTypes('commentPreview'), + partTypes: mentionPartTypes('white'), onPress: (user: UserType) => navigateToProfile( state, diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index e43cba4f..aca2999c 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -112,7 +112,7 @@ const MomentPostContent: React.FC = ({ renderTextWithMentions({ value: moment.caption, styles: styles.captionText, - partTypes: mentionPartTypes('momentCaption'), + partTypes: mentionPartTypes('white'), onPress: (user: UserType) => navigateToProfile( state, diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx index 161ede0b..910b44e7 100644 --- a/src/utils/comments.tsx +++ b/src/utils/comments.tsx @@ -79,9 +79,9 @@ export const renderTextWithMentions: React.FC = ({ ); }; -export const mentionPartTypes: ( - theme: 'blue' | 'momentCaption' | 'commentPreview', -) => PartType[] = (theme) => { +export const mentionPartTypes: (theme: 'blue' | 'white') => PartType[] = ( + theme, +) => { return [ { trigger: '@', @@ -93,27 +93,21 @@ export const mentionPartTypes: ( ]; }; -const _textStyle: ( - theme: 'blue' | 'momentCaption' | 'commentPreview', -) => StyleProp = (theme) => { +const _textStyle: (theme: 'blue' | 'white') => StyleProp = ( + theme, +) => { switch (theme) { case 'blue': return { color: TAGG_LIGHT_BLUE, top: normalize(3), }; - case 'commentPreview': - return { - color: 'white', - fontWeight: '800', - top: normalize(3), - }; - case 'momentCaption': + case 'white': default: return { color: 'white', fontWeight: '800', - top: normalize(4.5), + top: normalize(3), }; } }; -- cgit v1.2.3-70-g09d2 From 24f79b9cb3456b3901155ed2e4c8fc66710b97b2 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 11 Jun 2021 18:09:57 -0400 Subject: Fix keyboard avoiding for last item, Add comment for scroll to index fail --- src/screens/profile/IndividualMoment.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index 80438bcd..f8113aba 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -9,7 +9,12 @@ import {AVATAR_DIM} from '../../constants'; import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootreducer'; import {MomentPostType} from '../../types'; -import {isIPhoneX, normalize, StatusBarHeight} from '../../utils'; +import { + isIPhoneX, + normalize, + SCREEN_HEIGHT, + StatusBarHeight, +} from '../../utils'; /** * Individual moment view opened when user clicks on a moment tile @@ -92,6 +97,7 @@ const IndividualMoment: React.FC = ({ ( = ({ 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}); + // }); + }} /> @@ -116,6 +130,9 @@ const styles = StyleSheet.create({ header: { height: normalize(70), }, + listContentContainer: { + paddingBottom: SCREEN_HEIGHT * 0.2, + }, }); export default IndividualMoment; -- cgit v1.2.3-70-g09d2