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/screens/onboarding/BasicInfoOnboarding.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/screens') 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/screens') 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/screens') 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 f8dd6b8ef033039278e2931876488c307f5d5adc Mon Sep 17 00:00:00 2001 From: Ivan Chen 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/screens') 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 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/screens') 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 15:30:35 -0400 Subject: add empty website to submission --- src/screens/profile/EditProfile.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) (limited to 'src/screens') diff --git a/src/screens/profile/EditProfile.tsx b/src/screens/profile/EditProfile.tsx index 26802e45..765bbf01 100644 --- a/src/screens/profile/EditProfile.tsx +++ b/src/screens/profile/EditProfile.tsx @@ -305,14 +305,13 @@ const EditProfile: React.FC = ({route, navigation}) => { type: 'image/jpg', }); } - if (form.website) { - if (form.isValidWebsite) { - request.append('website', form.website); - } else { - setForm({...form, attemptedSubmit: false}); - setTimeout(() => setForm({...form, attemptedSubmit: true})); - invalidFields = true; - } + + if (form.isValidWebsite) { + request.append('website', form.website); + } else { + setForm({...form, attemptedSubmit: false}); + setTimeout(() => setForm({...form, attemptedSubmit: true})); + invalidFields = true; } if (form.bio) { -- cgit v1.2.3-70-g09d2 From 6070fae504921259a24af78952af36d3c9643022 Mon Sep 17 00:00:00 2001 From: Ivan Chen 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/screens') 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 587d08dc8f0508b6efa76cc7d57f21ac2a5fd9fb Mon Sep 17 00:00:00 2001 From: Husam Salhab <47015061+hsalhab@users.noreply.github.com> Date: Wed, 9 Jun 2021 16:43:02 -0400 Subject: [TMA-909] Fix Contact Search (#460) * shows proper results and handles null lists * remove unnecessary existing users code * fix height and remove console log * lint --- src/screens/profile/EditProfile.tsx | 2 +- src/screens/profile/InviteFriendsScreen.tsx | 56 ++++++++++++++--------------- 2 files changed, 29 insertions(+), 29 deletions(-) (limited to 'src/screens') diff --git a/src/screens/profile/EditProfile.tsx b/src/screens/profile/EditProfile.tsx index 765bbf01..20a62b19 100644 --- a/src/screens/profile/EditProfile.tsx +++ b/src/screens/profile/EditProfile.tsx @@ -305,7 +305,7 @@ const EditProfile: React.FC = ({route, navigation}) => { type: 'image/jpg', }); } - + if (form.isValidWebsite) { request.append('website', form.website); } else { diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx index 89f2e62f..9ee6fb1c 100644 --- a/src/screens/profile/InviteFriendsScreen.tsx +++ b/src/screens/profile/InviteFriendsScreen.tsx @@ -21,7 +21,6 @@ import { getRemainingInviteCount, usersFromContactsService, } from '../../services/UserFriendsService'; -import {ProfilePreviewType} from '../../types'; import { extractContacts, HeaderHeight, @@ -45,11 +44,10 @@ export type SearchResultType = { const InviteFriendsScreen: React.FC = () => { const navigation = useNavigation(); - const [usersFromContacts, setUsersFromContacts] = useState< - ProfilePreviewType[] + const [nonUsersFromContacts, setNonUsersFromContacts] = useState< + InviteContactType[] >([]); - const [nonUsersFromContacts, setNonUsersFromContacts] = useState<[]>([]); - const [pendingUsers] = useState<[]>([]); + const [pendingUsers, setPendingUsers] = useState([]); const [results, setResults] = useState({ nonUsersFromContacts: nonUsersFromContacts, pendingUsers: pendingUsers, @@ -80,8 +78,8 @@ const InviteFriendsScreen: React.FC = () => { const permission = await checkPermission(); if (permission === 'authorized') { let response = await usersFromContactsService(retrievedContacts); - await setUsersFromContacts(response.existing_tagg_users); await setNonUsersFromContacts(response.invite_from_contacts); + await setPendingUsers(response.pending_users); setResults({ nonUsersFromContacts: response.invite_from_contacts, pendingUsers: response.pending_users, @@ -100,30 +98,32 @@ const InviteFriendsScreen: React.FC = () => { useEffect(() => { const search = async () => { if (query.length > 0) { - const searchResultsUsers = usersFromContacts.filter( - (item: ProfilePreviewType) => - (item.first_name + ' ' + item.last_name) - .toLowerCase() - .startsWith(query) || - item.username.toLowerCase().startsWith(query) || - item.last_name.toLowerCase().startsWith(query), - ); - const searchResultsNonUsers = nonUsersFromContacts.filter( - (item: InviteContactType) => - (item.firstName + ' ' + item.lastName) - .toLowerCase() - .startsWith(query) || - item.lastName.toLowerCase().startsWith(query), - ); - const sanitizedResult = { - usersFromContacts: searchResultsUsers, + const searchResultsPendingUsers = pendingUsers + ? pendingUsers.filter( + (item: InviteContactType) => + (item.firstName + ' ' + item.lastName) + .toLowerCase() + .startsWith(query) || + item.lastName.toLowerCase().startsWith(query), + ) + : []; + const searchResultsNonUsers = nonUsersFromContacts + ? nonUsersFromContacts.filter( + (item: InviteContactType) => + (item.firstName + ' ' + item.lastName) + .toLowerCase() + .startsWith(query) || + item.lastName.toLowerCase().startsWith(query), + ) + : []; + setResults({ nonUsersFromContacts: searchResultsNonUsers, - }; - setResults(sanitizedResult); + pendingUsers: searchResultsPendingUsers, + }); } else { setResults({ - nonUsersFromContacts: nonUsersFromContacts, - pendingUsers: pendingUsers, + nonUsersFromContacts: nonUsersFromContacts || [], + pendingUsers: pendingUsers || [], }); } }; @@ -203,7 +203,7 @@ const InviteFriendsScreen: React.FC = () => { styles.subheader, { height: - 72 * + 75 * (results.pendingUsers ? results.pendingUsers.length : 1), }, ]}> -- cgit v1.2.3-70-g09d2 From 2286d1b013b73534537a3265876361527856fd1a Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 9 Jun 2021 16:08:49 -0700 Subject: Add edit moment functionality to caption screen --- src/screens/moments/TagFriendsScreen.tsx | 4 +- src/screens/profile/CaptionScreen.tsx | 90 +++++++++++++++++++++----------- src/services/MomentService.ts | 32 ++++++++++++ 3 files changed, 94 insertions(+), 32 deletions(-) (limited to 'src/screens') diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index c8bca9f4..570c3776 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -30,7 +30,7 @@ interface TagFriendsScreenProps { route: TagFriendsScreenRouteProps; } const TagFriendsScreen: React.FC = ({route}) => { - const {image, selectedTags} = route.params; + const {imagePath, selectedTags} = route.params; const navigation = useNavigation(); const imageRef = useRef(null); const [tags, setTags] = useState([]); @@ -85,7 +85,7 @@ const TagFriendsScreen: React.FC = ({route}) => { diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 8bffd82b..949b61fd 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -23,7 +23,7 @@ import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; import {TAGG_LIGHT_BLUE_2} from '../../constants'; import {ERROR_UPLOAD, SUCCESS_PIC_UPLOAD} from '../../constants/strings'; import {MainStackParams} from '../../routes'; -import {postMoment, postMomentTags} from '../../services'; +import {patchMoment, postMoment, postMomentTags} from '../../services'; import { loadUserMoments, updateProfileCompletionStage, @@ -47,14 +47,16 @@ interface CaptionScreenProps { } const CaptionScreen: React.FC = ({route, navigation}) => { - const {title, image, screenType, selectedTags} = route.params; + const {title, image, screenType, selectedTags, moment} = route.params; const { user: {userId}, } = useSelector((state: RootState) => state.user); const dispatch = useDispatch(); - const [caption, setCaption] = useState(''); + const [caption, setCaption] = useState(moment ? moment.caption : ''); const [loading, setLoading] = useState(false); - const [tags, setTags] = useState([]); + const [tags, setTags] = useState( + selectedTags ? selectedTags : [], + ); const [taggedList, setTaggedList] = useState(''); useEffect(() => { @@ -84,22 +86,32 @@ const CaptionScreen: React.FC = ({route, navigation}) => { }); }; + const handleFailed = () => { + setLoading(false); + setTimeout(() => { + Alert.alert(moment ? 'Error editing moment' : ERROR_UPLOAD); + }, 500); + }; + const handleSuccess = () => { + setLoading(false); + navigateToProfile(); + setTimeout(() => { + Alert.alert(moment ? 'Successfully edited moment!' : SUCCESS_PIC_UPLOAD); + }, 500); + }; + + const formattedTags = () => { + return tags.map((tag) => ({ + x: Math.floor(tag.x), + y: Math.floor(tag.y), + z: Math.floor(tag.z), + user_id: tag.user.id, + })); + }; + const handleShare = async () => { - const handleFailed = () => { - setLoading(false); - setTimeout(() => { - Alert.alert(ERROR_UPLOAD); - }, 500); - }; - const handleSuccess = () => { - setLoading(false); - navigateToProfile(); - setTimeout(() => { - Alert.alert(SUCCESS_PIC_UPLOAD); - }, 500); - }; setLoading(true); - if (!image.filename) { + if (!image?.filename || !title) { return; } const momentResponse = await postMoment( @@ -115,12 +127,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { } const momentTagResponse = await postMomentTags( momentResponse.moment_id, - tags.map((tag) => ({ - x: Math.floor(tag.x), - y: Math.floor(tag.y), - z: Math.floor(tag.z), - user_id: tag.user.id, - })), + formattedTags(), ); if (!momentTagResponse) { handleFailed(); @@ -133,6 +140,23 @@ const CaptionScreen: React.FC = ({route, navigation}) => { handleSuccess(); }; + const handleDone = async () => { + setLoading(true); + if (moment?.moment_id) { + const success = await patchMoment( + moment.moment_id, + caption, + formattedTags(), + ); + if (success) { + dispatch(loadUserMoments(userId)); + handleSuccess(); + } else { + handleFailed(); + } + } + }; + return ( {loading ? : } @@ -148,17 +172,20 @@ const CaptionScreen: React.FC = ({route, navigation}) => { onPress={() => navigateToProfile()} />