From a6ada7b34da599d3edb797d6bd9fce57ded7bac5 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 6 May 2021 18:15:15 -0400 Subject: fixed freeze issue --- src/components/comments/CommentsContainer.tsx | 47 ++++++++++----------------- 1 file changed, 17 insertions(+), 30 deletions(-) (limited to 'src/components/comments') diff --git a/src/components/comments/CommentsContainer.tsx b/src/components/comments/CommentsContainer.tsx index d5d02a92..cd9ecb02 100644 --- a/src/components/comments/CommentsContainer.tsx +++ b/src/components/comments/CommentsContainer.tsx @@ -39,6 +39,7 @@ const CommentsContainer: React.FC = ({ const [commentsList, setCommentsList] = useState([]); const dispatch = useDispatch(); const ref = useRef>(null); + const ITEM_HEIGHT = SCREEN_HEIGHT / 7.0; useEffect(() => { const loadComments = async () => { @@ -61,22 +62,24 @@ const CommentsContainer: React.FC = ({ }; }, [shouldUpdate]); + // scrolls to the comment useEffect(() => { - const performAction = () => { - if (commentId) { - swapCommentTo(commentId, 0); - } else if (!isThread && !commentTapped) { - setTimeout(() => { - ref.current?.scrollToEnd({animated: true}); - }, 500); + if (commentId) { + const index = commentsList.findIndex( + (item) => item.comment_id === commentId, + ); + if (index > 0) { + let comments = [...commentsList]; + const temp = comments[index]; + comments[index] = comments[0]; + comments[0] = temp; + setCommentsList(comments); } - }; - if (commentsList) { - //Bring the relevant comment to top if a comment id is present else scroll if necessary - performAction(); + } else if (!isThread && !commentTapped) { + setTimeout(() => { + ref.current?.scrollToEnd({animated: true}); + }, 500); } - - //Clean up the reply id present in store return () => { if (commentId && isThread) { setTimeout(() => { @@ -84,23 +87,7 @@ const CommentsContainer: React.FC = ({ }, 200); } }; - }, [commentsList, commentId]); - - // eslint-disable-next-line no-shadow - const swapCommentTo = (commentId: string, toIndex: number) => { - const index = commentsList.findIndex( - (item) => item.comment_id === commentId, - ); - if (index > 0) { - let comments = [...commentsList]; - const temp = comments[index]; - comments[index] = comments[toIndex]; - comments[toIndex] = temp; - setCommentsList(comments); - } - }; - - const ITEM_HEIGHT = SCREEN_HEIGHT / 7.0; + }, [commentId]); const renderComment = ({item}: {item: CommentType | CommentThreadType}) => ( Date: Thu, 6 May 2021 18:36:21 -0400 Subject: updated moment mention style --- src/components/comments/AddComment.tsx | 2 +- src/components/comments/CommentTile.tsx | 3 ++- src/components/moments/MomentPostContent.tsx | 5 +++-- src/screens/profile/CaptionScreen.tsx | 2 +- src/utils/comments.tsx | 29 ++++++++++++++++++---------- 5 files changed, 26 insertions(+), 15 deletions(-) (limited to 'src/components/comments') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index dd016109..9cf10b5e 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -123,7 +123,7 @@ const AddComment: React.FC = ({momentId, placeholderText}) => { ); }} inputRef={ref} - partTypes={mentionPartTypes} + partTypes={mentionPartTypes('blue')} /> diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx index ce346af5..ecdb4c30 100644 --- a/src/components/comments/CommentTile.tsx +++ b/src/components/comments/CommentTile.tsx @@ -25,7 +25,7 @@ import { normalize, SCREEN_WIDTH, } from '../../utils'; -import {renderTextWithMentions} from '../../utils/comments'; +import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; import {ProfilePreview} from '../profile'; import CommentsContainer from './CommentsContainer'; @@ -152,6 +152,7 @@ const CommentTile: React.FC = ({ {renderTextWithMentions({ value: commentObject.comment, styles: styles.comment, + partTypes: mentionPartTypes('blue'), onPress: (user: UserType) => navigateToProfile(state, dispatch, navigation, screenType, user), })} diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index 03034925..45186ba1 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -11,7 +11,7 @@ import { SCREEN_HEIGHT, SCREEN_WIDTH, } from '../../utils'; -import {renderTextWithMentions} from '../../utils/comments'; +import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; import {CommentsCount} from '../comments'; interface MomentPostContentProps extends ViewProps { @@ -62,6 +62,7 @@ const MomentPostContent: React.FC = ({ {renderTextWithMentions({ value: caption, styles: styles.captionText, + partTypes: mentionPartTypes('white'), onPress: (user: UserType) => navigateToProfile(state, dispatch, navigation, screenType, user), })} @@ -101,7 +102,7 @@ const styles = StyleSheet.create({ marginLeft: '5%', marginRight: '5%', color: '#ffffff', - fontWeight: 'bold', + fontWeight: '500', }, }); export default MomentPostContent; diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 041f0da2..a41abba6 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -116,7 +116,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { placeholderTextColor="gray" value={caption} onChange={setCaption} - partTypes={mentionPartTypes} + partTypes={mentionPartTypes('blue')} /> diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx index a71e3857..0d551682 100644 --- a/src/utils/comments.tsx +++ b/src/utils/comments.tsx @@ -55,6 +55,7 @@ const renderPart = ( interface RenderProps { value: string; styles: StyleProp; + partTypes: PartType[]; onPress: (user: UserType) => void; } @@ -66,9 +67,10 @@ interface RenderProps { export const renderTextWithMentions: React.FC = ({ value, styles, + partTypes, onPress, }) => { - const {parts} = parseValue(value, mentionPartTypes); + const {parts} = parseValue(value, partTypes); return ( {parts.map((part, index) => renderPart(part, index, onPress))} @@ -76,12 +78,19 @@ export const renderTextWithMentions: React.FC = ({ ); }; -export const mentionPartTypes: PartType[] = [ - { - trigger: '@', - renderSuggestions: (props) => , - allowedSpacesCount: 0, - isInsertSpaceAfterMention: true, - textStyle: {color: TAGG_LIGHT_BLUE}, - }, -]; +export const mentionPartTypes: (style: 'blue' | 'white') => PartType[] = ( + style, +) => { + return [ + { + trigger: '@', + renderSuggestions: (props) => , + allowedSpacesCount: 0, + isInsertSpaceAfterMention: true, + textStyle: + style === 'blue' + ? {color: TAGG_LIGHT_BLUE} + : {color: 'white', fontWeight: '800'}, + }, + ]; +}; -- cgit v1.2.3-70-g09d2