From f25b4d4309bead2d9d5a5d9e8cc198d978deb875 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 25 May 2021 13:59:12 -0700 Subject: Pass remove() down, Add/remove removeTag btn --- src/components/profile/MomentMoreInfoDrawer.tsx | 105 ++++++++++++++++++++---- 1 file changed, 87 insertions(+), 18 deletions(-) (limited to 'src/components/profile') diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx index 77c349ca..1ac05fb0 100644 --- a/src/components/profile/MomentMoreInfoDrawer.tsx +++ b/src/components/profile/MomentMoreInfoDrawer.tsx @@ -1,20 +1,40 @@ -import React from 'react'; -import {Alert, StyleSheet, TouchableOpacity, ViewProps} from 'react-native'; +import React, {useEffect, useState} from 'react'; +import { + Alert, + GestureResponderEvent, + StyleSheet, + 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 {GenericMoreInfoDrawer} from '../common'; +enum MomentDrawerOptions { + DeleteMoment = 'Delete Moment', + ReportIssue = 'Report an Issue', + RemoveTag = 'Remove yourself from moment', +} interface MomentMoreInfoDrawerProps extends ViewProps { isOpen: boolean; setIsOpen: (visible: boolean) => void; momentId: string; isOwnProfile: boolean; + momentTagId: string; + removeTag: () => Promise; dismissScreenAndUpdate: () => void; } const MomentMoreInfoDrawer: React.FC = (props) => { - const {momentId, setIsOpen, isOwnProfile, dismissScreenAndUpdate} = props; + const { + momentId, + setIsOpen, + isOwnProfile, + dismissScreenAndUpdate, + momentTagId, + removeTag, + } = props; const handleDeleteMoment = async () => { setIsOpen(false); @@ -38,6 +58,27 @@ const MomentMoreInfoDrawer: React.FC = (props) => { }); }; + const handleRemoveTag = () => { + setIsOpen(false); + setTimeout(() => { + Alert.alert( + MomentDrawerOptions.RemoveTag, + 'Are you sure you want to be removed from this moment?', + [ + { + text: 'Remove', + onPress: removeTag, + }, + { + text: 'Cancel', + style: 'cancel', + }, + ], + {cancelable: false}, + ); + }, 500); + }; + const handleReportMoment = async () => { setIsOpen(false); setTimeout(() => { @@ -63,6 +104,43 @@ const MomentMoreInfoDrawer: React.FC = (props) => { }, 500); }; + const [drawerButtons, setDrawerButtons] = useState< + [string, (event: GestureResponderEvent) => void, JSX.Element?][] + >([ + isOwnProfile + ? [MomentDrawerOptions.DeleteMoment, handleDeleteMoment] + : [MomentDrawerOptions.ReportIssue, handleReportMoment], + ]); + + /* + * Update bottom drawer options to contain/not contain 'remove tag' option + */ + useEffect(() => { + const setupBottomDrawer = async () => { + const present = drawerButtons.findIndex( + (button) => button[0] === MomentDrawerOptions.RemoveTag, + ); + if (momentTagId !== '') { + if (present === -1) { + const localDrawerButtons = drawerButtons; + localDrawerButtons.push([ + MomentDrawerOptions.RemoveTag, + handleRemoveTag, + ]); + setDrawerButtons(localDrawerButtons); + } + } else { + if (present !== -1) { + const filteredButtons = drawerButtons.filter( + (button) => button[0] !== MomentDrawerOptions.RemoveTag, + ); + setDrawerButtons(filteredButtons); + } + } + }; + setupBottomDrawer(); + }, [momentTagId]); + return ( <> = (props) => { }}> - {isOwnProfile ? ( - - ) : ( - - )} + ); }; -- cgit v1.2.3-70-g09d2 From b0b5f7aefb58aad74c4f75d521c7416d393e43f4 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 25 May 2021 15:37:34 -0700 Subject: Fix lint error, Make function async --- src/components/moments/MomentPostHeader.tsx | 2 +- src/components/profile/MomentMoreInfoDrawer.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'src/components/profile') diff --git a/src/components/moments/MomentPostHeader.tsx b/src/components/moments/MomentPostHeader.tsx index ae9e96a0..dc6a3cd9 100644 --- a/src/components/moments/MomentPostHeader.tsx +++ b/src/components/moments/MomentPostHeader.tsx @@ -1,5 +1,5 @@ import {useNavigation} from '@react-navigation/native'; -import React, {useEffect, useState} from 'react'; +import React, {useState} from 'react'; import { StyleSheet, Text, diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx index 1ac05fb0..3f8707e8 100644 --- a/src/components/profile/MomentMoreInfoDrawer.tsx +++ b/src/components/profile/MomentMoreInfoDrawer.tsx @@ -58,7 +58,7 @@ const MomentMoreInfoDrawer: React.FC = (props) => { }); }; - const handleRemoveTag = () => { + const handleRemoveTag = async () => { setIsOpen(false); setTimeout(() => { Alert.alert( -- cgit v1.2.3-70-g09d2 From 67e809a85b625d13f1a0c5a8995d007bbcf4a37f Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 26 May 2021 14:56:40 -0700 Subject: Set id to '', Remove drawer btn after remove tag --- src/components/moments/MomentPost.tsx | 18 ++++++++++--- src/components/profile/MomentMoreInfoDrawer.tsx | 34 ++++++++++++------------- 2 files changed, 31 insertions(+), 21 deletions(-) (limited to 'src/components/profile') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 1ab7c1fa..e2875b9a 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -46,11 +46,17 @@ const MomentPost: React.FC = ({item, userXId, screenType}) => { * Check if loggedInUser has been tagged in the picture and set the id */ useEffect(() => { - tags.forEach((tag) => { - if (tag.user.id === loggedInUserId) { - setMomentTagId(tag.id); + const getMomentTagId = () => { + const ownTag: MomentTagType[] = tags.filter( + (tag) => tag.user.id === loggedInUserId, + ); + if (ownTag?.length > 0) { + setMomentTagId(ownTag[0].id); + } else { + setMomentTagId(''); } - }); + }; + getMomentTagId(); }, [tags]); /* @@ -64,6 +70,10 @@ const MomentPost: React.FC = ({item, userXId, screenType}) => { } }; + useEffect(() => { + console.log('Tags have been altered'); + }, [tags]); + return ( = (props) => { * Update bottom drawer options to contain/not contain 'remove tag' option */ useEffect(() => { - const setupBottomDrawer = async () => { + const setupBottomDrawer = () => { const present = drawerButtons.findIndex( (button) => button[0] === MomentDrawerOptions.RemoveTag, ); - if (momentTagId !== '') { - if (present === -1) { - const localDrawerButtons = drawerButtons; - localDrawerButtons.push([ - MomentDrawerOptions.RemoveTag, - handleRemoveTag, - ]); - setDrawerButtons(localDrawerButtons); - } - } else { - if (present !== -1) { - const filteredButtons = drawerButtons.filter( - (button) => button[0] !== MomentDrawerOptions.RemoveTag, - ); - setDrawerButtons(filteredButtons); - } + /* + * 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([ + MomentDrawerOptions.RemoveTag, + handleRemoveTag, + ]); + setDrawerButtons(localDrawerButtons); + } else if (momentTagId === '' && present !== -1) { + const filteredButtons = drawerButtons.filter( + (button) => button[0] !== MomentDrawerOptions.RemoveTag, + ); + setDrawerButtons(filteredButtons); } }; setupBottomDrawer(); -- cgit v1.2.3-70-g09d2