Merge pull request #449 from grusuTagg/tma883-Layered-Taggs

[TMA-883] Layered Tags

3 files changed, 35 insertions, 45 deletions

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index b2a8586a..d960f3b9 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -19,7 +19,7 @@ import {
 } from '../../components';
 import {TagFriendsFooter} from '../../components/moments';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
-import {ProfilePreviewType} from '../../types';
+import {MomentTagType} from '../../types';
 import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 
 type TagFriendsScreenRouteProps = RouteProp<
@@ -30,19 +30,17 @@ interface TagFriendsScreenProps {
   route: TagFriendsScreenRouteProps;
 }
 const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
-  const {image, selectedUsers} = route.params;
+  const {image, selectedTags} = route.params;
   const navigation = useNavigation();
   const imageRef = useRef(null);
-  const [taggedUsers, setTaggedUsers] = useState<ProfilePreviewType[]>([]);
+  const [tags, setTags] = useState<MomentTagType[]>([]);
 
   /*
    * Update list of tagged users from route params
    */
   useEffect(() => {
-    if (selectedUsers !== undefined) {
-      setTaggedUsers(selectedUsers);
-    }
-  }, [selectedUsers]);
+    setTags(selectedTags ? selectedTags : []);
+  }, [selectedTags]);
 
   /*
    * Navigate back to Tag Users Screen, send selected users
@@ -50,7 +48,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   const handleDone = () => {
     navigation.navigate('CaptionScreen', {
       ...route.params,
-      selectedUsers: taggedUsers,
+      selectedTags: tags,
     });
   };
 
@@ -79,7 +77,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
               title={'Tap on photo to Tag friends!'}
             />
             <TouchableWithoutFeedback
-              disabled={taggedUsers.length > 0}
+              disabled={tags.length > 0}
               onPress={() =>
                 navigation.navigate('TagSelectionScreen', {
                   selectedUsers: [],
@@ -92,26 +90,19 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
                 resizeMode={'cover'}
               />
             </TouchableWithoutFeedback>
-            {taggedUsers.length !== 0 && (
+            {tags.length !== 0 && (
               <MomentTags
+                tags={tags}
+                setTags={setTags}
                 editing={true}
-                tags={taggedUsers.map((user) => ({
-                  id: '',
-                  x: 0,
-                  y: 0,
-                  user,
-                }))}
                 imageRef={imageRef}
                 deleteFromList={(user) =>
-                  setTaggedUsers(taggedUsers.filter((u) => u.id !== user.id))
+                  setTags(tags.filter((tag) => tag.user.id !== user.id))
                 }
               />
             )}
             <View style={styles.footerContainer}>
-              <TagFriendsFooter
-                taggedUsers={taggedUsers}
-                setTaggedUsers={setTaggedUsers}
-              />
+              <TagFriendsFooter tags={tags} setTags={setTags} />
             </View>
           </View>
         </KeyboardAvoidingView>
diff --git a/src/screens/moments/TagSelectionScreen.tsx b/src/screens/moments/TagSelectionScreen.tsx
index a698a07b..3177b638 100644
--- a/src/screens/moments/TagSelectionScreen.tsx
+++ b/src/screens/moments/TagSelectionScreen.tsx
@@ -9,7 +9,7 @@ import {SearchBar, TaggUserSelectionCell} from '../../components';
 import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
 import {MainStackParams} from '../../routes';
 import {loadSearchResults} from '../../services';
-import {ProfilePreviewType} from '../../types';
+import {MomentTagType, ProfilePreviewType} from '../../types';
 import {
   isIPhoneX,
   loadTaggUserSuggestions,
@@ -30,9 +30,7 @@ interface TagSelectionScreenProps {
 const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
   const navigation = useNavigation();
   const [users, setUsers] = useState<ProfilePreviewType[]>([]);
-  const [selectedUsers, setSelectedUsers] = useState<ProfilePreviewType[]>(
-    route.params.selectedUsers,
-  );
+  const [tags, setTags] = useState<MomentTagType[]>(route.params.selectedTags);
   const [searching, setSearching] = useState(false);
   const [query, setQuery] = useState<string>('');
   const [label, setLabel] = useState<string>('Recent');
@@ -48,7 +46,7 @@ const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
           onPress={() => {
             navigation.navigate('TagFriendsScreen', {
               ...route.params,
-              selectedUsers: selectedUsers,
+              selectedTags: tags,
             });
           }}>
           <BackIcon
@@ -67,12 +65,12 @@ const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
    * that the loggedInUser might want to select
    */
   const loadUsers = async () => {
-    const data: ProfilePreviewType[] = await loadTaggUserSuggestions();
+    const data = await loadTaggUserSuggestions();
     const filteredData: ProfilePreviewType[] = data.filter((user) => {
-      const index = selectedUsers.findIndex((s) => s.id === user.id);
+      const index = tags.findIndex((tag) => tag.user.id === user.id);
       return index === -1;
     });
-    setUsers([...filteredData, ...selectedUsers]);
+    setUsers([...filteredData, ...tags.map((tag) => tag.user)]);
   };
 
   /*
@@ -83,7 +81,7 @@ const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
       const searchResults = await loadSearchResults(
         `${SEARCH_ENDPOINT_MESSAGES}?query=${query}`,
       );
-      setUsers(searchResults?.users);
+      setUsers(searchResults ? searchResults.users : []);
     } else {
       setUsers([]);
     }
@@ -130,8 +128,8 @@ const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
             <TaggUserSelectionCell
               key={item.item.id}
               item={item.item}
-              selectedUsers={selectedUsers}
-              setSelectedUsers={setSelectedUsers}
+              tags={tags}
+              setTags={setTags}
             />
           )}
         />
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 43665428..8bffd82b 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -29,7 +29,7 @@ import {
   updateProfileCompletionStage,
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
-import {ProfilePreviewType} from '../../types';
+import {MomentTagType} from '../../types';
 import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
@@ -47,26 +47,26 @@ interface CaptionScreenProps {
 }
 
 const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
-  const {title, image, screenType, selectedUsers} = route.params;
+  const {title, image, screenType, selectedTags} = route.params;
   const {
     user: {userId},
   } = useSelector((state: RootState) => state.user);
   const dispatch = useDispatch();
   const [caption, setCaption] = useState('');
   const [loading, setLoading] = useState(false);
-  const [taggedUsers, setTaggedUsers] = useState<ProfilePreviewType[]>([]);
+  const [tags, setTags] = useState<MomentTagType[]>([]);
   const [taggedList, setTaggedList] = useState<string>('');
 
   useEffect(() => {
-    setTaggedUsers(selectedUsers ? selectedUsers : []);
-  }, [route.params]);
+    setTags(selectedTags ? selectedTags : []);
+  }, [selectedTags]);
 
   useEffect(() => {
     const getTaggedUsersListString = () => {
       let listString = '';
-      for (let i = 0; i < taggedUsers.length; i++) {
+      for (let i = 0; i < tags.length; i++) {
         if (listString.length < 21) {
-          listString = listString.concat(`@${taggedUsers[i].username} `);
+          listString = listString.concat(`@${tags[i].user.username} `);
         } else {
           break;
         }
@@ -74,7 +74,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
       setTaggedList(listString);
     };
     getTaggedUsersListString();
-  }, [taggedUsers]);
+  }, [tags]);
 
   const navigateToProfile = () => {
     //Since the logged In User is navigating to own profile, useXId is not required
@@ -115,10 +115,11 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     }
     const momentTagResponse = await postMomentTags(
       momentResponse.moment_id,
-      taggedUsers.map((u, index) => ({
-        x: index * 50 - 150,
-        y: index * 50 - 150,
-        user_id: u.id,
+      tags.map((tag) => ({
+        x: Math.floor(tag.x),
+        y: Math.floor(tag.y),
+        z: Math.floor(tag.z),
+        user_id: tag.user.id,
       })),
     );
     if (!momentTagResponse) {
@@ -173,7 +174,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 navigation.navigate('TagFriendsScreen', {
                   image: image,
                   screenType: screenType,
-                  selectedUsers: taggedUsers,
+                  selectedTags: tags,
                 })
               }
               style={styles.tagFriendsContainer}>