From 7316bc3b11d84224ae91a12ec07c97915b0d6c60 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 8 Jun 2021 11:19:31 -0700 Subject: Add edit option to bottom drawer, Style --- src/components/common/GenericMoreInfoDrawer.tsx | 14 +++++------ src/components/profile/MomentMoreInfoDrawer.tsx | 32 +++++++++++++++++++----- src/components/profile/ProfileMoreInfoDrawer.tsx | 5 ++-- 3 files changed, 35 insertions(+), 16 deletions(-) (limited to 'src') diff --git a/src/components/common/GenericMoreInfoDrawer.tsx b/src/components/common/GenericMoreInfoDrawer.tsx index 0928ed44..cfc45131 100644 --- a/src/components/common/GenericMoreInfoDrawer.tsx +++ b/src/components/common/GenericMoreInfoDrawer.tsx @@ -3,15 +3,16 @@ import { GestureResponderEvent, StyleSheet, Text, + TextStyle, TouchableOpacity, View, ViewProps, ViewStyle, } from 'react-native'; import {useSafeAreaInsets} from 'react-native-safe-area-context'; -import BottomDrawer from './BottomDrawer'; import {TAGG_LIGHT_BLUE} from '../../constants'; import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import BottomDrawer from './BottomDrawer'; // conforms the JSX onPress attribute type type OnPressHandler = (event: GestureResponderEvent) => void; @@ -20,13 +21,12 @@ interface GenericMoreInfoDrawerProps extends ViewProps { isOpen: boolean; setIsOpen: (visible: boolean) => void; showIcons: boolean; - textColor: string; // An array of title, onPressHandler, and icon component - buttons: [string, OnPressHandler, JSX.Element?][]; + buttons: [string, OnPressHandler, JSX.Element?, TextStyle?][]; } const GenericMoreInfoDrawer: React.FC = (props) => { - const {buttons, showIcons, textColor} = props; + const {buttons, showIcons} = props; // each button is 80px high, cancel button is always there const initialSnapPosition = (buttons.length + 1) * 80 + useSafeAreaInsets().bottom; @@ -44,13 +44,11 @@ const GenericMoreInfoDrawer: React.FC = (props) => { showHeader={false} initialSnapPosition={initialSnapPosition}> - {buttons.map(([title, action, icon], index) => ( + {buttons.map(([title, action, icon, textStyle], index) => ( {showIcons && {icon}} - - {title} - + {title} diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx index 1265497e..a5411935 100644 --- a/src/components/profile/MomentMoreInfoDrawer.tsx +++ b/src/components/profile/MomentMoreInfoDrawer.tsx @@ -1,20 +1,24 @@ +import {useNavigation} from '@react-navigation/native'; import React, {useEffect, useState} from 'react'; import { Alert, GestureResponderEvent, StyleSheet, + TextStyle, TouchableOpacity, ViewProps, } from 'react-native'; import MoreIcon from '../../assets/icons/more_horiz-24px.svg'; import {ERROR_DELETE_MOMENT, MOMENT_DELETED_MSG} from '../../constants/strings'; import {deleteMoment, sendReport} from '../../services'; +import {ScreenType} from '../../types/types'; import {GenericMoreInfoDrawer} from '../common'; enum MomentDrawerOptions { DeleteMoment = 'Delete Moment', ReportIssue = 'Report an Issue', RemoveTag = 'Remove yourself from moment', + EditMoment = 'Edit Moment', } interface MomentMoreInfoDrawerProps extends ViewProps { isOpen: boolean; @@ -105,12 +109,27 @@ const MomentMoreInfoDrawer: React.FC = (props) => { }; const [drawerButtons, setDrawerButtons] = useState< - [string, (event: GestureResponderEvent) => void, JSX.Element?][] - >([ + [string, (event: GestureResponderEvent) => void, JSX.Element?, TextStyle?][] + >( isOwnProfile - ? [MomentDrawerOptions.DeleteMoment, handleDeleteMoment] - : [MomentDrawerOptions.ReportIssue, handleReportMoment], - ]); + ? [ + [ + MomentDrawerOptions.DeleteMoment, + handleDeleteMoment, + undefined, + {color: 'red'}, + ], + [MomentDrawerOptions.EditMoment, handleEditMoment], + ] + : [ + [ + MomentDrawerOptions.ReportIssue, + handleReportMoment, + undefined, + {color: 'red'}, + ], + ], + ); /* * Update bottom drawer options to contain/not contain 'remove tag' option @@ -129,6 +148,8 @@ const MomentMoreInfoDrawer: React.FC = (props) => { localDrawerButtons.push([ MomentDrawerOptions.RemoveTag, handleRemoveTag, + undefined, + {color: 'red'}, ]); setDrawerButtons(localDrawerButtons); } else if (momentTagId === '' && present !== -1) { @@ -153,7 +174,6 @@ const MomentMoreInfoDrawer: React.FC = (props) => { diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx index ecc45211..656f81bb 100644 --- a/src/components/profile/ProfileMoreInfoDrawer.tsx +++ b/src/components/profile/ProfileMoreInfoDrawer.tsx @@ -55,12 +55,12 @@ const ProfileMoreInfoDrawer: React.FC = (props) => { @@ -68,7 +68,6 @@ const ProfileMoreInfoDrawer: React.FC = (props) => { = (props) => { source={require('../../assets/images/settings/settings.png')} style={styles.image} />, + {color: 'black'}, ], [ 'Edit Profile', @@ -85,6 +85,7 @@ const ProfileMoreInfoDrawer: React.FC = (props) => { source={require('../../assets/images/settings/edit-profile.png')} style={styles.image} />, + {color: 'black'}, ], ]} /> -- cgit v1.2.3-70-g09d2 From 189e0cb9f298ff956fc722fdcd4dcd9acd982985 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 9 Jun 2021 16:03:30 -0700 Subject: Pass moment instead of sub fields --- src/components/moments/MomentPost.tsx | 8 +++----- src/components/moments/MomentPostContent.tsx | 24 +++++++++--------------- src/components/moments/MomentPostHeader.tsx | 12 ++++++++---- 3 files changed, 20 insertions(+), 24 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 7149a5b4..e744fcd9 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -76,18 +76,16 @@ const MomentPost: React.FC = ({item, userXId, screenType}) => { userXId={userXId} screenType={screenType} username={isOwnProfile ? loggedInUsername : username} - momentId={item.moment_id} style={styles.postHeader} momentTagId={momentTagId} removeTag={removeTag} + moment={item} + tags={tags} /> diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx index 4a1f3894..153833d7 100644 --- a/src/components/moments/MomentPostContent.tsx +++ b/src/components/moments/MomentPostContent.tsx @@ -6,7 +6,7 @@ import Animated, {Easing} from 'react-native-reanimated'; import {useDispatch, useStore} from 'react-redux'; import {getCommentsCount} from '../../services'; import {RootState} from '../../store/rootReducer'; -import {MomentTagType, ScreenType, UserType} from '../../types'; +import {MomentTagType, MomentType, ScreenType, UserType} from '../../types'; import { getTimePosted, navigateToProfile, @@ -20,19 +20,13 @@ import {MomentTags} from '../common'; interface MomentPostContentProps extends ViewProps { screenType: ScreenType; - momentId: string; - caption: string; - pathHash: string; - dateTime: string; + moment: MomentType; momentTags: MomentTagType[]; } const MomentPostContent: React.FC = ({ screenType, - momentId, - caption, - pathHash, - dateTime, style, + moment, momentTags, }) => { const state: RootState = useStore().getState(); @@ -54,12 +48,12 @@ const MomentPostContent: React.FC = ({ useEffect(() => { const fetchCommentsCount = async () => { - const count = await getCommentsCount(momentId, false); + const count = await getCommentsCount(moment.moment_id, false); setCommentsCount(count); }; - setElapsedTime(getTimePosted(dateTime)); + setElapsedTime(getTimePosted(moment.date_created)); fetchCommentsCount(); - }, [dateTime, momentId]); + }, [moment.date_created, moment.moment_id]); useEffect(() => { const fade = async () => { @@ -82,7 +76,7 @@ const MomentPostContent: React.FC = ({ {tags.length > 0 && ( @@ -100,13 +94,13 @@ const MomentPostContent: React.FC = ({ {elapsedTime} {renderTextWithMentions({ - value: caption, + value: moment.caption, styles: styles.captionText, partTypes: mentionPartTypes('white'), onPress: (user: UserType) => diff --git a/src/components/moments/MomentPostHeader.tsx b/src/components/moments/MomentPostHeader.tsx index dc6a3cd9..cde7639c 100644 --- a/src/components/moments/MomentPostHeader.tsx +++ b/src/components/moments/MomentPostHeader.tsx @@ -10,7 +10,7 @@ import { import {useDispatch, useSelector, useStore} from 'react-redux'; import {loadUserMoments} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; -import {ScreenType} from '../../types'; +import {MomentTagType, MomentType, ScreenType} from '../../types'; import {fetchUserX, userXInStore} from '../../utils'; import {MomentMoreInfoDrawer} from '../profile'; import TaggAvatar from '../profile/TaggAvatar'; @@ -19,19 +19,21 @@ interface MomentPostHeaderProps extends ViewProps { userXId?: string; screenType: ScreenType; username: string; - momentId: string; momentTagId: string; removeTag: () => Promise; + moment: MomentType; + tags: MomentTagType[]; } const MomentPostHeader: React.FC = ({ userXId, screenType, username, - momentId, style, momentTagId, removeTag, + moment, + tags, }) => { const [drawerVisible, setDrawerVisible] = useState(false); const dispatch = useDispatch(); @@ -68,7 +70,6 @@ const MomentPostHeader: React.FC = ({ = ({ dispatch(loadUserMoments(loggedInUserId)); navigation.pop(); }} + screenType={screenType} + moment={moment} + tags={tags} /> ); -- 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') 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()} />