Merge branch 'master' into tma853-tag-selection-screen

# Conflicts:
#	src/components/common/index.ts
#	src/screens/profile/CaptionScreen.tsx

3 files changed, 23 insertions, 4 deletions

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 941fea3e..ba180921 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -1,6 +1,6 @@
 import {RouteProp} from '@react-navigation/core';
 import {useNavigation} from '@react-navigation/native';
-import React, {Fragment, useEffect, useState} from 'react';
+import React, {Fragment, useEffect, useRef, useState} from 'react';
 import {
   Image,
   Keyboard,
@@ -14,6 +14,7 @@ import {Button} from 'react-native-elements';
 import {MainStackParams} from 'src/routes';
 import {
   CaptionScreenHeader,
+  MomentTags,
   SearchBackground,
   TaggLoadingIndicator,
 } from '../../components';
@@ -32,7 +33,7 @@ interface TagFriendsScreenProps {
 const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   const {image, selectedUsers} = route.params;
   const navigation = useNavigation();
-  const [loading, setLoading] = useState(false);
+  const imageRef = useRef(null);
   const [taggedUsers, setTaggedUsers] = useState<ProfilePreviewType[]>([]);
 
   /*
@@ -54,7 +55,6 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
 
   return (
     <SearchBackground>
-      {loading ? <TaggLoadingIndicator fullscreen /> : <Fragment />}
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <KeyboardAvoidingView
           behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -78,10 +78,24 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
               title={'Tap on photo to Tag friends!'}
             />
             <Image
+              ref={imageRef}
               style={styles.image}
               source={{uri: image.path}}
               resizeMode={'cover'}
             />
+            <MomentTags
+              editing={true}
+              tags={taggedUsers.map((user) => ({
+                id: '',
+                x: 0,
+                y: 0,
+                user,
+              }))}
+              imageRef={imageRef}
+              deleteFromList={(user) =>
+                setTaggedUsers(taggedUsers.filter((u) => u.id !== user.id))
+              }
+            />
             <View style={{marginHorizontal: '5%', marginTop: '3%'}}>
               <TagFriendsFooter
                 taggedUsers={taggedUsers}
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index dbfb3a4a..2093a1f9 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -56,6 +56,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const [loading, setLoading] = useState(false);
   const [taggedUsers, setTaggedUsers] = useState<ProfilePreviewType[]>([]);
   const [taggedList, setTaggedList] = useState<string>('');
+
   useEffect(() => {
     setTaggedUsers(selectedUsers ? selectedUsers : []);
   }, [route.params]);
@@ -129,6 +130,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               />
             </View>
             <CaptionScreenHeader style={styles.header} {...{title: title}} />
+            {/* this is the image we want to center our tags' initial location within */}
             <Image
               style={styles.image}
               source={{uri: image.path}}
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index 515cbacf..4baca5b2 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -1,14 +1,17 @@
+import AsyncStorage from '@react-native-community/async-storage';
 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 {Alert, FlatList, StyleSheet, View} from 'react-native';
 import {useSelector} from 'react-redux';
 import {
   IndividualMomentTitleBar,
   MomentPostContent,
   MomentPostHeader,
 } from '../../components';
+import {MOMENT_TAGS_ENDPOINT} from '../../constants';
+import {ERROR_SOMETHING_WENT_WRONG_REFRESH} from '../../constants/strings';
 import {MainStackParams} from '../../routes';
 import {RootState} from '../../store/rootreducer';
 import {MomentType} from '../../types';