From a249f2d027c9cd5d7f20602cf79ec2265f60a54c Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Fri, 11 Jun 2021 01:59:02 +0900 Subject: Add check for contacts permission --- src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index c65d2012..39d98bcc 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -3,6 +3,7 @@ import {useFocusEffect, useNavigation} from '@react-navigation/native'; import React, {useCallback, useEffect, useRef, useState} from 'react'; import {FlatList, RefreshControl, StatusBar, ViewToken} from 'react-native'; import {useDispatch, useSelector, useStore} from 'react-redux'; +import {checkPermission} from 'react-native-contacts'; import {Background, TabsGradient, TaggLoadingIndicator} from '../../components'; import {SP_PAGE_SIZE} from '../../constants'; import {getSuggestedPeople} from '../../services/SuggestedPeopleService'; @@ -59,11 +60,17 @@ const SuggestedPeopleScreen: React.FC = () => { const stausBarRef = useRef(hideStatusBar); useEffect(() => { - AsyncStorage.getItem('respondedToAccessContacts').then((value) => { - if (value === null) { + const handlePageChange = async () => { + const checkAsync = await AsyncStorage.getItem( + 'respondedToAccessContacts', + ); + const permission = await checkPermission(); + if (checkAsync === null && permission !== 'authorized') { navigation.navigate('RequestContactsAccess'); } - }); + }; + + handlePageChange(); }, []); // loads data and append it to users based on current page -- cgit v1.2.3-70-g09d2 From bc2c093e9342ed8deb98652d1c278417dd6435f3 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Tue, 15 Jun 2021 03:53:00 +0900 Subject: Fixed styles for comments vs captions --- src/components/comments/AddComment.tsx | 2 +- src/components/common/TaggTypeahead.tsx | 23 ++++++++++++++++++----- src/screens/profile/CaptionScreen.tsx | 2 +- src/utils/comments.tsx | 11 +++++++---- 4 files changed, 27 insertions(+), 11 deletions(-) (limited to 'src/screens') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index c48ce627..db85d525 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -122,7 +122,7 @@ const AddComment: React.FC = ({momentId, placeholderText}) => { ); }} inputRef={ref} - partTypes={mentionPartTypes('blue')} + partTypes={mentionPartTypes('blue', 'comment')} addComment={addComment} /> diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx index 6686b4d9..6b3df559 100644 --- a/src/components/common/TaggTypeahead.tsx +++ b/src/components/common/TaggTypeahead.tsx @@ -1,21 +1,35 @@ import React, {Fragment, useEffect, useState} from 'react'; import {ScrollView, StyleSheet, View} from 'react-native'; -import {MentionSuggestionsProps} from 'react-native-controlled-mentions'; +import {Suggestion} from 'react-native-controlled-mentions'; import {useSelector} from 'react-redux'; import {SEARCH_ENDPOINT_MESSAGES} from '../../constants'; import {loadSearchResults} from '../../services'; import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType} from '../../types'; -import {SCREEN_WIDTH, SCREEN_HEIGHT, shuffle} from '../../utils'; +import {SCREEN_HEIGHT, SCREEN_WIDTH, shuffle} from '../../utils'; import TaggUserRowCell from './TaggUserRowCell'; -const TaggTypeahead: React.FC = ({ +type TaggTypeaheadProps = { + keyword: string | undefined; + component: string | undefined; + onSuggestionPress: (suggestion: Suggestion) => void; +}; + +const TaggTypeahead: React.FC = ({ keyword, + component, onSuggestionPress, }) => { const {friends} = useSelector((state: RootState) => state.friends); const [results, setResults] = useState([]); const [height, setHeight] = useState(0); + const [margin, setMargin] = useState(0); + + useEffect(() => { + if (component === 'comment') { + setMargin(-10); + } + }, [component]); useEffect(() => { if (keyword === '') { @@ -45,7 +59,7 @@ const TaggTypeahead: React.FC = ({ { setHeight(event.nativeEvent.layout.height); @@ -76,7 +90,6 @@ const styles = StyleSheet.create({ position: 'absolute', alignSelf: 'center', zIndex: 1, - margin: -10, }, overlay: { width: SCREEN_WIDTH, diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 8bffd82b..05095d16 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -167,7 +167,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { placeholderTextColor="gray" value={caption} onChange={setCaption} - partTypes={mentionPartTypes('blue')} + partTypes={mentionPartTypes('blue', 'caption')} /> diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx index 5c17cefe..80786b74 100644 --- a/src/utils/comments.tsx +++ b/src/utils/comments.tsx @@ -79,13 +79,16 @@ export const renderTextWithMentions: React.FC = ({ ); }; -export const mentionPartTypes: (style: 'blue' | 'white') => PartType[] = ( - style, -) => { +export const mentionPartTypes: ( + style: 'blue' | 'white', + component: 'caption' | 'comment', +) => PartType[] = (style, component) => { return [ { trigger: '@', - renderSuggestions: (props) => , + renderSuggestions: (props) => ( + + ), allowedSpacesCount: 0, isInsertSpaceAfterMention: true, textStyle: -- cgit v1.2.3-70-g09d2 From 6ee452c257d388913a1effd817c37bef638bc179 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Tue, 15 Jun 2021 12:21:53 +0900 Subject: Fix bug in caption screen of suggestions not disappearing --- src/components/comments/AddComment.tsx | 5 +- src/components/comments/CommentTextField.tsx | 162 +++++++++++++++++++++ src/components/comments/MentionInputControlled.tsx | 106 ++++++-------- src/components/comments/index.ts | 1 + src/screens/profile/CaptionScreen.tsx | 4 +- 5 files changed, 210 insertions(+), 68 deletions(-) create mode 100644 src/components/comments/CommentTextField.tsx (limited to 'src/screens') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index db85d525..3c0e9a0a 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -18,8 +18,8 @@ import {RootState} from '../../store/rootreducer'; import {CommentThreadType, CommentType} from '../../types'; import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; -import {Avatar} from '../common'; -import {MentionInputControlled} from './MentionInputControlled'; +import {CommentTextField} from './CommentTextField'; +import MentionInputControlled from './MentionInputControlled'; import {normalize} from 'react-native-elements'; export interface AddCommentProps { @@ -124,6 +124,7 @@ const AddComment: React.FC = ({momentId, placeholderText}) => { inputRef={ref} partTypes={mentionPartTypes('blue', 'comment')} addComment={addComment} + NewText={CommentTextField} /> diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx new file mode 100644 index 00000000..61b489bb --- /dev/null +++ b/src/components/comments/CommentTextField.tsx @@ -0,0 +1,162 @@ +import React, { + FC, + MutableRefObject, + Ref, + useMemo, + useRef, + useState, + ReactFragment, +} from 'react'; +import { + NativeSyntheticEvent, + StyleSheet, + StyleProp, + Text, + TextInput, + TextInputProps, + TextInputSelectionChangeEventData, + TouchableOpacity, + View, + ViewStyle, +} from 'react-native'; +import {useDispatch, useSelector} from 'react-redux'; +import {TAGG_LIGHT_BLUE} from '../../constants'; +import { + Part, + PartType, + PatternPartType, + MentionPartType, + Suggestion, +} from 'react-native-controlled-mentions/dist/types'; +import { + defaultMentionTextStyle, + generateValueFromPartsAndChangedText, + generateValueWithAddedSuggestion, + getMentionPartSuggestionKeywords, + isMentionPartType, + parseValue, +} from 'react-native-controlled-mentions/dist/utils'; +import {Avatar} from '../common'; +import {normalize} from 'react-native-elements'; + +import UpArrowIcon from '../../assets/icons/up_arrow.svg'; +import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils'; + +type CommentTextFieldProps = { + containerStyle: StyleProp; + validateInput: any; + keyboardText: string; + partTypes: PartType[]; + renderMentionSuggestions: (mentionType: MentionPartType) => ReactFragment; + handleTextInputRef: (ref: TextInput) => null; + onChangeInput: (changedText: string) => null; + handleSelectionChange: ( + event: NativeSyntheticEvent, + ) => null; + parts: Part[]; + addComment: () => any; +}; + +const CommentTextField: FC = ({ + containerStyle, + validateInput, + keyboardText, + partTypes, + renderMentionSuggestions, + handleTextInputRef, + onChangeInput, + handleSelectionChange, + parts, + addComment, + ...textInputProps +}) => { + const {avatar} = useSelector((state: RootState) => state.user); + + return ( + + {validateInput(keyboardText) + ? ( + partTypes.filter( + (one) => + isMentionPartType(one) && + one.renderSuggestions != null && + !one.isBottomMentionSuggestionsRender, + ) as MentionPartType[] + ).map(renderMentionSuggestions) + : null} + + + + + + {parts.map(({text, partType, data}, index) => + partType ? ( + + {text} + + ) : ( + {text} + ), + )} + + + + + + + + + + {validateInput(keyboardText) + ? ( + partTypes.filter( + (one) => + isMentionPartType(one) && + one.renderSuggestions != null && + one.isBottomMentionSuggestionsRender, + ) as MentionPartType[] + ).map(renderMentionSuggestions) + : null} + + ); +}; + +const styles = StyleSheet.create({ + avatar: { + height: 35, + width: 35, + borderRadius: 30, + marginRight: 10, + marginLeft: '3%', + marginVertical: '2%', + }, + containerStyle: { + flexDirection: 'row', + alignSelf: 'center', + alignItems: 'center', + justifyContent: 'center', + height: normalize(40), + }, + submitButton: { + height: 35, + width: 35, + backgroundColor: TAGG_LIGHT_BLUE, + borderRadius: 999, + justifyContent: 'center', + alignItems: 'center', + marginRight: '3%', + marginVertical: '2%', + alignSelf: 'flex-end', + }, + text: {flex: 1}, +}); + +export {CommentTextField}; diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx index c37d2182..50762ac0 100644 --- a/src/components/comments/MentionInputControlled.tsx +++ b/src/components/comments/MentionInputControlled.tsx @@ -5,6 +5,7 @@ import React, { useMemo, useRef, useState, + ReactFragment, } from 'react'; import { NativeSyntheticEvent, @@ -51,7 +52,9 @@ type MentionInputControlledProps = Omit & { containerStyle?: StyleProp; - addComment?: () => any; + addComment?: () => any | null; + + NewText?: FC; }; const MentionInputControlled: FC = ({ @@ -68,6 +71,8 @@ const MentionInputControlled: FC = ({ addComment, + NewText, + ...textInputProps }) => { const textInput = useRef(null); @@ -76,8 +81,6 @@ const MentionInputControlled: FC = ({ const [keyboardText, setKeyboardText] = useState(''); - const {avatar} = useSelector((state: RootState) => state.user); - const validRegex = () => { if (partTypes.length === 0) { return /.*@[^ ]*$/; @@ -185,7 +188,21 @@ const MentionInputControlled: FC = ({ return validRegex().test(testString); }; - return ( + return NewText ? ( + + ) : ( {validateInput(keyboardText) ? ( @@ -198,35 +215,26 @@ const MentionInputControlled: FC = ({ ).map(renderMentionSuggestions) : null} - - - - - {parts.map(({text, partType, data}, index) => - partType ? ( - - {text} - - ) : ( - {text} - ), - )} - - - - - - - - + + + {parts.map(({text, partType, data}, index) => + partType ? ( + + {text} + + ) : ( + {text} + ), + )} + + {validateInput(keyboardText) ? ( @@ -242,34 +250,4 @@ const MentionInputControlled: FC = ({ ); }; -const styles = StyleSheet.create({ - avatar: { - height: 35, - width: 35, - borderRadius: 30, - marginRight: 10, - marginLeft: '3%', - marginVertical: '2%', - }, - containerStyle: { - flexDirection: 'row', - alignSelf: 'center', - alignItems: 'center', - justifyContent: 'center', - height: normalize(40), - }, - submitButton: { - height: 35, - width: 35, - backgroundColor: TAGG_LIGHT_BLUE, - borderRadius: 999, - justifyContent: 'center', - alignItems: 'center', - marginRight: '3%', - marginVertical: '2%', - alignSelf: 'flex-end', - }, - text: {flex: 1}, -}); - -export {MentionInputControlled}; +export default MentionInputControlled; diff --git a/src/components/comments/index.ts b/src/components/comments/index.ts index 6293f799..653f594c 100644 --- a/src/components/comments/index.ts +++ b/src/components/comments/index.ts @@ -1,3 +1,4 @@ export {default as CommentsCount} from '../comments/CommentsCount'; export {default as CommentTile} from './CommentTile'; export {default as AddComment} from './AddComment'; +export {default as MentionInputControlled} from './MentionInputControlled'; diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 05095d16..755c668b 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -13,7 +13,7 @@ import { TouchableWithoutFeedback, View, } from 'react-native'; -import {MentionInput} from 'react-native-controlled-mentions'; +import {MentionInputControlled} from '../../components'; import {Button, normalize} from 'react-native-elements'; import {useDispatch, useSelector} from 'react-redux'; import FrontArrow from '../../assets/icons/front-arrow.svg'; @@ -161,7 +161,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { source={{uri: image.path}} resizeMode={'cover'} /> - Date: Wed, 16 Jun 2021 23:11:49 +0900 Subject: Fix issue with background messing up appearance of AddComment elsewhere --- src/components/comments/AddComment.tsx | 2 +- src/components/moments/MomentCommentPreview.tsx | 2 +- src/screens/profile/MomentCommentsScreen.tsx | 5 ++--- 3 files changed, 4 insertions(+), 5 deletions(-) (limited to 'src/screens') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index 01325475..4a1822a3 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -130,7 +130,7 @@ const AddComment: React.FC = ({momentId, placeholderText}) => { const styles = StyleSheet.create({ container: { - backgroundColor: '#f7f7f7', + // backgroundColor: '#f7f7f7', alignItems: 'center', justifyContent: 'center', width: SCREEN_WIDTH, diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx index f6b9d75b..d4729888 100644 --- a/src/components/moments/MomentCommentPreview.tsx +++ b/src/components/moments/MomentCommentPreview.tsx @@ -9,7 +9,7 @@ import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; interface MomentCommentPreviewProps { momentId: string; - commentsCount: number | null; + commentsCount: number; commentPreview: MomentCommentPreviewType | null; screenType: ScreenType; } diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx index 7dfe8ae9..402e5f44 100644 --- a/src/screens/profile/MomentCommentsScreen.tsx +++ b/src/screens/profile/MomentCommentsScreen.tsx @@ -48,9 +48,8 @@ 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< - CommentType | CommentThreadType | undefined - >(); + const [commentTapped, setCommentTapped] = + useState(); useEffect(() => { navigation.setOptions({ -- cgit v1.2.3-70-g09d2