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 +++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 src/components/moments/MomentCommentPreview.tsx (limited to 'src/components/moments/MomentCommentPreview.tsx') 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; -- cgit v1.2.3-70-g09d2 From f0b18db9dc3d0321fb01677e98f3968b21af36fa Mon Sep 17 00:00:00 2001 From: Ivan Chen 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/components/moments/MomentCommentPreview.tsx') 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/components/moments/MomentCommentPreview.tsx') 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 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/components/moments/MomentCommentPreview.tsx') 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 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/components/moments/MomentCommentPreview.tsx') 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