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/profile/MomentMoreInfoDrawer.tsx | 32 +++++++++++++++++++----- src/components/profile/ProfileMoreInfoDrawer.tsx | 5 ++-- 2 files changed, 29 insertions(+), 8 deletions(-) (limited to 'src/components/profile') 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 7932c7358944912c5bd961ed1361c998fffd1b5f Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 9 Jun 2021 16:09:24 -0700 Subject: Add edit moment option to drawer --- src/components/profile/MomentMoreInfoDrawer.tsx | 102 ++++++++++++------------ 1 file changed, 53 insertions(+), 49 deletions(-) (limited to 'src/components/profile') diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx index a5411935..a796ffd8 100644 --- a/src/components/profile/MomentMoreInfoDrawer.tsx +++ b/src/components/profile/MomentMoreInfoDrawer.tsx @@ -1,4 +1,4 @@ -import {useNavigation} from '@react-navigation/native'; +import {useNavigation} from '@react-navigation/core'; import React, {useEffect, useState} from 'react'; import { Alert, @@ -11,7 +11,7 @@ import { 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 {MomentTagType, MomentType, ScreenType} from '../../types/types'; import {GenericMoreInfoDrawer} from '../common'; enum MomentDrawerOptions { @@ -23,26 +23,36 @@ enum MomentDrawerOptions { interface MomentMoreInfoDrawerProps extends ViewProps { isOpen: boolean; setIsOpen: (visible: boolean) => void; - momentId: string; isOwnProfile: boolean; momentTagId: string; removeTag: () => Promise; dismissScreenAndUpdate: () => void; + screenType: ScreenType; + moment: MomentType; + tags: MomentTagType[]; } const MomentMoreInfoDrawer: React.FC = (props) => { const { - momentId, setIsOpen, isOwnProfile, dismissScreenAndUpdate, momentTagId, removeTag, + screenType, + moment, + tags, } = props; + const navigation = useNavigation(); + + const [drawerButtons, setDrawerButtons] = useState< + [string, (event: GestureResponderEvent) => void, JSX.Element?, TextStyle?][] + >([]); + const handleDeleteMoment = async () => { setIsOpen(false); - deleteMoment(momentId).then((success) => { + deleteMoment(moment.moment_id).then((success) => { if (success) { // set time out for UI transitions setTimeout(() => { @@ -92,7 +102,8 @@ const MomentMoreInfoDrawer: React.FC = (props) => { [ { text: 'Mark as inappropriate', - onPress: () => sendReport(momentId, 'Mark as inappropriate'), + onPress: () => + sendReport(moment.moment_id, 'Mark as inappropriate'), }, { text: 'Cancel', @@ -100,7 +111,7 @@ const MomentMoreInfoDrawer: React.FC = (props) => { }, { text: 'Mark as abusive', - onPress: () => sendReport(momentId, 'Mark as abusive'), + onPress: () => sendReport(moment.moment_id, 'Mark as abusive'), }, ], {cancelable: false}, @@ -108,59 +119,52 @@ const MomentMoreInfoDrawer: React.FC = (props) => { }, 500); }; - const [drawerButtons, setDrawerButtons] = useState< - [string, (event: GestureResponderEvent) => void, JSX.Element?, TextStyle?][] - >( - isOwnProfile - ? [ - [ - MomentDrawerOptions.DeleteMoment, - handleDeleteMoment, - undefined, - {color: 'red'}, - ], - [MomentDrawerOptions.EditMoment, handleEditMoment], - ] - : [ - [ - MomentDrawerOptions.ReportIssue, - handleReportMoment, - undefined, - {color: 'red'}, - ], - ], - ); + const handleEditMoment = async () => { + setIsOpen(false); + navigation.navigate('CaptionScreen', { + screenType: screenType, + selectedTags: tags, + moment: moment, + }); + }; /* * Update bottom drawer options to contain/not contain 'remove tag' option */ useEffect(() => { - const setupBottomDrawer = () => { - const present = drawerButtons.findIndex( - (button) => button[0] === MomentDrawerOptions.RemoveTag, - ); - /* - * If user is not tagged but button is present, remove button from bottom drawer - * If user is tagged but button is not present, add button to bottom drawer - */ - if (momentTagId !== '' && present === -1) { - const localDrawerButtons = drawerButtons; - localDrawerButtons.push([ + let newButtons: [ + string, + (event: GestureResponderEvent) => void, + JSX.Element?, + TextStyle?, + ][] = []; + if (!isOwnProfile) { + newButtons.push([ + MomentDrawerOptions.ReportIssue, + handleReportMoment, + undefined, + {color: 'red'}, + ]); + // should we have the "delete moment" option? + if (momentTagId !== '') { + newButtons.push([ MomentDrawerOptions.RemoveTag, handleRemoveTag, undefined, {color: 'red'}, ]); - setDrawerButtons(localDrawerButtons); - } else if (momentTagId === '' && present !== -1) { - const filteredButtons = drawerButtons.filter( - (button) => button[0] !== MomentDrawerOptions.RemoveTag, - ); - setDrawerButtons(filteredButtons); } - }; - setupBottomDrawer(); - }, [momentTagId]); + } else { + newButtons.push([ + MomentDrawerOptions.DeleteMoment, + handleDeleteMoment, + undefined, + {color: 'red'}, + ]); + newButtons.push([MomentDrawerOptions.EditMoment, handleEditMoment]); + } + setDrawerButtons(newButtons); + }, [tags, momentTagId]); return ( <> -- cgit v1.2.3-70-g09d2