diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/comments/AddComment.tsx | 96 | ||||
-rw-r--r-- | src/components/comments/CommentsCount.tsx | 58 | ||||
-rw-r--r-- | src/components/comments/index.ts | 1 | ||||
-rw-r--r-- | src/components/common/BottomDrawer.tsx | 2 | ||||
-rw-r--r-- | src/components/moments/IndividualMomentTitleBar.tsx | 12 | ||||
-rw-r--r-- | src/components/moments/MomentCommentPreview.tsx | 97 | ||||
-rw-r--r-- | src/components/moments/MomentPost.tsx | 65 | ||||
-rw-r--r-- | src/components/moments/MomentPostContent.tsx | 147 | ||||
-rw-r--r-- | src/components/moments/MomentPostHeader.tsx | 3 | ||||
-rw-r--r-- | src/components/suggestedPeople/legacy/BadgesDropdown.tsx | 6 |
10 files changed, 290 insertions, 197 deletions
diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index b229d010..9667046c 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -24,10 +24,21 @@ import {MentionInputControlled} from './MentionInputControlled'; export interface AddCommentProps { momentId: string; placeholderText: string; + callback?: (message: string) => void; + onFocus?: () => void; + isKeyboardAvoiding?: boolean; + theme?: 'dark' | 'white'; } -const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => { - const {setShouldUpdateAllComments, commentTapped} = +const AddComment: React.FC<AddCommentProps> = ({ + momentId, + placeholderText, + callback = (_) => null, + onFocus = () => null, + isKeyboardAvoiding = true, + theme = 'white', +}) => { + const {setShouldUpdateAllComments = () => null, commentTapped} = useContext(CommentContext); const [inReplyToMention, setInReplyToMention] = useState(''); const [comment, setComment] = useState(''); @@ -50,13 +61,15 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => { if (trimmed === '') { return; } + const message = inReplyToMention + trimmed; const postedComment = await postComment( - inReplyToMention + trimmed, + message, objectId, isReplyingToComment || isReplyingToReply, ); if (postedComment) { + callback(message); setComment(''); setInReplyToMention(''); @@ -100,43 +113,63 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => { } }, [isReplyingToComment, isReplyingToReply, commentTapped]); - return ( - <KeyboardAvoidingView - behavior={Platform.OS === 'ios' ? 'padding' : 'height'} - keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}> - <View - style={[ - styles.container, - keyboardVisible ? styles.whiteBackround : {}, - ]}> - <View style={styles.textContainer}> - <Avatar style={styles.avatar} uri={avatar} /> - <MentionInputControlled - containerStyle={styles.text} - placeholder={placeholderText} - value={inReplyToMention + comment} - onChange={(newText: string) => { - // skipping the `inReplyToMention` text - setComment( - newText.substring(inReplyToMention.length, newText.length), - ); - }} - inputRef={ref} - partTypes={mentionPartTypes('blue')} - /> + const mainContent = () => ( + <View + style={[ + theme === 'white' ? styles.containerWhite : styles.containerDark, + keyboardVisible && theme !== 'dark' ? styles.whiteBackround : {}, + ]}> + <View style={styles.textContainer}> + <Avatar style={styles.avatar} uri={avatar} /> + <MentionInputControlled + containerStyle={styles.text} + placeholderTextColor={theme === 'dark' ? '#828282' : undefined} + placeholder={placeholderText} + value={inReplyToMention + comment} + onFocus={onFocus} + onChange={(newText: string) => { + // skipping the `inReplyToMention` text + setComment( + newText.substring(inReplyToMention.length, newText.length), + ); + }} + inputRef={ref} + partTypes={mentionPartTypes('blue')} + /> + {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && ( <View style={styles.submitButton}> - <TouchableOpacity style={styles.submitButton} onPress={addComment}> + <TouchableOpacity + style={ + comment === '' + ? [styles.submitButton, styles.greyButton] + : styles.submitButton + } + disabled={comment === ''} + onPress={addComment}> <UpArrowIcon width={35} height={35} color={'white'} /> </TouchableOpacity> </View> - </View> + )} </View> + </View> + ); + return isKeyboardAvoiding ? ( + <KeyboardAvoidingView + behavior={Platform.OS === 'ios' ? 'padding' : 'height'} + keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}> + {mainContent()} </KeyboardAvoidingView> + ) : ( + mainContent() ); }; const styles = StyleSheet.create({ - container: { + containerDark: { + alignItems: 'center', + width: SCREEN_WIDTH, + }, + containerWhite: { backgroundColor: '#f7f7f7', alignItems: 'center', width: SCREEN_WIDTH, @@ -176,6 +209,9 @@ const styles = StyleSheet.create({ marginVertical: '2%', alignSelf: 'flex-end', }, + greyButton: { + backgroundColor: 'grey', + }, whiteBackround: { backgroundColor: '#fff', }, 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<CommentsCountProps> = ({ - commentsCount, - momentId, - screenType, -}) => { - const navigation = useNavigation(); - const navigateToCommentsScreen = async () => { - navigation.push('MomentCommentsScreen', { - moment_id: momentId, - screenType, - }); - }; - return ( - <> - <TouchableOpacity onPress={navigateToCommentsScreen}> - <CommentIcon style={styles.image} /> - <Text style={styles.count}> - {commentsCount !== '0' ? commentsCount : ''} - </Text> - </TouchableOpacity> - </> - ); -}; - -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/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<BottomDrawerProps> = (props) => { const {isOpen, setIsOpen, showHeader, initialSnapPosition} = props; const drawerRef = useRef<BottomSheet>(null); const [modalVisible, setModalVisible] = useState(isOpen); - const bgAlpha = useValue(isOpen ? 1 : 0); + const bgAlpha = useValue(isOpen ? 0 : 1); useEffect(() => { if (isOpen) { diff --git a/src/components/moments/IndividualMomentTitleBar.tsx b/src/components/moments/IndividualMomentTitleBar.tsx index 79453ade..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; @@ -30,7 +35,6 @@ const styles = StyleSheet.create({ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', - height: '5%', }, headerContainer: { width: '80%', diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx new file mode 100644 index 00000000..092f8936 --- /dev/null +++ b/src/components/moments/MomentCommentPreview.tsx @@ -0,0 +1,97 @@ +import {useNavigation} from '@react-navigation/native'; +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 {MomentCommentPreviewType, ScreenType, UserType} from '../../types'; +import {navigateToProfile, normalize} from '../../utils'; +import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; + +interface MomentCommentPreviewProps { + momentId: string; + commentsCount: number; + commentPreview: MomentCommentPreviewType | null; + screenType: ScreenType; +} + +const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({ + momentId, + commentsCount, + commentPreview, + screenType, +}) => { + const navigation = useNavigation(); + const state = useStore().getState(); + const commentCountText = + commentsCount === 0 ? 'No Comments' : commentsCount + ' comments'; + + return ( + <TouchableOpacity + style={styles.commentsPreviewContainer} + onPress={() => + navigation.push('MomentCommentsScreen', { + moment_id: momentId, + screenType, + }) + }> + <Text style={styles.whiteBold}>{commentCountText}</Text> + {commentPreview !== null && ( + <View style={styles.previewContainer}> + <Image + source={{ + uri: commentPreview.commenter.thumbnail_url, + }} + style={styles.avatar} + /> + <Text style={styles.whiteBold} numberOfLines={1}> + <Text> </Text> + <Text>{commentPreview.commenter.username}</Text> + <Text> </Text> + {renderTextWithMentions({ + value: commentPreview.comment, + styles: styles.normalFont, + partTypes: mentionPartTypes('commentPreview'), + onPress: (user: UserType) => + navigateToProfile( + state, + useDispatch, + navigation, + screenType, + user, + ), + })} + </Text> + </View> + )} + </TouchableOpacity> + ); +}; + +const styles = StyleSheet.create({ + commentsPreviewContainer: { + height: normalize(50), + flexDirection: 'column', + justifyContent: 'space-around', + marginHorizontal: '5%', + marginBottom: '2%', + }, + whiteBold: { + fontWeight: '700', + color: 'white', + fontSize: normalize(13), + }, + previewContainer: { + flexDirection: 'row', + width: '95%', + }, + avatar: { + height: normalize(16), + width: normalize(16), + borderRadius: 99, + }, + normalFont: { + fontWeight: 'normal', + }, +}); + +export default MomentCommentPreview; diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index b659177d..d87028e3 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -1,21 +1,25 @@ 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 {MomentPostType, MomentTagType, ScreenType} from '../../types'; +import {normalize, SCREEN_HEIGHT} from '../../utils'; interface MomentPostProps { - item: MomentType; + moment: MomentPostType; userXId: string | undefined; screenType: ScreenType; + index: number; } -const ITEM_HEIGHT = SCREEN_HEIGHT * 0.9; - -const MomentPost: React.FC<MomentPostProps> = ({item, userXId, screenType}) => { +const MomentPost: React.FC<MomentPostProps> = ({ + moment, + userXId, + screenType, + index, +}) => { const {userId: loggedInUserId, username: loggedInUsername} = useSelector( (state: RootState) => state.user.user, ); @@ -30,17 +34,14 @@ const MomentPost: React.FC<MomentPostProps> = ({item, userXId, screenType}) => { const isOwnProfile = username === loggedInUsername; - const loadTags = async () => { - const response = await loadMomentTags(item.moment_id); - setTags(response ? response : []); - }; - /* * Load tags on initial render to pass tags data to moment header and content */ useEffect(() => { - loadTags(); - }, [item]); + loadMomentTags(moment.moment_id).then((response) => { + setTags(response ? response : []); + }); + }, []); /* * Check if loggedInUser has been tagged in the picture and set the id @@ -71,50 +72,34 @@ const MomentPost: React.FC<MomentPostProps> = ({item, userXId, screenType}) => { }; return ( - <View style={styles.postContainer}> + <> <MomentPostHeader + style={styles.postHeader} userXId={userXId} screenType={screenType} username={isOwnProfile ? loggedInUsername : username} - style={styles.postHeader} momentTagId={momentTagId} removeTag={removeTag} - moment={item} + moment={moment} tags={tags} /> <MomentPostContent style={styles.postContent} + moment={moment} screenType={screenType} - moment={item} momentTags={tags} + index={index} /> - </View> + </> ); }; 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, + postHeader: {}, + postContent: { + minHeight: SCREEN_HEIGHT * 0.8, + paddingBottom: normalize(20), }, - postContent: {flex: 9}, }); export default MomentPost; diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index d831d7ee..e43cba4f 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -1,71 +1,81 @@ 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, {Easing} from 'react-native-reanimated'; +import Animated, {EasingNode} from 'react-native-reanimated'; import {useDispatch, useStore} from 'react-redux'; -import {getCommentsCount} from '../../services'; +import {MomentContext} from '../../screens/profile/IndividualMoment'; import {RootState} from '../../store/rootReducer'; -import {MomentTagType, MomentType, ScreenType, UserType} from '../../types'; import { + MomentCommentPreviewType, + MomentPostType, + MomentTagType, + ScreenType, + UserType, +} from '../../types'; +import { + getLoggedInUserAsProfilePreview, getTimePosted, navigateToProfile, normalize, - SCREEN_HEIGHT, SCREEN_WIDTH, } from '../../utils'; import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; -import {CommentsCount} from '../comments'; +import {AddComment} from '../comments'; import {MomentTags} from '../common'; +import MomentCommentPreview from './MomentCommentPreview'; interface MomentPostContentProps extends ViewProps { screenType: ScreenType; - moment: MomentType; + moment: MomentPostType; momentTags: MomentTagType[]; + index: number; } const MomentPostContent: React.FC<MomentPostContentProps> = ({ screenType, - style, moment, + style, momentTags, + index, }) => { - const [elapsedTime, setElapsedTime] = useState(''); - const [comments_count, setCommentsCount] = useState(''); const [tags, setTags] = useState<MomentTagType[]>(momentTags); const state: RootState = useStore().getState(); const navigation = useNavigation(); const dispatch = useDispatch(); const imageRef = useRef(null); const [visible, setVisible] = useState(false); - const [fadeValue, setFadeValue] = useState<Animated.Value<number>>( new Animated.Value(0), ); + const [commentCount, setCommentCount] = useState<number>( + moment.comments_count, + ); + const [commentPreview, setCommentPreview] = + useState<MomentCommentPreviewType | null>(moment.comment_preview); + const {keyboardVisible, scrollTo} = useContext(MomentContext); + const [hideText, setHideText] = useState(false); useEffect(() => { setTags(momentTags); }, [momentTags]); useEffect(() => { - const fetchCommentsCount = async () => { - const count = await getCommentsCount(moment.moment_id, false); - setCommentsCount(count); - }; - setElapsedTime(getTimePosted(moment.date_created)); - fetchCommentsCount(); - }, [moment.date_created, moment.moment_id]); - - useEffect(() => { const fade = async () => { Animated.timing(fadeValue, { toValue: 1, duration: 250, - easing: Easing.linear, + easing: EasingNode.linear, }).start(); }; fade(); }, [fadeValue]); + useEffect(() => { + if (!keyboardVisible && hideText) { + setHideText(false); + } + }, [keyboardVisible, hideText]); + return ( <View style={[styles.container, style]}> <TouchableWithoutFeedback @@ -82,70 +92,89 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({ {tags.length > 0 && ( <Image source={require('../../assets/icons/tag_indicate.png')} - style={[styles.tagIcon]} + style={styles.tagIcon} /> )} </TouchableWithoutFeedback> {visible && ( <Animated.View style={[styles.tapTag, {opacity: fadeValue}]}> - <MomentTags editing={false} tags={tags} imageRef={imageRef} /> + <MomentTags + editing={false} + tags={tags} + setTags={() => null} + imageRef={imageRef} + /> </Animated.View> )} - <View style={styles.footerContainer}> - <CommentsCount - commentsCount={comments_count} - momentId={moment.moment_id} - screenType={screenType} - /> - <Text style={styles.text}>{elapsedTime}</Text> - </View> - {renderTextWithMentions({ - value: moment.caption, - styles: styles.captionText, - partTypes: mentionPartTypes('white'), - onPress: (user: UserType) => - navigateToProfile(state, dispatch, navigation, screenType, user), - })} + {!hideText && ( + <> + {moment.caption !== '' && + renderTextWithMentions({ + value: moment.caption, + styles: styles.captionText, + partTypes: mentionPartTypes('momentCaption'), + onPress: (user: UserType) => + navigateToProfile( + state, + dispatch, + navigation, + screenType, + user, + ), + })} + <MomentCommentPreview + momentId={moment.moment_id} + commentsCount={commentCount} + commentPreview={commentPreview} + screenType={screenType} + /> + </> + )} + <AddComment + placeholderText={'Add a comment here!'} + momentId={moment.moment_id} + callback={(message) => { + setCommentPreview({ + commenter: getLoggedInUserAsProfilePreview(state), + comment: message, + }); + setCommentCount(commentCount + 1); + }} + onFocus={() => { + setHideText(true); + scrollTo(index); + }} + isKeyboardAvoiding={false} + theme={'dark'} + /> + <Text style={styles.text}>{getTimePosted(moment.date_created)}</Text> </View> ); }; const styles = StyleSheet.create({ - container: { - height: SCREEN_HEIGHT, - }, + container: {}, image: { width: SCREEN_WIDTH, aspectRatio: 1, marginBottom: '3%', }, - footerContainer: { - flexDirection: 'row', - justifyContent: 'space-between', - marginLeft: '7%', - marginRight: '5%', - marginBottom: '2%', - }, 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', - paddingBottom: '34%', - paddingTop: '1%', - marginLeft: '5%', - marginRight: '5%', + marginHorizontal: '5%', color: '#ffffff', fontWeight: '500', fontSize: normalize(13), lineHeight: normalize(15.51), letterSpacing: normalize(0.6), + marginBottom: normalize(18), }, tapTag: { position: 'absolute', diff --git a/src/components/moments/MomentPostHeader.tsx b/src/components/moments/MomentPostHeader.tsx index cde7639c..5f26951a 100644 --- a/src/components/moments/MomentPostHeader.tsx +++ b/src/components/moments/MomentPostHeader.tsx @@ -64,6 +64,7 @@ const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({ style={styles.avatar} userXId={userXId} screenType={screenType} + editable={false} /> <Text style={styles.headerText}>{username}</Text> </TouchableOpacity> @@ -75,7 +76,7 @@ const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({ removeTag={removeTag} dismissScreenAndUpdate={() => { dispatch(loadUserMoments(loggedInUserId)); - navigation.pop(); + navigation.goBack(); }} screenType={screenType} moment={moment} 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<BadgesDropdownProps> = ({ 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<BadgesDropdownProps> = ({ Animated.timing(top[i], { toValue: 0, duration: 150, - easing: Easing.linear, + easing: EasingNode.linear, }).start(); } } |